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

package/dist/cjs/blocks/Source.js

@@ -75,7 +75,10 @@ var getStorySource = function getStorySource(storyId, sourceContext) {
   var sources = sourceContext.sources; // 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
+  };
 };
 
 var getSnippet = function getSnippet(snippet, story) {
@@ -127,6 +130,8 @@ var getSourceProps = function getSourceProps(props, docsContext, sourceContext)
   var multiProps = props;
   var source = codeProps.code; // prefer user-specified code
 
+  var format = codeProps.format; // prefer user-specified code
+
   var targetIds = multiProps.ids || [singleProps.id || currentId];
   var storyIds = targetIds.map(function (targetId) {
     return targetId === _types.CURRENT_SELECTION ? currentId : targetId;
@@ -141,8 +146,15 @@ var getSourceProps = function 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
+    var _getStorySource = getStorySource(storyIds[0], sourceContext);
+
+    format = _getStorySource.format;
     source = storyIds.map(function (storyId, idx) {
-      var storySource = getStorySource(storyId, sourceContext);
+      var _getStorySource2 = getStorySource(storyId, sourceContext),
+          storySource = _getStorySource2.code;
+
       var storyObj = stories[idx];
       return getSnippet(storySource, storyObj);
     }).join('\n\n');
@@ -158,6 +170,7 @@ var getSourceProps = function getSourceProps(props, docsContext, sourceContext)
   return source ? {
     code: source,
     state: state,
+    format: format,
     language: props.language || docsLanguage || 'jsx',
     dark: props.dark || false
   } : {

package/dist/cjs/blocks/SourceContainer.js

@@ -79,25 +79,33 @@ var SourceContainer = function SourceContainer(_ref) {
   var channel = _addons.addons.getChannel();
 
   (0, _react.useEffect)(function () {
-    var handleSnippetRendered = function handleSnippetRendered(id, newItem) {
-      if (newItem !== sources[id]) {
-        setSources(function (current) {
-          var newSources = Object.assign({}, current, _defineProperty({}, id, newItem));
+    var handleSnippetRendered = function handleSnippetRendered(id, newSource) {
+      var format = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-          if (!(0, _fastDeepEqual.default)(current, newSources)) {
-            return newSources;
-          }
-
-          return current;
-        });
+      // optimization: if the source is the same, ignore the incoming event
+      if (sources[id] && sources[id].code === newSource) {
+        return;
       }
+
+      setSources(function (current) {
+        var newSources = Object.assign({}, current, _defineProperty({}, id, {
+          code: newSource,
+          format: format
+        }));
+
+        if (!(0, _fastDeepEqual.default)(current, newSources)) {
+          return newSources;
+        }
+
+        return current;
+      });
     };
 
     channel.on(_shared.SNIPPET_RENDERED, handleSnippetRendered);
     return function () {
       return channel.off(_shared.SNIPPET_RENDERED, handleSnippetRendered);
     };
-  });
+  }, []);
   return /*#__PURE__*/_react.default.createElement(SourceContext.Provider, {
     value: {
       sources: sources

package/dist/cjs/{frameworks/common/preset.js → preset.js}

@@ -16,6 +16,8 @@ require("core-js/modules/es.array.from.js");
 
 require("core-js/modules/es.array.slice.js");
 
+require("core-js/modules/es.function.name.js");
+
 require("core-js/modules/es.promise.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -29,16 +31,12 @@ require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.assign.js");
 
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.match.js");
-
 require("core-js/modules/es.array.filter.js");
 
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
 require("core-js/modules/es.regexp.to-string.js");
 
 require("core-js/modules/es.regexp.constructor.js");
@@ -100,10 +98,6 @@ function _webpack() {
 
     var webpackConfig,
         options,
-        _yield$options$preset,
-        _yield$options$preset2,
-        builder,
-        builderName,
         resolvedBabelLoader,
         _webpackConfig$module,
         module,
@@ -129,17 +123,7 @@ function _webpack() {
           case 0:
             webpackConfig = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
             options = _args.length > 1 ? _args[1] : undefined;
-            _context.next = 4;
-            return options.presets.apply('core', {});
-
-          case 4:
-            _yield$options$preset = _context.sent;
-            _yield$options$preset2 = _yield$options$preset.builder;
-            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(/^webpack(4|5)$/) ? [require.resolve("@storybook/builder-".concat(builderName))] : [builderName]
-            });
+            resolvedBabelLoader = require.resolve('babel-loader');
             _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.
 
@@ -231,7 +215,7 @@ function _webpack() {
             });
             return _context.abrupt("return", result);
 
-          case 20:
+          case 14:
           case "end":
             return _context.stop();
         }

package/dist/cjs/{frameworks/common/config.js → preview.js}

@@ -39,7 +39,6 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 var parameters = {
   docs: {
-    inlineStories: false,
     getContainer: function () {
       var _getContainer = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
         return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -48,7 +47,7 @@ var parameters = {
               case 0:
                 _context.next = 2;
                 return Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('../../blocks'));
+                  return _interopRequireWildcard(require('./blocks'));
                 });
 
               case 2:
@@ -76,7 +75,7 @@ var parameters = {
               case 0:
                 _context2.next = 2;
                 return Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('../../blocks'));
+                  return _interopRequireWildcard(require('./blocks'));
                 });
 
               case 2:
@@ -95,8 +94,7 @@ var parameters = {
       }
 
       return getPage;
-    }(),
-    iframeHeight: 100
+    }()
   }
 };
 exports.parameters = parameters;

package/dist/esm/blocks/Source.js

@@ -33,7 +33,10 @@ var getStorySource = function getStorySource(storyId, sourceContext) {
   var sources = sourceContext.sources; // 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
+  };
 };
 
 var getSnippet = function getSnippet(snippet, story) {
@@ -85,6 +88,8 @@ export var getSourceProps = function getSourceProps(props, docsContext, sourceCo
   var multiProps = props;
   var source = codeProps.code; // prefer user-specified code
 
+  var format = codeProps.format; // prefer user-specified code
+
   var targetIds = multiProps.ids || [singleProps.id || currentId];
   var storyIds = targetIds.map(function (targetId) {
     return targetId === CURRENT_SELECTION ? currentId : targetId;
@@ -99,8 +104,15 @@ export var getSourceProps = function getSourceProps(props, docsContext, sourceCo
   }
 
   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
+    var _getStorySource = getStorySource(storyIds[0], sourceContext);
+
+    format = _getStorySource.format;
     source = storyIds.map(function (storyId, idx) {
-      var storySource = getStorySource(storyId, sourceContext);
+      var _getStorySource2 = getStorySource(storyId, sourceContext),
+          storySource = _getStorySource2.code;
+
       var storyObj = stories[idx];
       return getSnippet(storySource, storyObj);
     }).join('\n\n');
@@ -116,6 +128,7 @@ export var getSourceProps = function getSourceProps(props, docsContext, sourceCo
   return source ? {
     code: source,
     state: state,
+    format: format,
     language: props.language || docsLanguage || 'jsx',
     dark: props.dark || false
   } : {

package/dist/esm/blocks/SourceContainer.js

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

package/dist/esm/{frameworks/common/preset.js → preset.js}

@@ -6,11 +6,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.match.js";
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.regexp.constructor.js";
 import "core-js/modules/es.symbol.js";
@@ -21,6 +19,7 @@ import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.promise.js";
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -72,10 +71,6 @@ function _webpack() {
 
     var webpackConfig,
         options,
-        _yield$options$preset,
-        _yield$options$preset2,
-        builder,
-        builderName,
         resolvedBabelLoader,
         _webpackConfig$module,
         module,
@@ -101,17 +96,7 @@ function _webpack() {
           case 0:
             webpackConfig = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
             options = _args.length > 1 ? _args[1] : undefined;
-            _context.next = 4;
-            return options.presets.apply('core', {});
-
-          case 4:
-            _yield$options$preset = _context.sent;
-            _yield$options$preset2 = _yield$options$preset.builder;
-            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(/^webpack(4|5)$/) ? [require.resolve("@storybook/builder-".concat(builderName))] : [builderName]
-            });
+            resolvedBabelLoader = require.resolve('babel-loader');
             _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.
 
@@ -201,7 +186,7 @@ function _webpack() {
             });
             return _context.abrupt("return", result);
 
-          case 20:
+          case 14:
           case "end":
             return _context.stop();
         }

package/dist/esm/{frameworks/common/config.js → preview.js}

@@ -8,7 +8,6 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 export var parameters = {
   docs: {
-    inlineStories: false,
     getContainer: function () {
       var _getContainer = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
         return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -16,7 +15,7 @@ export var parameters = {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return import('../../blocks');
+                return import('./blocks');
 
               case 2:
                 return _context.abrupt("return", _context.sent.DocsContainer);
@@ -42,7 +41,7 @@ export var parameters = {
             switch (_context2.prev = _context2.next) {
               case 0:
                 _context2.next = 2;
-                return import('../../blocks');
+                return import('./blocks');
 
               case 2:
                 return _context2.abrupt("return", _context2.sent.DocsPage);
@@ -60,7 +59,6 @@ export var parameters = {
       }
 
       return getPage;
-    }(),
-    iframeHeight: 100
+    }()
   }
 };

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/{frameworks/common/preset.js → preset.js}

@@ -29,14 +29,7 @@ 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(/^webpack(4|5)$/) ? [require.resolve(`@storybook/builder-${builderName}`)] : [builderName]
-  });
+  const resolvedBabelLoader = require.resolve('babel-loader');
 
   const {
     module = {}

package/dist/modern/preview.js

@@ -0,0 +1,6 @@
+export const parameters = {
+  docs: {
+    getContainer: async () => (await import('./blocks')).DocsContainer,
+    getPage: async () => (await import('./blocks')).DocsPage
+  }
+};

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.9/frameworks/common/config.d.ts → ts3.4/preview.d.ts}

@@ -1,8 +1,6 @@
-export declare const parameters: {
-    docs: {
-        inlineStories: boolean;
-        getContainer: () => Promise<import("react").FunctionComponent<import("../../blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
-        getPage: () => Promise<import("react").FC<{}>>;
-        iframeHeight: number;
-    };
-};
+export declare const parameters: {
+    docs: {
+        getContainer: () => Promise<import("react").FunctionComponent<import("./blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
+        getPage: () => Promise<import("react").FC<{}>>;
+    };
+};

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.4/frameworks/common/config.d.ts → ts3.9/preview.d.ts}

@@ -1,8 +1,6 @@
-export declare const parameters: {
-    docs: {
-        inlineStories: boolean;
-        getContainer: () => Promise<import("react").FunctionComponent<import("../../blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
-        getPage: () => Promise<import("react").FC<{}>>;
-        iframeHeight: number;
-    };
-};
+export declare const parameters: {
+    docs: {
+        getContainer: () => Promise<import("react").FunctionComponent<import("./blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
+        getPage: () => Promise<import("react").FC<{}>>;
+    };
+};

package/manager.js

@@ -0,0 +1 @@
+import './dist/esm/manager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.5.0-alpha.50",
+  "version": "6.5.0-alpha.53",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -59,24 +59,26 @@
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
-    "@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/addons": "6.5.0-alpha.53",
+    "@storybook/api": "6.5.0-alpha.53",
+    "@storybook/components": "6.5.0-alpha.53",
+    "@storybook/core-common": "6.5.0-alpha.53",
+    "@storybook/core-events": "6.5.0-alpha.53",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.50",
+    "@storybook/docs-tools": "6.5.0-alpha.53",
     "@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",
+    "@storybook/node-logger": "6.5.0-alpha.53",
+    "@storybook/postinstall": "6.5.0-alpha.53",
+    "@storybook/preview-web": "6.5.0-alpha.53",
+    "@storybook/source-loader": "6.5.0-alpha.53",
+    "@storybook/store": "6.5.0-alpha.53",
+    "@storybook/theming": "6.5.0-alpha.53",
+    "babel-loader": "^8.0.0",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
+    "regenerator-runtime": "^0.13.7",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
@@ -85,23 +87,14 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/mdx2-csf": "canary",
-    "@types/util-deprecate": "^1.0.0",
-    "babel-loader": "^8.0.0",
-    "webpack": "4"
+    "@types/util-deprecate": "^1.0.0"
   },
   "peerDependencies": {
     "@storybook/mdx2-csf": "*",
     "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "webpack": "*"
+    "react-dom": "^16.8.0 || ^17.0.0"
   },
   "peerDependenciesMeta": {
-    "@storybook/builder-webpack4": {
-      "optional": true
-    },
-    "@storybook/builder-webpack5": {
-      "optional": true
-    },
     "@storybook/mdx2-csf": {
       "optional": true
     },
@@ -110,15 +103,12 @@
     },
     "react-dom": {
       "optional": true
-    },
-    "webpack": {
-      "optional": true
     }
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6cf4571e5a1200613de94aa066fe93f75aec6ad1",
+  "gitHead": "652768b3ff83a355651d5636ccc4d78bee2cdbf9",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",

package/preset.js

@@ -1,16 +1 @@
-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 = {
-  webpack,
-  managerEntries,
-  config,
-};
+module.exports = require('./dist/cjs/preset');

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preview';

package/register.js

@@ -1,2 +1,6 @@
-/* eslint-disable import/extensions */
-require('./dist/esm/register.js');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);

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

@@ -1,8 +0,0 @@
-export const parameters = {
-  docs: {
-    inlineStories: false,
-    getContainer: async () => (await import('../../blocks')).DocsContainer,
-    getPage: async () => (await import('../../blocks')).DocsPage,
-    iframeHeight: 100
-  }
-};