Merge pull request #20083 from storybookjs/tom/sb-466-external-docs-e…

…xports-from-2

Fix SSR in external docs via `node` exports

.gitignore

@@ -12,6 +12,7 @@ test-results
 /sandbox
 /bench
 .verdaccio-cache
+.next
 
 # Yarn stuff
 /**/.yarn/*

code/addons/docs/package.json

@@ -26,6 +26,7 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"

code/addons/docs/preview.js

@@ -1 +1,2 @@
+// eslint-disable-next-line import/export
 export * from './dist/preview';

code/addons/docs/src/DocsRenderer.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import type { Renderer, Parameters, DocsContextProps, DocsRenderFunction } from '@storybook/types';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
-import { MDXProvider } from '@mdx-js/react';
 
 // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
 export const defaultComponents: Record<string, any> = {
@@ -31,13 +30,15 @@ export class DocsRenderer<TRenderer extends Renderer> {
         ...docsParameter?.components,
       };
 
-      ReactDOM.render(
-        <MDXProvider components={components}>
-          <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
-        </MDXProvider>,
-        element,
-        callback
-      );
+      import('@mdx-js/react').then(({ MDXProvider }) => {
+        ReactDOM.render(
+          <MDXProvider components={components}>
+            <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
+          </MDXProvider>,
+          element,
+          callback
+        );
+      });
     };
 
     this.unmount = (element: HTMLElement) => {

code/addons/essentials/src/docs/preview.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line import/export
 export * from '@storybook/addon-docs/dist/preview';

code/lib/theming/package.json

@@ -22,6 +22,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"

code/ui/blocks/package.json

@@ -22,6 +22,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"

code/ui/components/src/Zoom/ZoomElement.tsx

@@ -1,6 +1,6 @@
 /* global MutationObserver */
 import type { ReactElement, RefObject } from 'react';
-import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { styled } from '@storybook/theming';
 import { browserSupportsCssZoom } from './browserSupportsCssZoom';
 
@@ -29,20 +29,20 @@ const useMutationObserver = ({
   options: MutationObserverInit;
   callback: MutationCallback;
 }): void => {
-  const observer = useMemo(
-    () =>
-      new MutationObserver((mutationRecord, mutationObserver) => {
-        callback(mutationRecord, mutationObserver);
-      }),
-    [callback]
-  );
+  const observer = useRef<MutationObserver>();
 
   useEffect(() => {
+    if (!observer.current) {
+      observer.current = new MutationObserver((mutationRecord, mutationObserver) => {
+        callback(mutationRecord, mutationObserver);
+      });
+    }
+
     if (element?.current) {
-      observer.observe(element.current, options);
+      observer.current.observe(element.current, options);
     }
 
-    return () => observer.disconnect();
+    return () => observer.current.disconnect();
   }, [element, observer, options]);
 };
 

test-storybooks/external-docs/package.json

@@ -15,7 +15,6 @@
     "@storybook/addon-essentials": "7.0.0-alpha.43",
     "@storybook/blocks": "7.0.0-alpha.43",
     "@storybook/components": "7.0.0-alpha.43",
-    "@storybook/csf": "0.0.2--canary.53.4879818.0",
     "@storybook/preview-web": "7.0.0-alpha.43",
     "@storybook/react": "7.0.0-alpha.43",
     "@storybook/react-webpack5": "7.0.0-alpha.43",
@@ -77,8 +76,8 @@
     "@storybook/web-components-vite": "portal:../../code/frameworks/web-components-vite",
     "@storybook/web-components-webpack5": "portal:../../code/frameworks/web-components-webpack5",
     "@storybook/addons": "portal:../../code/lib/addons",
-    "@storybook/api": "portal:../../code/lib/api",
-    "@storybook/blocks": "portal:../../code/lib/blocks",
+    "@storybook/manager-api": "portal:../../code/lib/manager-api",
+    "@storybook/blocks": "portal:../../code/ui/blocks",
     "@storybook/builder-manager": "portal:../../code/lib/builder-manager",
     "@storybook/builder-vite": "portal:../../code/lib/builder-vite",
     "@storybook/builder-webpack5": "portal:../../code/lib/builder-webpack5",
@@ -91,7 +90,7 @@
     "@storybook/client-api": "portal:../../code/lib/client-api",
     "@storybook/client-logger": "portal:../../code/lib/client-logger",
     "@storybook/codemod": "portal:../../code/lib/codemod",
-    "@storybook/components": "portal:../../code/lib/components",
+    "@storybook/components": "portal:../../code/ui/components",
     "@storybook/core-client": "portal:../../code/lib/core-client",
     "@storybook/core-common": "portal:../../code/lib/core-common",
     "@storybook/core-events": "portal:../../code/lib/core-events",
@@ -102,7 +101,7 @@
     "@storybook/instrumenter": "portal:../../code/lib/instrumenter",
     "@storybook/node-logger": "portal:../../code/lib/node-logger",
     "@storybook/postinstall": "portal:../../code/lib/postinstall",
-    "@storybook/preview-web": "portal:../../code/lib/preview-web",
+    "@storybook/preview-api": "portal:../../code/lib/preview-api",
     "@storybook/router": "portal:../../code/lib/router",
     "@storybook/source-loader": "portal:../../code/lib/source-loader",
     "@storybook/store": "portal:../../code/lib/store",