@storybook/cli 0.0.0-pr-29241-sha-f30996d6 → 0.0.0-pr-29434-sha-c02fe507
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/index.cjs +8 -8
- package/dist/bin/index.js +8 -8
- package/package.json +4 -4
package/dist/bin/index.cjs
CHANGED
|
@@ -386,7 +386,7 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
386
386
|
${import_picocolors23.default.cyan('npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"')}
|
|
387
387
|
|
|
388
388
|
Then, refer to our docs to migrate your play functions to Storybook 8:
|
|
389
|
-
${import_picocolors23.default.yellow("https://storybook.js.org/docs/
|
|
389
|
+
${import_picocolors23.default.yellow("https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function")}
|
|
390
390
|
`}};var import_promises6=require("fs/promises"),import_picocolors24=__toESM(require_picocolors(),1),import_ts_dedent24=require("ts-dedent"),RemovedAPIs=(RemovedAPIs2=>(RemovedAPIs2.addDecorator="addDecorator",RemovedAPIs2.addParameters="addParameters",RemovedAPIs2.addLoader="addLoader",RemovedAPIs2.getStorybook="getStorybook",RemovedAPIs2.setAddon="setAddon",RemovedAPIs2.clearDecorators="clearDecorators",RemovedAPIs2))(RemovedAPIs||{}),removedGlobalClientAPIs={id:"removedglobalclientapis",promptType:"manual",versionRange:["<7",">=7"],async check({previewConfigPath}){if(previewConfigPath){let contents=await(0,import_promises6.readFile)(previewConfigPath,{encoding:"utf8"}),usedAPIs=Object.values(RemovedAPIs).reduce((acc,item)=>(contents.includes(item)&&acc.push(item),acc),[]);if(usedAPIs.length)return{usedAPIs,previewPath:previewConfigPath}}return null},prompt({usedAPIs,previewPath}){return import_ts_dedent24.dedent`
|
|
391
391
|
${import_picocolors24.default.bold(import_picocolors24.default.red("Attention"))}: We could not automatically make this change. You'll need to do it manually.
|
|
392
392
|
|
|
@@ -459,7 +459,7 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
459
459
|
If you already have these plugins, you can ignore this message.
|
|
460
460
|
|
|
461
461
|
You can find more information on how to do this here:
|
|
462
|
-
https://storybook.js.org/docs/8.0/migration-guide
|
|
462
|
+
https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file
|
|
463
463
|
|
|
464
464
|
This change was necessary to support newer versions of Vite.
|
|
465
465
|
`:import_ts_dedent31.dedent`
|
|
@@ -467,7 +467,7 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
467
467
|
Please add a vite.config.js file to your project root.
|
|
468
468
|
|
|
469
469
|
You can find more information on how to do this here:
|
|
470
|
-
https://storybook.js.org/docs/8.0/migration-guide
|
|
470
|
+
https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file
|
|
471
471
|
|
|
472
472
|
This change was necessary to support newer versions of Vite.
|
|
473
473
|
`}};var import_picocolors30=__toESM(require_picocolors(),1),import_ts_dedent32=require("ts-dedent");var logger20=console,vta={id:"visual-tests-addon",versionRange:["<8.0.7",">=8.0.7"],async check({mainConfig}){return getAddonNames(mainConfig).some(addon=>addon.includes("@chromatic-com/storybook"))?null:{}},prompt(){return import_ts_dedent32.dedent`
|
|
@@ -498,19 +498,19 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
498
498
|
- SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n
|
|
499
499
|
In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.\n
|
|
500
500
|
After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
|
|
501
|
-
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/
|
|
501
|
+
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/builders/webpack#compiler-support")}
|
|
502
502
|
`):message.push(import_ts_dedent34.dedent`
|
|
503
503
|
Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5.\n
|
|
504
504
|
We have detected, that you want to use SWC as the compiler for Webpack5.\n
|
|
505
505
|
In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.\n
|
|
506
506
|
After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
|
|
507
|
-
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/
|
|
507
|
+
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/builders/webpack#compiler-support")}
|
|
508
508
|
`),message.join(`
|
|
509
509
|
|
|
510
510
|
`)},async run({result,mainConfigPath,packageManager,skipInstall,dryRun}){let{defaultCompiler,shouldRemoveSWCFlag,isNextJs}=result;if(shouldRemoveSWCFlag&&await updateMainConfig({mainConfigPath,dryRun:!!dryRun},main=>{main.removeField(["framework","options","builder","useSWC"])}),!isNextJs){let compiler=defaultCompiler===import_cli13.CoreWebpackCompilers.Babel?await askUserForCompilerChoice():import_cli13.CoreWebpackCompilers.SWC,compilerPackageName=Object.entries(import_cli13.compilerNameToCoreCompiler).find(([,coreCompiler])=>coreCompiler===compiler)[0];await add(compilerPackageName,{packageManager:packageManager.type,skipPostinstall:!!skipInstall})}}};async function askUserForCompilerChoice(){return(await(0,import_prompts6.default)({type:"select",name:"compiler",message:"Which compiler would you like to use?",choices:[{title:"Babel",description:"Choose Babel for a vast ecosystem and battle-tested reliability.",value:import_cli13.CoreWebpackCompilers.Babel},{title:"SWC",description:"Choose SWC for fast builds and simple configuration.",value:import_cli13.CoreWebpackCompilers.SWC}],initial:0})).compiler}var import_cli14=require("storybook/internal/cli"),import_csf_tools8=require("storybook/internal/csf-tools"),import_picocolors33=__toESM(require_picocolors(),1),import_ts_dedent35=require("ts-dedent");var wrapRequire={id:"wrap-require",versionRange:["*","*"],async check({packageManager,storybookVersion,mainConfigPath}){let isStorybookInMonorepo=await packageManager.isStorybookInMonorepo(),isPnp=await(0,import_cli14.detectPnp)();if(!mainConfigPath)return null;let config=await(0,import_csf_tools8.readConfig)(mainConfigPath);if(!isStorybookInMonorepo&&!isPnp||!getFieldsForRequireWrapper(config).some(node=>isRequireWrapperNecessary(node)))return null;let isConfigTypescript=mainConfigPath.endsWith(".ts")||mainConfigPath.endsWith(".tsx");return{storybookVersion,isStorybookInMonorepo,isPnp,isConfigTypescript}},prompt({storybookVersion,isStorybookInMonorepo}){let sbFormatted=import_picocolors33.default.cyan(`Storybook ${storybookVersion}`);return import_ts_dedent35.dedent`We have detected that you're using ${sbFormatted} in a ${isStorybookInMonorepo?"monorepo":"PnP"} project.
|
|
511
511
|
For Storybook to work correctly, some fields in your main config must be updated. We can do this for you automatically.
|
|
512
512
|
|
|
513
|
-
More info: https://storybook.js.org/docs/
|
|
513
|
+
More info: https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments`},async run({dryRun,mainConfigPath,result}){return new Promise((resolve,reject)=>{updateMainConfig({dryRun:!!dryRun,mainConfigPath},mainConfig=>{try{getFieldsForRequireWrapper(mainConfig).forEach(node=>{wrapValueWithRequireWrapper(mainConfig,node)}),getRequireWrapperName(mainConfig)===null&&(mainConfig?.fileName?.endsWith(".cjs")||mainConfig?.fileName?.endsWith(".cts")||mainConfig?.fileName?.endsWith(".cjsx")||mainConfig?.fileName?.endsWith(".ctsx")?mainConfig.setRequireImport(["dirname","join"],"path"):mainConfig.setImport(["dirname","join"],"path"),mainConfig.setBodyDeclaration(getRequireWrapperAsCallExpression(result.isConfigTypescript))),resolve()}catch(e){reject(e)}})})}};var allFixes=[missingStorybookDependencies,addonsAPI,newFrameworks,cra5,webpack5,vue3,addonPostCSS,viteConfigFile,eslintPlugin,builderVite,sbBinary,sbScripts,removeJestTestingLibrary,removeArgtypesRegex,removedGlobalClientAPIs,mdxgfm,mdxToCSF,autodocsTrue,angularBuildersMultiproject,angularBuilders,wrapRequire,reactDocgen,storyshotsMigration,removeReactDependency,removeLegacyMDX1,webpack5CompilerSetup,mdx1to3,upgradeStorybookRelatedDependencies,vta,autodocsTags,initialGlobals];var import_picocolors34=__toESM(require_picocolors(),1),import_ts_dedent36=require("ts-dedent");var messageDivider2=`
|
|
514
514
|
|
|
515
515
|
`,segmentDivider=`
|
|
516
516
|
|
|
@@ -522,7 +522,7 @@ ${error}`).join(`
|
|
|
522
522
|
|
|
523
523
|
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
|
|
524
524
|
|
|
525
|
-
Please check the changelog and migration guide for manual migrations and more information: ${import_picocolors34.default.yellow("https://storybook.js.org/docs/
|
|
525
|
+
Please check the changelog and migration guide for manual migrations and more information: ${import_picocolors34.default.yellow("https://storybook.js.org/docs/migration-guide")}
|
|
526
526
|
And reach out on Discord if you need help: ${import_picocolors34.default.yellow("https://discord.gg/storybook")}
|
|
527
527
|
`);let hasNoFixes=Object.values(fixResults).every(r=>r==="unnecessary"),hasFailures=Object.values(fixResults).some(r=>r==="failed"||r==="check_failed"),title=hasNoFixes?"No migrations were applicable to your project":hasFailures?"Migration check ran with failures":"Migration check ran successfully";return boxen(messages.filter(Boolean).join(segmentDivider),{borderStyle:"round",padding:1,title,borderColor:hasFailures?"red":"green"})}var logger21=console,LOG_FILE_NAME2="migration-storybook.log",LOG_FILE_PATH2=(0,import_node_path7.join)(process.cwd(),LOG_FILE_NAME2),TEMP_LOG_FILE_PATH2="",originalStdOutWrite2=process.stdout.write.bind(process.stdout),originalStdErrWrite2=process.stderr.write.bind(process.stdout),augmentLogsToFile2=async()=>{TEMP_LOG_FILE_PATH2=await(0,import_common15.temporaryFile)({name:LOG_FILE_NAME2});let logStream=(0,import_node_fs2.createWriteStream)(TEMP_LOG_FILE_PATH2);process.stdout.write=d=>(originalStdOutWrite2(d),logStream.write(cleanLog(d))),process.stderr.write=d=>logStream.write(cleanLog(d))},cleanup2=()=>{process.stdout.write=originalStdOutWrite2,process.stderr.write=originalStdErrWrite2},logAvailableMigrations=()=>{let availableFixes=allFixes.map(f=>import_picocolors35.default.yellow(f.id)).map(x=>`- ${x}`).join(`
|
|
528
528
|
`);console.log(),logger21.info(import_ts_dedent37.dedent`
|
|
@@ -536,7 +536,7 @@ ${error.stack}`),fixSummary.failed[f.id]=error.message),fixResults[f.id]="check_
|
|
|
536
536
|
npx create-react-app {{beforeDir}} && cd {{beforeDir}} && jq '.browserslist.production[0] = ">0.9%"' package.json > tmp.json && mv tmp.json package.json
|
|
537
537
|
`,expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},skipTasks:["e2e-tests-dev","bench","vitest-integration"],modifications:{extraDependencies:["prop-types"],mainConfig:config=>({stories:config.getFieldValue(["stories"])?.map(s=>typeof s=="string"?s.replace(/\|(tsx?|ts)\b|\b(tsx?|ts)\|/g,""):s)})}},"cra/default-ts":{name:"Create React App Latest (Webpack | TypeScript)",script:`
|
|
538
538
|
npx create-react-app {{beforeDir}} --template typescript && cd {{beforeDir}} && jq '.browserslist.production[0] = ">0.9%"' package.json > tmp.json && mv tmp.json package.json
|
|
539
|
-
`,skipTasks:["smoke-test","bench","vitest-integration"],expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]}},"nextjs/13-ts":{name:"Next.js v13.5 (Webpack | TypeScript)",script:'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/default-js":{name:"Next.js Latest (Webpack | JavaScript)",script:'
|
|
539
|
+
`,skipTasks:["smoke-test","bench","vitest-integration"],expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]}},"nextjs/13-ts":{name:"Next.js v13.5 (Webpack | TypeScript)",script:'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/default-js":{name:"Next.js Latest (Webpack | JavaScript)",script:'npx create-next-app@^14 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/default-ts":{name:"Next.js Latest (Webpack | TypeScript)",script:'npx create-next-app@^14 {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/prerelease":{name:"Next.js Prerelease (Webpack | TypeScript)",script:'npx create-next-app@canary {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["server-only","prop-types"],mainConfig:{features:{experimentalRSC:!0}}},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"experimental-nextjs-vite/default-ts":{name:"Next.js Latest (Vite | TypeScript)",script:'npx create-next-app@^14 {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/experimental-nextjs-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{mainConfig:{framework:"@storybook/experimental-nextjs-vite",features:{experimentalRSC:!0}},extraDependencies:["server-only","@storybook/experimental-nextjs-vite","vite","prop-types"]},skipTasks:["e2e-tests-dev","bench"]},"react-vite/default-js":{name:"React Latest (Vite | JavaScript)",script:"npm create vite --yes {{beforeDir}} -- --template react",expected:{framework:"@storybook/react-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench"]},"react-vite/default-ts":{name:"React Latest (Vite | TypeScript)",script:"npm create vite --yes {{beforeDir}} -- --template react-ts",expected:{framework:"@storybook/react-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{extraDependencies:["prop-types"]},skipTasks:["bench"]},"react-vite/prerelease-ts":{name:"React Prerelease (Vite | TypeScript)",script:`
|
|
540
540
|
npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@beta react-dom@beta && jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
|
|
541
541
|
`,expected:{framework:"@storybook/react-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench"]},"react-webpack/18-ts":{name:"React Latest (Webpack | TypeScript)",script:"yarn create webpack5-react {{beforeDir}}",expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"react-webpack/17-ts":{name:"React v17 (Webpack | TypeScript)",script:'yarn create webpack5-react {{beforeDir}} --version-react="17" --version-react-dom="17"',expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"react-webpack/prerelease-ts":{name:"React Prerelease (Webpack | TypeScript)",script:`
|
|
542
542
|
yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta" && cd {{beforeDir}} && jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
|
package/dist/bin/index.js
CHANGED
|
@@ -368,7 +368,7 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
368
368
|
${import_picocolors23.default.cyan('npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"')}
|
|
369
369
|
|
|
370
370
|
Then, refer to our docs to migrate your play functions to Storybook 8:
|
|
371
|
-
${import_picocolors23.default.yellow("https://storybook.js.org/docs/
|
|
371
|
+
${import_picocolors23.default.yellow("https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function")}
|
|
372
372
|
`}};var import_picocolors24=__toESM(require_picocolors(),1);var RemovedAPIs=(RemovedAPIs2=>(RemovedAPIs2.addDecorator="addDecorator",RemovedAPIs2.addParameters="addParameters",RemovedAPIs2.addLoader="addLoader",RemovedAPIs2.getStorybook="getStorybook",RemovedAPIs2.setAddon="setAddon",RemovedAPIs2.clearDecorators="clearDecorators",RemovedAPIs2))(RemovedAPIs||{}),removedGlobalClientAPIs={id:"removedglobalclientapis",promptType:"manual",versionRange:["<7",">=7"],async check({previewConfigPath}){if(previewConfigPath){let contents=await readFile(previewConfigPath,{encoding:"utf8"}),usedAPIs=Object.values(RemovedAPIs).reduce((acc,item)=>(contents.includes(item)&&acc.push(item),acc),[]);if(usedAPIs.length)return {usedAPIs,previewPath:previewConfigPath}}return null},prompt({usedAPIs,previewPath}){return dedent`
|
|
373
373
|
${import_picocolors24.default.bold(import_picocolors24.default.red("Attention"))}: We could not automatically make this change. You'll need to do it manually.
|
|
374
374
|
|
|
@@ -441,7 +441,7 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
441
441
|
If you already have these plugins, you can ignore this message.
|
|
442
442
|
|
|
443
443
|
You can find more information on how to do this here:
|
|
444
|
-
https://storybook.js.org/docs/8.0/migration-guide
|
|
444
|
+
https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file
|
|
445
445
|
|
|
446
446
|
This change was necessary to support newer versions of Vite.
|
|
447
447
|
`:dedent`
|
|
@@ -449,7 +449,7 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
449
449
|
Please add a vite.config.js file to your project root.
|
|
450
450
|
|
|
451
451
|
You can find more information on how to do this here:
|
|
452
|
-
https://storybook.js.org/docs/8.0/migration-guide
|
|
452
|
+
https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file
|
|
453
453
|
|
|
454
454
|
This change was necessary to support newer versions of Vite.
|
|
455
455
|
`}};var import_picocolors30=__toESM(require_picocolors(),1);var logger20=console,vta={id:"visual-tests-addon",versionRange:["<8.0.7",">=8.0.7"],async check({mainConfig}){return getAddonNames(mainConfig).some(addon=>addon.includes("@chromatic-com/storybook"))?null:{}},prompt(){return dedent`
|
|
@@ -480,19 +480,19 @@ ${import_picocolors5.default.cyan("npx storybook doctor")}`;logger2.info(),found
|
|
|
480
480
|
- SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n
|
|
481
481
|
In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.\n
|
|
482
482
|
After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
|
|
483
|
-
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/
|
|
483
|
+
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/builders/webpack#compiler-support")}
|
|
484
484
|
`):message.push(dedent`
|
|
485
485
|
Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5.\n
|
|
486
486
|
We have detected, that you want to use SWC as the compiler for Webpack5.\n
|
|
487
487
|
In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.\n
|
|
488
488
|
After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
|
|
489
|
-
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/
|
|
489
|
+
You can find more information here: ${import_picocolors32.default.yellow("https://storybook.js.org/docs/builders/webpack#compiler-support")}
|
|
490
490
|
`),message.join(`
|
|
491
491
|
|
|
492
492
|
`)},async run({result,mainConfigPath,packageManager,skipInstall,dryRun}){let{defaultCompiler,shouldRemoveSWCFlag,isNextJs}=result;if(shouldRemoveSWCFlag&&await updateMainConfig({mainConfigPath,dryRun:!!dryRun},main=>{main.removeField(["framework","options","builder","useSWC"]);}),!isNextJs){let compiler=defaultCompiler===CoreWebpackCompilers.Babel?await askUserForCompilerChoice():CoreWebpackCompilers.SWC,compilerPackageName=Object.entries(compilerNameToCoreCompiler).find(([,coreCompiler])=>coreCompiler===compiler)[0];await add(compilerPackageName,{packageManager:packageManager.type,skipPostinstall:!!skipInstall});}}};async function askUserForCompilerChoice(){return (await prompts6({type:"select",name:"compiler",message:"Which compiler would you like to use?",choices:[{title:"Babel",description:"Choose Babel for a vast ecosystem and battle-tested reliability.",value:CoreWebpackCompilers.Babel},{title:"SWC",description:"Choose SWC for fast builds and simple configuration.",value:CoreWebpackCompilers.SWC}],initial:0})).compiler}var import_picocolors33=__toESM(require_picocolors(),1);var wrapRequire={id:"wrap-require",versionRange:["*","*"],async check({packageManager,storybookVersion,mainConfigPath}){let isStorybookInMonorepo=await packageManager.isStorybookInMonorepo(),isPnp=await detectPnp();if(!mainConfigPath)return null;let config=await readConfig(mainConfigPath);if(!isStorybookInMonorepo&&!isPnp||!getFieldsForRequireWrapper(config).some(node=>isRequireWrapperNecessary(node)))return null;let isConfigTypescript=mainConfigPath.endsWith(".ts")||mainConfigPath.endsWith(".tsx");return {storybookVersion,isStorybookInMonorepo,isPnp,isConfigTypescript}},prompt({storybookVersion,isStorybookInMonorepo}){let sbFormatted=import_picocolors33.default.cyan(`Storybook ${storybookVersion}`);return dedent`We have detected that you're using ${sbFormatted} in a ${isStorybookInMonorepo?"monorepo":"PnP"} project.
|
|
493
493
|
For Storybook to work correctly, some fields in your main config must be updated. We can do this for you automatically.
|
|
494
494
|
|
|
495
|
-
More info: https://storybook.js.org/docs/
|
|
495
|
+
More info: https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments`},async run({dryRun,mainConfigPath,result}){return new Promise((resolve,reject)=>{updateMainConfig({dryRun:!!dryRun,mainConfigPath},mainConfig=>{try{getFieldsForRequireWrapper(mainConfig).forEach(node=>{wrapValueWithRequireWrapper(mainConfig,node);}),getRequireWrapperName(mainConfig)===null&&(mainConfig?.fileName?.endsWith(".cjs")||mainConfig?.fileName?.endsWith(".cts")||mainConfig?.fileName?.endsWith(".cjsx")||mainConfig?.fileName?.endsWith(".ctsx")?mainConfig.setRequireImport(["dirname","join"],"path"):mainConfig.setImport(["dirname","join"],"path"),mainConfig.setBodyDeclaration(getRequireWrapperAsCallExpression(result.isConfigTypescript))),resolve();}catch(e){reject(e);}});})}};var allFixes=[missingStorybookDependencies,addonsAPI,newFrameworks,cra5,webpack5,vue3,addonPostCSS,viteConfigFile,eslintPlugin,builderVite,sbBinary,sbScripts,removeJestTestingLibrary,removeArgtypesRegex,removedGlobalClientAPIs,mdxgfm,mdxToCSF,autodocsTrue,angularBuildersMultiproject,angularBuilders,wrapRequire,reactDocgen,storyshotsMigration,removeReactDependency,removeLegacyMDX1,webpack5CompilerSetup,mdx1to3,upgradeStorybookRelatedDependencies,vta,autodocsTags,initialGlobals];var import_picocolors34=__toESM(require_picocolors(),1);var messageDivider2=`
|
|
496
496
|
|
|
497
497
|
`,segmentDivider=`
|
|
498
498
|
|
|
@@ -504,7 +504,7 @@ ${error}`).join(`
|
|
|
504
504
|
|
|
505
505
|
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
|
|
506
506
|
|
|
507
|
-
Please check the changelog and migration guide for manual migrations and more information: ${import_picocolors34.default.yellow("https://storybook.js.org/docs/
|
|
507
|
+
Please check the changelog and migration guide for manual migrations and more information: ${import_picocolors34.default.yellow("https://storybook.js.org/docs/migration-guide")}
|
|
508
508
|
And reach out on Discord if you need help: ${import_picocolors34.default.yellow("https://discord.gg/storybook")}
|
|
509
509
|
`);let hasNoFixes=Object.values(fixResults).every(r=>r==="unnecessary"),hasFailures=Object.values(fixResults).some(r=>r==="failed"||r==="check_failed"),title=hasNoFixes?"No migrations were applicable to your project":hasFailures?"Migration check ran with failures":"Migration check ran successfully";return boxen(messages.filter(Boolean).join(segmentDivider),{borderStyle:"round",padding:1,title,borderColor:hasFailures?"red":"green"})}var logger21=console,LOG_FILE_NAME2="migration-storybook.log",LOG_FILE_PATH2=join(process.cwd(),LOG_FILE_NAME2),TEMP_LOG_FILE_PATH2="",originalStdOutWrite2=process.stdout.write.bind(process.stdout),originalStdErrWrite2=process.stderr.write.bind(process.stdout),augmentLogsToFile2=async()=>{TEMP_LOG_FILE_PATH2=await temporaryFile({name:LOG_FILE_NAME2});let logStream=createWriteStream(TEMP_LOG_FILE_PATH2);process.stdout.write=d=>(originalStdOutWrite2(d),logStream.write(cleanLog(d))),process.stderr.write=d=>logStream.write(cleanLog(d));},cleanup2=()=>{process.stdout.write=originalStdOutWrite2,process.stderr.write=originalStdErrWrite2;},logAvailableMigrations=()=>{let availableFixes=allFixes.map(f=>import_picocolors35.default.yellow(f.id)).map(x=>`- ${x}`).join(`
|
|
510
510
|
`);console.log(),logger21.info(dedent`
|
|
@@ -518,7 +518,7 @@ ${error.stack}`),fixSummary.failed[f.id]=error.message),fixResults[f.id]="check_
|
|
|
518
518
|
npx create-react-app {{beforeDir}} && cd {{beforeDir}} && jq '.browserslist.production[0] = ">0.9%"' package.json > tmp.json && mv tmp.json package.json
|
|
519
519
|
`,expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},skipTasks:["e2e-tests-dev","bench","vitest-integration"],modifications:{extraDependencies:["prop-types"],mainConfig:config=>({stories:config.getFieldValue(["stories"])?.map(s=>typeof s=="string"?s.replace(/\|(tsx?|ts)\b|\b(tsx?|ts)\|/g,""):s)})}},"cra/default-ts":{name:"Create React App Latest (Webpack | TypeScript)",script:`
|
|
520
520
|
npx create-react-app {{beforeDir}} --template typescript && cd {{beforeDir}} && jq '.browserslist.production[0] = ">0.9%"' package.json > tmp.json && mv tmp.json package.json
|
|
521
|
-
`,skipTasks:["smoke-test","bench","vitest-integration"],expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]}},"nextjs/13-ts":{name:"Next.js v13.5 (Webpack | TypeScript)",script:'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/default-js":{name:"Next.js Latest (Webpack | JavaScript)",script:'
|
|
521
|
+
`,skipTasks:["smoke-test","bench","vitest-integration"],expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]}},"nextjs/13-ts":{name:"Next.js v13.5 (Webpack | TypeScript)",script:'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/default-js":{name:"Next.js Latest (Webpack | JavaScript)",script:'npx create-next-app@^14 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/default-ts":{name:"Next.js Latest (Webpack | TypeScript)",script:'npx create-next-app@^14 {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{mainConfig:{features:{experimentalRSC:!0}},extraDependencies:["server-only","prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"nextjs/prerelease":{name:"Next.js Prerelease (Webpack | TypeScript)",script:'npx create-next-app@canary {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/nextjs",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["server-only","prop-types"],mainConfig:{features:{experimentalRSC:!0}}},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"experimental-nextjs-vite/default-ts":{name:"Next.js Latest (Vite | TypeScript)",script:'npx create-next-app@^14 {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',expected:{framework:"@storybook/experimental-nextjs-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{mainConfig:{framework:"@storybook/experimental-nextjs-vite",features:{experimentalRSC:!0}},extraDependencies:["server-only","@storybook/experimental-nextjs-vite","vite","prop-types"]},skipTasks:["e2e-tests-dev","bench"]},"react-vite/default-js":{name:"React Latest (Vite | JavaScript)",script:"npm create vite --yes {{beforeDir}} -- --template react",expected:{framework:"@storybook/react-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench"]},"react-vite/default-ts":{name:"React Latest (Vite | TypeScript)",script:"npm create vite --yes {{beforeDir}} -- --template react-ts",expected:{framework:"@storybook/react-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{extraDependencies:["prop-types"]},skipTasks:["bench"]},"react-vite/prerelease-ts":{name:"React Prerelease (Vite | TypeScript)",script:`
|
|
522
522
|
npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@beta react-dom@beta && jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
|
|
523
523
|
`,expected:{framework:"@storybook/react-vite",renderer:"@storybook/react",builder:"@storybook/builder-vite"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench"]},"react-webpack/18-ts":{name:"React Latest (Webpack | TypeScript)",script:"yarn create webpack5-react {{beforeDir}}",expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"react-webpack/17-ts":{name:"React v17 (Webpack | TypeScript)",script:'yarn create webpack5-react {{beforeDir}} --version-react="17" --version-react-dom="17"',expected:{framework:"@storybook/react-webpack5",renderer:"@storybook/react",builder:"@storybook/builder-webpack5"},modifications:{extraDependencies:["prop-types"]},skipTasks:["e2e-tests-dev","bench","vitest-integration"]},"react-webpack/prerelease-ts":{name:"React Prerelease (Webpack | TypeScript)",script:`
|
|
524
524
|
yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta" && cd {{beforeDir}} && jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/cli",
|
|
3
|
-
"version": "0.0.0-pr-
|
|
3
|
+
"version": "0.0.0-pr-29434-sha-c02fe507",
|
|
4
4
|
"description": "Storybook CLI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@babel/core": "^7.24.4",
|
|
44
44
|
"@babel/types": "^7.24.0",
|
|
45
|
-
"@storybook/codemod": "0.0.0-pr-
|
|
45
|
+
"@storybook/codemod": "0.0.0-pr-29434-sha-c02fe507",
|
|
46
46
|
"@types/semver": "^7.3.4",
|
|
47
47
|
"commander": "^12.1.0",
|
|
48
|
-
"create-storybook": "0.0.0-pr-
|
|
48
|
+
"create-storybook": "0.0.0-pr-29434-sha-c02fe507",
|
|
49
49
|
"cross-spawn": "^7.0.3",
|
|
50
50
|
"envinfo": "^7.7.3",
|
|
51
51
|
"fd-package-json": "^1.2.0",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"leven": "^3.1.0",
|
|
58
58
|
"prompts": "^2.4.0",
|
|
59
59
|
"semver": "^7.3.7",
|
|
60
|
-
"storybook": "0.0.0-pr-
|
|
60
|
+
"storybook": "0.0.0-pr-29434-sha-c02fe507",
|
|
61
61
|
"tiny-invariant": "^1.3.1",
|
|
62
62
|
"ts-dedent": "^2.0.0"
|
|
63
63
|
},
|