Skip to content

Commit

Permalink
Merge pull request #29298 from storybookjs/norbert/prebundle-renderer…
Browse files Browse the repository at this point in the history
…-react

React: Prebundle all of `renderers/react`'s dependencies
JReinhold authored Oct 8, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 54b0b3c + 3990e4e commit bc07da7
Showing 5 changed files with 58 additions and 23 deletions.
43 changes: 37 additions & 6 deletions code/lib/cli-storybook/src/sandbox-templates.ts
Original file line number Diff line number Diff line change
@@ -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,
},
24 changes: 11 additions & 13 deletions code/renderers/react/package.json
Original file line number Diff line number Diff line change
@@ -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:*",
6 changes: 5 additions & 1 deletion code/renderers/react/src/docs/jsxDecorator.tsx
Original file line number Diff line number Diff line change
@@ -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);

/**
Original file line number Diff line number Diff line change
@@ -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 {
2 changes: 0 additions & 2 deletions code/yarn.lock
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit bc07da7

Please sign in to comment.