Merge branch 'future/base' into feat/tsup-addons-a11y

examples/official-storybook/stories/addon-docs/container-override.stories.mdx

@@ -1,19 +1,38 @@
-import { Meta, DocsContainer, Story } from '@storybook/addon-docs';
+import { useRef } from 'react';
+import { Meta, DocsContainer, Story, ArgsTable } from '@storybook/addon-docs';
 
 <Meta
   title="Addons/Docs/container-override"
   parameters={{
     docs: {
       // eslint-disable-next-line react/prop-types
-      container: ({ children, context }) => (
+      container: ({ children, context }) => {
-        <DocsContainer context={context}>
+        const countRef = useRef();
-          <div style={{ border: '5px solid red' }}>{children}</div>
+        countRef.current = (countRef.current || 0) + 1;
-        </DocsContainer>
+        return (
-      ),
+          <DocsContainer context={context}>
+            <div style={{ border: '5px solid red' }}>{children}</div>
+            <p>Container rendered {countRef.current} times</p>
+            <p>Try changing:</p>
+            <ul>
+              <li>the arg - story should rerender but container should not</li>
+              <li>a global (eg theme) - both should rerender</li>
+            </ul>
+          </DocsContainer>
+        );
+      },
     },
   }}
 />
 
+export const Component = () => {
+  const countRef = useRef();
+  countRef.current = (countRef.current || 0) + 1;
+  return <div>Story rendered {countRef.current} times</div>;
+};
+
 <Story name="dummy" parameters={{ layout: 'fullscreen' }}>
-  <div>some content</div>
+  <Component />
 </Story>
+
+<ArgsTable story="." />

lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix

@@ -413,6 +413,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix

@@ -430,6 +430,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix

@@ -97,6 +97,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix

@@ -96,6 +96,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix

@@ -126,6 +126,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix

@@ -125,6 +125,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix

@@ -133,6 +133,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix

@@ -132,6 +132,13 @@ Object {
           },
           Object {
             "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
+            "options": Object {
+              "remarkPlugins": Array [
+                [Function],
+                [Function],
+              ],
+              "skipCsf": false,
+            },
           },
         ],
       },

lib/preview-web/src/PreviewWeb.test.ts

@@ -765,7 +765,7 @@ describe('PreviewWeb', () => {
     });
 
     describe('in docs mode', () => {
-      it('does not re-render the docs container', async () => {
+      it('re-renders the docs container', async () => {
         document.location.search = '?id=component-one--docs&viewMode=docs';
 
         await createAndRenderPreview();
@@ -775,7 +775,7 @@ describe('PreviewWeb', () => {
         emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
         await waitForEvents([GLOBALS_UPDATED]);
 
-        expect(docsRenderer.render).not.toHaveBeenCalled();
+        expect(docsRenderer.render).toHaveBeenCalled();
       });
     });
   });
@@ -1038,7 +1038,7 @@ describe('PreviewWeb', () => {
       });
     });
 
