@storybook/addon-docs 6.5.0-alpha.41 → 6.5.0-alpha.44

package/dist/cjs/frameworks/common/preset.js

@@ -49,7 +49,7 @@ var _remarkSlug = _interopRequireDefault(require("remark-slug"));
 
 var _remarkExternalLinks = _interopRequireDefault(require("remark-external-links"));
 
-var _mdx = require("@storybook/csf-tools/mdx");
+var _global = _interopRequireDefault(require("global"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -69,6 +69,11 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+var _console = console,
+    log = _console.log; // for frameworks that are not working with react, we need to configure
+// the jsx to transpile mdx, for now there will be a flag for that
+// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
+
 function createBabelOptions(_ref) {
   var babelOptions = _ref.babelOptions,
       mdxBabelOptions = _ref.mdxBabelOptions,
@@ -94,6 +99,8 @@ function webpack() {
 
 function _webpack() {
   _webpack = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _global$FEATURES, _global$FEATURES2;
+
     var webpackConfig,
         options,
         _yield$options$preset,
@@ -112,6 +119,8 @@ function _webpack() {
         _options$transcludeMa,
         transcludeMarkdown,
         mdxLoaderOptions,
+        mdxVersion,
+        mdxLoader,
         sourceLoader,
         rules,
         result,
@@ -132,7 +141,7 @@ function _webpack() {
             builder = _yield$options$preset2 === void 0 ? 'webpack4' : _yield$options$preset2;
             builderName = typeof builder === 'string' ? builder : builder.name;
             resolvedBabelLoader = require.resolve('babel-loader', {
-              paths: builderName.match(/(webpack4|webpack5)/) ? [require.resolve("@storybook/builder-".concat(builder))] : [builderName]
+              paths: builderName.match(/^webpack(4|5)$/) ? [require.resolve("@storybook/builder-".concat(builderName))] : [builderName]
             });
             _webpackConfig$module = webpackConfig.module, module = _webpackConfig$module === void 0 ? {} : _webpackConfig$module; // it will reuse babel options that are already in use in storybook
             // also, these babel options are chained with other presets.
@@ -141,8 +150,12 @@ function _webpack() {
               injectStoryParameters: true
             } : _options$sourceLoader, _options$transcludeMa = options.transcludeMarkdown, transcludeMarkdown = _options$transcludeMa === void 0 ? false : _options$transcludeMa;
             mdxLoaderOptions = {
+              skipCsf: true,
               remarkPlugins: [_remarkSlug.default, _remarkExternalLinks.default]
-            }; // set `sourceLoaderOptions` to `null` to disable for manual configuration
+            };
+            mdxVersion = (_global$FEATURES = _global.default.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.previewMdx2 ? 'MDX2' : 'MDX1';
+            log("Addon-docs: using ".concat(mdxVersion));
+            mdxLoader = (_global$FEATURES2 = _global.default.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
 
             sourceLoader = sourceLoaderOptions ? [{
               test: /\.(stories|story)\.[tj]sx?$/,
@@ -169,7 +182,7 @@ function _webpack() {
                     configureJSX: configureJSX
                   })
                 }, {
-                  loader: require.resolve('@mdx-js/loader'),
+                  loader: mdxLoader,
                   options: mdxLoaderOptions
                 }]
               }]);
@@ -198,10 +211,7 @@ function _webpack() {
                       configureJSX: configureJSX
                     })
                   }, {
-                    loader: require.resolve('@mdx-js/loader'),
-                    options: Object.assign({
-                      compilers: [(0, _mdx.createCompiler)(options)]
-                    }, mdxLoaderOptions)
+                    loader: mdxLoader
                   }]
                 }, {
                   test: /\.mdx$/,
@@ -214,7 +224,7 @@ function _webpack() {
                       configureJSX: configureJSX
                     })
                   }, {
-                    loader: require.resolve('@mdx-js/loader'),
+                    loader: mdxLoader,
                     options: mdxLoaderOptions
                   }]
                 }], sourceLoader)
@@ -222,7 +232,7 @@ function _webpack() {
             });
             return _context.abrupt("return", result);
 
-          case 17:
+          case 20:
           case "end":
             return _context.stop();
         }

package/dist/esm/frameworks/common/preset.js

@@ -37,9 +37,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 import path from 'path';
 import remarkSlug from 'remark-slug';
