@storybook/addon-docs 6.5.0-alpha.5 → 6.5.0-alpha.50

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

@@ -1,17 +1,11 @@
 import path from 'path';
 import remarkSlug from 'remark-slug';
-import remarkExternalLinks from 'remark-external-links'; // @ts-ignore
-
-import { createCompiler } from '@storybook/csf-tools/mdx';
-
-const resolvedBabelLoader = require.resolve('babel-loader', {
-  paths: [require.resolve('@storybook/builder-webpack4')] // FIXME!!!
-
-}); // for frameworks that are not working with react, we need to configure
+import remarkExternalLinks from 'remark-external-links';
+import global from 'global';
+import { logger } from '@storybook/node-logger'; // 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,
   mdxBabelOptions,
@@ -32,7 +26,18 @@ function createBabelOptions({
   });
 }
 
-export function webpack(webpackConfig = {}, options = {}) {
+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(/^webpack(4|5)$/) ? [require.resolve(`@storybook/builder-${builderName}`)] : [builderName]
+  });
+
   const {
     module = {}
   } = webpackConfig; // it will reuse babel options that are already in use in storybook
@@ -48,8 +53,12 @@ export 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';
+  logger.info(`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?$/,
@@ -76,7 +85,7 @@ export function webpack(webpackConfig = {}, options = {}) {
           configureJSX
         })
       }, {
-        loader: require.resolve('@mdx-js/loader'),
+        loader: mdxLoader,
         options: mdxLoaderOptions
       }]
     }];
@@ -105,10 +114,7 @@ export function webpack(webpackConfig = {}, options = {}) {
             configureJSX
           })
         }, {
-          loader: require.resolve('@mdx-js/loader'),
-          options: Object.assign({
-            compilers: [createCompiler(options)]
-          }, mdxLoaderOptions)
+          loader: mdxLoader
         }]
       }, {
         test: /\.mdx$/,
@@ -121,7 +127,7 @@ export function webpack(webpackConfig = {}, options = {}) {
             configureJSX
           })
         }, {
-          loader: require.resolve('@mdx-js/loader'),
+          loader: mdxLoader,
           options: mdxLoaderOptions
         }]
       }, ...sourceLoader]

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
@@ -7,4 +6,3 @@ export declare const parameters: {
         iframeHeight: number;
     };
 };
-export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];

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

@@ -1 +1,11 @@
-export declare function webpack(webpackConfig?: any, options?: any): any;
+import { Options } from '@storybook/core-common';
+declare type BabelParams = {
+    babelOptions?: any;
+    mdxBabelOptions?: any;
+    configureJSX?: boolean;
+};
+export declare function webpack(webpackConfig: any, options: Options & BabelParams & {
+    sourceLoaderOptions: any;
+    transcludeMarkdown: boolean;
+}): Promise<any>;
+export {};

package/dist/ts3.9/blocks/DocsContext.d.ts

@@ -1,5 +1,5 @@
 import { Context } from 'react';
-import { DocsContextProps } from '@storybook/preview-web';
-import { AnyFramework } from '@storybook/csf';
+import type { DocsContextProps } from '@storybook/preview-web';
+import type { AnyFramework } from '@storybook/csf';
 export type { DocsContextProps };
 export declare const DocsContext: Context<DocsContextProps<AnyFramework>>;

package/dist/ts3.9/blocks/enhanceSource.d.ts

@@ -1,3 +1,3 @@
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/store';
+import type { Parameters } from '@storybook/addons';
+import type { Story } from '@storybook/store';
 export declare const enhanceSource: (story: Story<any>) => Parameters;

package/dist/ts3.9/blocks/useStory.d.ts

@@ -1,5 +1,5 @@
-import { StoryId, AnyFramework } from '@storybook/csf';
-import { Story } from '@storybook/store';
+import type { StoryId, AnyFramework } from '@storybook/csf';
+import type { Story } from '@storybook/store';
 import { DocsContextProps } from './DocsContext';
 export declare function useStory<TFramework extends AnyFramework = AnyFramework>(storyId: StoryId, context: DocsContextProps<TFramework>): Story<TFramework> | void;
 export declare function useStories<TFramework extends AnyFramework = AnyFramework>(storyIds: StoryId[], context: DocsContextProps<TFramework>): (Story<TFramework> | void)[];

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
@@ -7,4 +6,3 @@ export declare const parameters: {
         iframeHeight: number;
     };
 };
-export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];

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

@@ -1 +1,11 @@
-export declare function webpack(webpackConfig?: any, options?: any): any;
+import type { Options } from '@storybook/core-common';
+declare type BabelParams = {
+    babelOptions?: any;
+    mdxBabelOptions?: any;
+    configureJSX?: boolean;
+};
+export declare function webpack(webpackConfig: any, options: Options & BabelParams & {
+    sourceLoaderOptions: any;
+    transcludeMarkdown: boolean;
+}): Promise<any>;
+export {};

package/ember/index.js

@@ -1 +1,6 @@
-module.exports = require('../dist/esm/frameworks/ember');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};

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.5",
+  "version": "6.5.0-alpha.50",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -40,6 +40,7 @@
     "common/**/*",
     "ember/**/*",
     "html/**/*",
+    "svelte/**/*",
     "postinstall/**/*",
     "react/**/*",
     "vue/**/*",
@@ -54,130 +55,54 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
     "@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.5",
-    "@storybook/api": "6.5.0-alpha.5",
-    "@storybook/builder-webpack4": "6.5.0-alpha.5",
-    "@storybook/client-logger": "6.5.0-alpha.5",
-    "@storybook/components": "6.5.0-alpha.5",
-    "@storybook/core": "6.5.0-alpha.5",
-    "@storybook/core-events": "6.5.0-alpha.5",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.5.0-alpha.5",
-    "@storybook/node-logger": "6.5.0-alpha.5",
-    "@storybook/postinstall": "6.5.0-alpha.5",
-    "@storybook/preview-web": "6.5.0-alpha.5",
-    "@storybook/source-loader": "6.5.0-alpha.5",
-    "@storybook/store": "6.5.0-alpha.5",
-    "@storybook/theming": "6.5.0-alpha.5",
-    "acorn": "^7.4.1",
-    "acorn-jsx": "^5.3.1",
-    "acorn-walk": "^7.2.0",
+    "@storybook/addons": "6.5.0-alpha.50",
+    "@storybook/api": "6.5.0-alpha.50",
+    "@storybook/components": "6.5.0-alpha.50",
+    "@storybook/core-common": "6.5.0-alpha.50",
+    "@storybook/core-events": "6.5.0-alpha.50",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/docs-tools": "6.5.0-alpha.50",
+    "@storybook/mdx1-csf": "canary",
+    "@storybook/node-logger": "6.5.0-alpha.50",
+    "@storybook/postinstall": "6.5.0-alpha.50",
+    "@storybook/preview-web": "6.5.0-alpha.50",
+    "@storybook/source-loader": "6.5.0-alpha.50",
+    "@storybook/store": "6.5.0-alpha.50",
+    "@storybook/theming": "6.5.0-alpha.50",
     "core-js": "^3.8.2",
-    "doctrine": "^3.0.0",
-    "escodegen": "^2.0.0",
     "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",
-    "p-limit": "^3.1.0",
-    "prettier": "^2.2.1",
-    "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.4",
-    "regenerator-runtime": "^0.13.7",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@angular/core": "^11.2.14",
     "@babel/core": "^7.12.10",
-    "@emotion/core": "^10.3.1",
-    "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.5.0-alpha.5",
-    "@storybook/html": "6.5.0-alpha.5",
-    "@storybook/react": "6.5.0-alpha.5",
-    "@storybook/vue": "6.5.0-alpha.5",
-    "@storybook/web-components": "6.5.0-alpha.5",
-    "@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",
+    "@storybook/mdx2-csf": "canary",
     "@types/util-deprecate": "^1.0.0",
     "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",
-    "lit-html": "^2.0.2",
-    "require-from-string": "^2.0.2",
-    "rxjs": "^6.6.3",
-    "styled-components": "^5.2.1",
-    "terser-webpack-plugin": "^5.0.3",
-    "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"
+    "webpack": "4"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.5.0-alpha.5",
-    "@storybook/html": "6.5.0-alpha.5",
-    "@storybook/react": "6.5.0-alpha.5",
-    "@storybook/vue": "6.5.0-alpha.5",
-    "@storybook/vue3": "6.5.0-alpha.5",
-    "@storybook/web-components": "6.5.0-alpha.5",
-    "lit": "^2.0.0",
-    "lit-html": "^1.4.1 || ^2.0.0",
+    "@storybook/mdx2-csf": "*",
     "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
-    },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/react": {
-      "optional": true
-    },
-    "@storybook/vue": {
-      "optional": true
-    },
-    "@storybook/vue3": {
+    "@storybook/builder-webpack4": {
       "optional": true
     },
-    "@storybook/web-components": {
+    "@storybook/builder-webpack5": {
       "optional": true
     },
-    "lit": {
-      "optional": true
-    },
-    "lit-html": {
+    "@storybook/mdx2-csf": {
       "optional": true
     },
     "react": {
@@ -186,15 +111,6 @@
     "react-dom": {
       "optional": true
     },
-    "svelte": {
-      "optional": true
-    },
-    "sveltedoc-parser": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    },
     "webpack": {
       "optional": true
     }
@@ -202,7 +118,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963",
+  "gitHead": "6cf4571e5a1200613de94aa066fe93f75aec6ad1",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",

package/preset.js

@@ -1,16 +1,16 @@
-const getFrameworkPresets = (framework) => {
-  try {
-    return [require.resolve(`./dist/cjs/frameworks/${framework}/preset`)];
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-    return [];
-  }
-};
+const { findDistEsm } = require('@storybook/core-common');
+const { webpack } = require('./dist/cjs/frameworks/common/preset');
+
+function managerEntries(entry = [], options) {
+  return [...entry, findDistEsm(__dirname, 'register')];
+}
+
+function config(entry = [], options = {}) {
+  return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry];
+}
 
-module.exports = (storybookOptions, presetOptions) => {
-  return [
-    { name: require.resolve('./common-preset'), options: presetOptions },
-    { name: require.resolve('./dist/cjs/frameworks/common/preset'), options: presetOptions },
-    ...getFrameworkPresets(storybookOptions.framework),
-  ];
+module.exports = {
+  webpack,
+  managerEntries,
+  config,
 };

package/register.js

@@ -1 +1,2 @@
+/* eslint-disable import/extensions */
 require('./dist/esm/register.js');

package/common-preset.js

@@ -1,19 +0,0 @@
-function managerEntries(entry = [], options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], options = {}) {
-  const { framework } = options;
-  const docsConfig = [require.resolve('./dist/esm/frameworks/common/config')];
-  try {
-    docsConfig.push(require.resolve(`./dist/esm/frameworks/${framework}/config`));
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-  }
-  return [...docsConfig, ...entry];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};