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

package/dist/modern/blocks/Source.js

@@ -31,7 +31,10 @@ const getStorySource = (storyId, sourceContext) => {
   } = sourceContext; // source rendering is async so source is unavailable at the start of the render cycle,
   // so we fail gracefully here without warning
 
-  return (sources === null || sources === void 0 ? void 0 : sources[storyId]) || '';
+  return (sources === null || sources === void 0 ? void 0 : sources[storyId]) || {
+    code: '',
+    format: false
+  };
 };
 
 const getSnippet = (snippet, story) => {
@@ -86,6 +89,10 @@ export const getSourceProps = (props, docsContext, sourceContext) => {
   const multiProps = props;
   let source = codeProps.code; // prefer user-specified code
 
+  let {
+    format
+  } = codeProps; // prefer user-specified code
+
   const targetIds = multiProps.ids || [singleProps.id || currentId];
   const storyIds = targetIds.map(targetId => targetId === CURRENT_SELECTION ? currentId : targetId);
   const stories = useStories(storyIds, docsContext);
@@ -98,8 +105,15 @@ export const getSourceProps = (props, docsContext, sourceContext) => {
   }
 
   if (!source) {
+    // just take the format from the first story, given how they're all concatinated together...
+    // TODO: we should consider sending an event with all the sources separately, instead of concatenating them here
+    ({
+      format
+    } = getStorySource(storyIds[0], sourceContext));
     source = storyIds.map((storyId, idx) => {
-      const storySource = getStorySource(storyId, sourceContext);
+      const {
+        code: storySource
+      } = getStorySource(storyId, sourceContext);
       const storyObj = stories[idx];
       return getSnippet(storySource, storyObj);
     }).join('\n\n');
@@ -118,6 +132,7 @@ export const getSourceProps = (props, docsContext, sourceContext) => {
   return source ? {
     code: source,
     state,
+    format,
     language: props.language || docsLanguage || 'jsx',
     dark: props.dark || false
   } : {

package/dist/modern/blocks/SourceContainer.js

@@ -11,25 +11,31 @@ export const SourceContainer = ({
   const [sources, setSources] = useState({});
   const channel = addons.getChannel();
   useEffect(() => {
-    const handleSnippetRendered = (id, newItem) => {
-      if (newItem !== sources[id]) {
-        setSources(current => {
-          const newSources = Object.assign({}, current, {
-            [id]: newItem
-          });
+    const handleSnippetRendered = (id, newSource, format = false) => {
+      // optimization: if the source is the same, ignore the incoming event
+      if (sources[id] && sources[id].code === newSource) {
+        return;
+      }
 
-          if (!deepEqual(current, newSources)) {
-            return newSources;
+      setSources(current => {
+        const newSources = Object.assign({}, current, {
+          [id]: {
+            code: newSource,
+            format
           }
-
-          return current;
         });
-      }
+
+        if (!deepEqual(current, newSources)) {
+          return newSources;
+        }
+
+        return current;
+      });
     };
 
     channel.on(SNIPPET_RENDERED, handleSnippetRendered);
     return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
-  });
+  }, []);
   return /*#__PURE__*/React.createElement(SourceContext.Provider, {
     value: {
       sources

package/dist/modern/blocks/Stories.js

@@ -12,6 +12,11 @@ export const Stories = ({
     componentStories
   } = useContext(DocsContext);
   let stories = componentStories();
+  stories = stories.filter(story => {
+    var _story$parameters, _story$parameters$doc;
+
+    return !((_story$parameters = story.parameters) !== null && _story$parameters !== void 0 && (_story$parameters$doc = _story$parameters.docs) !== null && _story$parameters$doc !== void 0 && _story$parameters$doc.disable);
+  });
   if (!includePrimary) stories = stories.slice(1);
 
   if (!stories || stories.length === 0) {

package/dist/modern/blocks/Story.js

@@ -95,30 +95,8 @@ const Story = props => {
     let cleanup;
 
     if (story && storyRef.current) {
-      const {
-        componentId,
-        id,
-        title,
-        name
-      } = story;
-      const renderContext = {
-        componentId,
-        title,
-        kind: title,
-        id,
-        name,
-        story: name,
-        // TODO what to do when these fail?
-        showMain: () => {},
-        showError: () => {},
-        showException: () => {}
-      };
-      cleanup = context.renderStoryToElement({
-        story,
-        renderContext,
-        element: storyRef.current,
-        viewMode: 'docs'
-      });
+      const element = storyRef.current;
+      cleanup = context.renderStoryToElement(story, element);
       setShowLoader(false);
     }
 

package/dist/modern/blocks/mdx.js

@@ -1,3 +1,8 @@
+const _excluded = ["children"],
+      _excluded2 = ["className", "children"],
+      _excluded3 = ["href", "target", "children"],
+      _excluded4 = ["as", "id", "children"],
+      _excluded5 = ["as", "id", "children"];
 import "core-js/modules/es.array.reduce.js";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -27,19 +32,19 @@ export const AddContext = props => {
   const {
     children
   } = props,
-        rest = _objectWithoutPropertiesLoose(props, ["children"]);
+        rest = _objectWithoutPropertiesLoose(props, _excluded);
 
   const parentContext = React.useContext(DocsContext);
   return /*#__PURE__*/React.createElement(DocsContext.Provider, {
     value: Object.assign({}, parentContext, rest)
   }, children);
 };
-export const CodeOrSourceMdx = (_ref) => {
+export const CodeOrSourceMdx = _ref => {
   let {
     className,
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
   // markdown-to-jsx does not add className to inline code
   if (typeof className !== 'string' && (typeof children !== 'string' || !children.match(/[\n\r]/g))) {
@@ -84,7 +89,7 @@ export const AnchorMdx = props => {
     target,
     children
   } = props,
-        rest = _objectWithoutPropertiesLoose(props, ["href", "target", "children"]);
+        rest = _objectWithoutPropertiesLoose(props, _excluded3);
 
   if (href) {
     // Enable scrolling for in-page anchors.
@@ -132,13 +137,13 @@ const OcticonAnchor = styled.a(() => ({
   color: 'inherit'
 }));
 
-const HeaderWithOcticonAnchor = (_ref2) => {
+const HeaderWithOcticonAnchor = _ref2 => {
   let {
     as,
     id,
     children
   } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["as", "id", "children"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded4);
 
   // @ts-ignore
   const OcticonHeader = OcticonHeaders[as];
@@ -176,7 +181,7 @@ export const HeaderMdx = props => {
     id,
     children
   } = props,
-        rest = _objectWithoutPropertiesLoose(props, ["as", "id", "children"]); // An id should have been added on every header by the "remark-slug" plugin.
+        rest = _objectWithoutPropertiesLoose(props, _excluded5); // An id should have been added on every header by the "remark-slug" plugin.
 
 
   if (id) {

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

@@ -1,4 +1,3 @@
-import { enhanceArgTypes } from './enhanceArgTypes';
 export const parameters = {
   docs: {
     inlineStories: false,
@@ -6,5 +5,4 @@ export const parameters = {
     getPage: async () => (await import('../../blocks')).DocsPage,
     iframeHeight: 100
   }
-};
-export const argTypesEnhancers = [enhanceArgTypes];
+};

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/blocks/Source.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { SourceProps as PureSourceProps } from '@storybook/components';
+import { ComponentProps, FC } from 'react';
+import { Source as PureSource } from '@storybook/components';
 import { DocsContextProps } from './DocsContext';
 import { SourceContextProps } from './SourceContainer';
 export declare enum SourceState {
@@ -10,6 +10,7 @@ export declare enum SourceState {
 interface CommonProps {
     language?: string;
     dark?: boolean;
+    format?: PureSourceProps['format'];
     code?: string;
 }
 declare type SingleSourceProps = {
@@ -26,11 +27,12 @@ declare type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | No
 declare type SourceStateProps = {
     state: SourceState;
 };
+declare type PureSourceProps = ComponentProps<typeof PureSource>;
 export declare const getSourceProps: (props: SourceProps, docsContext: DocsContextProps<any>, sourceContext: SourceContextProps) => PureSourceProps & SourceStateProps;
 /**
  * Story source doc block renders source code if provided,
  * or the source for a story if `storyId` is provided, or
  * the source for the current story if nothing is provided.
  */
-export declare const Source: FC<SourceProps>;
+export declare const Source: FC<PureSourceProps>;
 export {};

package/dist/ts3.4/blocks/SourceContainer.d.ts

@@ -1,6 +1,10 @@
 import { FC, Context } from 'react';
+import { SyntaxHighlighterFormatTypes } from '@storybook/components';
 import { StoryId } from '@storybook/api';
-export declare type SourceItem = string;
+export interface SourceItem {
+    code: string;
+    format: SyntaxHighlighterFormatTypes;
+}
 export declare type StorySources = Record<StoryId, SourceItem>;
 export interface SourceContextProps {
     sources: StorySources;

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/Source.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { SourceProps as PureSourceProps } from '@storybook/components';
+import { ComponentProps, FC } from 'react';
+import { Source as PureSource } from '@storybook/components';
 import { DocsContextProps } from './DocsContext';
 import { SourceContextProps } from './SourceContainer';
 export declare enum SourceState {
@@ -10,6 +10,7 @@ export declare enum SourceState {
 interface CommonProps {
     language?: string;
     dark?: boolean;
+    format?: PureSourceProps['format'];
     code?: string;
 }
 declare type SingleSourceProps = {
@@ -26,11 +27,12 @@ declare type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | No
 declare type SourceStateProps = {
     state: SourceState;
 };
+declare type PureSourceProps = ComponentProps<typeof PureSource>;
 export declare const getSourceProps: (props: SourceProps, docsContext: DocsContextProps<any>, sourceContext: SourceContextProps) => PureSourceProps & SourceStateProps;
 /**
  * Story source doc block renders source code if provided,
  * or the source for a story if `storyId` is provided, or
  * the source for the current story if nothing is provided.
  */
-export declare const Source: FC<SourceProps>;
+export declare const Source: FC<PureSourceProps>;
 export {};

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

@@ -1,6 +1,10 @@
 import { FC, Context } from 'react';
-import { StoryId } from '@storybook/api';
-export declare type SourceItem = string;
+import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
+import type { StoryId } from '@storybook/api';
+export interface SourceItem {
+    code: string;
+    format: SyntaxHighlighterFormatTypes;
+}
 export declare type StorySources = Record<StoryId, SourceItem>;
 export interface SourceContextProps {
     sources: StorySources;

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;