From 6024e9941650781db730b34c7d1b6c60c335ce2e Mon Sep 17 00:00:00 2001 From: jserfeng <1114550440@qq.com> Date: Wed, 20 Sep 2023 11:18:08 +0800 Subject: [PATCH] feat: new storybook generator --- .../generator-common/src/locale/en.ts | 1 + .../generator-common/src/locale/zh.ts | 1 + .../src/newAction/common/index.ts | 2 + .../storybook-generator-next/src/index.ts | 57 +++++------ .../storybook-generator-next/src/utils.ts | 7 ++ pnpm-lock.yaml | 97 +++++++++++++++++++ 6 files changed, 137 insertions(+), 28 deletions(-) create mode 100644 packages/generator/generators/storybook-generator-next/src/utils.ts diff --git a/packages/generator/generator-common/src/locale/en.ts b/packages/generator/generator-common/src/locale/en.ts index 2983150e2b04..cadcb92ae901 100644 --- a/packages/generator/generator-common/src/locale/en.ts +++ b/packages/generator/generator-common/src/locale/en.ts @@ -30,6 +30,7 @@ export const EN_LOCALE = { test: 'Enable Unit Test / Integration Test', e2e_test: 'Enable E2E Test', storybook: 'Enable Storybook', + storybookV7: 'Enable Storybook V7', runtime_api: 'Enable Runtime API', mwa_storybook: 'Enable Visual Testing (Storybook)', ssg: 'Enable SSG', diff --git a/packages/generator/generator-common/src/locale/zh.ts b/packages/generator/generator-common/src/locale/zh.ts index 348f608f0b37..af75d033644e 100644 --- a/packages/generator/generator-common/src/locale/zh.ts +++ b/packages/generator/generator-common/src/locale/zh.ts @@ -29,6 +29,7 @@ export const ZH_LOCALE = { test: '启用「单元测试 / 集成测试」功能', e2e_test: '启用「E2E 测试」功能', storybook: '启用「Storybook」', + storybookV7: '启用「Storybook」V7', runtime_api: '启用「Runtime API」', mwa_storybook: '启用「Visual Testing (Storybook)」模式', ssg: '启用「SSG」功能', diff --git a/packages/generator/generator-common/src/newAction/common/index.ts b/packages/generator/generator-common/src/newAction/common/index.ts index 81bf74dff149..1d708c4d9683 100644 --- a/packages/generator/generator-common/src/newAction/common/index.ts +++ b/packages/generator/generator-common/src/newAction/common/index.ts @@ -60,6 +60,8 @@ export const ActionFunctionText: Record string> = { [ActionFunction.E2ETest]: () => i18n.t(localeKeys.action.function.e2e_test), [ActionFunction.Storybook]: () => i18n.t(localeKeys.action.function.storybook), + [ActionFunction.StorybookV7]: () => + i18n.t(localeKeys.action.function.storybookV7), [ActionFunction.RuntimeApi]: () => i18n.t(localeKeys.action.function.runtime_api), [ActionFunction.SSG]: () => i18n.t(localeKeys.action.function.ssg), diff --git a/packages/generator/generators/storybook-generator-next/src/index.ts b/packages/generator/generators/storybook-generator-next/src/index.ts index 39a58f8a96e9..ce7a2b55198e 100644 --- a/packages/generator/generators/storybook-generator-next/src/index.ts +++ b/packages/generator/generators/storybook-generator-next/src/index.ts @@ -8,6 +8,7 @@ import { getPackageManagerText, fs, isReact18, + getPackageVersion, } from '@modern-js/generator-utils'; import { DependenceGenerator, @@ -15,6 +16,9 @@ import { Language, } from '@modern-js/generator-common'; import { i18n, localeKeys } from './locale'; +import { getMajorVersion } from './utils'; + +const ADDON_ESSENTIAL = '@storybook/addon-essentials'; const getGeneratorPath = (generator: string, distTag: string) => { if (process.env.CODESMITH_ENV === 'development') { @@ -28,7 +32,7 @@ const getGeneratorPath = (generator: string, distTag: string) => { const handleTemplateFile = async ( context: GeneratorContext, appApi: AppAPI, - _generator: GeneratorCore, + generator: GeneratorCore, ) => { const appDir = context.materials.default.basePath; const language = isTsProject(appDir) ? Language.TS : Language.JS; @@ -94,15 +98,33 @@ const handleTemplateFile = async ( const { modernVersion } = context.config; - const isExitAddons = pkg.devDependencies?.['@storybook/addon-essentials']; + const exitAddonsVersion = pkg.devDependencies?.[ADDON_ESSENTIAL]; const isExitStorybook = pkg.devDependencies?.['@modern-js/storybook']; + const latestVersion = await getPackageVersion(ADDON_ESSENTIAL); + let availableVersion = latestVersion; + + try { + if (exitAddonsVersion) { + const majorVersion = getMajorVersion(exitAddonsVersion); + generator.logger.info( + `Detected installed ${ADDON_ESSENTIAL}, version ${exitAddonsVersion}`, + ); + + // User specify addons with major version 7, so using users + if (majorVersion === 7) { + availableVersion = exitAddonsVersion; + } + } else { + const majorVersion = getMajorVersion(latestVersion); + if (majorVersion > 7) { + availableVersion = '^7'; + } + } + } catch (_) {} + const addStorybookDependence = { - ...(!isExitAddons - ? { - '@storybook/addon-essentials': 'latest', - } - : {}), + [ADDON_ESSENTIAL]: availableVersion, ...(!isExitStorybook ? { '@modern-js/storybook': modernVersion, @@ -110,27 +132,6 @@ const handleTemplateFile = async ( : {}), }; - // // modify stories/tsconfig.json - // if (language === Language.TS) { - // const jsonAPI = new JsonAPI(generator); - // await jsonAPI.update( - // context.materials.default.get( - // path.join(appDir, './stories/tsconfig.json'), - // ), - // { - // query: {}, - // update: { - // $set: { - // 'compilerOptions.paths': { - // [`${pkg.name}`]: ['.'], - // [`${pkg.name}/*`]: ['./*'], - // }, - // }, - // }, - // }, - // ); - // } - await appApi.runSubGenerator( getGeneratorPath(DependenceGenerator, context.config.distTag), undefined, diff --git a/packages/generator/generators/storybook-generator-next/src/utils.ts b/packages/generator/generators/storybook-generator-next/src/utils.ts new file mode 100644 index 000000000000..b049b451aeb9 --- /dev/null +++ b/packages/generator/generators/storybook-generator-next/src/utils.ts @@ -0,0 +1,7 @@ +export const MAJOR_VERSION_RE = /(\d+)\./; + +export function getMajorVersion(v: string) { + const major = v.match(MAJOR_VERSION_RE)![1]; + + return parseInt(major, 10); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f1e1ce11e0e..0efc38ced980 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2811,6 +2811,48 @@ importers: specifier: ^5 version: 5.0.4 + packages/generator/generators/storybook-generator-next: + devDependencies: + '@modern-js/codesmith': + specifier: 2.2.5 + version: 2.2.5(react-dom@18.2.0)(react@18.2.0) + '@modern-js/codesmith-api-app': + specifier: 2.2.5 + version: 2.2.5(@modern-js/codesmith@2.2.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2) + '@modern-js/codesmith-api-json': + specifier: 2.2.5 + version: 2.2.5(react-dom@18.2.0)(react@18.2.0) + '@modern-js/dependence-generator': + specifier: workspace:* + version: link:../dependence-generator + '@modern-js/generator-common': + specifier: workspace:* + version: link:../../generator-common + '@modern-js/generator-utils': + specifier: workspace:* + version: link:../../generator-utils + '@modern-js/plugin-i18n': + specifier: workspace:* + version: link:../../../cli/plugin-i18n + '@scripts/build': + specifier: workspace:* + version: link:../../../../scripts/build + '@scripts/jest-config': + specifier: workspace:* + version: link:../../../../scripts/jest-config + '@types/jest': + specifier: ^29 + version: 29.2.6 + '@types/node': + specifier: ^14 + version: 14.18.35 + jest: + specifier: ^29 + version: 29.5.0(@types/node@14.18.35)(ts-node@10.9.1) + typescript: + specifier: ^5 + version: 5.2.2 + packages/generator/generators/tailwindcss-generator: devDependencies: '@modern-js/codesmith': @@ -11819,6 +11861,18 @@ packages: '@formily/shared': 2.2.24 typescript: 5.0.4 + /@formily/json-schema@2.2.24(typescript@5.2.2): + resolution: {integrity: sha512-3aEMEO5D0B1p5rM/lzWmhx3rYqid4OKzCXAdxBsyicacFK9dVqxlOBt8d6auOsppMZ675q52jSVDxNSgh4xKqg==} + engines: {npm: '>=3.0.0'} + peerDependencies: + typescript: '>4.1.5' + dependencies: + '@formily/core': 2.2.24 + '@formily/reactive': 2.2.24 + '@formily/shared': 2.2.24 + typescript: 5.2.2 + dev: true + /@formily/path@2.2.24: resolution: {integrity: sha512-DrRBIPvlqGr7+xQ/74MY/j7WSbUzvWeHOsjfXTIllbijKAdUm+DovpQuHMXR16I3gnuQ8CvyMzCizP9RKVnhzw==} engines: {npm: '>=3.0.0'} @@ -12653,6 +12707,32 @@ packages: - typescript dev: true + /@modern-js/codesmith-api-app@2.2.5(@modern-js/codesmith@2.2.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2): + resolution: {integrity: sha512-s3tZt553MgATJ8FaoztCrPOqvO1g+lNDfC+QfkzTgUoFWk9vefueQ/mqqj+AuAQC22S+hk6pdJ0HtOBkHWee7w==} + peerDependencies: + '@modern-js/codesmith': ^2.2.5 + dependencies: + '@babel/runtime': 7.22.15 + '@modern-js/codesmith': 2.2.5(react-dom@18.2.0)(react@18.2.0) + '@modern-js/codesmith-api-ejs': 2.2.5(@modern-js/codesmith@2.2.5) + '@modern-js/codesmith-api-fs': 2.2.5(@modern-js/codesmith@2.2.5) + '@modern-js/codesmith-api-git': 2.2.5(@modern-js/codesmith@2.2.5)(react-dom@18.2.0)(react@18.2.0) + '@modern-js/codesmith-api-handlebars': 2.2.5(@modern-js/codesmith@2.2.5) + '@modern-js/codesmith-api-npm': 2.2.5(react-dom@18.2.0)(react@18.2.0) + '@modern-js/codesmith-formily': 2.2.5(@modern-js/codesmith@2.2.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2) + '@modern-js/plugin-i18n': 2.18.0(react-dom@18.2.0)(react@18.2.0) + '@modern-js/utils': 2.32.1(react-dom@18.2.0)(react@18.2.0) + comment-json: 4.2.3 + extra: 0.2.1 + inquirer: 8.1.3 + transitivePeerDependencies: + - debug + - react + - react-dom + - react-router-dom + - typescript + dev: true + /@modern-js/codesmith-api-ejs@2.2.5(@modern-js/codesmith@2.2.5): resolution: {integrity: sha512-hN4sJy+nnr2dPD/BwVLlNdYRQdTC1O2lltRBeEFYD43tD1yEagjWRtccAweoBIt379DsAqi2UKydsW5OvFge/Q==} peerDependencies: @@ -12734,6 +12814,23 @@ packages: - react-dom - typescript + /@modern-js/codesmith-formily@2.2.5(@modern-js/codesmith@2.2.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2): + resolution: {integrity: sha512-K2A+e/ptl3XoMlrCHIyAd+Oo49rwzQQrU8sOdwjRgQD/Ik4vNbIBSvZeTqU8ViYO2ZEk5IvffyTJw2ZbDNM99Q==} + peerDependencies: + '@modern-js/codesmith': ^2.2.5 + dependencies: + '@babel/runtime': 7.22.15 + '@formily/json-schema': 2.2.24(typescript@5.2.2) + '@formily/validator': 2.2.24 + '@modern-js/codesmith': 2.2.5(react-dom@18.2.0)(react@18.2.0) + '@modern-js/utils': 2.32.1(react-dom@18.2.0)(react@18.2.0) + inquirer: 8.2.5 + transitivePeerDependencies: + - react + - react-dom + - typescript + dev: true + /@modern-js/codesmith@2.2.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-crlaJqKT8iSLRTLOgTU7PCVWtXJ66ezM5CmKTRGdQYIEWx85Pmuj3lmupyXM3ecv4lhVzoonVs/nh3bS5ubeOQ==} dependencies: