Update to 7.0 / mdx2-csf structure

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/release.yml

@@ -12,10 +12,10 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
@@ -25,4 +25,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
+          yarn release

.github/workflows/test.yml

@@ -8,19 +8,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
-      - name: Run lint
-        run: |
-          yarn lint
-
       - name: Run tests
         run: |
           yarn test
-

.storybook/main.js

@@ -1,12 +1,7 @@
-const { createCompiler } = require('../dist/cjs');
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
-  framework: '@storybook/react',
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react-webpack5',
   webpackFinal: async (config) => {
     const rules = (config.module.rules || []).filter(
       (rule) => !rule.test?.toString().endsWith('\\.mdx$/')
@@ -26,6 +21,9 @@ module.exports = {
         },
         {
           loader: require.resolve('../loader'),
+          options: {
+            mdxCompileOptions: {},
+          },
         },
       ],
     });

.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "deepscan.enable": true
+}

babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+};

jest.config.js

@@ -1,3 +1,10 @@
 module.exports = {
   testMatch: ['**/*.test.ts'],
+  // transform everything including node_modules
+  transformIgnorePatterns: [],
+  // deal with missing main fields
+  moduleNameMapper: {
+    'estree-walker': 'estree-walker/src',
+    'is-reference': 'is-reference/src',
+  },
 };

loader.js

@@ -1,10 +1,18 @@
-const { getOptions } = require('loader-utils');
-const mdx = require('@mdx-js/mdx');
-const { createCompiler } = require('./dist/cjs');
+const { dirname } = require('path');
+const { compile } = require('./dist/index');
 
+// FIXME: we shouldn't be doing this, but we need it
+// for react MDX story definitions, e.g.
+//
+// <Story name="foo"><div>hi></div></Story>
+//
+// Which generates the code:
+//
+// export const foo = () => <div>hi</div>;
+const mdxReactPackage = dirname(require.resolve('@mdx-js/react/package.json'));
 const DEFAULT_RENDERER = `
-import React from 'react'
-import { mdx } from '@mdx-js/react'
+import React from 'react';
+import { mdx } from '${mdxReactPackage}';
 `;
 
 // Lifted from MDXv1 loader