-import remarkExternalLinks from 'remark-external-links'; // @ts-ignore
-
-import { createCompiler } from '@storybook/csf-tools/mdx';
+import remarkExternalLinks from 'remark-external-links';
+import global from 'global';
+var _console = console,
+    log = _console.log; // for frameworks that are not working with react, we need to configure
+// the jsx to transpile mdx, for now there will be a flag for that
+// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
 
 function createBabelOptions(_ref) {
   var babelOptions = _ref.babelOptions,
@@ -66,6 +69,8 @@ export function webpack() {
 
 function _webpack() {
   _webpack = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _global$FEATURES, _global$FEATURES2;
+
     var webpackConfig,
         options,
         _yield$options$preset,
@@ -84,6 +89,8 @@ function _webpack() {
         _options$transcludeMa,
         transcludeMarkdown,
         mdxLoaderOptions,
+        mdxVersion,
+        mdxLoader,
         sourceLoader,
         rules,
         result,
@@ -104,7 +111,7 @@ function _webpack() {
             builder = _yield$options$preset2 === void 0 ? 'webpack4' : _yield$options$preset2;
             builderName = typeof builder === 'string' ? builder : builder.name;
             resolvedBabelLoader = require.resolve('babel-loader', {
-              paths: builderName.match(/(webpack4|webpack5)/) ? [require.resolve("@storybook/builder-".concat(builder))] : [builderName]
+              paths: builderName.match(/^webpack(4|5)$/) ? [require.resolve("@storybook/builder-".concat(builderName))] : [builderName]
             });
             _webpackConfig$module = webpackConfig.module, module = _webpackConfig$module === void 0 ? {} : _webpackConfig$module; // it will reuse babel options that are already in use in storybook
             // also, these babel options are chained with other presets.
@@ -113,8 +120,12 @@ function _webpack() {
               injectStoryParameters: true
             } : _options$sourceLoader, _options$transcludeMa = options.transcludeMarkdown, transcludeMarkdown = _options$transcludeMa === void 0 ? false : _options$transcludeMa;
             mdxLoaderOptions = {
+              skipCsf: true,
               remarkPlugins: [remarkSlug, remarkExternalLinks]
-            }; // set `sourceLoaderOptions` to `null` to disable for manual configuration
+            };
+            mdxVersion = (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.previewMdx2 ? 'MDX2' : 'MDX1';
+            log("Addon-docs: using ".concat(mdxVersion));
+            mdxLoader = (_global$FEATURES2 = global.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
 
             sourceLoader = sourceLoaderOptions ? [{
               test: /\.(stories|story)\.[tj]sx?$/,
@@ -141,7 +152,7 @@ function _webpack() {
                     configureJSX: configureJSX
                   })
                 }, {
-                  loader: require.resolve('@mdx-js/loader'),
+                  loader: mdxLoader,
                   options: mdxLoaderOptions
                 }]
               }]);
@@ -170,10 +181,7 @@ function _webpack() {
                       configureJSX: configureJSX
                     })
                   }, {
-                    loader: require.resolve('@mdx-js/loader'),
-                    options: Object.assign({
-                      compilers: [createCompiler(options)]
-                    }, mdxLoaderOptions)
+                    loader: mdxLoader
                   }]
                 }, {
                   test: /\.mdx$/,
@@ -186,7 +194,7 @@ function _webpack() {
                       configureJSX: configureJSX
                     })
                   }, {
-                    loader: require.resolve('@mdx-js/loader'),
+                    loader: mdxLoader,
                     options: mdxLoaderOptions
                   }]
                 }], sourceLoader)
@@ -194,7 +202,7 @@ function _webpack() {
             });
             return _context.abrupt("return", result);
 
-          case 17:
+          case 20:
           case "end":
             return _context.stop();
         }

package/dist/modern/frameworks/common/preset.js

@@ -1,8 +1,12 @@
 import path from 'path';
 import remarkSlug from 'remark-slug';
