From c125ec60c5fef06ad3f72c2bb13a12c74e089588 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 7 Feb 2024 12:46:04 +0100 Subject: [PATCH] Autogenerate SupportedFrameworks --- code/lib/cli/src/dirs.ts | 3 +- code/lib/cli/src/generators/baseGenerator.ts | 3 +- code/lib/cli/src/helpers.ts | 34 +++++++++++++----- code/lib/cli/src/project_types.ts | 4 +-- .../src/utils/get-storybook-info.ts | 4 +-- code/lib/types/package.json | 1 + .../scripts/generate-available-frameworks.js | 36 +++++++++++++++++++ code/lib/types/src/index.ts | 1 + code/lib/types/src/modules/frameworks.ts | 24 +++++++++++++ 9 files changed, 95 insertions(+), 15 deletions(-) create mode 100644 code/lib/types/scripts/generate-available-frameworks.js create mode 100644 code/lib/types/src/modules/frameworks.ts diff --git a/code/lib/cli/src/dirs.ts b/code/lib/cli/src/dirs.ts index 213b1877aaee..1f41620b4ea6 100644 --- a/code/lib/cli/src/dirs.ts +++ b/code/lib/cli/src/dirs.ts @@ -6,9 +6,10 @@ import * as tempy from 'tempy'; import invariant from 'tiny-invariant'; import { externalFrameworks } from './project_types'; -import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import type { SupportedRenderers } from './project_types'; import type { JsPackageManager } from '@storybook/core-common'; import { versions } from '@storybook/core-common'; +import type { SupportedFrameworks } from '@storybook/types'; export function getCliDir() { return dirname(require.resolve('@storybook/cli/package.json')); diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 3c3cae9e5e5e..2f85d0af4549 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -5,8 +5,9 @@ import ora from 'ora'; import invariant from 'tiny-invariant'; import type { JsPackageManager } from '@storybook/core-common'; import { getPackageDetails, versions as packageVersions } from '@storybook/core-common'; +import type { SupportedFrameworks } from '@storybook/types'; import type { NpmOptions } from '../NpmOptions'; -import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; +import type { SupportedRenderers, Builder } from '../project_types'; import { SupportedLanguage, externalFrameworks } from '../project_types'; import { copyTemplateFiles } from '../helpers'; import { configureMain, configurePreview } from './configure'; diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 95c22ee624f1..167340059828 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -13,7 +13,8 @@ import type { PackageJson, PackageJsonWithDepsAndDevDeps, } from '@storybook/core-common'; -import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import type { SupportedFrameworks } from '@storybook/types'; +import type { SupportedRenderers } from './project_types'; import { SupportedLanguage } from './project_types'; import { versions as storybookMonorepoPackages } from '@storybook/core-common'; @@ -134,19 +135,36 @@ const frameworkToRenderer: Record< SupportedFrameworks | SupportedRenderers, SupportedRenderers | 'vue' > = { + // frameworks angular: 'angular', ember: 'ember', - html: 'html', + 'html-vite': 'html', + 'html-webpack5': 'html', nextjs: 'react', - preact: 'preact', + 'preact-vite': 'preact', + 'preact-webpack5': 'preact', qwik: 'qwik', - react: 'react', - 'react-native': 'react', - server: 'react', + 'react-vite': 'react', + 'react-webpack5': 'react', + 'server-webpack5': 'server', solid: 'solid', - svelte: 'svelte', + 'svelte-vite': 'svelte', + 'svelte-webpack5': 'svelte', sveltekit: 'svelte', - vue3: 'vue', + 'vue-vite': 'vue', + 'vue-webpack5': 'vue', + 'vue3-vite': 'vue3', + 'vue3-webpack5': 'vue3', + 'web-components-vite': 'web-components', + 'web-components-webpack5': 'web-components', + // renderers + html: 'html', + preact: 'preact', + 'react-native': 'react-native', + react: 'react', + server: 'server', + svelte: 'svelte', + vue3: 'vue3', 'web-components': 'web-components', }; diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 0a0073d84664..e781b3e16db8 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -1,4 +1,5 @@ import { minVersion, validRange } from 'semver'; +import type { SupportedFrameworks } from '@storybook/types'; function eqMajor(versionRange: string, major: number) { // Uses validRange to avoid a throw from minVersion if an invalid range gets passed @@ -21,9 +22,6 @@ export const externalFrameworks: ExternalFramework[] = [ { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' }, ]; -// Should match @storybook/ -export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid' | 'ember'; - // Should match @storybook/ export type SupportedRenderers = | 'react' diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index dd462a6b0370..6dda1cd20699 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -1,6 +1,6 @@ import path from 'path'; import fse from 'fs-extra'; -import type { CoreCommon_StorybookInfo, PackageJson } from '@storybook/types'; +import type { CoreCommon_StorybookInfo, PackageJson, SupportedFrameworks } from '@storybook/types'; import { getStorybookConfiguration } from './get-storybook-configuration'; export const rendererPackages: Record = { @@ -19,7 +19,7 @@ export const rendererPackages: Record = { 'storybook-solidjs': 'solid', }; -export const frameworkPackages: Record = { +export const frameworkPackages: Record = { '@storybook/angular': 'angular', '@storybook/ember': 'ember', '@storybook/html-vite': 'html-vite', diff --git a/code/lib/types/package.json b/code/lib/types/package.json index e2b155001ae7..6d1f4b281635 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -58,6 +58,7 @@ "access": "public" }, "bundler": { + "pre": "./scripts/generate-available-frameworks.js", "entries": [ "./src/index.ts" ] diff --git a/code/lib/types/scripts/generate-available-frameworks.js b/code/lib/types/scripts/generate-available-frameworks.js new file mode 100644 index 000000000000..f3f0af79f6f1 --- /dev/null +++ b/code/lib/types/scripts/generate-available-frameworks.js @@ -0,0 +1,36 @@ +// read ./code/frameworks subfolders and generate a list of available frameworks +// save this list into ./code/lib/cli/src/frameworks.ts and export it as a union type. The name of the type is `SupportedFrameworks`. Add additionally 'qwik' and `solid` to that list. + +import { readdir, writeFile } from 'node:fs/promises'; +import path from 'node:path'; +import prettier from 'prettier'; +import dedent from 'ts-dedent'; + +const thirdPartyFrameworks = ['qwik', 'solid']; + +const run = async () => { + const frameworks = await readdir(path.join(__dirname, '..', '..', '..', 'frameworks')); + const supportedFrameworks = frameworks.map((framework) => `'${framework}'`).join(' | '); + const fileContent = dedent` + // auto generated file, do not edit + // the file gets generated by the script ./code/lib/types/scripts/generate-available-frameworks.js + export type SupportedFrameworks = ${supportedFrameworks} | ${thirdPartyFrameworks + .map((framework) => `'${framework}'`) + .join(' | ')}; +`; + // format fileContent by prettier + const frameworksFile = path.join(__dirname, '..', 'src', 'modules', 'frameworks.ts'); + const prettierConfig = await prettier.resolveConfig(frameworksFile); + + const formattedFileContent = await prettier.format(fileContent, { + ...prettierConfig, + parser: 'typescript', + }); + + await writeFile(frameworksFile, formattedFileContent); +}; + +run().catch((e) => { + console.error(e); + process.exit(1); +}); diff --git a/code/lib/types/src/index.ts b/code/lib/types/src/index.ts index 756b3d2634cb..0eb7547ccb6b 100644 --- a/code/lib/types/src/index.ts +++ b/code/lib/types/src/index.ts @@ -10,3 +10,4 @@ export * from './modules/api-stories'; export * from './modules/indexer'; export * from './modules/composedStory'; export * from './modules/channelApi'; +export * from './modules/frameworks'; diff --git a/code/lib/types/src/modules/frameworks.ts b/code/lib/types/src/modules/frameworks.ts new file mode 100644 index 000000000000..0785763f46e5 --- /dev/null +++ b/code/lib/types/src/modules/frameworks.ts @@ -0,0 +1,24 @@ +// auto generated file, do not edit +// the file gets generated by the script ./code/lib/types/scripts/generate-available-frameworks.js +export type SupportedFrameworks = + | 'angular' + | 'ember' + | 'html-vite' + | 'html-webpack5' + | 'nextjs' + | 'preact-vite' + | 'preact-webpack5' + | 'react-vite' + | 'react-webpack5' + | 'server-webpack5' + | 'svelte-vite' + | 'svelte-webpack5' + | 'sveltekit' + | 'vue-vite' + | 'vue-webpack5' + | 'vue3-vite' + | 'vue3-webpack5' + | 'web-components-vite' + | 'web-components-webpack5' + | 'qwik' + | 'solid';