From 728121895aa7b15da771a39ad78d2239ca09d4b3 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 14 Jul 2023 17:07:34 +0200 Subject: [PATCH 01/15] Improve support of monorepositories --- code/lib/cli/package.json | 1 + code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../cli/src/automigrate/fixes/wrap-require.ts | 85 +++++++++++++++++++ .../src/automigrate/helpers/mainConfigFile.ts | 2 +- code/lib/cli/src/generators/baseGenerator.ts | 18 ++-- .../js-package-manager/JsPackageManager.ts | 47 +++++++++- code/lib/csf-tools/src/ConfigFile.test.ts | 70 +++++++++++++++ code/lib/csf-tools/src/ConfigFile.ts | 83 ++++++++++++++++++ code/lib/csf-tools/src/babelParse.ts | 10 +++ code/yarn.lock | 1 + 10 files changed, 310 insertions(+), 9 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/wrap-require.ts diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 170c9476b708..17e21c01d851 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -56,6 +56,7 @@ "dependencies": { "@babel/core": "^7.22.0", "@babel/preset-env": "^7.22.0", + "@babel/types": "^7.22.5", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "7.1.0-rc.2", "@storybook/core-common": "7.1.0-rc.2", diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 4de0e7d63689..2becfe0b156a 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -18,6 +18,7 @@ import { missingBabelRc } from './missing-babelrc'; import { angularBuilders } from './angular-builders'; import { incompatibleAddons } from './incompatible-addons'; import { angularBuildersMultiproject } from './angular-builders-multiproject'; +import { wrapRequire } from './wrap-require'; export * from '../types'; @@ -40,6 +41,7 @@ export const allFixes: Fix[] = [ missingBabelRc, angularBuildersMultiproject, angularBuilders, + wrapRequire, ]; export const initFixes: Fix[] = [missingBabelRc, eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts new file mode 100644 index 000000000000..ca2cab83ff35 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts @@ -0,0 +1,85 @@ +/* eslint-disable no-param-reassign */ +import chalk from 'chalk'; +import { dedent } from 'ts-dedent'; +import * as t from '@babel/types'; +import type { Fix } from '../types'; +import { detectPnp } from '../../detect'; +import { updateMainConfig } from '../helpers/mainConfigFile'; + +interface WrapRequireRunOptions { + storybookVersion: string; +} + +export const wrapRequire: Fix = { + id: 'wrap-require', + + async check({ packageManager, storybookVersion }) { + const isStorybookInMonorepo = await packageManager.isStorybookInMonorepo(); + const isPnp = await detectPnp(); + + if (!isStorybookInMonorepo && !isPnp) { + return null; + } + + return { storybookVersion }; + }, + + prompt({ storybookVersion }) { + const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`); + + return dedent`We've have detected, that you're using ${sbFormatted} in a monorepo or with PnP enabled. + We will apply some tweaks in your main config file to make it work in this special environment.`; + }, + + async run({ dryRun, mainConfigPath }) { + updateMainConfig({ dryRun, mainConfigPath }, (mainConfig) => { + const frameworkNode = mainConfig.getFieldNode(['framework']); + const builderNode = mainConfig.getFieldNode(['core', 'builder']); + const addons = mainConfig.getFieldNode(['addons']); + + const getRequireWrapperAsCallExpression = (value: string) => { + // callExpression for "dirname(require.resolve(join(value, 'package.json')))"" + return t.callExpression(t.identifier('dirname'), [ + t.callExpression(t.memberExpression(t.identifier('require'), t.identifier('resolve')), [ + t.callExpression(t.identifier('join'), [ + t.stringLiteral(value), + t.stringLiteral('package.json'), + ]), + ]), + ]); + }; + + const wrapValueWithRequireWrapper = (node: t.Node) => { + if (t.isStringLiteral(node)) { + // value will be converted from StringLiteral to CallExpression. + node.value = getRequireWrapperAsCallExpression(node.value) as any; + } else if (t.isObjectExpression(node)) { + const nameProperty = node.properties.find( + (property) => + t.isObjectProperty(property) && + t.isIdentifier(property.key) && + property.key.name === 'name' + ) as t.ObjectProperty; + + if (nameProperty && t.isStringLiteral(nameProperty.value)) { + nameProperty.value = getRequireWrapperAsCallExpression(nameProperty.value.value); + } + } + }; + + if (frameworkNode) { + wrapValueWithRequireWrapper(frameworkNode); + } + + if (builderNode) { + wrapValueWithRequireWrapper(builderNode); + } + + if (addons && t.isArrayExpression(addons)) { + addons.elements.forEach(wrapValueWithRequireWrapper); + } + + mainConfig.setImport(['dirname, join'], 'path'); + }); + }, +}; diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts index d1ccbff10d32..b5325df31ac2 100644 --- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts +++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts @@ -133,7 +133,7 @@ export type GetStorybookData = typeof getStorybookData; */ export const updateMainConfig = async ( { mainConfigPath, dryRun }: { mainConfigPath: string; dryRun: boolean }, - callback: (main: ConfigFile) => Promise + callback: (main: ConfigFile) => Promise | void ) => { try { const main = await readConfig(mainConfigPath); diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 03c667e9dac2..b8f61801798f 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -106,7 +106,8 @@ const getFrameworkDetails = ( renderer: SupportedRenderers, builder: Builder, pnp: boolean, - framework?: SupportedFrameworks + framework?: SupportedFrameworks, + isStorybookInMonorepository?: boolean ): { type: 'framework' | 'renderer'; packages: string[]; @@ -115,15 +116,18 @@ const getFrameworkDetails = ( renderer?: string; rendererId: SupportedRenderers; } => { + const applyRequireWrapper = pnp || isStorybookInMonorepository; const frameworkPackage = getFrameworkPackage(framework, renderer, builder); - const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage; + const frameworkPackagePath = applyRequireWrapper + ? wrapForPnp(frameworkPackage) + : frameworkPackage; const rendererPackage = getRendererPackage(framework, renderer); - const rendererPackagePath = pnp ? wrapForPnp(rendererPackage) : rendererPackage; + const rendererPackagePath = applyRequireWrapper ? wrapForPnp(rendererPackage) : rendererPackage; const builderPackage = getBuilderDetails(builder); - const builderPackagePath = pnp ? wrapForPnp(builderPackage) : builderPackage; + const builderPackagePath = applyRequireWrapper ? wrapForPnp(builderPackage) : builderPackage; const isExternalFramework = !!getExternalFramework(frameworkPackage); const isKnownFramework = @@ -187,6 +191,8 @@ export async function baseGenerator( }; process.on('SIGINT', setNodeProcessExiting); + const isStorybookInMonorepository = packageManager.isStorybookInMonorepo(); + const stopIfExiting = async (callback: () => Promise) => { if (isNodeProcessExiting) { throw new HandledError('Canceled by the user'); @@ -226,7 +232,7 @@ export async function baseGenerator( rendererId, framework: frameworkInclude, builder: builderInclude, - } = getFrameworkDetails(renderer, builder, pnp, framework); + } = getFrameworkDetails(renderer, builder, pnp, framework, isStorybookInMonorepository); // added to main.js const addons = [ @@ -365,7 +371,7 @@ export async function baseGenerator( framework: { name: frameworkInclude, options: options.framework || {} }, storybookConfigFolder, docs: { autodocs: 'tag' }, - addons: pnp ? addons.map(wrapForPnp) : addons, + addons: pnp || isStorybookInMonorepository ? addons.map(wrapForPnp) : addons, extensions, language, ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index aea7bf07f17f..0c8ba424a1d8 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -3,10 +3,10 @@ import { gt, satisfies } from 'semver'; import type { CommonOptions } from 'execa'; import { command as execaCommand, sync as execaCommandSync } from 'execa'; import path from 'path'; -import fs from 'fs'; +import fs, { read } from 'fs'; import dedent from 'ts-dedent'; -import { readFile, writeFile } from 'fs-extra'; +import { readFile, readFileSync, writeFile } from 'fs-extra'; import { commandLog } from '../helpers'; import type { PackageJson, PackageJsonWithDepsAndDevDeps } from './PackageJson'; import storybookPackagesVersions from '../versions'; @@ -76,6 +76,49 @@ export abstract class JsPackageManager { this.cwd = options?.cwd || process.cwd(); } + /** Detect whether Storybook gets initialized in a monorepository/workspace environment + * The cwd doesn't have to be the root of the monorepo, it can be a subdirectory + * @returns true, if Storybook is initialized inside a monorepository/workspace + */ + public isStorybookInMonorepo() { + let cwd = process.cwd(); + + // eslint-disable-next-line no-constant-condition + while (true) { + try { + const turboJsonPath = `${cwd}/turbo.json`; + if (fs.existsSync(turboJsonPath)) { + return true; + } + + const packageJsonPath = require.resolve(`${cwd}/package.json`); + + // read packagejson with readFileSync + const packageJsonFile = readFileSync(packageJsonPath, 'utf8'); + const packageJson = JSON.parse(packageJsonFile) as PackageJsonWithDepsAndDevDeps; + + if (packageJson.workspaces) { + return true; + } + } catch (err) { + // Package.json not found or invalid in current directory + } + + // Move up to the parent directory + const parentDir = path.dirname(cwd); + + // Check if we have reached the root of the filesystem + if (parentDir === cwd) { + break; + } + + // Update cwd to the parent directory + cwd = parentDir; + } + + return false; + } + /** * Install dependencies listed in `package.json` */ diff --git a/code/lib/csf-tools/src/ConfigFile.test.ts b/code/lib/csf-tools/src/ConfigFile.test.ts index 86b6806638da..e0820ca0a85c 100644 --- a/code/lib/csf-tools/src/ConfigFile.test.ts +++ b/code/lib/csf-tools/src/ConfigFile.test.ts @@ -2,6 +2,7 @@ import { dedent } from 'ts-dedent'; import { formatConfig, loadConfig } from './ConfigFile'; +import { babelPrint } from './babelParse'; expect.addSnapshotSerializer({ print: (val: any) => val, @@ -1049,4 +1050,73 @@ describe('ConfigFile', () => { expect(config.getNamesFromPath(['addons'])).toBeUndefined(); }); }); + + describe('setImport', () => { + it(`supports setting a default import for a field that does not exist`, () => { + const source = dedent` + const config: StorybookConfig = { }; + export default config; + `; + const config = loadConfig(source).parse(); + config.setImport('path', 'path'); + // eslint-disable-next-line no-underscore-dangle + const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` + import path from 'path'; + const config: StorybookConfig = { }; + export default config; + `); + }); + + it(`supports setting a default import for a field that does exist`, () => { + const source = dedent` + const config: StorybookConfig = { }; + export default config; + `; + const config = loadConfig(source).parse(); + config.setImport('path', 'path'); + // eslint-disable-next-line no-underscore-dangle + const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` + import path from 'path'; + const config: StorybookConfig = { }; + export default config; + `); + }); + + it(`supports setting a named import for a field that does not exist`, () => { + const source = dedent` + const config: StorybookConfig = { }; + export default config; + `; + const config = loadConfig(source).parse(); + config.setImport(['dirname'], 'path'); + // eslint-disable-next-line no-underscore-dangle + const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` + import { dirname } from 'path'; + const config: StorybookConfig = { }; + export default config; + `); + }); + + it(`supports setting a named import for a filed where the source already exists`, () => { + const source = dedent` + import { dirname } from 'path'; + + const config: StorybookConfig = { }; + export default config; + `; + const config = loadConfig(source).parse(); + config.setImport(['dirname'], 'path'); + // eslint-disable-next-line no-underscore-dangle + const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` + import { dirname } from 'path'; + + const config: StorybookConfig = { }; + export default config; + `); + }); + }); }); diff --git a/code/lib/csf-tools/src/ConfigFile.ts b/code/lib/csf-tools/src/ConfigFile.ts index 4f0db3e0d74f..0452b66620d7 100644 --- a/code/lib/csf-tools/src/ConfigFile.ts +++ b/code/lib/csf-tools/src/ConfigFile.ts @@ -514,6 +514,89 @@ export class ConfigFile { } this.setFieldNode(path, valueNode); } + + /** + * Set import specifiers for a given import statement. + * @description Does not support setting type imports (yet) + * @param importSpecifiers - The import specifiers to set. If a string is passed in, a default import will be set. Otherwise, an array of named imports will be set + * @param fromImport - The module to import from + * @example + * // import { foo } from 'bar'; + * setImport(['foo'], 'bar'); + * + * // import foo from 'bar'; + * setImport('foo', 'bar'); + * + */ + setImport(importSpecifier: string[] | string, fromImport: string) { + const getNewImportSpecifier = (specifier: string) => + t.importSpecifier(t.identifier(specifier), t.identifier(specifier)); + + /** + * Returns true, when the given import declaration has the given import specifier + * @example + * // import { foo } from 'bar'; + * hasImportSpecifier(declaration, 'foo'); + */ + const hasImportSpecifier = (declaration: t.ImportDeclaration, name: string) => + declaration.specifiers.find( + (specifier) => + t.isImportSpecifier(specifier) && + t.isIdentifier(specifier.imported) && + specifier.imported.name === name + ); + + /** + * Returns true, when the given import declaration has the given default import specifier + * @example + * // import foo from 'bar'; + * hasImportSpecifier(declaration, 'foo'); + */ + const hasDefaultImportSpecifier = (declaration: t.ImportDeclaration, name: string) => + declaration.specifiers.find((specifier) => t.isImportDefaultSpecifier(specifier)); + + const importDeclaration = this._ast.program.body.find( + (node) => t.isImportDeclaration(node) && node.source.value === fromImport + ) as t.ImportDeclaration | undefined; + + // if the import specifier is an string, we're dealing with default imports + if (typeof importSpecifier === 'string') { + // If the import declaration with the given source exists + if (importDeclaration) { + if (!hasDefaultImportSpecifier(importDeclaration, importSpecifier)) { + // If the import declaration hasn't a default specifier, we add it + importDeclaration.specifiers.push( + t.importDefaultSpecifier(t.identifier(importSpecifier)) + ); + } + // If the import declaration with the given source doesn't exist + } else { + // Add the import declaration to the top of the file + this._ast.program.body.unshift( + t.importDeclaration( + [t.importDefaultSpecifier(t.identifier(importSpecifier))], + t.stringLiteral(fromImport) + ) + ); + } + // if the import specifier is an array, we're dealing with named imports + } else if (importDeclaration) { + importSpecifier.forEach((specifier) => { + if (!hasImportSpecifier(importDeclaration, specifier)) { + importDeclaration.specifiers.push(getNewImportSpecifier(specifier)); + } + }); + } else { + this._ast.program.body.unshift( + t.importDeclaration( + importSpecifier.map((specifier) => + t.importSpecifier(t.identifier(specifier), t.identifier(specifier)) + ), + t.stringLiteral(fromImport) + ) + ); + } + } } export const loadConfig = (code: string, fileName?: string) => { diff --git a/code/lib/csf-tools/src/babelParse.ts b/code/lib/csf-tools/src/babelParse.ts index 97c292ab21ca..43f49d4c166a 100644 --- a/code/lib/csf-tools/src/babelParse.ts +++ b/code/lib/csf-tools/src/babelParse.ts @@ -36,6 +36,16 @@ export const babelParse = (code: string) => { }); }; +export const babelPrint = (ast: recast.types.ASTNode) => { + return recast.print(ast, { + quote: 'single', + trailingComma: true, + tabWidth: 2, + wrapColumn: 80, + arrowParensAlways: true, + }).code; +}; + export const babelParseExpression = (code: string) => { return babelParser.parseExpression(code, parserOptions); }; diff --git a/code/yarn.lock b/code/yarn.lock index 485b4d4935fe..c71c9ee8ced0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6038,6 +6038,7 @@ __metadata: dependencies: "@babel/core": ^7.22.0 "@babel/preset-env": ^7.22.0 + "@babel/types": ^7.22.5 "@ndelangen/get-tarball": ^3.0.7 "@storybook/client-api": 7.1.0-rc.2 "@storybook/codemod": 7.1.0-rc.2 From 37f468e9b0667e3bd984d8ac500bc4fd414e898e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 17 Jul 2023 09:57:56 +0200 Subject: [PATCH 02/15] Improve wrap-require automigration to only trigger prompt if necessary --- .../cli/src/automigrate/fixes/wrap-require.ts | 107 ++++++++++++------ .../js-package-manager/JsPackageManager.ts | 4 +- 2 files changed, 76 insertions(+), 35 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts index ca2cab83ff35..3e11e8af7576 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts @@ -2,41 +2,94 @@ import chalk from 'chalk'; import { dedent } from 'ts-dedent'; import * as t from '@babel/types'; +import type { ConfigFile } from '@storybook/csf-tools'; +import { readConfig } from '@storybook/csf-tools'; import type { Fix } from '../types'; import { detectPnp } from '../../detect'; import { updateMainConfig } from '../helpers/mainConfigFile'; interface WrapRequireRunOptions { storybookVersion: string; + isStorybookInMonorepo: boolean; + isPnp: boolean; } +/** + * Check if the node needs to be wrapped with require wrapper. + */ +const isRequireWrapperNecessary = ( + node: t.Node, + cb: (node: t.StringLiteral | t.ObjectProperty) => void = () => {} +) => { + if (t.isStringLiteral(node)) { + // value will be converted from StringLiteral to CallExpression. + cb(node); + return true; + } + + if (t.isObjectExpression(node)) { + const nameProperty = node.properties.find( + (property) => + t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === 'name' + ) as t.ObjectProperty; + + if (nameProperty && t.isStringLiteral(nameProperty.value)) { + cb(nameProperty); + return true; + } + } + + return false; +}; + +/** + * Get all fields that need to be wrapped with require wrapper. + * @returns Array of fields that need to be wrapped with require wrapper. + */ +const getFieldsForRequireWrapper = (config: ConfigFile) => { + const frameworkNode = config.getFieldNode(['framework']); + const builderNode = config.getFieldNode(['core', 'builder']); + const addons = config.getFieldNode(['addons']); + + const fieldsWithRequireWrapper = [ + ...(frameworkNode ? [frameworkNode] : []), + ...(builderNode ? [builderNode] : []), + ...(addons && t.isArrayExpression(addons) ? addons.elements : []), + ]; + + return fieldsWithRequireWrapper; +}; + export const wrapRequire: Fix = { id: 'wrap-require', - async check({ packageManager, storybookVersion }) { + async check({ packageManager, storybookVersion, mainConfigPath }) { const isStorybookInMonorepo = await packageManager.isStorybookInMonorepo(); const isPnp = await detectPnp(); + const config = await readConfig(mainConfigPath); + if (!isStorybookInMonorepo && !isPnp) { return null; } - return { storybookVersion }; + if (!getFieldsForRequireWrapper(config).some((node) => isRequireWrapperNecessary(node))) { + return null; + } + + return { storybookVersion, isStorybookInMonorepo, isPnp }; }, - prompt({ storybookVersion }) { + prompt({ storybookVersion, isStorybookInMonorepo }) { const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`); - return dedent`We've have detected, that you're using ${sbFormatted} in a monorepo or with PnP enabled. - We will apply some tweaks in your main config file to make it work in this special environment.`; + return dedent`We have detected that you're using ${sbFormatted} in a ${ + isStorybookInMonorepo ? 'monorepo' : 'PnP' + } project. We will apply some tweaks in your main config file to make it work in this special environment.`; }, async run({ dryRun, mainConfigPath }) { updateMainConfig({ dryRun, mainConfigPath }, (mainConfig) => { - const frameworkNode = mainConfig.getFieldNode(['framework']); - const builderNode = mainConfig.getFieldNode(['core', 'builder']); - const addons = mainConfig.getFieldNode(['addons']); - const getRequireWrapperAsCallExpression = (value: string) => { // callExpression for "dirname(require.resolve(join(value, 'package.json')))"" return t.callExpression(t.identifier('dirname'), [ @@ -50,34 +103,20 @@ export const wrapRequire: Fix = { }; const wrapValueWithRequireWrapper = (node: t.Node) => { - if (t.isStringLiteral(node)) { - // value will be converted from StringLiteral to CallExpression. - node.value = getRequireWrapperAsCallExpression(node.value) as any; - } else if (t.isObjectExpression(node)) { - const nameProperty = node.properties.find( - (property) => - t.isObjectProperty(property) && - t.isIdentifier(property.key) && - property.key.name === 'name' - ) as t.ObjectProperty; - - if (nameProperty && t.isStringLiteral(nameProperty.value)) { - nameProperty.value = getRequireWrapperAsCallExpression(nameProperty.value.value); + isRequireWrapperNecessary(node, (n) => { + if (t.isStringLiteral(n)) { + n.value = getRequireWrapperAsCallExpression(n.value) as any; } - } - }; - - if (frameworkNode) { - wrapValueWithRequireWrapper(frameworkNode); - } - if (builderNode) { - wrapValueWithRequireWrapper(builderNode); - } + if (t.isObjectProperty(n) && t.isStringLiteral(n.value)) { + n.value = getRequireWrapperAsCallExpression(n.value.value) as any; + } + }); + }; - if (addons && t.isArrayExpression(addons)) { - addons.elements.forEach(wrapValueWithRequireWrapper); - } + getFieldsForRequireWrapper(mainConfig).forEach((node) => { + wrapValueWithRequireWrapper(node); + }); mainConfig.setImport(['dirname, join'], 'path'); }); diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index 0c8ba424a1d8..adc8dc0fbd5b 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -87,7 +87,9 @@ export abstract class JsPackageManager { while (true) { try { const turboJsonPath = `${cwd}/turbo.json`; - if (fs.existsSync(turboJsonPath)) { + const rushJsonPath = `${cwd}/rush.json`; + + if (fs.existsSync(turboJsonPath) || fs.existsSync(rushJsonPath)) { return true; } From 73a8d242493219c0b263927fd957e16f1f7f8647 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 17 Jul 2023 11:15:04 +0200 Subject: [PATCH 03/15] Upgrade babel dependencies --- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 16 +- .../web-components-webpack5/package.json | 2 +- code/lib/cli/package.json | 4 +- code/lib/codemod/package.json | 6 +- code/lib/csf-tools/package.json | 8 +- code/lib/docs-tools/package.json | 2 +- code/package.json | 10 +- code/presets/preact-webpack/package.json | 4 +- code/presets/react-webpack/package.json | 4 +- .../web-components-webpack/package.json | 2 +- code/renderers/react/package.json | 2 +- code/yarn.lock | 472 ++++++++++++++++-- 13 files changed, 460 insertions(+), 74 deletions(-) diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 20b7a94f5739..206324763411 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -55,7 +55,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.22.0", + "@babel/core": "^7.22.9", "@storybook/addons": "7.1.0-rc.2", "@storybook/api": "7.1.0-rc.2", "@storybook/channel-postmessage": "7.1.0-rc.2", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 25e1ab0d5efd..6d5935ca6c4e 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -64,12 +64,12 @@ "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-syntax-bigint": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-import-assertions": "^7.20.0", - "@babel/plugin-transform-runtime": "^7.22.0", - "@babel/preset-env": "^7.22.0", - "@babel/preset-react": "^7.22.0", - "@babel/preset-typescript": "^7.21.0", - "@babel/runtime": "^7.22.0", + "@babel/plugin-syntax-import-assertions": "^7.22.5", + "@babel/plugin-transform-runtime": "^7.22.9", + "@babel/preset-env": "^7.22.9", + "@babel/preset-react": "^7.22.5", + "@babel/preset-typescript": "^7.22.5", + "@babel/runtime": "^7.22.6", "@storybook/addon-actions": "7.1.0-rc.2", "@storybook/builder-webpack5": "7.1.0-rc.2", "@storybook/core-common": "7.1.0-rc.2", @@ -97,8 +97,8 @@ "tsconfig-paths-webpack-plugin": "^4.0.1" }, "devDependencies": { - "@babel/core": "^7.22.0", - "@babel/types": "^7.22.0", + "@babel/core": "^7.22.9", + "@babel/types": "^7.22.5", "@types/babel__core": "^7", "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index c6e782bc6e36..8c86883e4909 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -50,7 +50,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/preset-env": "^7.22.0", + "@babel/preset-env": "^7.22.9", "@storybook/builder-webpack5": "7.1.0-rc.2", "@storybook/core-common": "7.1.0-rc.2", "@storybook/preset-web-components-webpack": "7.1.0-rc.2", diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 17e21c01d851..ae632844827a 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -54,8 +54,8 @@ "test": "jest test/**/*.test.js" }, "dependencies": { - "@babel/core": "^7.22.0", - "@babel/preset-env": "^7.22.0", + "@babel/core": "^7.22.9", + "@babel/preset-env": "^7.22.9", "@babel/types": "^7.22.5", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "7.1.0-rc.2", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 3cb82631d8a3..f3b9c4b84999 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -45,9 +45,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.22.0", - "@babel/preset-env": "^7.22.0", - "@babel/types": "^7.22.0", + "@babel/core": "^7.22.9", + "@babel/preset-env": "^7.22.9", + "@babel/types": "^7.22.5", "@storybook/csf": "^0.1.0", "@storybook/csf-tools": "7.1.0-rc.2", "@storybook/node-logger": "7.1.0-rc.2", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 2e4a8064d047..7a8d0c78b7f7 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -41,10 +41,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/generator": "^7.22.0", - "@babel/parser": "^7.22.0", - "@babel/traverse": "^7.22.0", - "@babel/types": "^7.22.0", + "@babel/generator": "^7.22.9", + "@babel/parser": "^7.22.7", + "@babel/traverse": "^7.22.8", + "@babel/types": "^7.22.5", "@storybook/csf": "^0.1.0", "@storybook/types": "7.1.0-rc.2", "fs-extra": "^11.1.0", diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index c1adc58ed8da..5b5f6a492b80 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -51,7 +51,7 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@babel/core": "^7.22.0", + "@babel/core": "^7.22.9", "jest-specific-snapshot": "^8.0.0", "require-from-string": "^2.0.2", "typescript": "~4.9.3" diff --git a/code/package.json b/code/package.json index 441d116b06b2..c74637a4e773 100644 --- a/code/package.json +++ b/code/package.json @@ -91,11 +91,11 @@ "type-fest": "^3.11.0" }, "dependencies": { - "@babel/core": "^7.22.0", - "@babel/preset-env": "^7.22.0", - "@babel/preset-react": "^7.22.0", - "@babel/preset-typescript": "^7.21.0", - "@babel/runtime": "^7.20.1", + "@babel/core": "^7.22.9", + "@babel/preset-env": "^7.22.9", + "@babel/preset-react": "^7.22.5", + "@babel/preset-typescript": "^7.22.5", + "@babel/runtime": "^7.22.6", "@emotion/jest": "^11.10.0", "@jest/globals": "^29.3.1", "@nx/workspace": "16.2.1", diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index aa5fa151fd71..b8f1302e19ed 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -48,8 +48,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.21.0", - "@babel/preset-typescript": "^7.21.0", + "@babel/plugin-transform-react-jsx": "^7.22.5", + "@babel/preset-typescript": "^7.22.5", "@storybook/core-webpack": "7.1.0-rc.2", "@types/node": "^16.0.0" }, diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 1d0f39b8acc0..bd46f2d2f2f1 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -63,8 +63,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/preset-flow": "^7.21.0", - "@babel/preset-react": "^7.22.0", + "@babel/preset-flow": "^7.22.5", + "@babel/preset-react": "^7.22.5", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@storybook/core-webpack": "7.1.0-rc.2", "@storybook/docs-tools": "7.1.0-rc.2", diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index f2f287924e1c..f8f83b636c9a 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -53,7 +53,7 @@ "dependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", - "@babel/preset-env": "^7.22.0", + "@babel/preset-env": "^7.22.9", "@storybook/core-webpack": "7.1.0-rc.2", "@types/node": "^16.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 3bd14ce2f31e..2ed8bf2e7e87 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -75,7 +75,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@babel/core": "^7.22.0", + "@babel/core": "^7.22.9", "@types/util-deprecate": "^1.0.0", "expect-type": "^0.15.0", "jest-specific-snapshot": "^8.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index c71c9ee8ced0..f867e983dc3f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -372,6 +372,13 @@ __metadata: languageName: node linkType: hard +"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/compat-data@npm:7.22.9" + checksum: 1334264b041f8ad4e33036326970c9c26754eb5c04b3af6c223fe6da988cbb8a8542b5526f49ec1ac488210d2f710484a0e4bcd30256294ae3f261d0141febad + languageName: node + linkType: hard + "@babel/core@npm:7.21.4": version: 7.21.4 resolution: "@babel/core@npm:7.21.4" @@ -441,7 +448,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.0, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5, @babel/core@npm:^7.9.6": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5, @babel/core@npm:^7.9.6": version: 7.22.5 resolution: "@babel/core@npm:7.22.5" dependencies: @@ -464,6 +471,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/core@npm:7.22.9" + dependencies: + "@ampproject/remapping": ^2.2.0 + "@babel/code-frame": ^7.22.5 + "@babel/generator": ^7.22.9 + "@babel/helper-compilation-targets": ^7.22.9 + "@babel/helper-module-transforms": ^7.22.9 + "@babel/helpers": ^7.22.6 + "@babel/parser": ^7.22.7 + "@babel/template": ^7.22.5 + "@babel/traverse": ^7.22.8 + "@babel/types": ^7.22.5 + convert-source-map: ^1.7.0 + debug: ^4.1.0 + gensync: ^1.0.0-beta.2 + json5: ^2.2.2 + semver: ^6.3.1 + checksum: 4dffc8844bd8ab5c292e795f3eb0e636246177d28b75ec99f3349a29fe08a9f3e089fe68b857ed160f3312c035c8fb73fdc83b0c781f4629164e548a7d62a8c7 + languageName: node + linkType: hard + "@babel/generator@npm:7.21.4": version: 7.21.4 resolution: "@babel/generator@npm:7.21.4" @@ -476,7 +506,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.21.4, @babel/generator@npm:^7.21.5, @babel/generator@npm:^7.22.0, @babel/generator@npm:^7.22.5, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.21.4, @babel/generator@npm:^7.21.5, @babel/generator@npm:^7.22.5, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7": version: 7.22.5 resolution: "@babel/generator@npm:7.22.5" dependencies: @@ -488,6 +518,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.22.7, @babel/generator@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/generator@npm:7.22.9" + dependencies: + "@babel/types": ^7.22.5 + "@jridgewell/gen-mapping": ^0.3.2 + "@jridgewell/trace-mapping": ^0.3.17 + jsesc: ^2.5.1 + checksum: 6ef82c7f6dc8f749c0eb3a04fe35acab032a9221d82984e67cbbada449ca857dd981e08c129f9cf5d2f342ba00efcc683a99e46a470f233b0948edf197e35d26 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.18.6": version: 7.18.6 resolution: "@babel/helper-annotate-as-pure@npm:7.18.6" @@ -530,6 +572,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/helper-compilation-targets@npm:7.22.9" + dependencies: + "@babel/compat-data": ^7.22.9 + "@babel/helper-validator-option": ^7.22.5 + browserslist: ^4.21.9 + lru-cache: ^5.1.1 + semver: ^6.3.1 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 543b9a45800c1db2f91cc53462ed1799834a1259e498d3d91f45816ae79d19719ef957fa00b0f015d8b768eac09fd1f4f5f42f868c5a10f4389e3883a3f050f1 + languageName: node + linkType: hard + "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-create-class-features-plugin@npm:7.22.5" @@ -594,6 +651,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-define-polyfill-provider@npm:^0.4.1": + version: 0.4.1 + resolution: "@babel/helper-define-polyfill-provider@npm:0.4.1" + dependencies: + "@babel/helper-compilation-targets": ^7.22.6 + "@babel/helper-plugin-utils": ^7.22.5 + debug: ^4.1.1 + lodash.debounce: ^4.0.8 + resolve: ^1.14.2 + peerDependencies: + "@babel/core": ^7.4.0-0 + checksum: 402a8ca29354f01640d7226587576479507093437239ec1ba283c190986442a8759e5043859df9795c07c43d9b99d0685ee36ff77974c5be9a0cbec36a8283af + languageName: node + linkType: hard + "@babel/helper-environment-visitor@npm:^7.18.9, @babel/helper-environment-visitor@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-environment-visitor@npm:7.22.5" @@ -654,6 +726,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/helper-module-transforms@npm:7.22.9" + dependencies: + "@babel/helper-environment-visitor": ^7.22.5 + "@babel/helper-module-imports": ^7.22.5 + "@babel/helper-simple-access": ^7.22.5 + "@babel/helper-split-export-declaration": ^7.22.6 + "@babel/helper-validator-identifier": ^7.22.5 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 1844dc2c9049552d13d40385cb196704a754feab60ef8c370a5e1c431a4f64b0ddd7bb1dddaa5c98288cafd5c08cd4d8e6d5aba9a11e1133b8b999ab7c9defd1 + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-optimise-call-expression@npm:7.22.5" @@ -734,6 +821,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-split-export-declaration@npm:^7.22.6": + version: 7.22.6 + resolution: "@babel/helper-split-export-declaration@npm:7.22.6" + dependencies: + "@babel/types": ^7.22.5 + checksum: d83e4b623eaa9622c267d3c83583b72f3aac567dc393dda18e559d79187961cb29ae9c57b2664137fc3d19508370b12ec6a81d28af73a50e0846819cb21c6e44 + languageName: node + linkType: hard + "@babel/helper-string-parser@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-string-parser@npm:7.22.5" @@ -778,6 +874,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.22.6": + version: 7.22.6 + resolution: "@babel/helpers@npm:7.22.6" + dependencies: + "@babel/template": ^7.22.5 + "@babel/traverse": ^7.22.6 + "@babel/types": ^7.22.5 + checksum: 8c03c19802d0fcc78d00d1eaa9ddab28f97f0c78a5d570762800e86f08c6f41750ad61e20cdede977a56173edf85e7175f1fd804eb6ef817280f064d3a3ca514 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.22.5": version: 7.22.5 resolution: "@babel/highlight@npm:7.22.5" @@ -789,7 +896,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.3, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.21.8, @babel/parser@npm:^7.22.0, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6": +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.3, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.21.8, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6": version: 7.22.5 resolution: "@babel/parser@npm:7.22.5" bin: @@ -798,6 +905,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.22.7": + version: 7.22.7 + resolution: "@babel/parser@npm:7.22.7" + bin: + parser: ./bin/babel-parser.js + checksum: d2bdf212644c39de58f1216540ec5aca4a05ffbec07c904eaaef8575dd9546b55345b91dcc0d306be4adbb717401ce321027bac7e2f7babfd66794c96243bb79 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.5" @@ -1314,6 +1430,20 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-async-generator-functions@npm:^7.22.7": + version: 7.22.7 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.22.7" + dependencies: + "@babel/helper-environment-visitor": ^7.22.5 + "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-remap-async-to-generator": ^7.22.5 + "@babel/plugin-syntax-async-generators": ^7.8.4 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: b9712f47de65d8409625de5cfa4bda6984f9e7065f6170c34b3d11974879276ffa61675c8118de5de7746f5de378c5dfc21efc706664c6f0c652fb58949b53f0 + languageName: node + linkType: hard + "@babel/plugin-transform-async-to-generator@npm:7.20.7": version: 7.20.7 resolution: "@babel/plugin-transform-async-to-generator@npm:7.20.7" @@ -1406,6 +1536,25 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-classes@npm:^7.22.6": + version: 7.22.6 + resolution: "@babel/plugin-transform-classes@npm:7.22.6" + dependencies: + "@babel/helper-annotate-as-pure": ^7.22.5 + "@babel/helper-compilation-targets": ^7.22.6 + "@babel/helper-environment-visitor": ^7.22.5 + "@babel/helper-function-name": ^7.22.5 + "@babel/helper-optimise-call-expression": ^7.22.5 + "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-replace-supers": ^7.22.5 + "@babel/helper-split-export-declaration": ^7.22.6 + globals: ^11.1.0 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 915f1c0d3a0446a3ebfb099c4a5e714896f773322432b91572e6739d7af82e9743ae2874eb596ef1d26ed94472385eb814e1f33b033fc708155576d566e1f5ff + languageName: node + linkType: hard + "@babel/plugin-transform-computed-properties@npm:^7.20.7, @babel/plugin-transform-computed-properties@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-computed-properties@npm:7.22.5" @@ -1731,6 +1880,19 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-optional-chaining@npm:^7.22.6": + version: 7.22.6 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.22.6" + dependencies: + "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 + "@babel/plugin-syntax-optional-chaining": ^7.8.3 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: bb8188df57ab46c4c708eea17eddd20238ef9106c0e82016b1eb9565f073746e385e0be0b6ee25148507f3dc849311147a43323109c97106f15e0e7ff3220fdf + languageName: node + linkType: hard + "@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.21.3, @babel/plugin-transform-parameters@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-parameters@npm:7.22.5" @@ -1823,7 +1985,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.14.9, @babel/plugin-transform-react-jsx@npm:^7.19.0, @babel/plugin-transform-react-jsx@npm:^7.21.0, @babel/plugin-transform-react-jsx@npm:^7.22.5": +"@babel/plugin-transform-react-jsx@npm:^7.14.9, @babel/plugin-transform-react-jsx@npm:^7.19.0, @babel/plugin-transform-react-jsx@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx@npm:7.22.5" dependencies: @@ -1889,7 +2051,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.22.0": +"@babel/plugin-transform-runtime@npm:^7.13.9": version: 7.22.5 resolution: "@babel/plugin-transform-runtime@npm:7.22.5" dependencies: @@ -1905,6 +2067,22 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-runtime@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/plugin-transform-runtime@npm:7.22.9" + dependencies: + "@babel/helper-module-imports": ^7.22.5 + "@babel/helper-plugin-utils": ^7.22.5 + babel-plugin-polyfill-corejs2: ^0.4.4 + babel-plugin-polyfill-corejs3: ^0.8.2 + babel-plugin-polyfill-regenerator: ^0.5.1 + semver: ^6.3.1 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 36a5c4a69ca709c6d74b35217b46d72c55a4447f7825a93cb628251b6736391d66d97635877ecb48ff1ddc4516e2e5b6e2e87999835c2c8e08b948eba5f9edfc + languageName: node + linkType: hard + "@babel/plugin-transform-shorthand-properties@npm:^7.18.6, @babel/plugin-transform-shorthand-properties@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-shorthand-properties@npm:7.22.5" @@ -2117,7 +2295,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.22.0": +"@babel/preset-env@npm:^7.16.5": version: 7.22.5 resolution: "@babel/preset-env@npm:7.22.5" dependencies: @@ -2207,7 +2385,97 @@ __metadata: languageName: node linkType: hard -"@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.21.0": +"@babel/preset-env@npm:^7.22.9": + version: 7.22.9 + resolution: "@babel/preset-env@npm:7.22.9" + dependencies: + "@babel/compat-data": ^7.22.9 + "@babel/helper-compilation-targets": ^7.22.9 + "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-validator-option": ^7.22.5 + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.22.5 + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.22.5 + "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2 + "@babel/plugin-syntax-async-generators": ^7.8.4 + "@babel/plugin-syntax-class-properties": ^7.12.13 + "@babel/plugin-syntax-class-static-block": ^7.14.5 + "@babel/plugin-syntax-dynamic-import": ^7.8.3 + "@babel/plugin-syntax-export-namespace-from": ^7.8.3 + "@babel/plugin-syntax-import-assertions": ^7.22.5 + "@babel/plugin-syntax-import-attributes": ^7.22.5 + "@babel/plugin-syntax-import-meta": ^7.10.4 + "@babel/plugin-syntax-json-strings": ^7.8.3 + "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4 + "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3 + "@babel/plugin-syntax-numeric-separator": ^7.10.4 + "@babel/plugin-syntax-object-rest-spread": ^7.8.3 + "@babel/plugin-syntax-optional-catch-binding": ^7.8.3 + "@babel/plugin-syntax-optional-chaining": ^7.8.3 + "@babel/plugin-syntax-private-property-in-object": ^7.14.5 + "@babel/plugin-syntax-top-level-await": ^7.14.5 + "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6 + "@babel/plugin-transform-arrow-functions": ^7.22.5 + "@babel/plugin-transform-async-generator-functions": ^7.22.7 + "@babel/plugin-transform-async-to-generator": ^7.22.5 + "@babel/plugin-transform-block-scoped-functions": ^7.22.5 + "@babel/plugin-transform-block-scoping": ^7.22.5 + "@babel/plugin-transform-class-properties": ^7.22.5 + "@babel/plugin-transform-class-static-block": ^7.22.5 + "@babel/plugin-transform-classes": ^7.22.6 + "@babel/plugin-transform-computed-properties": ^7.22.5 + "@babel/plugin-transform-destructuring": ^7.22.5 + "@babel/plugin-transform-dotall-regex": ^7.22.5 + "@babel/plugin-transform-duplicate-keys": ^7.22.5 + "@babel/plugin-transform-dynamic-import": ^7.22.5 + "@babel/plugin-transform-exponentiation-operator": ^7.22.5 + "@babel/plugin-transform-export-namespace-from": ^7.22.5 + "@babel/plugin-transform-for-of": ^7.22.5 + "@babel/plugin-transform-function-name": ^7.22.5 + "@babel/plugin-transform-json-strings": ^7.22.5 + "@babel/plugin-transform-literals": ^7.22.5 + "@babel/plugin-transform-logical-assignment-operators": ^7.22.5 + "@babel/plugin-transform-member-expression-literals": ^7.22.5 + "@babel/plugin-transform-modules-amd": ^7.22.5 + "@babel/plugin-transform-modules-commonjs": ^7.22.5 + "@babel/plugin-transform-modules-systemjs": ^7.22.5 + "@babel/plugin-transform-modules-umd": ^7.22.5 + "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.5 + "@babel/plugin-transform-new-target": ^7.22.5 + "@babel/plugin-transform-nullish-coalescing-operator": ^7.22.5 + "@babel/plugin-transform-numeric-separator": ^7.22.5 + "@babel/plugin-transform-object-rest-spread": ^7.22.5 + "@babel/plugin-transform-object-super": ^7.22.5 + "@babel/plugin-transform-optional-catch-binding": ^7.22.5 + "@babel/plugin-transform-optional-chaining": ^7.22.6 + "@babel/plugin-transform-parameters": ^7.22.5 + "@babel/plugin-transform-private-methods": ^7.22.5 + "@babel/plugin-transform-private-property-in-object": ^7.22.5 + "@babel/plugin-transform-property-literals": ^7.22.5 + "@babel/plugin-transform-regenerator": ^7.22.5 + "@babel/plugin-transform-reserved-words": ^7.22.5 + "@babel/plugin-transform-shorthand-properties": ^7.22.5 + "@babel/plugin-transform-spread": ^7.22.5 + "@babel/plugin-transform-sticky-regex": ^7.22.5 + "@babel/plugin-transform-template-literals": ^7.22.5 + "@babel/plugin-transform-typeof-symbol": ^7.22.5 + "@babel/plugin-transform-unicode-escapes": ^7.22.5 + "@babel/plugin-transform-unicode-property-regex": ^7.22.5 + "@babel/plugin-transform-unicode-regex": ^7.22.5 + "@babel/plugin-transform-unicode-sets-regex": ^7.22.5 + "@babel/preset-modules": ^0.1.5 + "@babel/types": ^7.22.5 + babel-plugin-polyfill-corejs2: ^0.4.4 + babel-plugin-polyfill-corejs3: ^0.8.2 + babel-plugin-polyfill-regenerator: ^0.5.1 + core-js-compat: ^3.31.0 + semver: ^6.3.1 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: fad75686dd55638be71657edbd428bb0266a3f34bc6e367bd55fbff911652c971fcea3e5c346288d4e0a15c81b732c4a2549fce97910b602e19170fe1ddf72d0 + languageName: node + linkType: hard + +"@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.5": version: 7.22.5 resolution: "@babel/preset-flow@npm:7.22.5" dependencies: @@ -2235,7 +2503,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-react@npm:^7.22.0": +"@babel/preset-react@npm:^7.22.5": version: 7.22.5 resolution: "@babel/preset-react@npm:7.22.5" dependencies: @@ -2251,7 +2519,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.21.0": +"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5": version: 7.22.5 resolution: "@babel/preset-typescript@npm:7.22.5" dependencies: @@ -2325,7 +2593,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.22.5 resolution: "@babel/runtime@npm:7.22.5" dependencies: @@ -2334,6 +2602,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.22.6": + version: 7.22.6 + resolution: "@babel/runtime@npm:7.22.6" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 5a273e7d66586582041c68332028db5376d754d483422541fdc904e10474a6f8aef14dd3a5aabcbcb6daea87b64531cc4be993d2943557ede4a2613f5328a981 + languageName: node + linkType: hard + "@babel/runtime@npm:~7.5.4": version: 7.5.5 resolution: "@babel/runtime@npm:7.5.5" @@ -2376,7 +2653,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.21.4, @babel/traverse@npm:^7.21.5, @babel/traverse@npm:^7.22.0, @babel/traverse@npm:^7.22.5, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6": +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.21.4, @babel/traverse@npm:^7.21.5, @babel/traverse@npm:^7.22.5, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6": version: 7.22.5 resolution: "@babel/traverse@npm:7.22.5" dependencies: @@ -2394,7 +2671,25 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.6, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6": +"@babel/traverse@npm:^7.22.6, @babel/traverse@npm:^7.22.8": + version: 7.22.8 + resolution: "@babel/traverse@npm:7.22.8" + dependencies: + "@babel/code-frame": ^7.22.5 + "@babel/generator": ^7.22.7 + "@babel/helper-environment-visitor": ^7.22.5 + "@babel/helper-function-name": ^7.22.5 + "@babel/helper-hoist-variables": ^7.22.5 + "@babel/helper-split-export-declaration": ^7.22.6 + "@babel/parser": ^7.22.7 + "@babel/types": ^7.22.5 + debug: ^4.1.0 + globals: ^11.1.0 + checksum: 839014824c210388ed46f92bf5265522bd5bbb4a9a03c700f9d79b151bdd0aa077c2f6448a0cef41132188cc2bc6d8cdcad98a297ba59983401e882bdc256b1f + languageName: node + linkType: hard + +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.6, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6": version: 7.22.5 resolution: "@babel/types@npm:7.22.5" dependencies: @@ -4060,6 +4355,15 @@ __metadata: languageName: node linkType: hard +"@nicolo-ribaudo/semver-v6@npm:^6.3.3": + version: 6.3.3 + resolution: "@nicolo-ribaudo/semver-v6@npm:6.3.3" + bin: + semver: bin/semver.js + checksum: 9ef70305fa9b03709805128611c0d95beec479cdd6f6b608386d6cee7a3d36f61e6f749378b60f1e5fca19fc58da7b06fccfe3540c0dbc40719731827d4eb1df + languageName: node + linkType: hard + "@nodelib/fs.scandir@npm:2.1.5": version: 2.1.5 resolution: "@nodelib/fs.scandir@npm:2.1.5" @@ -5935,7 +6239,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5" dependencies: - "@babel/core": ^7.22.0 + "@babel/core": ^7.22.9 "@storybook/addons": 7.1.0-rc.2 "@storybook/api": 7.1.0-rc.2 "@storybook/channel-postmessage": 7.1.0-rc.2 @@ -6036,8 +6340,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" dependencies: - "@babel/core": ^7.22.0 - "@babel/preset-env": ^7.22.0 + "@babel/core": ^7.22.9 + "@babel/preset-env": ^7.22.9 "@babel/types": ^7.22.5 "@ndelangen/get-tarball": ^3.0.7 "@storybook/client-api": 7.1.0-rc.2 @@ -6112,9 +6416,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" dependencies: - "@babel/core": ^7.22.0 - "@babel/preset-env": ^7.22.0 - "@babel/types": ^7.22.0 + "@babel/core": ^7.22.9 + "@babel/preset-env": ^7.22.9 + "@babel/types": ^7.22.5 "@storybook/csf": ^0.1.0 "@storybook/csf-tools": 7.1.0-rc.2 "@storybook/node-logger": 7.1.0-rc.2 @@ -6315,10 +6619,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/csf-tools@workspace:lib/csf-tools" dependencies: - "@babel/generator": ^7.22.0 - "@babel/parser": ^7.22.0 - "@babel/traverse": ^7.22.0 - "@babel/types": ^7.22.0 + "@babel/generator": ^7.22.9 + "@babel/parser": ^7.22.7 + "@babel/traverse": ^7.22.8 + "@babel/types": ^7.22.5 "@storybook/csf": ^0.1.0 "@storybook/types": 7.1.0-rc.2 "@types/fs-extra": ^11.0.1 @@ -6360,7 +6664,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/core": ^7.22.0 + "@babel/core": ^7.22.9 "@storybook/core-common": 7.1.0-rc.2 "@storybook/preview-api": 7.1.0-rc.2 "@storybook/types": 7.1.0-rc.2 @@ -6609,20 +6913,20 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/nextjs@workspace:frameworks/nextjs" dependencies: - "@babel/core": ^7.22.0 + "@babel/core": ^7.22.9 "@babel/plugin-proposal-class-properties": ^7.18.6 "@babel/plugin-proposal-export-namespace-from": ^7.18.9 "@babel/plugin-proposal-numeric-separator": ^7.18.6 "@babel/plugin-proposal-object-rest-spread": ^7.20.7 "@babel/plugin-syntax-bigint": ^7.8.3 "@babel/plugin-syntax-dynamic-import": ^7.8.3 - "@babel/plugin-syntax-import-assertions": ^7.20.0 - "@babel/plugin-transform-runtime": ^7.22.0 - "@babel/preset-env": ^7.22.0 - "@babel/preset-react": ^7.22.0 - "@babel/preset-typescript": ^7.21.0 - "@babel/runtime": ^7.22.0 - "@babel/types": ^7.22.0 + "@babel/plugin-syntax-import-assertions": ^7.22.5 + "@babel/plugin-transform-runtime": ^7.22.9 + "@babel/preset-env": ^7.22.9 + "@babel/preset-react": ^7.22.5 + "@babel/preset-typescript": ^7.22.5 + "@babel/runtime": ^7.22.6 + "@babel/types": ^7.22.5 "@storybook/addon-actions": 7.1.0-rc.2 "@storybook/builder-webpack5": 7.1.0-rc.2 "@storybook/core-common": 7.1.0-rc.2 @@ -6788,8 +7092,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack" dependencies: - "@babel/plugin-transform-react-jsx": ^7.21.0 - "@babel/preset-typescript": ^7.21.0 + "@babel/plugin-transform-react-jsx": ^7.22.5 + "@babel/preset-typescript": ^7.22.5 "@storybook/core-webpack": 7.1.0-rc.2 "@types/node": ^16.0.0 preact: ^10.5.13 @@ -6804,8 +7108,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" dependencies: - "@babel/preset-flow": ^7.21.0 - "@babel/preset-react": ^7.22.0 + "@babel/preset-flow": ^7.22.5 + "@babel/preset-react": ^7.22.5 "@pmmmwh/react-refresh-webpack-plugin": ^0.5.5 "@storybook/core-webpack": 7.1.0-rc.2 "@storybook/docs-tools": 7.1.0-rc.2 @@ -6924,7 +7228,7 @@ __metadata: dependencies: "@babel/plugin-syntax-dynamic-import": ^7.8.3 "@babel/plugin-syntax-import-meta": ^7.10.4 - "@babel/preset-env": ^7.22.0 + "@babel/preset-env": ^7.22.9 "@storybook/core-webpack": 7.1.0-rc.2 "@types/node": ^16.0.0 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 @@ -7062,7 +7366,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" dependencies: - "@babel/core": ^7.22.0 + "@babel/core": ^7.22.9 "@storybook/client-logger": 7.1.0-rc.2 "@storybook/core-client": 7.1.0-rc.2 "@storybook/docs-tools": 7.1.0-rc.2 @@ -7102,11 +7406,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." dependencies: - "@babel/core": ^7.22.0 - "@babel/preset-env": ^7.22.0 - "@babel/preset-react": ^7.22.0 - "@babel/preset-typescript": ^7.21.0 - "@babel/runtime": ^7.20.1 + "@babel/core": ^7.22.9 + "@babel/preset-env": ^7.22.9 + "@babel/preset-react": ^7.22.5 + "@babel/preset-typescript": ^7.22.5 + "@babel/runtime": ^7.22.6 "@emotion/jest": ^11.10.0 "@jest/globals": ^29.3.1 "@nx/workspace": 16.2.1 @@ -7676,7 +7980,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5" dependencies: - "@babel/preset-env": ^7.22.0 + "@babel/preset-env": ^7.22.9 "@storybook/builder-webpack5": 7.1.0-rc.2 "@storybook/core-common": 7.1.0-rc.2 "@storybook/preset-web-components-webpack": 7.1.0-rc.2 @@ -10933,6 +11237,19 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs2@npm:^0.4.4": + version: 0.4.4 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.4" + dependencies: + "@babel/compat-data": ^7.22.6 + "@babel/helper-define-polyfill-provider": ^0.4.1 + "@nicolo-ribaudo/semver-v6": ^6.3.3 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 4bb3056ae17002776e3003314068bdd7dd8e5d4b038ce1198db84346b953e73beb8d2b4445bff831c09ff217e533466eb28e771a80c3696decc2dae1347164e3 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs3@npm:^0.6.0": version: 0.6.0 resolution: "babel-plugin-polyfill-corejs3@npm:0.6.0" @@ -10957,6 +11274,18 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs3@npm:^0.8.2": + version: 0.8.2 + resolution: "babel-plugin-polyfill-corejs3@npm:0.8.2" + dependencies: + "@babel/helper-define-polyfill-provider": ^0.4.1 + core-js-compat: ^3.31.0 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: de094cc9d703a3bf6518f4312491b6f033f2db45791825499c905173b2d7d0f8ab9b1919a607eb76833907c6533a2106c951108da7689c0929354d38c661f346 + languageName: node + linkType: hard + "babel-plugin-polyfill-regenerator@npm:^0.4.1": version: 0.4.1 resolution: "babel-plugin-polyfill-regenerator@npm:0.4.1" @@ -10979,6 +11308,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-regenerator@npm:^0.5.1": + version: 0.5.1 + resolution: "babel-plugin-polyfill-regenerator@npm:0.5.1" + dependencies: + "@babel/helper-define-polyfill-provider": ^0.4.1 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 5ec9e2ab2f031028a36f8d611f3fc3bc8347e2842e4354a28ac303e81697968549ea0ebea79cf0c28658e1e09d3a55a2a2085bb5a53d00f28bd688daa301fd6b + languageName: node + linkType: hard + "babel-plugin-react-docgen@npm:^4.1.0, babel-plugin-react-docgen@npm:^4.2.1": version: 4.2.1 resolution: "babel-plugin-react-docgen@npm:4.2.1" @@ -11680,6 +12020,20 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.21.9": + version: 4.21.9 + resolution: "browserslist@npm:4.21.9" + dependencies: + caniuse-lite: ^1.0.30001503 + electron-to-chromium: ^1.4.431 + node-releases: ^2.0.12 + update-browserslist-db: ^1.0.11 + bin: + browserslist: cli.js + checksum: 903189787141f645f47ec46ec482dc85985d1297948062690dc2ea8480eb98fd6213507234eb17177825acaae49c53888445910f1af984abce5373fb65c270b8 + languageName: node + linkType: hard + "bs-logger@npm:0.x, bs-logger@npm:^0.2.6": version: 0.2.6 resolution: "bs-logger@npm:0.2.6" @@ -12015,6 +12369,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001503": + version: 1.0.30001516 + resolution: "caniuse-lite@npm:1.0.30001516" + checksum: 64ae815c5319c7054146d8c443a34edcfce766e97b9e24cec030d4ce787b114fa949dff047cc59883967fd275b41e3dfdbe87ff53c65f475b4a7e93fa3fdb59d + languageName: node + linkType: hard + "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -13059,6 +13420,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.31.0": + version: 3.31.1 + resolution: "core-js-compat@npm:3.31.1" + dependencies: + browserslist: ^4.21.9 + checksum: 2f05c5d5b04e8a69cf50f538ef3fb1932ab83bd7dc690c438c7b876049cb1515eb4ca9fa29400ed7cd5885f34c901bf6a26d9149dfff8665d8302cace7e96d72 + languageName: node + linkType: hard + "core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.30.2": version: 3.30.2 resolution: "core-js-pure@npm:3.30.2" @@ -14314,6 +14684,13 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.4.431": + version: 1.4.461 + resolution: "electron-to-chromium@npm:1.4.461" + checksum: 6da62826ceffffa604176d95330d1fdcf88abf9da68fc3c9f0f0788677d9015c36ea2c03737f067bbca024d7d8f97673c94854db70b1285be5e6d55745485e10 + languageName: node + linkType: hard + "elliptic@npm:^6.5.3": version: 6.5.4 resolution: "elliptic@npm:6.5.4" @@ -27498,6 +27875,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^6.3.1": + version: 6.3.1 + resolution: "semver@npm:6.3.1" + bin: + semver: bin/semver.js + checksum: e3d79b609071caa78bcb6ce2ad81c7966a46a7431d9d58b8800cfa9cb6a63699b3899a0e4bcce36167a284578212d9ae6942b6929ba4aa5015c079a67751d42d + languageName: node + linkType: hard + "semver@npm:~7.0.0": version: 7.0.0 resolution: "semver@npm:7.0.0" From 66f2f855cfa0e667e804515d32981d55b8a51856 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 18 Jul 2023 16:25:24 +0200 Subject: [PATCH 04/15] Improve automigration of wrap-for-pnp for corner cases --- .../__test__/main-config-with-wrappers.js | 21 +++ .../__test__/main-config-without-wrappers.js | 16 ++ .../automigrate/fixes/wrap-require-utils.ts | 171 ++++++++++++++++++ .../automigrate/fixes/wrap-require.test.ts | 75 ++++++++ .../cli/src/automigrate/fixes/wrap-require.ts | 106 +++-------- code/lib/csf-tools/src/ConfigFile.test.ts | 14 +- code/lib/csf-tools/src/ConfigFile.ts | 10 +- 7 files changed, 333 insertions(+), 80 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js create mode 100644 code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js create mode 100644 code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts create mode 100644 code/lib/cli/src/automigrate/fixes/wrap-require.test.ts diff --git a/code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js b/code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js new file mode 100644 index 000000000000..7e6280732df5 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js @@ -0,0 +1,21 @@ +import path from 'path'; + +const wrapForPnp = (packageName) => + path.dirname(require.resolve(path.join(packageName, 'package.json'))); + +const config = { + stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + wrapForPnp('@storybook/addon-links'), + wrapForPnp('@storybook/addon-essentials'), + wrapForPnp('@storybook/addon-interactions'), + ], + framework: { + name: wrapForPnp('@storybook/angular'), + options: {}, + }, + docs: { + autodocs: 'tag', + }, +}; +export default config; diff --git a/code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js b/code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js new file mode 100644 index 000000000000..0979ef60ff60 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js @@ -0,0 +1,16 @@ +const config = { + stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + ], + framework: { + name: '@storybook/angular', + options: {}, + }, + docs: { + autodocs: 'tag', + }, +}; +export default config; diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts new file mode 100644 index 000000000000..1985a66ca963 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts @@ -0,0 +1,171 @@ +/* eslint-disable no-param-reassign */ +import * as t from '@babel/types'; +import type { ConfigFile } from '@storybook/csf-tools'; + +const defaultRequireWrapperName = 'getAbsolutePath'; + +/** + * Checks if the following node declarations exists in the main config file. + * @example + * const = () => {}; + * function () {} + */ +function doesVariableOrFunctionDeclarationExist(node: t.Node, name: string) { + return ( + (t.isVariableDeclaration(node) && + node.declarations.length === 1 && + t.isVariableDeclarator(node.declarations[0]) && + t.isIdentifier(node.declarations[0].id) && + node.declarations[0].id?.name === name) || + (t.isFunctionDeclaration(node) && t.isIdentifier(node.id) && node.id.name === name) + ); +} + +/** + * Wrap a value with require wrapper. + * @example + * // Before + * { framework: 'react' } + * + * // After + * { framework: wrapForPnp('react') } + */ +function getReferenceToRequireWrapper(config: ConfigFile, value: string) { + return t.callExpression( + t.identifier(getRequireWrapperName(config) ?? defaultRequireWrapperName), + [t.stringLiteral(value)] + ); +} + +/** + * Returns the name of the require wrapper function if it exists in the main config file. + * @returns Name of the require wrapper function. + */ +export function getRequireWrapperName(config: ConfigFile) { + const declarationName = config.getBodyDeclarations().flatMap((node) => + // eslint-disable-next-line no-nested-ternary + doesVariableOrFunctionDeclarationExist(node, 'wrapForPnp') + ? ['wrapForPnp'] + : doesVariableOrFunctionDeclarationExist(node, defaultRequireWrapperName) + ? [defaultRequireWrapperName] + : [] + ); + + if (declarationName.length) { + return declarationName[0]; + } + + return null; +} + +/** + * Check if the node needs to be wrapped with require wrapper. + */ +export function isRequireWrapperNecessary( + node: t.Node, + cb: (node: t.StringLiteral | t.ObjectProperty | t.ArrayExpression) => void = () => {} +) { + if (t.isStringLiteral(node)) { + // value will be converted from StringLiteral to CallExpression. + cb(node); + return true; + } + + if (t.isObjectExpression(node)) { + const nameProperty = node.properties.find( + (property) => + t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === 'name' + ) as t.ObjectProperty; + + if (nameProperty && t.isStringLiteral(nameProperty.value)) { + cb(nameProperty); + return true; + } + } + + if ( + t.isArrayExpression(node) && + node.elements.some((element) => isRequireWrapperNecessary(element)) + ) { + cb(node); + return true; + } + + return false; +} + +/** + * Get all fields that need to be wrapped with require wrapper. + * @returns Array of fields that need to be wrapped with require wrapper. + */ +export function getFieldsForRequireWrapper(config: ConfigFile) { + const frameworkNode = config.getFieldNode(['framework']); + const builderNode = config.getFieldNode(['core', 'builder']); + const addons = config.getFieldNode(['addons']); + + const fieldsWithRequireWrapper = [ + ...(frameworkNode ? [frameworkNode] : []), + ...(builderNode ? [builderNode] : []), + ...(addons && t.isArrayExpression(addons) ? [addons] : []), + ]; + + return fieldsWithRequireWrapper; +} + +/** + * Returns AST for the following function + * @example + * function getAbsolutePath(value) { + * return dirname(require.resolve(join(value, 'package.json'))) + * } + */ +export function getRequireWrapperAsCallExpression( + isConfigTypescript: boolean +): t.FunctionDeclaration { + return { + ...t.functionDeclaration( + t.identifier(defaultRequireWrapperName), + [ + { + ...t.identifier('value'), + ...(isConfigTypescript + ? { typeAnnotation: t.tsTypeAnnotation(t.tSStringKeyword()) } + : {}), + }, + ], + t.blockStatement([ + t.returnStatement( + t.callExpression(t.identifier('dirname'), [ + t.callExpression(t.memberExpression(t.identifier('require'), t.identifier('resolve')), [ + t.callExpression(t.identifier('join'), [ + t.identifier('value'), + t.stringLiteral('package.json'), + ]), + ]), + ]) + ), + ]) + ), + ...(isConfigTypescript ? { returnType: t.tSTypeAnnotation(t.tsAnyKeyword()) } : {}), + }; +} + +export function wrapValueWithRequireWrapper(config: ConfigFile, node: t.Node) { + isRequireWrapperNecessary(node, (n) => { + if (t.isStringLiteral(n)) { + n.value = getReferenceToRequireWrapper(config, n.value) as any; + } + + if (t.isObjectProperty(n) && t.isStringLiteral(n.value)) { + n.value = getReferenceToRequireWrapper(config, n.value.value) as any; + } + + if (t.isArrayExpression(n)) { + n.elements.forEach((element, index, elements) => { + if (t.isStringLiteral(element)) { + elements[index] = getReferenceToRequireWrapper(config, element.value); + } + }); + } + }); +} diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts new file mode 100644 index 000000000000..67616c7a838a --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts @@ -0,0 +1,75 @@ +import { wrapRequire } from './wrap-require'; +import * as detect from '../../detect'; + +jest.mock('../../detect', () => ({ + ...jest.requireActual('../../detect'), + detectPnp: jest.fn(), +})); + +describe('wrapRequire', () => { + describe('check', () => { + it('should return null if not in a monorepo and pnp is not enabled', async () => { + (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(false); + + const check = wrapRequire.check({ + packageManager: { + isStorybookInMonorepo: () => false, + }, + storybookVersion: '7.0.0', + mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'), + } as any); + + await expect(check).resolves.toBeNull(); + }); + + it('should return the configuration object if in a pnp environment', async () => { + (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(true); + + const check = wrapRequire.check({ + packageManager: { + isStorybookInMonorepo: () => false, + }, + storybookVersion: '7.0.0', + mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'), + } as any); + + await expect(check).resolves.toEqual({ + isPnp: true, + isStorybookInMonorepo: false, + storybookVersion: '7.0.0', + }); + }); + + it('should return the configuration object if in a monorepo environment', async () => { + (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(false); + + const check = wrapRequire.check({ + packageManager: { + isStorybookInMonorepo: () => true, + }, + storybookVersion: '7.0.0', + mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'), + } as any); + + await expect(check).resolves.toEqual({ + isPnp: false, + isStorybookInMonorepo: true, + storybookVersion: '7.0.0', + }); + }); + + it('should return null, if all fields have the require wrapper', async () => { + (detect.detectPnp as any as jest.SpyInstance).mockResolvedValue(true); + + const check = wrapRequire.check({ + packageManager: { + isStorybookInMonorepo: () => true, + }, + storybookVersion: '7.0.0', + mainConfigPath: require.resolve('./__test__/main-config-with-wrappers.js'), + } as any); + + await expect(check).resolves.toBeNull(); + }); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts index 3e11e8af7576..347b7c7a23a1 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts @@ -1,65 +1,24 @@ -/* eslint-disable no-param-reassign */ import chalk from 'chalk'; import { dedent } from 'ts-dedent'; -import * as t from '@babel/types'; -import type { ConfigFile } from '@storybook/csf-tools'; import { readConfig } from '@storybook/csf-tools'; import type { Fix } from '../types'; import { detectPnp } from '../../detect'; import { updateMainConfig } from '../helpers/mainConfigFile'; +import { + getFieldsForRequireWrapper, + getRequireWrapperAsCallExpression, + getRequireWrapperName, + isRequireWrapperNecessary, + wrapValueWithRequireWrapper, +} from './wrap-require-utils'; interface WrapRequireRunOptions { storybookVersion: string; isStorybookInMonorepo: boolean; isPnp: boolean; + isConfigTypescript: boolean; } -/** - * Check if the node needs to be wrapped with require wrapper. - */ -const isRequireWrapperNecessary = ( - node: t.Node, - cb: (node: t.StringLiteral | t.ObjectProperty) => void = () => {} -) => { - if (t.isStringLiteral(node)) { - // value will be converted from StringLiteral to CallExpression. - cb(node); - return true; - } - - if (t.isObjectExpression(node)) { - const nameProperty = node.properties.find( - (property) => - t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === 'name' - ) as t.ObjectProperty; - - if (nameProperty && t.isStringLiteral(nameProperty.value)) { - cb(nameProperty); - return true; - } - } - - return false; -}; - -/** - * Get all fields that need to be wrapped with require wrapper. - * @returns Array of fields that need to be wrapped with require wrapper. - */ -const getFieldsForRequireWrapper = (config: ConfigFile) => { - const frameworkNode = config.getFieldNode(['framework']); - const builderNode = config.getFieldNode(['core', 'builder']); - const addons = config.getFieldNode(['addons']); - - const fieldsWithRequireWrapper = [ - ...(frameworkNode ? [frameworkNode] : []), - ...(builderNode ? [builderNode] : []), - ...(addons && t.isArrayExpression(addons) ? addons.elements : []), - ]; - - return fieldsWithRequireWrapper; -}; - export const wrapRequire: Fix = { id: 'wrap-require', @@ -77,7 +36,9 @@ export const wrapRequire: Fix = { return null; } - return { storybookVersion, isStorybookInMonorepo, isPnp }; + const isConfigTypescript = mainConfigPath.endsWith('.ts') || mainConfigPath.endsWith('.tsx'); + + return { storybookVersion, isStorybookInMonorepo, isPnp, isConfigTypescript }; }, prompt({ storybookVersion, isStorybookInMonorepo }) { @@ -88,37 +49,26 @@ export const wrapRequire: Fix = { } project. We will apply some tweaks in your main config file to make it work in this special environment.`; }, - async run({ dryRun, mainConfigPath }) { - updateMainConfig({ dryRun, mainConfigPath }, (mainConfig) => { - const getRequireWrapperAsCallExpression = (value: string) => { - // callExpression for "dirname(require.resolve(join(value, 'package.json')))"" - return t.callExpression(t.identifier('dirname'), [ - t.callExpression(t.memberExpression(t.identifier('require'), t.identifier('resolve')), [ - t.callExpression(t.identifier('join'), [ - t.stringLiteral(value), - t.stringLiteral('package.json'), - ]), - ]), - ]); - }; - - const wrapValueWithRequireWrapper = (node: t.Node) => { - isRequireWrapperNecessary(node, (n) => { - if (t.isStringLiteral(n)) { - n.value = getRequireWrapperAsCallExpression(n.value) as any; + async run({ dryRun, mainConfigPath, result }) { + return new Promise((resolve, reject) => { + updateMainConfig({ dryRun, mainConfigPath }, (mainConfig) => { + try { + getFieldsForRequireWrapper(mainConfig).forEach((node) => { + wrapValueWithRequireWrapper(mainConfig, node); + }); + + mainConfig.setImport(['dirname', 'join'], 'path'); + if (getRequireWrapperName(mainConfig) === null) { + mainConfig.setBodyDeclaration( + getRequireWrapperAsCallExpression(result.isConfigTypescript) + ); } - if (t.isObjectProperty(n) && t.isStringLiteral(n.value)) { - n.value = getRequireWrapperAsCallExpression(n.value.value) as any; - } - }); - }; - - getFieldsForRequireWrapper(mainConfig).forEach((node) => { - wrapValueWithRequireWrapper(node); + resolve(); + } catch (e) { + reject(e); + } }); - - mainConfig.setImport(['dirname, join'], 'path'); }); }, }; diff --git a/code/lib/csf-tools/src/ConfigFile.test.ts b/code/lib/csf-tools/src/ConfigFile.test.ts index e0820ca0a85c..58df95ba4999 100644 --- a/code/lib/csf-tools/src/ConfigFile.test.ts +++ b/code/lib/csf-tools/src/ConfigFile.test.ts @@ -1057,10 +1057,13 @@ describe('ConfigFile', () => { const config: StorybookConfig = { }; export default config; `; + const config = loadConfig(source).parse(); config.setImport('path', 'path'); + // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` import path from 'path'; const config: StorybookConfig = { }; @@ -1073,10 +1076,13 @@ describe('ConfigFile', () => { const config: StorybookConfig = { }; export default config; `; + const config = loadConfig(source).parse(); config.setImport('path', 'path'); + // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` import path from 'path'; const config: StorybookConfig = { }; @@ -1089,10 +1095,13 @@ describe('ConfigFile', () => { const config: StorybookConfig = { }; export default config; `; + const config = loadConfig(source).parse(); config.setImport(['dirname'], 'path'); + // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` import { dirname } from 'path'; const config: StorybookConfig = { }; @@ -1100,17 +1109,20 @@ describe('ConfigFile', () => { `); }); - it(`supports setting a named import for a filed where the source already exists`, () => { + it(`supports setting a named import for a field where the source already exists`, () => { const source = dedent` import { dirname } from 'path'; const config: StorybookConfig = { }; export default config; `; + const config = loadConfig(source).parse(); config.setImport(['dirname'], 'path'); + // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); + expect(parsed).toMatchInlineSnapshot(` import { dirname } from 'path'; diff --git a/code/lib/csf-tools/src/ConfigFile.ts b/code/lib/csf-tools/src/ConfigFile.ts index 0452b66620d7..7374d065f0e0 100644 --- a/code/lib/csf-tools/src/ConfigFile.ts +++ b/code/lib/csf-tools/src/ConfigFile.ts @@ -515,6 +515,14 @@ export class ConfigFile { this.setFieldNode(path, valueNode); } + getBodyDeclarations() { + return this._ast.program.body; + } + + setBodyDeclaration(declaration: t.Declaration) { + this._ast.program.body.push(declaration); + } + /** * Set import specifiers for a given import statement. * @description Does not support setting type imports (yet) @@ -559,7 +567,7 @@ export class ConfigFile { (node) => t.isImportDeclaration(node) && node.source.value === fromImport ) as t.ImportDeclaration | undefined; - // if the import specifier is an string, we're dealing with default imports + // if the import specifier is a string, we're dealing with default imports if (typeof importSpecifier === 'string') { // If the import declaration with the given source exists if (importDeclaration) { From 4ea52e3f21fc11a964109dafba0e060bd73fc7da Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 18 Jul 2023 16:42:18 +0200 Subject: [PATCH 05/15] Apply types for wrapper in Typescript projects --- code/lib/cli/src/generators/baseGenerator.ts | 24 ++++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index b8f61801798f..1b0d6646f052 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -99,13 +99,16 @@ const getRendererPackage = (framework: string, renderer: string) => { return `@storybook/${renderer}`; }; -const wrapForPnp = (packageName: string) => - `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%`; +const getAbsolutePath = (packageName: string, language: SupportedLanguage) => + language === SupportedLanguage.JAVASCRIPT + ? `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%` + : `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json'))) as any%%`; const getFrameworkDetails = ( renderer: SupportedRenderers, builder: Builder, pnp: boolean, + language: SupportedLanguage, framework?: SupportedFrameworks, isStorybookInMonorepository?: boolean ): { @@ -120,14 +123,18 @@ const getFrameworkDetails = ( const frameworkPackage = getFrameworkPackage(framework, renderer, builder); const frameworkPackagePath = applyRequireWrapper - ? wrapForPnp(frameworkPackage) + ? getAbsolutePath(frameworkPackage, language) : frameworkPackage; const rendererPackage = getRendererPackage(framework, renderer); - const rendererPackagePath = applyRequireWrapper ? wrapForPnp(rendererPackage) : rendererPackage; + const rendererPackagePath = applyRequireWrapper + ? getAbsolutePath(rendererPackage, language) + : rendererPackage; const builderPackage = getBuilderDetails(builder); - const builderPackagePath = applyRequireWrapper ? wrapForPnp(builderPackage) : builderPackage; + const builderPackagePath = applyRequireWrapper + ? getAbsolutePath(builderPackage, language) + : builderPackage; const isExternalFramework = !!getExternalFramework(frameworkPackage); const isKnownFramework = @@ -232,7 +239,7 @@ export async function baseGenerator( rendererId, framework: frameworkInclude, builder: builderInclude, - } = getFrameworkDetails(renderer, builder, pnp, framework, isStorybookInMonorepository); + } = getFrameworkDetails(renderer, builder, pnp, language, framework, isStorybookInMonorepository); // added to main.js const addons = [ @@ -371,7 +378,10 @@ export async function baseGenerator( framework: { name: frameworkInclude, options: options.framework || {} }, storybookConfigFolder, docs: { autodocs: 'tag' }, - addons: pnp || isStorybookInMonorepository ? addons.map(wrapForPnp) : addons, + addons: + pnp || isStorybookInMonorepository + ? addons.map((addon) => getAbsolutePath(addon, language)) + : addons, extensions, language, ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), From be68922d4084f303123c0a48424eeab64d148771 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 11:02:27 +0200 Subject: [PATCH 06/15] Apply requireWrapper on initialization --- code/lib/cli/src/generators/baseGenerator.ts | 58 ++++++++++++++------ code/lib/cli/src/generators/configure.ts | 8 ++- 2 files changed, 46 insertions(+), 20 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 1b0d6646f052..3da682dd03a6 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -99,10 +99,7 @@ const getRendererPackage = (framework: string, renderer: string) => { return `@storybook/${renderer}`; }; -const getAbsolutePath = (packageName: string, language: SupportedLanguage) => - language === SupportedLanguage.JAVASCRIPT - ? `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%` - : `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json'))) as any%%`; +const applyRequireWrapper = (packageName: string) => `%%getAbsolutePath('${packageName}')%%`; const getFrameworkDetails = ( renderer: SupportedRenderers, @@ -110,7 +107,7 @@ const getFrameworkDetails = ( pnp: boolean, language: SupportedLanguage, framework?: SupportedFrameworks, - isStorybookInMonorepository?: boolean + shouldApplyRequireWrapperOnPackageNames?: boolean ): { type: 'framework' | 'renderer'; packages: string[]; @@ -119,21 +116,20 @@ const getFrameworkDetails = ( renderer?: string; rendererId: SupportedRenderers; } => { - const applyRequireWrapper = pnp || isStorybookInMonorepository; const frameworkPackage = getFrameworkPackage(framework, renderer, builder); - const frameworkPackagePath = applyRequireWrapper - ? getAbsolutePath(frameworkPackage, language) + const frameworkPackagePath = shouldApplyRequireWrapperOnPackageNames + ? applyRequireWrapper(frameworkPackage) : frameworkPackage; const rendererPackage = getRendererPackage(framework, renderer); - const rendererPackagePath = applyRequireWrapper - ? getAbsolutePath(rendererPackage, language) + const rendererPackagePath = shouldApplyRequireWrapperOnPackageNames + ? applyRequireWrapper(rendererPackage) : rendererPackage; const builderPackage = getBuilderDetails(builder); - const builderPackagePath = applyRequireWrapper - ? getAbsolutePath(builderPackage, language) + const builderPackagePath = shouldApplyRequireWrapperOnPackageNames + ? applyRequireWrapper(builderPackage) : builderPackage; const isExternalFramework = !!getExternalFramework(frameworkPackage); @@ -199,6 +195,7 @@ export async function baseGenerator( process.on('SIGINT', setNodeProcessExiting); const isStorybookInMonorepository = packageManager.isStorybookInMonorepo(); + const shouldApplyRequireWrapperOnPackageNames = isStorybookInMonorepository || pnp; const stopIfExiting = async (callback: () => Promise) => { if (isNodeProcessExiting) { @@ -239,7 +236,14 @@ export async function baseGenerator( rendererId, framework: frameworkInclude, builder: builderInclude, - } = getFrameworkDetails(renderer, builder, pnp, language, framework, isStorybookInMonorepository); + } = getFrameworkDetails( + renderer, + builder, + pnp, + language, + framework, + shouldApplyRequireWrapperOnPackageNames + ); // added to main.js const addons = [ @@ -374,14 +378,27 @@ export async function baseGenerator( await fse.ensureDir(`./${storybookConfigFolder}`); if (addMainFile) { + const prefixes = shouldApplyRequireWrapperOnPackageNames + ? [ + 'import { join, dirname } from "path"', + language === SupportedLanguage.JAVASCRIPT + ? dedent`function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))) + }` + : dedent`function getAbsolutePath(value: string): any { + return dirname(require.resolve(join(value, 'package.json'))) + }`, + ] + : []; + await configureMain({ framework: { name: frameworkInclude, options: options.framework || {} }, + prefixes, storybookConfigFolder, docs: { autodocs: 'tag' }, - addons: - pnp || isStorybookInMonorepository - ? addons.map((addon) => getAbsolutePath(addon, language)) - : addons, + addons: shouldApplyRequireWrapperOnPackageNames + ? addons.map((addon) => applyRequireWrapper(addon)) + : addons, extensions, language, ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), @@ -396,7 +413,12 @@ export async function baseGenerator( }); } - await configurePreview({ frameworkPreviewParts, storybookConfigFolder, language, rendererId }); + await configurePreview({ + frameworkPreviewParts, + storybookConfigFolder, + language, + rendererId, + }); if (addScripts) { await stopIfExiting(async () => diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index 569c8cbc52f3..69d1951a5e6c 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -9,6 +9,7 @@ interface ConfigureMainOptions { staticDirs?: string[]; storybookConfigFolder: string; language: SupportedLanguage; + prefixes: string[]; /** * Extra values for main.js * @@ -54,6 +55,7 @@ export async function configureMain({ extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'], storybookConfigFolder, language, + prefixes = [], ...custom }: ConfigureMainOptions) { const srcPath = path.resolve(storybookConfigFolder, '../src'); @@ -67,7 +69,7 @@ export async function configureMain({ const isTypescript = language === SupportedLanguage.TYPESCRIPT_4_9 || language === SupportedLanguage.TYPESCRIPT_3_8; - let mainConfigTemplate = dedent`<>const config<> = <>; + let mainConfigTemplate = dedent`<><>const config<> = <>; export default config;`; const frameworkPackage = sanitizeFramework(custom.framework?.name); @@ -82,6 +84,7 @@ export async function configureMain({ .replace(/%%['"]/g, ''); const imports = []; + const finalPrefixes = [...prefixes]; if (custom.framework?.name.includes('path.dirname(')) { imports.push(`import path from 'path';`); @@ -90,11 +93,12 @@ export async function configureMain({ if (isTypescript) { imports.push(`import type { StorybookConfig } from '${frameworkPackage}';`); } else { - imports.push(`/** @type { import('${frameworkPackage}').StorybookConfig } */`); + finalPrefixes.push(`/** @type { import('${frameworkPackage}').StorybookConfig } */`); } const mainJsContents = mainConfigTemplate .replace('<>', `${imports.join('\n\n')}\n`) + .replace('<>', finalPrefixes.length > 0 ? `${finalPrefixes.join('\n\n')}\n` : '') .replace('<>', isTypescript ? ': StorybookConfig' : '') .replace('<>', mainContents); From 7096fc7281ec0b5f8e55e806a65c266c07e3bc68 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 11:06:34 +0200 Subject: [PATCH 07/15] Apply requireWrapper also on core.renderer field --- code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts index 1985a66ca963..a2ea2bbf9412 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts @@ -101,11 +101,13 @@ export function isRequireWrapperNecessary( export function getFieldsForRequireWrapper(config: ConfigFile) { const frameworkNode = config.getFieldNode(['framework']); const builderNode = config.getFieldNode(['core', 'builder']); + const rendererNode = config.getFieldNode(['core', 'renderer']); const addons = config.getFieldNode(['addons']); const fieldsWithRequireWrapper = [ ...(frameworkNode ? [frameworkNode] : []), ...(builderNode ? [builderNode] : []), + ...(rendererNode ? [rendererNode] : []), ...(addons && t.isArrayExpression(addons) ? [addons] : []), ]; From 49d94854cf1139266286364020c251603c1f07b9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 11:15:01 +0200 Subject: [PATCH 08/15] Add a comment section the the requireWrapper function --- .../automigrate/fixes/wrap-require-utils.ts | 10 +++++++++- code/lib/cli/src/generators/baseGenerator.ts | 20 +++++++++++++------ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts index a2ea2bbf9412..68d1e35d52b8 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts @@ -124,7 +124,7 @@ export function getFieldsForRequireWrapper(config: ConfigFile) { export function getRequireWrapperAsCallExpression( isConfigTypescript: boolean ): t.FunctionDeclaration { - return { + const functionDeclaration = { ...t.functionDeclaration( t.identifier(defaultRequireWrapperName), [ @@ -150,6 +150,14 @@ export function getRequireWrapperAsCallExpression( ), ...(isConfigTypescript ? { returnType: t.tSTypeAnnotation(t.tsAnyKeyword()) } : {}), }; + + t.addComment( + functionDeclaration, + 'leading', + '*\n * This function is used to resolve the absolute path of a package.\n * It is needed in projects that use Yarn PnP or are set up within a monorepo.\n' + ); + + return functionDeclaration; } export function wrapValueWithRequireWrapper(config: ConfigFile, node: t.Node) { diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 3da682dd03a6..55d89637fe9a 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -382,12 +382,20 @@ export async function baseGenerator( ? [ 'import { join, dirname } from "path"', language === SupportedLanguage.JAVASCRIPT - ? dedent`function getAbsolutePath(value) { - return dirname(require.resolve(join(value, 'package.json'))) - }` - : dedent`function getAbsolutePath(value: string): any { - return dirname(require.resolve(join(value, 'package.json'))) - }`, + ? dedent`/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ + function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))) + }` + : dedent`/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ + function getAbsolutePath(value: string): any { + return dirname(require.resolve(join(value, 'package.json'))) + }`, ] : []; From 176856802ed8c6f67eb9c9fcf37bd9d6bccc47ee Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 11:15:40 +0200 Subject: [PATCH 09/15] Only add imports for requireWrapper if necessary --- code/lib/cli/src/automigrate/fixes/wrap-require.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts index 347b7c7a23a1..6bd34d7aef50 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts @@ -57,8 +57,8 @@ export const wrapRequire: Fix = { wrapValueWithRequireWrapper(mainConfig, node); }); - mainConfig.setImport(['dirname', 'join'], 'path'); if (getRequireWrapperName(mainConfig) === null) { + mainConfig.setImport(['dirname', 'join'], 'path'); mainConfig.setBodyDeclaration( getRequireWrapperAsCallExpression(result.isConfigTypescript) ); From 3ad4aad78ec19f1516d3236549b091ecacdd12a9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 11:19:08 +0200 Subject: [PATCH 10/15] Remove unused import --- code/lib/cli/src/js-package-manager/JsPackageManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index adc8dc0fbd5b..f973a92c5012 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -3,7 +3,7 @@ import { gt, satisfies } from 'semver'; import type { CommonOptions } from 'execa'; import { command as execaCommand, sync as execaCommandSync } from 'execa'; import path from 'path'; -import fs, { read } from 'fs'; +import fs from 'fs'; import dedent from 'ts-dedent'; import { readFile, readFileSync, writeFile } from 'fs-extra'; From 6071bb1530c77f8a81f0f6be79cc460fe40e06b7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 15:20:18 +0200 Subject: [PATCH 11/15] Update docs --- code/lib/cli/src/automigrate/fixes/wrap-require.ts | 5 ++++- docs/faq.md | 6 +++--- .../storybook-main-pnpm-with-module-resolution.js.mdx | 8 ++++---- .../storybook-main-pnpm-with-module-resolution.ts.mdx | 8 ++++---- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts index 6bd34d7aef50..5cbe883a4948 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts @@ -46,7 +46,10 @@ export const wrapRequire: Fix = { return dedent`We have detected that you're using ${sbFormatted} in a ${ isStorybookInMonorepo ? 'monorepo' : 'PnP' - } project. We will apply some tweaks in your main config file to make it work in this special environment.`; + } project. + For Storybook to work correctly, some fields in your main config must be updated. We can do this for you automatically. + + More info: https://storybook.js.org/docs/react/faq#how-do-i-fix-module-resolution-in-special-environments`; }, async run({ dryRun, mainConfigPath, result }) { diff --git a/docs/faq.md b/docs/faq.md index be9c8d6491b9..03432b6ce3ed 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -10,7 +10,7 @@ Here are some answers to frequently asked questions. If you have a question, you - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories) - [I see `ReferenceError: React is not defined` when using Storybook with Next.js](#i-see-referenceerror-react-is-not-defined-when-using-storybook-with-nextjs) - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs) -- [How do I fix module resolution while using pnpm Plug-n-Play?](#how-do-i-fix-module-resolution-while-using-pnpm-plug-n-play) +- [How do I fix module resolution in special environments?](#how-do-i-fix-module-resolution-in-special-environments) - [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook) - [How do I setup the new React Context Root API with Storybook?](#how-do-i-setup-the-new-react-context-root-api-with-storybook) - [Why is there no addons channel?](#why-is-there-no-addons-channel) @@ -117,9 +117,9 @@ export default { }; ``` -## How do I fix module resolution while using pnpm Plug-n-Play? +## How do I fix module resolution in special environments? -In case you are using [pnpm](https://pnpm.io/), you might run into issues with module resolution similar to this when running Storybook: +In case you are using [yarn Plug-n-Play](https://yarnpkg.com/features/pnp) or your project is set up within a mono repository environment, you might run into issues with module resolution similar to this when running Storybook: ```shell WARN Failed to load preset: "@storybook/react-webpack5/preset"` diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx index 7b70439e066a..4ffa05ad3ff6 100644 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx +++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx @@ -3,19 +3,19 @@ import path from 'path'; -const wrapForPnp = (packageName) => +const getAbsolutePath = (packageName) => path.dirname(require.resolve(path.join(packageName, 'package.json'))); export default { framework: { // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - name: wrapForPnp('@storybook/your-framework'), + name: getAbsolutePath('@storybook/your-framework'), options: {}, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - //👇 Use wrapForPnp when referencing Storybook's addons and frameworks - wrapForPnp('@storybook/addon-essentials'), + //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks + getAbsolutePath('@storybook/addon-essentials'), ], }; ``` diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx index 9dfedba3d0c1..a7e750975b3d 100644 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx +++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx @@ -6,19 +6,19 @@ import type { StorybookConfig } from '@storybook/your-framework'; import path from 'path'; -const wrapForPnp = (packageName: string) => +const getAbsolutePath = (packageName: string): any => path.dirname(require.resolve(path.join(packageName, 'package.json'))); const config: StorybookConfig = { framework: { // Replace your-framework with the same one you've imported above. - name: wrapForPnp('@storybook/your-framework'), + name: getAbsolutePath('@storybook/your-framework'), options: {}, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - //👇 Use wrapForPnp when referencing Storybook's addons and frameworks - wrapForPnp('@storybook/addon-essentials'), + //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks + getAbsolutePath('@storybook/addon-essentials'), ], }; From 5186063fe0abf06acf7ffaab6c2a1e1949c45a05 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 15:21:16 +0200 Subject: [PATCH 12/15] Fix unsound types --- code/lib/cli/src/generators/configure.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts index 78a2ebb6eb3f..0bf326f797f6 100644 --- a/code/lib/cli/src/generators/configure.test.ts +++ b/code/lib/cli/src/generators/configure.test.ts @@ -14,6 +14,7 @@ describe('configureMain', () => { await configureMain({ language: SupportedLanguage.JAVASCRIPT, addons: [], + prefixes: [], storybookConfigFolder: '.storybook', framework: { name: '@storybook/react-vite', @@ -42,6 +43,7 @@ describe('configureMain', () => { await configureMain({ language: SupportedLanguage.TYPESCRIPT_4_9, addons: [], + prefixes: [], storybookConfigFolder: '.storybook', framework: { name: '@storybook/react-vite', @@ -69,6 +71,7 @@ describe('configureMain', () => { test('should handle resolved paths in pnp', async () => { await configureMain({ language: SupportedLanguage.JAVASCRIPT, + prefixes: [], addons: [ "%%path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json')))%%", "%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%", From c122c6e21856fa28191f9d2c5158c57da74875c0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 19 Jul 2023 16:23:00 +0200 Subject: [PATCH 13/15] Fix tests --- code/jest.config.base.js | 2 + .../automigrate/fixes/wrap-require.test.ts | 2 + code/lib/cli/src/generators/configure.test.ts | 1 + code/lib/cli/src/generators/configure.ts | 2 +- code/yarn.lock | 432 +----------------- 5 files changed, 28 insertions(+), 411 deletions(-) diff --git a/code/jest.config.base.js b/code/jest.config.base.js index 77a03b8b082b..9fdc75f588a9 100644 --- a/code/jest.config.base.js +++ b/code/jest.config.base.js @@ -87,6 +87,8 @@ module.exports = { '/prebuilt/', '/generators/', '/template/', + // The export format used in the following file is not supported by jest. + '/code/frameworks/nextjs/src/next-image-loader-stub.ts', '/__mocks__ /', '/__mockdata__/', '/__mocks-ng-workspace__/', diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts index 67616c7a838a..e040eb6e29f7 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts @@ -34,6 +34,7 @@ describe('wrapRequire', () => { } as any); await expect(check).resolves.toEqual({ + isConfigTypescript: false, isPnp: true, isStorybookInMonorepo: false, storybookVersion: '7.0.0', @@ -52,6 +53,7 @@ describe('wrapRequire', () => { } as any); await expect(check).resolves.toEqual({ + isConfigTypescript: false, isPnp: false, isStorybookInMonorepo: true, storybookVersion: '7.0.0', diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts index 0bf326f797f6..c79eea9a253c 100644 --- a/code/lib/cli/src/generators/configure.test.ts +++ b/code/lib/cli/src/generators/configure.test.ts @@ -56,6 +56,7 @@ describe('configureMain', () => { expect(mainConfigPath).toEqual('./.storybook/main.ts'); expect(mainConfigContent).toMatchInlineSnapshot(` "import type { StorybookConfig } from '@storybook/react-vite'; + const config: StorybookConfig = { stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [], diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index 69d1951a5e6c..6001a17b6024 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -97,7 +97,7 @@ export async function configureMain({ } const mainJsContents = mainConfigTemplate - .replace('<>', `${imports.join('\n\n')}\n`) + .replace('<>', `${imports.join('\n\n')}\n\n`) .replace('<>', finalPrefixes.length > 0 ? `${finalPrefixes.join('\n\n')}\n` : '') .replace('<>', isTypescript ? ': StorybookConfig' : '') .replace('<>', mainContents); diff --git a/code/yarn.lock b/code/yarn.lock index 6c5742103d74..8e8f1530c459 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -365,14 +365,7 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.21.4, @babel/compat-data@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/compat-data@npm:7.22.5" - checksum: 97f3c24a71b4e7d5f91c5807f6206a9cdb4123e595c51b34a19e9ea22b837003f969f732fde8819928d66e7b64047fd736c6717c8a1b96bf27fbfc30f6834aff - languageName: node - linkType: hard - -"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9": +"@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.21.4, @babel/compat-data@npm:^7.22.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9": version: 7.22.9 resolution: "@babel/compat-data@npm:7.22.9" checksum: 1334264b041f8ad4e33036326970c9c26754eb5c04b3af6c223fe6da988cbb8a8542b5526f49ec1ac488210d2f710484a0e4bcd30256294ae3f261d0141febad @@ -448,30 +441,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5, @babel/core@npm:^7.9.6": - version: 7.22.5 - resolution: "@babel/core@npm:7.22.5" - dependencies: - "@ampproject/remapping": ^2.2.0 - "@babel/code-frame": ^7.22.5 - "@babel/generator": ^7.22.5 - "@babel/helper-compilation-targets": ^7.22.5 - "@babel/helper-module-transforms": ^7.22.5 - "@babel/helpers": ^7.22.5 - "@babel/parser": ^7.22.5 - "@babel/template": ^7.22.5 - "@babel/traverse": ^7.22.5 - "@babel/types": ^7.22.5 - convert-source-map: ^1.7.0 - debug: ^4.1.0 - gensync: ^1.0.0-beta.2 - json5: ^2.2.2 - semver: ^6.3.0 - checksum: c00e1474a41c18b669511dd1a1bd757d854cc8128218421a73c3b1c76b44fb22a57bbbd29a73b7a156cb1460af7a94602f81bed76b8d78c6ffae4de954b32a50 - languageName: node - linkType: hard - -"@babel/core@npm:^7.22.9": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5, @babel/core@npm:^7.9.6": version: 7.22.9 resolution: "@babel/core@npm:7.22.9" dependencies: @@ -506,19 +476,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.21.4, @babel/generator@npm:^7.21.5, @babel/generator@npm:^7.22.5, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7": - version: 7.22.5 - resolution: "@babel/generator@npm:7.22.5" - dependencies: - "@babel/types": ^7.22.5 - "@jridgewell/gen-mapping": ^0.3.2 - "@jridgewell/trace-mapping": ^0.3.17 - jsesc: ^2.5.1 - checksum: 0613eddb4d1f7d82d88ad304e1acf48fddc3cdfb4c94bc3d2a9128cf0cdeedc0aa8d60301715c3b67537c00d9c9c9d50aad4339e7af1295c90def21893b17f7f - languageName: node - linkType: hard - -"@babel/generator@npm:^7.22.7, @babel/generator@npm:^7.22.9": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.21.4, @babel/generator@npm:^7.21.5, @babel/generator@npm:^7.22.7, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7": version: 7.22.9 resolution: "@babel/generator@npm:7.22.9" dependencies: @@ -557,22 +515,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.21.4, @babel/helper-compilation-targets@npm:^7.21.5, @babel/helper-compilation-targets@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-compilation-targets@npm:7.22.5" - dependencies: - "@babel/compat-data": ^7.22.5 - "@babel/helper-validator-option": ^7.22.5 - browserslist: ^4.21.3 - lru-cache: ^5.1.1 - semver: ^6.3.0 - peerDependencies: - "@babel/core": ^7.0.0 - checksum: f36a2f27d970fa61b32090840ec847f73c6ada50becf7222c8778dd7ae07661c56f83d57e4c18437160e221512f91c442e3b86703741b45fc1277a548a6fd819 - languageName: node - linkType: hard - -"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9": +"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.21.4, @babel/helper-compilation-targets@npm:^7.21.5, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9": version: 7.22.9 resolution: "@babel/helper-compilation-targets@npm:7.22.9" dependencies: @@ -635,22 +578,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.4.0": - version: 0.4.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.4.0" - dependencies: - "@babel/helper-compilation-targets": ^7.17.7 - "@babel/helper-plugin-utils": ^7.16.7 - debug: ^4.1.1 - lodash.debounce: ^4.0.8 - resolve: ^1.14.2 - semver: ^6.1.2 - peerDependencies: - "@babel/core": ^7.4.0-0 - checksum: 953c6ebda6871f2aa093f002f5e085ecbefe684580543fc7c309fe9aa5ce626758e02697a51cd25acf5cab56b1028a789fd38674d5872de74927a58049fbdc19 - languageName: node - linkType: hard - "@babel/helper-define-polyfill-provider@npm:^0.4.1": version: 0.4.1 resolution: "@babel/helper-define-polyfill-provider@npm:0.4.1" @@ -710,23 +637,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-transforms@npm:^7.21.2, @babel/helper-module-transforms@npm:^7.21.5, @babel/helper-module-transforms@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-module-transforms@npm:7.22.5" - dependencies: - "@babel/helper-environment-visitor": ^7.22.5 - "@babel/helper-module-imports": ^7.22.5 - "@babel/helper-simple-access": ^7.22.5 - "@babel/helper-split-export-declaration": ^7.22.5 - "@babel/helper-validator-identifier": ^7.22.5 - "@babel/template": ^7.22.5 - "@babel/traverse": ^7.22.5 - "@babel/types": ^7.22.5 - checksum: a28cf9a91ed657392f75ada08d96a46e8d0df420b7d5d1ac0bb1633d1404807d0cb6e6a3b0666c747d30f378fbb34985d30c6f25e2fcdd69dc58656e47aafe92 - languageName: node - linkType: hard - -"@babel/helper-module-transforms@npm:^7.22.9": +"@babel/helper-module-transforms@npm:^7.21.2, @babel/helper-module-transforms@npm:^7.21.5, @babel/helper-module-transforms@npm:^7.22.5, @babel/helper-module-transforms@npm:^7.22.9": version: 7.22.9 resolution: "@babel/helper-module-transforms@npm:7.22.9" dependencies: @@ -812,16 +723,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-split-export-declaration@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-split-export-declaration@npm:7.22.5" - dependencies: - "@babel/types": ^7.22.5 - checksum: a1e463086f97778584c44129c5c37282d033bf97867b300ff42e64279df18d41fe0e56ebe6a1b27f907afa66ad2a313558db8d2e83e73384c5b22ac726c9c52a - languageName: node - linkType: hard - -"@babel/helper-split-export-declaration@npm:^7.22.6": +"@babel/helper-split-export-declaration@npm:^7.22.5, @babel/helper-split-export-declaration@npm:^7.22.6": version: 7.22.6 resolution: "@babel/helper-split-export-declaration@npm:7.22.6" dependencies: @@ -863,18 +765,7 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.21.0, @babel/helpers@npm:^7.21.5, @babel/helpers@npm:^7.22.5, @babel/helpers@npm:^7.8.4": - version: 7.22.5 - resolution: "@babel/helpers@npm:7.22.5" - dependencies: - "@babel/template": ^7.22.5 - "@babel/traverse": ^7.22.5 - "@babel/types": ^7.22.5 - checksum: efa2d0fc2107e270782a784af3a52e5e0b97187b7b34feeeeb00454bc322e802ff4007b22410c387c05580c793f517c4bafc8a6a3acfdb0e3a1b349728f270c4 - languageName: node - linkType: hard - -"@babel/helpers@npm:^7.22.6": +"@babel/helpers@npm:^7.21.0, @babel/helpers@npm:^7.21.5, @babel/helpers@npm:^7.22.6, @babel/helpers@npm:^7.8.4": version: 7.22.6 resolution: "@babel/helpers@npm:7.22.6" dependencies: @@ -896,16 +787,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.3, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.21.8, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6": - version: 7.22.5 - resolution: "@babel/parser@npm:7.22.5" - bin: - parser: ./bin/babel-parser.js - checksum: d6a1b1e1f375cf7f81263c57f0b6d41d67e9f498d75960ec7ab62a194d7c232a125a951009edc0c991cb7d6cc6b78b006b15e1e8fb83e0de3fe0ceb6bf3d95ef - languageName: node - linkType: hard - -"@babel/parser@npm:^7.22.7": +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.3, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.21.8, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6": version: 7.22.7 resolution: "@babel/parser@npm:7.22.7" bin: @@ -1416,20 +1298,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.22.5" - dependencies: - "@babel/helper-environment-visitor": ^7.22.5 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-remap-async-to-generator": ^7.22.5 - "@babel/plugin-syntax-async-generators": ^7.8.4 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 99ba86cbabb93d6a339398ca8ddaba8fbb40224831daa9ccff692c8532d7ce5de34fd71e60396427d4585ded9484b242aecd042af449f1944ca7b4bbb8ef5b4a - languageName: node - linkType: hard - "@babel/plugin-transform-async-generator-functions@npm:^7.22.7": version: 7.22.7 resolution: "@babel/plugin-transform-async-generator-functions@npm:7.22.7" @@ -1517,26 +1385,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.21.0, @babel/plugin-transform-classes@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-classes@npm:7.22.5" - dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-compilation-targets": ^7.22.5 - "@babel/helper-environment-visitor": ^7.22.5 - "@babel/helper-function-name": ^7.22.5 - "@babel/helper-optimise-call-expression": ^7.22.5 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-replace-supers": ^7.22.5 - "@babel/helper-split-export-declaration": ^7.22.5 - globals: ^11.1.0 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: c5ac4a3ea8bf7441246e963c35617c1fe8d6515c94a376ef0b724c6950fbb9e5481c51fc4ff13e5afd8949a6bfe1ef20ab937692054772e2376dfeae3b6b99b5 - languageName: node - linkType: hard - -"@babel/plugin-transform-classes@npm:^7.22.6": +"@babel/plugin-transform-classes@npm:^7.21.0, @babel/plugin-transform-classes@npm:^7.22.6": version: 7.22.6 resolution: "@babel/plugin-transform-classes@npm:7.22.6" dependencies: @@ -1867,20 +1716,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-optional-chaining@npm:7.22.5" - dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 - "@babel/plugin-syntax-optional-chaining": ^7.8.3 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 73c62d707d47a8a483e81700beef9119e8af7290623b8ac2cf4918fadd7286a700c8fdb846e66b0fb795d4dc67c8e60b13dfed3fa2311129c67314bbe173b82a - languageName: node - linkType: hard - -"@babel/plugin-transform-optional-chaining@npm:^7.22.6": +"@babel/plugin-transform-optional-chaining@npm:^7.22.5, @babel/plugin-transform-optional-chaining@npm:^7.22.6": version: 7.22.6 resolution: "@babel/plugin-transform-optional-chaining@npm:7.22.6" dependencies: @@ -2051,23 +1887,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-runtime@npm:^7.13.9": - version: 7.22.5 - resolution: "@babel/plugin-transform-runtime@npm:7.22.5" - dependencies: - "@babel/helper-module-imports": ^7.22.5 - "@babel/helper-plugin-utils": ^7.22.5 - babel-plugin-polyfill-corejs2: ^0.4.3 - babel-plugin-polyfill-corejs3: ^0.8.1 - babel-plugin-polyfill-regenerator: ^0.5.0 - semver: ^6.3.0 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 2dcd59bbf14622c2cc088a311a16073b777e34abe733a940c4df6d48fd58900fb7cb22aa2a4645939162cc717618f8e55e96c227ad61f9ae9bca098078aa7345 - languageName: node - linkType: hard - -"@babel/plugin-transform-runtime@npm:^7.22.9": +"@babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.22.9": version: 7.22.9 resolution: "@babel/plugin-transform-runtime@npm:7.22.9" dependencies: @@ -2295,97 +2115,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:^7.16.5": - version: 7.22.5 - resolution: "@babel/preset-env@npm:7.22.5" - dependencies: - "@babel/compat-data": ^7.22.5 - "@babel/helper-compilation-targets": ^7.22.5 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-validator-option": ^7.22.5 - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.22.5 - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.22.5 - "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2 - "@babel/plugin-syntax-async-generators": ^7.8.4 - "@babel/plugin-syntax-class-properties": ^7.12.13 - "@babel/plugin-syntax-class-static-block": ^7.14.5 - "@babel/plugin-syntax-dynamic-import": ^7.8.3 - "@babel/plugin-syntax-export-namespace-from": ^7.8.3 - "@babel/plugin-syntax-import-assertions": ^7.22.5 - "@babel/plugin-syntax-import-attributes": ^7.22.5 - "@babel/plugin-syntax-import-meta": ^7.10.4 - "@babel/plugin-syntax-json-strings": ^7.8.3 - "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4 - "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3 - "@babel/plugin-syntax-numeric-separator": ^7.10.4 - "@babel/plugin-syntax-object-rest-spread": ^7.8.3 - "@babel/plugin-syntax-optional-catch-binding": ^7.8.3 - "@babel/plugin-syntax-optional-chaining": ^7.8.3 - "@babel/plugin-syntax-private-property-in-object": ^7.14.5 - "@babel/plugin-syntax-top-level-await": ^7.14.5 - "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6 - "@babel/plugin-transform-arrow-functions": ^7.22.5 - "@babel/plugin-transform-async-generator-functions": ^7.22.5 - "@babel/plugin-transform-async-to-generator": ^7.22.5 - "@babel/plugin-transform-block-scoped-functions": ^7.22.5 - "@babel/plugin-transform-block-scoping": ^7.22.5 - "@babel/plugin-transform-class-properties": ^7.22.5 - "@babel/plugin-transform-class-static-block": ^7.22.5 - "@babel/plugin-transform-classes": ^7.22.5 - "@babel/plugin-transform-computed-properties": ^7.22.5 - "@babel/plugin-transform-destructuring": ^7.22.5 - "@babel/plugin-transform-dotall-regex": ^7.22.5 - "@babel/plugin-transform-duplicate-keys": ^7.22.5 - "@babel/plugin-transform-dynamic-import": ^7.22.5 - "@babel/plugin-transform-exponentiation-operator": ^7.22.5 - "@babel/plugin-transform-export-namespace-from": ^7.22.5 - "@babel/plugin-transform-for-of": ^7.22.5 - "@babel/plugin-transform-function-name": ^7.22.5 - "@babel/plugin-transform-json-strings": ^7.22.5 - "@babel/plugin-transform-literals": ^7.22.5 - "@babel/plugin-transform-logical-assignment-operators": ^7.22.5 - "@babel/plugin-transform-member-expression-literals": ^7.22.5 - "@babel/plugin-transform-modules-amd": ^7.22.5 - "@babel/plugin-transform-modules-commonjs": ^7.22.5 - "@babel/plugin-transform-modules-systemjs": ^7.22.5 - "@babel/plugin-transform-modules-umd": ^7.22.5 - "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.5 - "@babel/plugin-transform-new-target": ^7.22.5 - "@babel/plugin-transform-nullish-coalescing-operator": ^7.22.5 - "@babel/plugin-transform-numeric-separator": ^7.22.5 - "@babel/plugin-transform-object-rest-spread": ^7.22.5 - "@babel/plugin-transform-object-super": ^7.22.5 - "@babel/plugin-transform-optional-catch-binding": ^7.22.5 - "@babel/plugin-transform-optional-chaining": ^7.22.5 - "@babel/plugin-transform-parameters": ^7.22.5 - "@babel/plugin-transform-private-methods": ^7.22.5 - "@babel/plugin-transform-private-property-in-object": ^7.22.5 - "@babel/plugin-transform-property-literals": ^7.22.5 - "@babel/plugin-transform-regenerator": ^7.22.5 - "@babel/plugin-transform-reserved-words": ^7.22.5 - "@babel/plugin-transform-shorthand-properties": ^7.22.5 - "@babel/plugin-transform-spread": ^7.22.5 - "@babel/plugin-transform-sticky-regex": ^7.22.5 - "@babel/plugin-transform-template-literals": ^7.22.5 - "@babel/plugin-transform-typeof-symbol": ^7.22.5 - "@babel/plugin-transform-unicode-escapes": ^7.22.5 - "@babel/plugin-transform-unicode-property-regex": ^7.22.5 - "@babel/plugin-transform-unicode-regex": ^7.22.5 - "@babel/plugin-transform-unicode-sets-regex": ^7.22.5 - "@babel/preset-modules": ^0.1.5 - "@babel/types": ^7.22.5 - babel-plugin-polyfill-corejs2: ^0.4.3 - babel-plugin-polyfill-corejs3: ^0.8.1 - babel-plugin-polyfill-regenerator: ^0.5.0 - core-js-compat: ^3.30.2 - semver: ^6.3.0 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: dd2b70e96102fc2a64f57c3ab177abeb5aac3f71f47701787b6264d91d7d3ea3d38526d8e1133eb667ca88e87c997ed4a1b8d498ca8be2af07ae4995dfac1b83 - languageName: node - linkType: hard - -"@babel/preset-env@npm:^7.22.9": +"@babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.22.9": version: 7.22.9 resolution: "@babel/preset-env@npm:7.22.9" dependencies: @@ -2593,16 +2323,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": - version: 7.22.5 - resolution: "@babel/runtime@npm:7.22.5" - dependencies: - regenerator-runtime: ^0.13.11 - checksum: 11dcaeecd2246857ccf22f939fcae28a58d29e410607bfa28b95d9b03e298a3e3df8a530e22637d5bfccfc1661fb39cc50c06b404b5d53454bd93889c7dd3eb8 - languageName: node - linkType: hard - -"@babel/runtime@npm:^7.22.6": +"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.22.6 resolution: "@babel/runtime@npm:7.22.6" dependencies: @@ -2653,25 +2374,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.21.4, @babel/traverse@npm:^7.21.5, @babel/traverse@npm:^7.22.5, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6": - version: 7.22.5 - resolution: "@babel/traverse@npm:7.22.5" - dependencies: - "@babel/code-frame": ^7.22.5 - "@babel/generator": ^7.22.5 - "@babel/helper-environment-visitor": ^7.22.5 - "@babel/helper-function-name": ^7.22.5 - "@babel/helper-hoist-variables": ^7.22.5 - "@babel/helper-split-export-declaration": ^7.22.5 - "@babel/parser": ^7.22.5 - "@babel/types": ^7.22.5 - debug: ^4.1.0 - globals: ^11.1.0 - checksum: 0217ec5ece6e4e3b6fd39dc4a23903d2d8ec76a7163731ae51a8cca03a450fb592782d620b8525219a5df9268b22901f3328a23440646d5ec2db4e3952817121 - languageName: node - linkType: hard - -"@babel/traverse@npm:^7.22.6, @babel/traverse@npm:^7.22.8": +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.21.4, @babel/traverse@npm:^7.21.5, @babel/traverse@npm:^7.22.5, @babel/traverse@npm:^7.22.6, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6": version: 7.22.8 resolution: "@babel/traverse@npm:7.22.8" dependencies: @@ -10574,7 +10277,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.1.3, aria-query@npm:^5.0.0, aria-query@npm:^5.1.3": +"aria-query@npm:5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" dependencies: @@ -10593,7 +10296,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.2.1": +"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3, aria-query@npm:^5.2.1": version: 5.2.1 resolution: "aria-query@npm:5.2.1" dependencies: @@ -11024,16 +10727,7 @@ __metadata: languageName: node linkType: hard -"axobject-query@npm:^3.1.1": - version: 3.1.1 - resolution: "axobject-query@npm:3.1.1" - dependencies: - deep-equal: ^2.0.5 - checksum: fff3175a22fd1f41fceb7ae0cd25f6594a0d7fba28c2335dd904538b80eb4e1040432564a3c643025cd2bb748f68d35aaabffb780b794da97ecfc748810b25ad - languageName: node - linkType: hard - -"axobject-query@npm:^3.2.1": +"axobject-query@npm:^3.1.1, axobject-query@npm:^3.2.1": version: 3.2.1 resolution: "axobject-query@npm:3.2.1" dependencies: @@ -11224,19 +10918,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.3": - version: 0.4.3 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.3" - dependencies: - "@babel/compat-data": ^7.17.7 - "@babel/helper-define-polyfill-provider": ^0.4.0 - semver: ^6.1.1 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 27e014ab6116704a201a71aefa2a377f26d0e5432d0dcb7f71930773ef0ddac7a693f3a6699721efa15ae4c83631a35dcc52cc8b3032878b2dadd0a33aeabc59 - languageName: node - linkType: hard - "babel-plugin-polyfill-corejs2@npm:^0.4.4": version: 0.4.4 resolution: "babel-plugin-polyfill-corejs2@npm:0.4.4" @@ -11262,18 +10943,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.8.1": - version: 0.8.1 - resolution: "babel-plugin-polyfill-corejs3@npm:0.8.1" - dependencies: - "@babel/helper-define-polyfill-provider": ^0.4.0 - core-js-compat: ^3.30.1 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 90320f5e5a27bcaf9a370d86ff3a9c72fd28618e51f83a7c1e31e34f9a2d671f5ca446b1c4af806cdee6388a6868da38299b3167dd860985981feeda3f2bf1c3 - languageName: node - linkType: hard - "babel-plugin-polyfill-corejs3@npm:^0.8.2": version: 0.8.2 resolution: "babel-plugin-polyfill-corejs3@npm:0.8.2" @@ -11297,17 +10966,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-regenerator@npm:^0.5.0": - version: 0.5.0 - resolution: "babel-plugin-polyfill-regenerator@npm:0.5.0" - dependencies: - "@babel/helper-define-polyfill-provider": ^0.4.0 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: d33f4e6f5b925754175d4058ede4d400ea92b9ad465f07a4211e4ad01a6cdb60e3a04428150eb9dd5fb7ba9c1d0cba9e22278206462b432d46d7d851b3c3cb19 - languageName: node - linkType: hard - "babel-plugin-polyfill-regenerator@npm:^0.5.1": version: 0.5.1 resolution: "babel-plugin-polyfill-regenerator@npm:0.5.1" @@ -12006,21 +11664,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.14.5, browserslist@npm:^4.21.3, browserslist@npm:^4.21.5": - version: 4.21.7 - resolution: "browserslist@npm:4.21.7" - dependencies: - caniuse-lite: ^1.0.30001489 - electron-to-chromium: ^1.4.411 - node-releases: ^2.0.12 - update-browserslist-db: ^1.0.11 - bin: - browserslist: cli.js - checksum: c523a982ef5d4141907795bbb72d7e2c5df79b2c6e495ef8ff6405b6734a2f16529a7f54c86b113085cad8a3359ac2fc6a478e86ae715084ba7384b9344b2ef5 - languageName: node - linkType: hard - -"browserslist@npm:^4.21.9": +"browserslist@npm:^4.14.5, browserslist@npm:^4.21.5, browserslist@npm:^4.21.9": version: 4.21.9 resolution: "browserslist@npm:4.21.9" dependencies: @@ -12362,14 +12006,7 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001489": - version: 1.0.30001497 - resolution: "caniuse-lite@npm:1.0.30001497" - checksum: 1581f6e6a3f4ea0be000d7d7bf3f2b92d0205d6637b6f12f7add3f9472b0c5e6c11f09175f6edd59496d702b251f999c4591933eb2267511a2eac52b759c2f58 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001503": +"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001503": version: 1.0.30001516 resolution: "caniuse-lite@npm:1.0.30001516" checksum: 64ae815c5319c7054146d8c443a34edcfce766e97b9e24cec030d4ce787b114fa949dff047cc59883967fd275b41e3dfdbe87ff53c65f475b4a7e93fa3fdb59d @@ -13411,16 +13048,7 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.25.1, core-js-compat@npm:^3.30.1, core-js-compat@npm:^3.30.2": - version: 3.30.2 - resolution: "core-js-compat@npm:3.30.2" - dependencies: - browserslist: ^4.21.5 - checksum: 7cb984fc6bcdd2f28c2f2f19fc8fc874a303adf7f835720b9937f0b1d40793819ed744dc14dff28ddb7735404b02a43f08493c3e2f227b27090cd6d64d28c5f9 - languageName: node - linkType: hard - -"core-js-compat@npm:^3.31.0": +"core-js-compat@npm:^3.25.1, core-js-compat@npm:^3.31.0": version: 3.31.1 resolution: "core-js-compat@npm:3.31.1" dependencies: @@ -14677,14 +14305,7 @@ __metadata: languageName: node linkType: hard -"electron-to-chromium@npm:^1.4.284, electron-to-chromium@npm:^1.4.411": - version: 1.4.426 - resolution: "electron-to-chromium@npm:1.4.426" - checksum: 245c8a706d4c4f7c22fb56db0baa9416a5732b8c3dd4d1578da2bf1781d285ecdc79c4ad1efc97c38a337cfbe50dd6982f8aaa04f0f1437ff5eb10fb58d77730 - languageName: node - linkType: hard - -"electron-to-chromium@npm:^1.4.431": +"electron-to-chromium@npm:^1.4.284, electron-to-chromium@npm:^1.4.431": version: 1.4.461 resolution: "electron-to-chromium@npm:1.4.461" checksum: 6da62826ceffffa604176d95330d1fdcf88abf9da68fc3c9f0f0788677d9015c36ea2c03737f067bbca024d7d8f97673c94854db70b1285be5e6d55745485e10 @@ -27866,16 +27487,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^6.0.0, semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.3.0": - version: 6.3.0 - resolution: "semver@npm:6.3.0" - bin: - semver: ./bin/semver.js - checksum: 1f4959e15bcfbaf727e964a4920f9260141bb8805b399793160da4e7de128e42a7d1f79c1b7d5cd21a6073fba0d55feb9966f5fef3e5ccb8e1d7ead3d7527458 - languageName: node - linkType: hard - -"semver@npm:^6.3.1": +"semver@npm:^6.0.0, semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.3.0, semver@npm:^6.3.1": version: 6.3.1 resolution: "semver@npm:6.3.1" bin: From 4c3e892973ca58a6b4df10c8c74e0d1d8c3b4967 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 20 Jul 2023 15:18:50 +0200 Subject: [PATCH 14/15] Apply getAbsolutePath wrapper to all framework package preset files --- code/builders/builder-vite/src/index.ts | 7 ++++--- code/builders/builder-webpack5/src/index.ts | 7 ++++--- .../src/preview/iframe-webpack.config.ts | 7 ++++--- code/frameworks/angular/src/preset.ts | 5 +++-- code/frameworks/ember/src/preset.ts | 5 +++-- code/frameworks/html-vite/src/preset.ts | 9 +++++++-- code/frameworks/html-webpack5/src/preset.ts | 9 +++++---- .../loader/local/get-font-face-declarations.ts | 4 ++-- code/frameworks/preact-vite/src/preset.ts | 8 ++++++-- code/frameworks/preact-webpack5/src/preset.ts | 9 +++++---- code/frameworks/react-vite/src/preset.ts | 7 ++++--- code/frameworks/react-webpack5/src/preset.ts | 13 +++++++------ code/frameworks/server-webpack5/src/preset.ts | 9 +++++---- code/frameworks/svelte-vite/src/preset.ts | 8 ++++++-- code/frameworks/svelte-webpack5/src/preset.ts | 9 +++++---- code/frameworks/sveltekit/src/preset.ts | 8 ++++++-- code/frameworks/vue-vite/src/preset.ts | 11 ++++++----- code/frameworks/vue-webpack5/src/preset.ts | 9 +++++---- code/frameworks/vue3-vite/src/preset.ts | 8 ++++++-- code/frameworks/vue3-webpack5/src/preset.ts | 9 +++++---- code/frameworks/web-components-vite/src/preset.ts | 8 ++++++-- .../web-components-webpack5/src/preset.ts | 9 +++++---- code/presets/preact-webpack/src/index.ts | 11 ++++++----- .../react-webpack/src/framework-preset-react.ts | 5 +++-- 24 files changed, 118 insertions(+), 76 deletions(-) diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts index 614dc87bc561..80b1ac875377 100644 --- a/code/builders/builder-vite/src/index.ts +++ b/code/builders/builder-vite/src/index.ts @@ -25,7 +25,8 @@ export * from './types'; */ export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler { return async (req, res, next) => { @@ -66,7 +67,7 @@ export const start: ViteBuilder['start'] = async ({ }) => { server = await createViteServer(options as Options, devServer); - const previewResolvedDir = wrapForPnP('@storybook/preview'); + const previewResolvedDir = getAbsolutePath('@storybook/preview'); const previewDirOrigin = join(previewResolvedDir, 'dist'); router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' })); @@ -84,7 +85,7 @@ export const start: ViteBuilder['start'] = async ({ export const build: ViteBuilder['build'] = async ({ options }) => { const viteCompilation = viteBuild(options as Options); - const previewResolvedDir = wrapForPnP('@storybook/preview'); + const previewResolvedDir = getAbsolutePath('@storybook/preview'); const previewDirOrigin = join(previewResolvedDir, 'dist'); const previewDirTarget = join(options.outputDir || '', `sb-preview`); diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 35f1fea6c81f..0106cfea091d 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -20,7 +20,8 @@ export const printDuration = (startTime: [number, number]) => .replace(' s', ' seconds') .replace(' m', ' minutes'); -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; let compilation: ReturnType | undefined; let reject: (reason?: any) => void; @@ -175,7 +176,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({ compilation = webpackDevMiddleware(compiler, middlewareOptions); - const previewResolvedDir = wrapForPnP('@storybook/preview'); + const previewResolvedDir = getAbsolutePath('@storybook/preview'); const previewDirOrigin = join(previewResolvedDir, 'dist'); router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' })); @@ -288,7 +289,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, }); }); - const previewResolvedDir = wrapForPnP('@storybook/preview'); + const previewResolvedDir = getAbsolutePath('@storybook/preview'); const previewDirOrigin = join(previewResolvedDir, 'dist'); const previewDirTarget = join(options.outputDir || '', `sb-preview`); diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 44ec4e92c8e5..d2f6ec6affbc 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -27,7 +27,8 @@ import { dedent } from 'ts-dedent'; import type { BuilderOptions, TypescriptOptions } from '../types'; import { createBabelLoader, createSWCLoader } from './loaders'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; const storybookPaths: Record = { ...[ @@ -40,12 +41,12 @@ const storybookPaths: Record = { ].reduce( (acc, sbPackage) => ({ ...acc, - [`@storybook/${sbPackage}`]: wrapForPnP(`@storybook/${sbPackage}`), + [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`), }), {} ), // deprecated, remove in 8.0 - [`@storybook/api`]: wrapForPnP(`@storybook/manager-api`), + [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`), }; export default async ( diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index 6e359b452138..ce5796d0c222 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/code/frameworks/angular/src/preset.ts @@ -3,7 +3,8 @@ import { PresetProperty } from '@storybook/types'; import { StorybookConfig } from './types'; import { StandaloneOptions } from './builders/utils/standalone-options'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ require.resolve('./server/framework-preset-angular-cli'), @@ -30,7 +31,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, }; diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index bedd1cdb3ebd..6524132780e5 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -2,7 +2,8 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ require.resolve('./server/framework-preset-babel-ember'), @@ -15,7 +16,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, }; diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts index 814831785a39..4ae871b6e589 100644 --- a/code/frameworks/html-vite/src/preset.ts +++ b/code/frameworks/html-vite/src/preset.ts @@ -1,7 +1,12 @@ import type { PresetProperty } from '@storybook/types'; +import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; +function getAbsolutePath(value: I): I { + return dirname(require.resolve(join(value, 'package.json'))) as any; +} + export const core: PresetProperty<'core', StorybookConfig> = { - builder: '@storybook/builder-vite', - renderer: '@storybook/html', + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/html'), }; diff --git a/code/frameworks/html-webpack5/src/preset.ts b/code/frameworks/html-webpack5/src/preset.ts index 57093fdba5d3..969bee1b1e63 100644 --- a/code/frameworks/html-webpack5/src/preset.ts +++ b/code/frameworks/html-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-html-webpack'), + getAbsolutePath('@storybook/preset-html-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/html'), + renderer: getAbsolutePath('@storybook/html'), }; }; diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index 2e0ddeefc53c..20e1df8deeb2 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -29,7 +29,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex return `@font-face { font-family: ${id}; - src: url(${localFontPath}); + src: url(.${localFontPath}); }`; } return localFontSrc @@ -38,7 +38,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex return `@font-face { font-family: ${id}; - src: url(${localFontPath}); + src: url(.${localFontPath}); ${font.weight ? `font-weight: ${font.weight};` : ''} ${font.style ? `font-style: ${font.style};` : ''} }`; diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index aecc5b9a904a..2d4e18d77e90 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -1,11 +1,15 @@ import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; import preact from '@preact/preset-vite'; +import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; + export const core: PresetProperty<'core', StorybookConfig> = { - builder: '@storybook/builder-vite', - renderer: '@storybook/preact', + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/preact'), }; export const viteFinal: StorybookConfig['viteFinal'] = async (config) => { diff --git a/code/frameworks/preact-webpack5/src/preset.ts b/code/frameworks/preact-webpack5/src/preset.ts index 5808ca929166..e815e7884248 100644 --- a/code/frameworks/preact-webpack5/src/preset.ts +++ b/code/frameworks/preact-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-preact-webpack'), + getAbsolutePath('@storybook/preset-preact-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/preact'), + renderer: getAbsolutePath('@storybook/preact'), }; }; diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index 26a577af7900..207f60988ebc 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -4,11 +4,12 @@ import { hasVitePlugins } from '@storybook/builder-vite'; import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const core: PresetProperty<'core', StorybookConfig> = { - builder: wrapForPnP('@storybook/builder-vite') as '@storybook/builder-vite', - renderer: wrapForPnP('@storybook/react'), + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/react'), }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts index b03832ae272f..873d214c597c 100644 --- a/code/frameworks/react-webpack5/src/preset.ts +++ b/code/frameworks/react-webpack5/src/preset.ts @@ -4,10 +4,11 @@ import { dirname, join } from 'path'; import type { PresetProperty, Options } from '@storybook/types'; import type { FrameworkOptions, StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-react-webpack'), + getAbsolutePath('@storybook/preset-react-webpack'), ]; const defaultFrameworkOptions: FrameworkOptions = { @@ -28,7 +29,7 @@ export const frameworkOptions = async ( } if (typeof config === 'undefined') { return { - name: wrapForPnP('@storybook/react-webpack5') as '@storybook/react-webpack5', + name: getAbsolutePath('@storybook/react-webpack5'), options: defaultFrameworkOptions, }; } @@ -48,10 +49,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/react'), + renderer: getAbsolutePath('@storybook/react'), }; }; @@ -60,7 +61,7 @@ export const webpack: StorybookConfig['webpack'] = async (config) => { config.resolve.alias = { ...config.resolve?.alias, - '@storybook/react': wrapForPnP('@storybook/react'), + '@storybook/react': getAbsolutePath('@storybook/react'), }; return config; }; diff --git a/code/frameworks/server-webpack5/src/preset.ts b/code/frameworks/server-webpack5/src/preset.ts index 852c2a9c9409..0dd7d63814f0 100644 --- a/code/frameworks/server-webpack5/src/preset.ts +++ b/code/frameworks/server-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-server-webpack'), + getAbsolutePath('@storybook/preset-server-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/server'), + renderer: getAbsolutePath('@storybook/server'), }; }; diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index bf7a7f742511..220812cf7c5a 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -1,12 +1,16 @@ import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; +import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; import { handleSvelteKit } from './utils'; import { svelteDocgen } from './plugins/svelte-docgen'; +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; + export const core: PresetProperty<'core', StorybookConfig> = { - builder: '@storybook/builder-vite', - renderer: '@storybook/svelte', + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/svelte'), }; export const viteFinal: NonNullable = async (config, options) => { diff --git a/code/frameworks/svelte-webpack5/src/preset.ts b/code/frameworks/svelte-webpack5/src/preset.ts index 7486869f3b61..176bce0c0bc5 100644 --- a/code/frameworks/svelte-webpack5/src/preset.ts +++ b/code/frameworks/svelte-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-svelte-webpack'), + getAbsolutePath('@storybook/preset-svelte-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/svelte'), + renderer: getAbsolutePath('@storybook/svelte'), }; }; diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 6c98e344eff4..e92e45079f63 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -2,12 +2,16 @@ import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset'; import type { PresetProperty } from '@storybook/types'; import { withoutVitePlugins } from '@storybook/builder-vite'; +import { dirname, join } from 'path'; import { configOverrides } from './plugins/config-overrides'; import { type StorybookConfig } from './types'; +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; + export const core: PresetProperty<'core', StorybookConfig> = { - builder: '@storybook/builder-vite', - renderer: '@storybook/svelte', + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/svelte'), }; export const viteFinal: NonNullable = async (config, options) => { diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index f047581dd797..bf5b7d45ea5b 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -1,21 +1,22 @@ -import path from 'path'; +import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import { mergeConfig } from 'vite'; import type { StorybookConfig } from './types'; import { vueDocgen } from './plugins/vue-docgen'; +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; + export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { const framework = await options.presets.apply('framework'); return { ...config, builder: { - name: path.dirname( - require.resolve(path.join('@storybook/builder-vite', 'package.json')) - ) as '@storybook/builder-vite', + name: getAbsolutePath('@storybook/builder-vite'), options: typeof framework === 'string' ? {} : framework?.options.builder || {}, }, - renderer: '@storybook/vue', + renderer: getAbsolutePath('@storybook/vue'), }; }; diff --git a/code/frameworks/vue-webpack5/src/preset.ts b/code/frameworks/vue-webpack5/src/preset.ts index 911ea437f8bd..661053fddefb 100644 --- a/code/frameworks/vue-webpack5/src/preset.ts +++ b/code/frameworks/vue-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-vue-webpack'), + getAbsolutePath('@storybook/preset-vue-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,10 +15,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/vue'), + renderer: getAbsolutePath('@storybook/vue'), }; }; diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index 7af3f31056e7..faa7ecc49a1a 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -1,12 +1,16 @@ import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; import { mergeConfig, type PluginOption } from 'vite'; +import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; import { vueDocgen } from './plugins/vue-docgen'; +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; + export const core: PresetProperty<'core', StorybookConfig> = { - builder: '@storybook/builder-vite', - renderer: '@storybook/vue3', + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/vue3'), }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index 1ace38e86044..0dd1e931ddd4 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/code/frameworks/vue3-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-vue3-webpack'), + getAbsolutePath('@storybook/preset-vue3-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,10 +15,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/vue3'), + renderer: getAbsolutePath('@storybook/vue3'), }; }; diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts index cd53f7d76283..a3bb7c4d66a2 100644 --- a/code/frameworks/web-components-vite/src/preset.ts +++ b/code/frameworks/web-components-vite/src/preset.ts @@ -1,7 +1,11 @@ import type { PresetProperty } from '@storybook/types'; +import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; + export const core: PresetProperty<'core', StorybookConfig> = { - builder: '@storybook/builder-vite', - renderer: '@storybook/web-components', + builder: getAbsolutePath('@storybook/builder-vite'), + renderer: getAbsolutePath('@storybook/web-components'), }; diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts index 930e7d3f906b..101539931f27 100644 --- a/code/frameworks/web-components-webpack5/src/preset.ts +++ b/code/frameworks/web-components-webpack5/src/preset.ts @@ -2,10 +2,11 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons', StorybookConfig> = [ - wrapForPnP('@storybook/preset-web-components-webpack'), + getAbsolutePath('@storybook/preset-web-components-webpack'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti return { ...config, builder: { - name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5', + name: getAbsolutePath('@storybook/builder-webpack5'), options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, - renderer: wrapForPnP('@storybook/web-components'), + renderer: getAbsolutePath('@storybook/web-components'), }; }; diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts index 76c50e0affb0..758012bf73ab 100644 --- a/code/presets/preact-webpack/src/index.ts +++ b/code/presets/preact-webpack/src/index.ts @@ -3,7 +3,8 @@ import type { StorybookConfig } from './types'; export * from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; export const babel: StorybookConfig['babelDefault'] = (config) => { return { @@ -38,10 +39,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => { ...config.resolve, alias: { ...(config.resolve?.alias || {}), - react: wrapForPnP('preact/compat'), - 'react-dom/test-utils': wrapForPnP('preact/test-utils'), - 'react-dom': wrapForPnP('preact/compat'), - 'react/jsx-runtime': wrapForPnP('preact/jsx-runtime'), + react: getAbsolutePath('preact/compat'), + 'react-dom/test-utils': getAbsolutePath('preact/test-utils'), + 'react-dom': getAbsolutePath('preact/compat'), + 'react/jsx-runtime': getAbsolutePath('preact/jsx-runtime'), }, }, }; diff --git a/code/presets/react-webpack/src/framework-preset-react.ts b/code/presets/react-webpack/src/framework-preset-react.ts index 9b0aeaad314d..e913a32b5332 100644 --- a/code/presets/react-webpack/src/framework-preset-react.ts +++ b/code/presets/react-webpack/src/framework-preset-react.ts @@ -6,7 +6,8 @@ import { logger } from '@storybook/node-logger'; import type { Options, Preset } from '@storybook/core-webpack'; import type { StorybookConfig, ReactOptions } from './types'; -const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json'))); +const getAbsolutePath = (input: I): I => + dirname(require.resolve(join(input, 'package.json'))) as any; const applyFastRefresh = async (options: Options) => { const isDevelopment = options.configType === 'DEVELOPMENT'; @@ -26,7 +27,7 @@ export const babel: StorybookConfig['babel'] = async (config, options) => { ], }; }; -const storybookReactDirName = wrapForPnP('@storybook/preset-react-webpack'); +const storybookReactDirName = getAbsolutePath('@storybook/preset-react-webpack'); // TODO: improve node_modules detection const context = storybookReactDirName.includes('node_modules') ? join(storybookReactDirName, '../../') // Real life case, already in node_modules From bae9f2ad25752b767a30233194e48eb38a2c59f3 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 21 Jul 2023 09:10:28 +0200 Subject: [PATCH 15/15] Fix wrapper replacement for framework field --- code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts index 68d1e35d52b8..c1a33b3119f6 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts @@ -163,7 +163,13 @@ export function getRequireWrapperAsCallExpression( export function wrapValueWithRequireWrapper(config: ConfigFile, node: t.Node) { isRequireWrapperNecessary(node, (n) => { if (t.isStringLiteral(n)) { - n.value = getReferenceToRequireWrapper(config, n.value) as any; + const wrapperNode = getReferenceToRequireWrapper(config, n.value); + Object.keys(n).forEach((k: keyof typeof n) => { + delete n[k]; + }); + Object.keys(wrapperNode).forEach((k: keyof typeof wrapperNode) => { + (n as any)[k] = wrapperNode[k]; + }); } if (t.isObjectProperty(n) && t.isStringLiteral(n.value)) {