Merge pull request #13 from storybookjs/yann/upgrade-mdx

Upgrade mdx to v3

.github/workflows/release.yml

@@ -7,16 +7,19 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 

.github/workflows/test.yml

@@ -6,12 +6,15 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
+
+      - name: Enable Corepack
+        run: corepack enable
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.gitignore

@@ -5,4 +5,11 @@ build-storybook.log
 .DS_Store
 .env
 .cache
-yarn-error.log
+yarn-error.log
+
+/**/.yarn/*
+!/**/.yarn/releases
+!/**/.yarn/plugins
+!/**/.yarn/sdks
+!/**/.yarn/versions
+/**/.pnp.*

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -26,44 +26,38 @@
     "release": "yarn build && auto shipit",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
     "storybook": "start-storybook -p 6006",
-    "test": "jest"
+    "test": "vitest run",
+    "test:watch": "vitest dev"
   },
   "lint-staged": {
     "*.{ts,js,css,md}": "prettier --write"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/parser": "^7.12.11",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/traverse": "^7.12.11",
-    "@babel/types": "^7.14.8",
-    "@jest/types": "^27.0.6",
-    "@mdx-js/mdx": "^2.0.0",
-    "@types/jest": "^27.0.3",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^16.4.1",
-    "auto": "^10.3.0",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-add-import-extension": "^1.6.0",
-    "concurrently": "^7.0.0",
-    "estree-to-babel": "^4.9.0",
-    "hast-util-to-estree": "^2.0.2",
+    "@babel/core": "^7.23.6",
+    "@babel/parser": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/traverse": "^7.23.6",
+    "@babel/types": "^7.23.6",
+    "@mdx-js/mdx": "^3.0.0",
+    "@types/babel__traverse": "^7.20.4",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^18.0.0",
+    "auto": "^11.0.4",
+    "concurrently": "^8.2.2",
+    "estree-to-babel": "^9.0.0",
+    "hast-util-to-estree": "^3.1.0",
     "husky": ">=6",
-    "jest": "^27.0.6",
-    "jest-environment-jsdom": "^27.0.6",
     "lint-staged": ">=10",
     "lodash": "^4.17.21",
-    "prettier": "^2.3.1",
-    "rimraf": "^3.0.2",
+    "prettier": "^3.1.1",
     "ts-dedent": "^2.2.0",
-    "ts-jest": "^27.0.4",
-    "tsup": "^6.2.2",
-    "typescript": "^4.2.4"
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.1.0"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "packageManager": "yarn@4.0.2"
 }

src/analyze.test.ts

@@ -1,5 +1,6 @@
+import { describe, it, expect } from 'vitest';
 import { dedent } from 'ts-dedent';
-import { analyze, extractImports } from './analyze';
+import { extractImports, analyze } from './analyze';
 
 import { parse } from '@babel/parser';
 