-import remarkExternalLinks from 'remark-external-links'; // @ts-ignore
-
-import { createCompiler } from '@storybook/csf-tools/mdx';
+import remarkExternalLinks from 'remark-external-links';
+import global from 'global';
+const {
+  log
+} = console; // for frameworks that are not working with react, we need to configure
+// the jsx to transpile mdx, for now there will be a flag for that
+// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
 
 function createBabelOptions({
   babelOptions,
@@ -25,13 +29,15 @@ function createBabelOptions({
 }
 
 export async function webpack(webpackConfig = {}, options) {
+  var _global$FEATURES, _global$FEATURES2;
+
   const {
     builder = 'webpack4'
   } = await options.presets.apply('core', {});
   const builderName = typeof builder === 'string' ? builder : builder.name;
 
   const resolvedBabelLoader = require.resolve('babel-loader', {
-    paths: builderName.match(/(webpack4|webpack5)/) ? [require.resolve(`@storybook/builder-${builder}`)] : [builderName]
+    paths: builderName.match(/^webpack(4|5)$/) ? [require.resolve(`@storybook/builder-${builderName}`)] : [builderName]
   });
 
   const {
@@ -49,8 +55,12 @@ export async function webpack(webpackConfig = {}, options) {
     transcludeMarkdown = false
   } = options;
   const mdxLoaderOptions = {
+    skipCsf: true,
     remarkPlugins: [remarkSlug, remarkExternalLinks]
-  }; // set `sourceLoaderOptions` to `null` to disable for manual configuration
+  };
+  const mdxVersion = (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.previewMdx2 ? 'MDX2' : 'MDX1';
+  log(`Addon-docs: using ${mdxVersion}`);
+  const mdxLoader = (_global$FEATURES2 = global.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
 
   const sourceLoader = sourceLoaderOptions ? [{
     test: /\.(stories|story)\.[tj]sx?$/,
@@ -77,7 +87,7 @@ export async function webpack(webpackConfig = {}, options) {
           configureJSX
         })
       }, {
-        loader: require.resolve('@mdx-js/loader'),
+        loader: mdxLoader,
         options: mdxLoaderOptions
       }]
     }];
@@ -106,10 +116,7 @@ export async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: require.resolve('@mdx-js/loader'),
-          options: Object.assign({
-            compilers: [createCompiler(options)]
-          }, mdxLoaderOptions)
+          loader: mdxLoader
         }]
       }, {
         test: /\.mdx$/,
@@ -122,7 +129,7 @@ export async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: require.resolve('@mdx-js/loader'),
+          loader: mdxLoader,
           options: mdxLoaderOptions
         }]
       }, ...sourceLoader]

package/dist/ts3.4/frameworks/common/preset.d.ts

@@ -1,4 +1,3 @@
-import { createCompiler } from '@storybook/csf-tools/mdx';
 import { Options } from '@storybook/core-common';
 declare type BabelParams = {
     babelOptions?: any;
@@ -8,5 +7,5 @@ declare type BabelParams = {
 export declare function webpack(webpackConfig: any, options: Options & BabelParams & {
     sourceLoaderOptions: any;
     transcludeMarkdown: boolean;
-} & Parameters<typeof createCompiler>[0]): Promise<any>;
+}): Promise<any>;
 export {};

package/dist/ts3.9/frameworks/common/preset.d.ts

@@ -1,4 +1,3 @@
-import { createCompiler } from '@storybook/csf-tools/mdx';
 import type { Options } from '@storybook/core-common';
 declare type BabelParams = {
     babelOptions?: any;
@@ -8,5 +7,5 @@ declare type BabelParams = {
 export declare function webpack(webpackConfig: any, options: Options & BabelParams & {
     sourceLoaderOptions: any;
     transcludeMarkdown: boolean;
-} & Parameters<typeof createCompiler>[0]): Promise<any>;
+}): Promise<any>;
 export {};

package/jest-transform-mdx.js

@@ -1,11 +1,8 @@
 const path = require('path');
-const mdx = require('@mdx-js/mdx');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');
 
