Move MDX compiler to csf-tools

addons/docs/jest-transform-mdx.js

@@ -3,7 +3,7 @@ const mdx = require('@mdx-js/mdx');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');
 
-const createCompiler = require('./mdx-compiler-plugin');
+const { createCompiler } = require('@storybook/csf-tools/mdx');
 
 const compilers = [createCompiler({})];
 

addons/docs/package.json

@@ -72,7 +72,7 @@
     "@storybook/core": "6.3.0-rc.2",
     "@storybook/core-events": "6.3.0-rc.2",
     "@storybook/csf": "0.0.1",
-    "@storybook/mdx": "6.3.0-rc.2",
+    "@storybook/csf-tools": "6.3.0-rc.2",
     "@storybook/node-logger": "6.3.0-rc.2",
     "@storybook/postinstall": "6.3.0-rc.2",
     "@storybook/source-loader": "6.3.0-rc.2",

addons/docs/src/frameworks/common/preset.ts

@@ -3,7 +3,7 @@ import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 
 // @ts-ignore
-import { createCompiler } from '../../mdx/mdx-compiler-plugin';
+import { createCompiler } from '@storybook/csf-tools/mdx';
 
 const resolvedBabelLoader = require.resolve('babel-loader', {
   paths: [require.resolve('@storybook/builder-webpack4')], // FIXME!!!

addons/docs/src/mdx/mdx-compiler-plugin.ts

@@ -1 +0,0 @@
-export { createCompiler } from '@storybook/mdx';

lib/csf-tools/README.md

@@ -1,11 +1,13 @@
 # Storybook CSF Tools
 
-A library to read, analyze, transform, and write CSF programmatically.
+An experimental library to read, analyze, transform, and write CSF programmatically.
 
 - Read - Parse a CSF file with Babel
 - Analyze - Extract its metadata & stories based on the Babel AST
 - Write - Write the AST back to a file
 
+It can can parse MDX into CSF.
+
 Coming soon:
 
 - Transform - Update the AST to add/remove/modify stories & metadata (TODO)

lib/csf-tools/mdx.d.ts

@@ -0,0 +1 @@
+export * from './dist/ts3.9/mdx/index.d';

lib/csf-tools/mdx.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/mdx');

lib/csf-tools/package.json

@@ -42,16 +42,23 @@
   "dependencies": {
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",
+    "@babel/plugin-transform-react-jsx": "^7.12.12",
+    "@babel/preset-env": "^7.12.11",
     "@babel/traverse": "^7.12.11",
     "@babel/types": "^7.12.11",
+    "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf": "^0.0.1",
     "core-js": "^3.8.2",
     "fs-extra": "^9.0.1",
+    "js-string-escape": "^1.0.1",
+    "lodash": "^4.17.20",
+    "prettier": "~2.2.1",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.6",
-    "js-yaml": "^3.14.1"
+    "js-yaml": "^3.14.1",
+    "ts-dedent": "^2.0.0"
   },
   "publishConfig": {
     "access": "public"

lib/csf-tools/src/mdx/sb-mdx-plugin.test.ts

@@ -3,12 +3,12 @@ import dedent from 'ts-dedent';
 import path from 'path';
 import mdx from '@mdx-js/mdx';
 import prettier from 'prettier';
-import plugin from './sb-mdx-plugin';
+import { createCompiler } from './sb-mdx-plugin';
 
 function generate(content) {
   const code = mdx.sync(content, {
     // filepath: filePath,
-    compilers: [plugin({})],
+    compilers: [createCompiler({})],
   });
 
   return prettier.format(code, {
@@ -21,17 +21,10 @@ function generate(content) {
   });
 }
 
-const fixturesDir = path.join(__dirname, '..', '__testfixtures__');
-
-const snapshot = (fixturePrefix) => async () => {
-  const pathPrefix = path.join(fixturesDir, fixturePrefix);
-  const code = await generate(`${pathPrefix}.mdx`);
-  expect(code).toMatchSpecificSnapshot(`${pathPrefix}.output.snapshot`);
-};
+const fixturesDir = path.join(__dirname, '..', '..', '__testfixtures__');
 
 const snap = (prefix) => path.join(fixturesDir, `${prefix}.output.snapshot`);
 
-const inputRegExp = /\.mdx$/;
 describe('docs-mdx-compiler-plugin', () => {
   it('component-args.mdx', () => {
     expect(

lib/mdx/README.md

@@ -1,3 +0,0 @@
-# Storybook MDX
-
-Storybook MDX is an internal utility package to parse MDX files and compile them into Storybook's Component Story Format. For more information, see [Storybook Docs](https://storybook.js.org/docs/react/writing-docs/introduction) documentation.

lib/mdx/package.json

@@ -1,65 +0,0 @@
-{
-  "name": "@storybook/mdx",
-  "version": "6.3.0-rc.2",
-  "description": "Storybook MDX utilities",
-  "keywords": [
-    "mdx",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "lib/mdex"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts3.9/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!__testfixtures__"
-  ],
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/types": "^7.12.11",
-    "@mdx-js/mdx": "^1.6.22",
-    "js-string-escape": "^1.0.1",
-    "lodash": "^4.17.20",
-    "prettier": "~2.2.1",
-    "regenerator-runtime": "^0.13.7",
-    "ts-dedent": "^2.0.0"
-  },
-  "devDependencies": {
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "0aaad2c19224858494bca5e712b3029cd66a2f6c",
-  "sbmodern": "dist/modern/index.js"
-}

lib/mdx/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src"
-  },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
-}

nx.json

@@ -76,9 +76,6 @@
     "@storybook/preact": {
       "implicitDependencies": []
     },
-    "@storybook/mdx": {
-      "implicitDependencies": []
-    },
     "@storybook/react": {
       "implicitDependencies": []
     },

package.json

@@ -157,7 +157,6 @@
     "@storybook/eslint-config-storybook": "^2.4.0",
     "@storybook/html": "workspace:*",
     "@storybook/linter-config": "^2.5.0",
-    "@storybook/mdx": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/postinstall": "workspace:*",
     "@storybook/preact": "workspace:*",

workspace.json

@@ -73,10 +73,6 @@
       "root": "lib/manager-webpack5",
       "type": "library"
     },
-    "@storybook/mdx": {
-      "root": "lib/mdx",
-      "type": "library"
-    },
     "@storybook/preact": {
       "root": "app/preact",
       "type": "library"

yarn.lock

@@ -5670,7 +5670,7 @@ __metadata:
     "@storybook/core": 6.3.0-rc.2
     "@storybook/core-events": 6.3.0-rc.2
     "@storybook/csf": 0.0.1
-    "@storybook/mdx": 6.3.0-rc.2
+    "@storybook/csf-tools": 6.3.0-rc.2
     "@storybook/node-logger": 6.3.0-rc.2
     "@storybook/postinstall": 6.3.0-rc.2
     "@storybook/react": 6.3.0-rc.2
@@ -6745,14 +6745,21 @@ __metadata:
   dependencies:
     "@babel/generator": ^7.12.11
     "@babel/parser": ^7.12.11
+    "@babel/plugin-transform-react-jsx": ^7.12.12
+    "@babel/preset-env": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
+    "@mdx-js/mdx": ^1.6.22
     "@storybook/csf": ^0.0.1
     "@types/fs-extra": ^9.0.6
     core-js: ^3.8.2
     fs-extra: ^9.0.1
+    js-string-escape: ^1.0.1
     js-yaml: ^3.14.1
+    lodash: ^4.17.20
+    prettier: ~2.2.1
     regenerator-runtime: ^0.13.7
+    ts-dedent: ^2.0.0
   languageName: unknown
   linkType: soft
 
@@ -7032,26 +7039,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/mdx@6.3.0-rc.2, @storybook/mdx@workspace:*, @storybook/mdx@workspace:lib/mdx":
-  version: 0.0.0-use.local
-  resolution: "@storybook/mdx@workspace:lib/mdx"
-  dependencies:
-    "@babel/generator": ^7.12.11
-    "@babel/parser": ^7.12.11
-    "@babel/plugin-transform-react-jsx": ^7.12.12
-    "@babel/preset-env": ^7.12.11
-    "@babel/types": ^7.12.11
-    "@mdx-js/mdx": ^1.6.22
-    jest: ^26.6.3
-    jest-specific-snapshot: ^4.0.0
-    js-string-escape: ^1.0.1
-    lodash: ^4.17.20
-    prettier: ~2.2.1
-    regenerator-runtime: ^0.13.7
-    ts-dedent: ^2.0.0
-  languageName: unknown
-  linkType: soft
-
 "@storybook/node-logger@6.3.0-rc.2, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/node-logger@workspace:lib/node-logger"
@@ -7253,7 +7240,6 @@ __metadata:
     "@storybook/eslint-config-storybook": ^2.4.0
     "@storybook/html": "workspace:*"
     "@storybook/linter-config": ^2.5.0
-    "@storybook/mdx": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/postinstall": "workspace:*"
     "@storybook/preact": "workspace:*"