Autogenerate SupportedFrameworks

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'));

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';

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',
 };
 

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/<framework>
-export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid' | 'ember';
-
 // Should match @storybook/<renderer>
 export type SupportedRenderers =
   | 'react'

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<string, string> = {
@@ -19,7 +19,7 @@ export const rendererPackages: Record<string, string> = {
   'storybook-solidjs': 'solid',
 };
 
-export const frameworkPackages: Record<string, string> = {
+export const frameworkPackages: Record<string, SupportedFrameworks> = {
   '@storybook/angular': 'angular',
   '@storybook/ember': 'ember',
   '@storybook/html-vite': 'html-vite',

code/lib/types/package.json

@@ -58,6 +58,7 @@
     "access": "public"
   },
   "bundler": {
+    "pre": "./scripts/generate-available-frameworks.js",
     "entries": [
       "./src/index.ts"
     ]

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);
+});

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';

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';