-    describe('in docs mode, modern inline render', () => {
+    describe('in docs mode', () => {
       it('does not re-render the docs container', async () => {
         document.location.search = '?id=component-one--docs&viewMode=docs';
 

lib/preview-web/src/PreviewWeb.tsx

@@ -228,6 +228,12 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
 
   async onUpdateGlobals({ globals }: { globals: Globals }) {
     super.onUpdateGlobals({ globals });
+    if (
+      this.currentRender instanceof StandaloneDocsRender ||
+      this.currentRender instanceof TemplateDocsRender
+    ) {
+      await this.currentRender.rerender?.();
+    }
   }
 
   async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {

lib/preview-web/src/render/StandaloneDocsRender.ts

@@ -24,6 +24,8 @@ export class StandaloneDocsRender<TFramework extends AnyFramework> implements Re
 
   private exports?: ModuleExports;
 
+  public rerender?: () => Promise<void>;
+
   public teardown?: (options: { viewModeChanged?: boolean }) => Promise<void>;
 
   public torndown = false;
@@ -85,17 +87,21 @@ export class StandaloneDocsRender<TFramework extends AnyFramework> implements Re
         `Cannot render a story in viewMode=docs if \`@storybook/addon-docs\` is not installed`
       );
 
+    const docsParameter = { ...docs, page: this.exports.default };
     const renderer = await docs.renderer();
-    (renderer.render as DocsRenderFunction<TFramework>)(
+    const { render } = renderer as { render: DocsRenderFunction<TFramework> };
-      docsContext,
+    const renderDocs = async () => {
-      { ...docs, page: this.exports.default },
+      await new Promise<void>((r) => render(docsContext, docsParameter, canvasElement, r));
-      canvasElement,
+      this.channel.emit(DOCS_RENDERED, this.id);
-      () => this.channel.emit(DOCS_RENDERED, this.id)
+    };
-    );
+
+    this.rerender = async () => renderDocs();
     this.teardown = async ({ viewModeChanged }: { viewModeChanged?: boolean } = {}) => {
       if (!viewModeChanged || !canvasElement) return;
       renderer.unmount(canvasElement);
       this.torndown = true;
     };
+
+    return renderDocs();
   }
 }

lib/preview-web/src/render/TemplateDocsRender.ts

@@ -27,6 +27,8 @@ export class TemplateDocsRender<TFramework extends AnyFramework> implements Rend
 
   public story?: Story<TFramework>;
 
+  public rerender?: () => Promise<void>;
+
   public teardown?: (options: { viewModeChanged?: boolean }) => Promise<void>;
 
   public torndown = false;
@@ -95,21 +97,27 @@ export class TemplateDocsRender<TFramework extends AnyFramework> implements Rend
       true
     );
 
-    const { docs } = this.story.parameters || {};
+    const { docs: docsParameter } = this.story.parameters || {};
 
-    if (!docs)
+    if (!docsParameter)
       throw new Error(
         `Cannot render a story in viewMode=docs if \`@storybook/addon-docs\` is not installed`
       );
 
-    const renderer = await docs.renderer();
+    const renderer = await docsParameter.renderer();
-    (renderer.render as DocsRenderFunction<TFramework>)(docsContext, docs, canvasElement, () =>
+    const { render } = renderer as { render: DocsRenderFunction<TFramework> };
-      this.channel.emit(DOCS_RENDERED, this.id)
+    const renderDocs = async () => {
-    );
+      await new Promise<void>((r) => render(docsContext, docsParameter, canvasElement, r));
+      this.channel.emit(DOCS_RENDERED, this.id);
+    };
+
+    this.rerender = async () => renderDocs();
     this.teardown = async ({ viewModeChanged }: { viewModeChanged?: boolean } = {}) => {
       if (!viewModeChanged || !canvasElement) return;
       renderer.unmount(canvasElement);
       this.torndown = true;
     };
+
+    return renderDocs();
   }
 }

scripts/dts-localize.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import path, { dirname, isAbsolute, join, resolve } from 'path';
+import path, { dirname, isAbsolute, join, relative, resolve, sep } from 'path';
 import fs from 'fs-extra';
 import { sync } from 'read-pkg-up';
 import slash from 'slash';
@@ -47,7 +47,7 @@ function getCompilerOptions(inputFileNames: string[], preferredConfigPath?: stri
   const compilerOptionsParseResult = ts.parseJsonConfigFileContent(
     configParseResult.config,
     parseConfigHost,
-    path.resolve(path.dirname(configFileName)),
+    resolve(dirname(configFileName)),
     undefined,
     getAbsolutePath(configFileName)
   );
@@ -86,7 +86,7 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option
    * @param  {string} filePath the path of the current file
    */
   function getReplacementPathRelativeToBase(basePath: string, filePath: string) {
-    const relative = path.relative(basePath, filePath);
+    const relativePath = relative(basePath, filePath);
     let newPath = '';
 
     /*
@@ -101,16 +101,16 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option
 
     */
 
-    if (relative.includes(`node_modules${path.sep}`)) {
+    if (relativePath.includes(`node_modules${sep}`)) {
-      const [, ...parts] = relative.split(`node_modules${path.sep}`);
+      const [, ...parts] = relativePath.split(`node_modules${sep}`);
-      const filename = parts.join(`node_modules${path.sep}`).split(path.sep).join('-');
+      const filename = parts.join(`node_modules${sep}`).split(sep).join('-');
       newPath = join(outputPath, '_modules', filename);
-    } else if (relative.includes(join('dist', `ts-tmp${path.sep}`))) {
+    } else if (relativePath.includes(join('dist', `ts-tmp${sep}`))) {
-      const [, ...parts] = relative.split(join('dist', `ts-tmp${path.sep}`));
+      const [, ...parts] = relativePath.split(join('dist', `ts-tmp${sep}`));
-      const filename = parts.join('').split(path.sep).join('-');
+      const filename = parts.join('').split(sep).join('-');
       newPath = join(outputPath, filename);
     } else {
-      const filename = relative.split(path.sep).join('-');
+      const filename = relativePath.split(sep).join('-');
       newPath = join(outputPath, filename);
     }
     return newPath;