@@ -15,26 +23,19 @@ import { mdx } from '@mdx-js/react'
 // - MDX compiler built in
 const loader = async function (content) {
   const callback = this.async();
-  // this.getOptions() is webpack5 only
-  const queryOptions = this.getOptions ? this.getOptions() : getOptions(this);
-  const options = Object.assign({}, queryOptions, {
+  const options = Object.assign({}, this.getOptions(), {
     filepath: this.resourcePath,
   });
-  if (!options.skipCsf) {
-    options.compilers = [createCompiler(options), ...(options.compilers || [])];
-  }
 
   let result;
-
   try {
-    result = await mdx(content, options);
+    result = await compile(content, options);
   } catch (err) {
+    console.error('Error loading:', this.resourcePath);
     return callback(err);
   }
 
-  const { renderer = DEFAULT_RENDERER } = options;
-
-  const code = `${renderer}\n${result}`;
+  const code = `${DEFAULT_RENDERER}\n${result}`;
   return callback(null, code);
 };
 

package.json

@@ -4,100 +4,83 @@
   "description": "MDXv1 to CSF webpack compiler and loader",
   "repository": {
     "type": "git",
-    "url": "https://github.com/storybookjs/csf-mdx1"
+    "url": "https://github.com/storybookjs/csf-mdx2"
   },
   "author": "Michael Shilman <[email protected]>",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "clean": "rimraf ./dist",
-    "buildBabel": "IGNORE_FILES=true concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
-    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
-    "prebuild": "yarn clean",
-    "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
-    "build:watch": "concurrently \"yarn buildBabel:cjs -- --watch\" \"yarn buildTsc -- --watch\"",
     "test": "jest",
-    "start": "yarn \"build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
-    "release": "yarn build && auto shipit",
-    "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.html,.ts,.tsx,.mjs",
+    "build": "tsup",
+    "start": "yarn build && yarn storybook -- --quiet\"",
+    "release": "STORYBOOK_DISABLE_TELEMETRY=1 yarn build && auto shipit",
+    "storybook": "STORYBOOK_DISABLE_TELEMETRY=1 STORYBOOK_ENABLE_CRASH_REPORTS=false storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "prettier": "prettier",
-    "prepare": "husky install",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/types": "^7.12.11",
     "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
-    "@types/lodash": "^4.14.167",
-    "js-string-escape": "^1.0.1",
-    "loader-utils": "^2.0.4",
-    "lodash": "^4.17.21",
-    "prettier": ">=2.2.1 <=2.3.0",
-    "ts-dedent": "^2.0.0"
+    "@mdx-js/react": "^1.6.22"
   },
   "devDependencies": {
-    "@auto-it/released": "^10.32.6",
-    "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
+    "@babel/generator": "^7.12.11",
+    "@babel/parser": "^7.12.11",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.13.0",
-    "@babel/template": "^7.14.5",
+    "@babel/types": "^7.14.8",
     "@jest/types": "^27.0.6",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.9",
+    "@storybook/addon-actions": "next",
+    "@storybook/addon-essentials": "next",
+    "@storybook/addon-interactions": "next",
+    "@storybook/addon-links": "next",
+    "@storybook/react": "next",
+    "@storybook/react-webpack5": "next",
+    "@storybook/testing-library": "next",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.3",
     "@types/js-string-escape": "^1.0.1",
+    "@types/lodash": "^4.14.167",
     "@types/node": "^16.4.1",
     "auto": "^10.3.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.1.0",
     "concurrently": "^7.0.0",
-    "eslint": "^7.32.0",
     "husky": ">=6",
     "jest": "^27.0.6",
     "jest-environment-jsdom": "^27.0.6",
+    "js-string-escape": "^1.0.1",
     "lint-staged": ">=10",
-    "prompts": "^2.4.2",
+    "lodash": "^4.17.21",
+    "prettier": "^2.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
+    "storybook": "next",
     "ts-dedent": "^2.2.0",
     "ts-jest": "^27.0.4",
+    "tsup": "^6.2.2",
     "typescript": "^4.2.4"
   },
+  "resolutions": {
+    "@types/estree": "1.0.0"
+  },
   "lint-staged": {
     "*.{ts,js,css,md}": "prettier --write"
   },
-  "auto": {
-    "plugins": [
-      "npm",
-      "released"
-    ]
-  },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/index.ts

@@ -1,10 +1,17 @@
 import mdx from '@mdx-js/mdx';
 import { createCompiler, MdxOptions } from './sb-mdx-plugin';
 
-export const compile = async (code: string, options?: MdxOptions) =>
-  mdx(code, { compilers: options?.skipCsf ? [] : [createCompiler(options)] });
+import type { CompileOptions, MdxCompileOptions, JSXOptions } from './types';
+import { transformJSXAsync, transformJSXSync } from './jsx';
 
-export const compileSync = (code: string, options?: MdxOptions) =>
-  mdx.sync(code, { compilers: options?.skipCsf ? [] : [createCompiler(options)] });
+export type { CompileOptions, MdxCompileOptions, JSXOptions };
 
-export * from './sb-mdx-plugin';
+export const compile = async (code: string, options?: MdxOptions) => {
+  const result = await mdx(code, { compilers: options?.skipCsf ? [] : [createCompiler(options)] });
+  return transformJSXAsync(result, options?.jsxOptions);
+};
+
+export const compileSync = (code: string, options?: MdxOptions) => {
+  const result = mdx.sync(code, { compilers: options?.skipCsf ? [] : [createCompiler(options)] });
+  return transformJSXSync(result, options?.jsxOptions);
+};