-const { createCompiler } = require('@storybook/csf-tools/mdx');
-
-const compilers = [createCompiler({})];
+const { compileSync } = require('@storybook/mdx1-csf');
 
 module.exports = {
   process(src, filename, config, { instrument }) {
@@ -13,7 +10,7 @@ module.exports = {
       /* @jsx mdx */
       import React from 'react'
       import { mdx } from '@mdx-js/react'
-      ${mdx.sync(src, { compilers, filepath: filename })}
+      ${compileSync(src, { filepath: filename })}
     `;
 
     const extension = path.extname(filename);

package/mdx-compiler-plugin.js

@@ -1 +1 @@
-module.exports = require('@storybook/csf-tools/mdx').createCompiler;
+module.exports = require('@storybook/mdx1-csf').createCompiler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.5.0-alpha.41",
+  "version": "6.5.0-alpha.44",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -61,24 +61,23 @@
     "@babel/plugin-transform-react-jsx": "^7.12.12",
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.5.0-alpha.41",
-    "@storybook/api": "6.5.0-alpha.41",
-    "@storybook/builder-webpack4": "6.5.0-alpha.41",
-    "@storybook/client-logger": "6.5.0-alpha.41",
-    "@storybook/components": "6.5.0-alpha.41",
-    "@storybook/core": "6.5.0-alpha.41",
-    "@storybook/core-events": "6.5.0-alpha.41",
+    "@storybook/addons": "6.5.0-alpha.44",
+    "@storybook/api": "6.5.0-alpha.44",
+    "@storybook/builder-webpack4": "6.5.0-alpha.44",
+    "@storybook/client-logger": "6.5.0-alpha.44",
+    "@storybook/components": "6.5.0-alpha.44",
+    "@storybook/core": "6.5.0-alpha.44",
+    "@storybook/core-events": "6.5.0-alpha.44",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.5.0-alpha.41",
-    "@storybook/node-logger": "6.5.0-alpha.41",
-    "@storybook/postinstall": "6.5.0-alpha.41",
-    "@storybook/preview-web": "6.5.0-alpha.41",
-    "@storybook/source-loader": "6.5.0-alpha.41",
-    "@storybook/store": "6.5.0-alpha.41",
-    "@storybook/theming": "6.5.0-alpha.41",
+    "@storybook/csf-tools": "6.5.0-alpha.44",
+    "@storybook/mdx1-csf": "canary",
+    "@storybook/node-logger": "6.5.0-alpha.44",
+    "@storybook/postinstall": "6.5.0-alpha.44",
+    "@storybook/preview-web": "6.5.0-alpha.44",
+    "@storybook/source-loader": "6.5.0-alpha.44",
+    "@storybook/store": "6.5.0-alpha.44",
+    "@storybook/theming": "6.5.0-alpha.44",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -88,7 +87,6 @@
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "html-tags": "^3.1.0",
-    "js-string-escape": "^1.0.1",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.21",
     "nanoid": "^3.1.23",
@@ -107,16 +105,15 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.3.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.5.0-alpha.41",
-    "@storybook/html": "6.5.0-alpha.41",
-    "@storybook/react": "6.5.0-alpha.41",
-    "@storybook/vue": "6.5.0-alpha.41",
-    "@storybook/web-components": "6.5.0-alpha.41",
+    "@storybook/angular": "6.5.0-alpha.44",
+    "@storybook/html": "6.5.0-alpha.44",
+    "@storybook/mdx2-csf": "canary",
+    "@storybook/react": "6.5.0-alpha.44",
+    "@storybook/vue": "6.5.0-alpha.44",
+    "@storybook/web-components": "6.5.0-alpha.44",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
-    "@types/enzyme": "^3.10.8",
     "@types/estree": "^0.0.44",
-    "@types/jest": "^26.0.16",
     "@types/loader-utils": "^2.0.0",
     "@types/prop-types": "^15.7.3",
     "@types/tmp": "^0.2.0",
@@ -124,7 +121,6 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-react-docgen": "^4.2.1",
     "cross-spawn": "^7.0.3",
-    "fs-extra": "^9.0.1",
     "jest": "^26.6.3",
     "jest-specific-snapshot": "^4.0.0",
     "lit-element": "^3.0.2",
@@ -134,12 +130,27 @@
     "styled-components": "^5.2.1",
     "sveltedoc-parser": "4.1.0",
     "tmp": "^0.2.1",
-    "tslib": "^2.1.0",
     "vue": "^2.6.10",
-    "web-component-analyzer": "^1.1.6",
     "webpack": "4",
     "zone.js": "^0.11.3"
   },
+  "peerDependencies": {
+    "@storybook/angular": "6.5.0-alpha.44",
+    "@storybook/html": "6.5.0-alpha.44",
+    "@storybook/mdx2-csf": "*",
+    "@storybook/react": "6.5.0-alpha.44",
+    "@storybook/vue": "6.5.0-alpha.44",
+    "@storybook/vue3": "6.5.0-alpha.44",
+    "@storybook/web-components": "6.5.0-alpha.44",
+    "lit": "^2.0.0",
+    "lit-html": "^1.4.1 || ^2.0.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "svelte": "^3.31.2",
+    "sveltedoc-parser": "^4.1.0",
+    "vue": "^2.6.10 || ^3.0.0",
+    "webpack": "*"
+  },
   "peerDependenciesMeta": {
     "@storybook/angular": {
       "optional": true
@@ -159,6 +170,9 @@
     "@storybook/manager-webpack5": {
       "optional": true
     },
+    "@storybook/mdx2-csf": {
+      "optional": true
+    },
     "@storybook/react": {
       "optional": true
     },
@@ -199,7 +213,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
+  "gitHead": "0125cb2b688dc1acca71a7fbf2795466fd55c0e3",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",