From b40cd6a72280ddb8bfd6b0b1f0748a234d3fa4bc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 27 Aug 2021 15:30:01 +0200 Subject: [PATCH] make the babel cli command functional --- lib/cli/package.json | 1 + lib/cli/src/babal-config.ts | 41 ++++++++++++- lib/cli/src/generate.ts | 4 +- lib/core-common/src/utils/babel.ts | 98 ++++++++++++++---------------- yarn.lock | 1 + 5 files changed, 89 insertions(+), 56 deletions(-) diff --git a/lib/cli/package.json b/lib/cli/package.json index b51f3aabcef..16eade2f699 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -49,6 +49,7 @@ "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", "@storybook/codemod": "6.4.0-alpha.32", + "@storybook/core-common": "6.4.0-alpha.32", "@storybook/node-logger": "6.4.0-alpha.32", "@storybook/semver": "^7.3.2", "boxen": "^4.2.0", diff --git a/lib/cli/src/babal-config.ts b/lib/cli/src/babal-config.ts index 84d159f08d6..2d6fe8aaa44 100644 --- a/lib/cli/src/babal-config.ts +++ b/lib/cli/src/babal-config.ts @@ -1,6 +1,41 @@ +import { writeFile, access } from 'fs-extra'; import { logger } from '@storybook/node-logger'; +import { getStorybookBabelConfig } from '@storybook/core-common'; +import path from 'path'; +import prompts from 'prompts'; -export const generateStorybookBabelConfig = async () => { - const cwd = process.cwd(); - logger.info(`Generating the storybook default babel config at ${cwd}`); +export const generateStorybookBabelConfigInCWD = async () => { + const target = process.cwd(); + return generateStorybookBabelConfig({ target }); +}; +export const generateStorybookBabelConfig = async ({ target }: { target: string }) => { + logger.info(`Generating the storybook default babel config at ${target}`); + + const config = getStorybookBabelConfig(); + const contents = JSON.stringify(config, null, 2); + + const fileName = '.babelrc.json'; + const location = path.join(target, fileName); + + const exists = await access(location).then( + () => true, + () => false + ); + + if (exists) { + const { overwrite } = await prompts({ + type: 'confirm', + initial: true, + name: 'overwrite', + message: `${fileName} already exists. Would you like overwrite it?`, + }); + + if (overwrite === false) { + logger.warn(`Cancelled, babel config file was NOT written to file-system.`); + return; + } + } + + logger.info(`Writing file to ${location}`); + await writeFile(location, contents); }; diff --git a/lib/cli/src/generate.ts b/lib/cli/src/generate.ts index a6533bf0189..e67cba9164b 100644 --- a/lib/cli/src/generate.ts +++ b/lib/cli/src/generate.ts @@ -11,7 +11,7 @@ import { extract } from './extract'; import { upgrade } from './upgrade'; import { repro } from './repro'; import { link } from './link'; -import { generateStorybookBabelConfig } from './babal-config'; +import { generateStorybookBabelConfigInCWD } from './babal-config'; const pkg = sync({ cwd: __dirname }).packageJson; @@ -41,7 +41,7 @@ program program .command('babelrc') .description('generate the default storybook babel config into your current working directory') - .action(() => generateStorybookBabelConfig()); + .action(() => generateStorybookBabelConfigInCWD()); program .command('upgrade') diff --git a/lib/core-common/src/utils/babel.ts b/lib/core-common/src/utils/babel.ts index 287b5092b43..b146dccd9ab 100644 --- a/lib/core-common/src/utils/babel.ts +++ b/lib/core-common/src/utils/babel.ts @@ -1,56 +1,52 @@ import { TransformOptions } from '@babel/core'; -const plugins = [ - require.resolve('@babel/plugin-transform-shorthand-properties'), - require.resolve('@babel/plugin-transform-block-scoping'), - /* - * Added for TypeScript experimental decorator support - * https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options - */ - [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], - [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], - [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], - require.resolve('@babel/plugin-proposal-export-default-from'), - require.resolve('@babel/plugin-syntax-dynamic-import'), - [ - require.resolve('@babel/plugin-proposal-object-rest-spread'), - { loose: true, useBuiltIns: true }, - ], - require.resolve('@babel/plugin-transform-classes'), - require.resolve('@babel/plugin-transform-arrow-functions'), - require.resolve('@babel/plugin-transform-parameters'), - require.resolve('@babel/plugin-transform-destructuring'), - require.resolve('@babel/plugin-transform-spread'), - require.resolve('@babel/plugin-transform-for-of'), - require.resolve('babel-plugin-macros'), - /* - * Optional chaining and nullish coalescing are supported in - * @babel/preset-env, but not yet supported in Webpack due to support - * missing from acorn. These can be removed once Webpack has support. - * See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250 - */ - require.resolve('@babel/plugin-proposal-optional-chaining'), - require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), - [ - require.resolve('babel-plugin-polyfill-corejs3'), - { - method: 'usage-global', - absoluteImports: require.resolve('core-js'), - // eslint-disable-next-line global-require - version: require('core-js/package.json').version, - }, - ], -]; - -const presets = [ - [require.resolve('@babel/preset-env'), { shippedProposals: true, loose: true }], - require.resolve('@babel/preset-typescript'), -]; - -export const getStorybookBabelConfig: () => TransformOptions = () => { +export const getStorybookBabelConfig = () => { return { sourceType: 'unambiguous', - presets: [...presets], - plugins: [...plugins], - }; + presets: [ + [require.resolve('@babel/preset-env'), { shippedProposals: true, loose: true }], + require.resolve('@babel/preset-typescript'), + ], + plugins: [ + require.resolve('@babel/plugin-transform-shorthand-properties'), + require.resolve('@babel/plugin-transform-block-scoping'), + /* + * Added for TypeScript experimental decorator support + * https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options + */ + [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], + [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], + require.resolve('@babel/plugin-proposal-export-default-from'), + require.resolve('@babel/plugin-syntax-dynamic-import'), + [ + require.resolve('@babel/plugin-proposal-object-rest-spread'), + { loose: true, useBuiltIns: true }, + ], + require.resolve('@babel/plugin-transform-classes'), + require.resolve('@babel/plugin-transform-arrow-functions'), + require.resolve('@babel/plugin-transform-parameters'), + require.resolve('@babel/plugin-transform-destructuring'), + require.resolve('@babel/plugin-transform-spread'), + require.resolve('@babel/plugin-transform-for-of'), + require.resolve('babel-plugin-macros'), + /* + * Optional chaining and nullish coalescing are supported in + * @babel/preset-env, but not yet supported in Webpack due to support + * missing from acorn. These can be removed once Webpack has support. + * See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250 + */ + require.resolve('@babel/plugin-proposal-optional-chaining'), + require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), + [ + require.resolve('babel-plugin-polyfill-corejs3'), + { + method: 'usage-global', + absoluteImports: require.resolve('core-js'), + // eslint-disable-next-line global-require + version: require('core-js/package.json').version, + }, + ], + ], + } as TransformOptions; }; diff --git a/yarn.lock b/yarn.lock index 3c96867ce63..735a000450e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7775,6 +7775,7 @@ __metadata: "@babel/preset-env": ^7.12.11 "@storybook/client-api": 6.4.0-alpha.32 "@storybook/codemod": 6.4.0-alpha.32 + "@storybook/core-common": 6.4.0-alpha.32 "@storybook/node-logger": 6.4.0-alpha.32 "@storybook/semver": ^7.3.2 "@types/cross-spawn": ^6.0.2