@@ -15,7 +16,7 @@ describe('extractImports', () => {
       import * as ButtonStories from './Button.stories';
     `);
     expect(extractImports(ast)).toMatchInlineSnapshot(`
-      Object {
+      {
         "ButtonStories": "./Button.stories",
         "Meta": "@storybook/blocks",
       }
@@ -29,7 +30,7 @@ describe('extractImports', () => {
       import * as ButtonStories from './Button.stories';
     `);
     expect(extractImports(ast)).toMatchInlineSnapshot(`
-      Object {
+      {
         "ButtonStories": "./Button.stories",
         "Meta": "@storybook/blocks",
       }
@@ -46,8 +47,8 @@ describe('analyze', () => {
         <Meta title="foobar" />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [],
+        {
+          "imports": [],
           "isTemplate": false,
           "name": undefined,
           "of": undefined,
@@ -63,7 +64,7 @@ describe('analyze', () => {
         <Meta title={\`foobar\`} />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Expected string literal title, received JSXExpressionContainer"`
+        `[Error: Expected string literal title, received JSXExpressionContainer]`
       );
     });
   });
@@ -76,14 +77,14 @@ describe('analyze', () => {
         <Meta name="foobar" />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-Object {
-  "imports": Array [],
-  "isTemplate": false,
-  "name": "foobar",
-  "of": undefined,
-  "title": undefined,
-}
-`);
+        {
+          "imports": [],
+          "isTemplate": false,
+          "name": "foobar",
+          "of": undefined,
+          "title": undefined,
+        }
+      `);
     });
     it('template literal name', () => {
       const input = dedent`
@@ -92,7 +93,7 @@ Object {
         <Meta name={\`foobar\`} />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Expected string literal name, received JSXExpressionContainer"`
+        `[Error: Expected string literal name, received JSXExpressionContainer]`
       );
     });
   });
@@ -106,8 +107,8 @@ Object {
         <Meta of={ButtonStories} />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [
+        {
+          "imports": [
             "@storybook/blocks",
             "./Button.stories",
           ],
@@ -122,7 +123,9 @@ Object {
       const input = dedent`
         <Meta of={meta} />
       `;
-      expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(`"Unknown identifier meta"`);
+      expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
+        `[Error: Unknown identifier meta]`
+      );
     });
     it('string literal', () => {
       const input = dedent`
@@ -131,7 +134,7 @@ Object {
         <Meta of="foobar" />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Expected JSX expression, received StringLiteral"`
+        `[Error: Expected JSX expression, received StringLiteral]`
       );
     });
     it('multiple import blocks', () => {
@@ -143,8 +146,8 @@ Object {
         <Meta of={ButtonStories} />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [
+        {
+          "imports": [
             "@storybook/blocks",
             "./Button.stories",
           ],
@@ -171,8 +174,8 @@ Object {
         hello docs
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [
+        {
+          "imports": [
             "../src/A.stories",
           ],
           "isTemplate": false,
@@ -201,8 +204,8 @@ Object {
         <Meta isTemplate />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [],
+        {
+          "imports": [],
           "isTemplate": true,
           "name": undefined,
           "of": undefined,
@@ -219,8 +222,8 @@ Object {
         <Meta isTemplate={true} />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [],
+        {
+          "imports": [],
           "isTemplate": true,
           "name": undefined,
           "of": undefined,
@@ -234,8 +237,8 @@ Object {
         <Meta isTemplate={false} />
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [],
+        {
+          "imports": [],
           "isTemplate": false,
           "name": undefined,
           "of": undefined,
@@ -249,7 +252,7 @@ Object {
         <Meta isTemplate="foo" />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Expected JSX expression isTemplate, received StringLiteral"`
+        `[Error: Expected JSX expression isTemplate, received StringLiteral]`
       );
     });
 
@@ -258,7 +261,7 @@ Object {
         <Meta isTemplate={1} />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Expected boolean isTemplate, received NumericLiteral"`
+        `[Error: Expected boolean isTemplate, received NumericLiteral]`
       );
     });
   });
@@ -269,8 +272,8 @@ Object {
       # hello
     `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [],
+        {
+          "imports": [],
           "isTemplate": false,
           "name": undefined,
           "of": undefined,
@@ -285,8 +288,8 @@ Object {
         <Meta of={meta} />/>
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [
+        {
+          "imports": [
             "./Button.stories",
           ],
           "isTemplate": false,
@@ -304,7 +307,7 @@ Object {
         <Meta title="bz" />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Meta can only be declared once"`
+        `[Error: Meta can only be declared once]`
       );
     });
 
@@ -317,7 +320,7 @@ Object {
         <Meta of={ButtonStories} />
       `;
       expect(() => analyze(input)).toThrowErrorMatchingInlineSnapshot(
-        `"Meta can only be declared once"`
+        `[Error: Meta can only be declared once]`
       );
     });
     it('MDX comments', () => {
@@ -329,8 +332,8 @@ Object {
         {/* whatever */}
       `;
       expect(analyze(input)).toMatchInlineSnapshot(`
-        Object {
-          "imports": Array [
+        {
+          "imports": [
             "./Button.stories",
           ],
           "isTemplate": false,

tsconfig.json

@@ -14,7 +14,7 @@
     "rootDir": "./src",
     "skipLibCheck": true,
     "target": "ES2020",
-    "types": ["jest", "node"],
+    "types": ["node"],
     "moduleResolution": "node"
   },
   "include": [