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

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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.5.0-alpha.50",
+  "version": "6.5.0-alpha.51",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -59,20 +59,20 @@
     "@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.51",
+    "@storybook/api": "6.5.0-alpha.51",
+    "@storybook/components": "6.5.0-alpha.51",
+    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/core-events": "6.5.0-alpha.51",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.50",
+    "@storybook/docs-tools": "6.5.0-alpha.51",
     "@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.51",
+    "@storybook/postinstall": "6.5.0-alpha.51",
+    "@storybook/preview-web": "6.5.0-alpha.51",
+    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.51",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -118,7 +118,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6cf4571e5a1200613de94aa066fe93f75aec6ad1",
+  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",