Merge pull request #29298 from storybookjs/norbert/prebundle-renderer…

…-react React: Prebundle all of `renderers/react`'s dependencies
storybookjs · Oct 8, 2024 · bc07da7 · bc07da7
2 parents 54b0b3c + 3990e4e
commit bc07da7
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 23 deletions.
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -103,8 +103,10 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
     modifications: {
+      extraDependencies: ['prop-types'],
       mainConfig: (config) => {
         const stories = config.getFieldValue<Array<StoriesEntry>>(['stories']);
         return {
@@ -133,6 +135,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
   },
   'nextjs/13-ts': {
     name: 'Next.js v13.5 (Webpack | TypeScript)',
@@ -147,7 +152,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalRSC: true },
       },
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
@@ -164,7 +169,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalRSC: true },
       },
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
@@ -181,7 +186,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalRSC: true },
       },
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
@@ -195,7 +200,7 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     modifications: {
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
       mainConfig: {
         features: { experimentalRSC: true },
       },
@@ -216,7 +221,12 @@ const baseTemplates = {
         framework: '@storybook/experimental-nextjs-vite',
         features: { experimentalRSC: true },
       },
-      extraDependencies: ['server-only', '@storybook/experimental-nextjs-vite', 'vite'],
+      extraDependencies: [
+        'server-only',
+        '@storybook/experimental-nextjs-vite',
+        'vite',
+        'prop-types',
+      ],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
@@ -228,6 +238,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-ts': {
@@ -238,6 +251,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['bench'],
   },
   'react-vite/prerelease-ts': {
@@ -261,6 +277,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-webpack/18-ts': {
@@ -271,6 +290,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'react-webpack/17-ts': {
@@ -282,6 +304,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'react-webpack/prerelease-ts': {
@@ -303,6 +328,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'solid-vite/default-js': {
@@ -581,7 +609,7 @@ const internalTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     modifications: {
-      extraDependencies: ['@storybook/addon-webpack5-compiler-babel'],
+      extraDependencies: ['@storybook/addon-webpack5-compiler-babel', 'prop-types'],
       editAddons: (addons) =>
         [...addons, '@storybook/addon-webpack5-compiler-babel'].filter(
           (a) => a !== '@storybook/addon-webpack5-compiler-swc'
@@ -599,6 +627,9 @@ const internalTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
     isInternal: true,
   },

diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
@@ -67,31 +67,29 @@
     "@storybook/manager-api": "workspace:^",
     "@storybook/preview-api": "workspace:^",
     "@storybook/react-dom-shim": "workspace:*",
-    "@storybook/theming": "workspace:^",
+    "@storybook/theming": "workspace:^"
+  },
+  "devDependencies": {
+    "@storybook/test": "workspace:*",
+    "@types/babel-plugin-react-docgen": "^4",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
     "@types/node": "^22.0.0",
+    "@types/semver": "^7.3.4",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
+    "babel-plugin-react-docgen": "^4.2.1",
+    "es-toolkit": "^1.21.0",
     "escodegen": "^2.1.0",
+    "expect-type": "^0.15.0",
     "html-tags": "^3.1.0",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^15.0.0",
+    "require-from-string": "^2.0.2",
     "semver": "^7.3.7",
     "ts-dedent": "^2.0.0",
-    "type-fest": "~2.19",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@storybook/test": "workspace:*",
-    "@types/babel-plugin-react-docgen": "^4",
-    "@types/semver": "^7.3.4",
-    "@types/util-deprecate": "^1.0.0",
-    "babel-plugin-react-docgen": "^4.2.1",
-    "es-toolkit": "^1.21.0",
-    "expect-type": "^0.15.0",
-    "require-from-string": "^2.0.2"
+    "type-fest": "~2.19"
   },
   "peerDependencies": {
     "@storybook/test": "workspace:*",

diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -8,11 +8,15 @@ import { addons, useEffect } from 'storybook/internal/preview-api';
 import type { ArgsStoryFn, PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
 import type { Options } from 'react-element-to-jsx-string';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+import type reactElementToJSXStringType from 'react-element-to-jsx-string';
+// @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS)
+import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js';
 
 import type { ReactRenderer } from '../types';
 import { isForwardRef, isMemo } from './lib';
 
+const reactElementToJSXString = reactElementToJSXStringRaw as typeof reactElementToJSXStringType;
+
 const toPascalCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
 /**

diff --git a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
@@ -7,7 +7,9 @@ import {
 } from 'storybook/internal/docs-tools';
 
 import { isFunction, isPlainObject, isString } from 'es-toolkit/compat';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+import type reactElementToJSXStringType from 'react-element-to-jsx-string';
+// @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS)
+import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js';
 
 import { ELEMENT_CAPTION, FUNCTION_CAPTION, OBJECT_CAPTION } from '../captions';
 import type { InspectionFunction } from '../inspection';
@@ -17,6 +19,8 @@ import { generateArray } from './generateArray';
 import { generateObject } from './generateObject';
 import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from './prettyIdentifier';
 
+const reactElementToJSXString = reactElementToJSXStringRaw as typeof reactElementToJSXStringType;
+
 export type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue;
 
 export interface TypeResolvers {

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -6768,7 +6768,6 @@ __metadata:
     "@types/estree": "npm:^0.0.51"
     "@types/node": "npm:^22.0.0"
     "@types/semver": "npm:^7.3.4"
-    "@types/util-deprecate": "npm:^1.0.0"
     acorn: "npm:^7.4.1"
     acorn-jsx: "npm:^5.3.1"
     acorn-walk: "npm:^7.2.0"
@@ -6783,7 +6782,6 @@ __metadata:
     semver: "npm:^7.3.7"
     ts-dedent: "npm:^2.0.0"
     type-fest: "npm:~2.19"
-    util-deprecate: "npm:^1.0.2"
   peerDependencies:
     "@storybook/test": "workspace:*"
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta