Add Stencil support across various modules

- Added 'stencil' to the list of supported frameworks in generate-source-files.ts and frameworks.ts.
- Updated ProjectType enum to include STENCIL.
- Enhanced framework detection service to recognize Stencil configurations.
- Registered Stencil generator in registerGenerators.ts.
- Updated builder and renderer mappings to include Stencil.
- Added necessary imports and configurations in the Stencil generator module.

code/core/scripts/generate-source-files.ts

@@ -96,6 +96,7 @@ async function generateFrameworksFile(prettierConfig: prettier.Options | null):
     'solid',
     'vue3-rsbuild',
     'web-components-rsbuild',
+    'stencil',
   ];
   const destination = join(CORE_ROOT_DIR, 'src', 'types', 'modules', 'frameworks.ts');
   const frameworksDirectory = join(CODE_DIR, 'frameworks');

code/core/src/cli/projectTypes.ts

@@ -16,6 +16,7 @@ export enum ProjectType {
   SERVER = 'server',
   SOLID = 'solid',
   SVELTE = 'svelte',
+  STENCIL = 'stencil',
   SVELTEKIT = 'sveltekit',
   UNDETECTED = 'undetected',
   UNSUPPORTED = 'unsupported',

code/core/src/common/utils/framework.ts

@@ -36,6 +36,7 @@ export const frameworkToRenderer: Record<
   [SupportedRenderer.SVELTE]: SupportedRenderer.SVELTE,
   [SupportedRenderer.VUE3]: SupportedRenderer.VUE3,
   [SupportedRenderer.WEB_COMPONENTS]: SupportedRenderer.WEB_COMPONENTS,
+  [SupportedRenderer.STENCIL]: SupportedRenderer.STENCIL,
 };
 
 export const frameworkToBuilder: Record<SupportedFramework, SupportedBuilder> = {
@@ -61,4 +62,5 @@ export const frameworkToBuilder: Record<SupportedFramework, SupportedBuilder> =
   [SupportedFramework.VUE3_RSBUILD]: SupportedBuilder.RSBUILD,
   [SupportedFramework.HTML_RSBUILD]: SupportedBuilder.RSBUILD,
   [SupportedFramework.WEB_COMPONENTS_RSBUILD]: SupportedBuilder.RSBUILD,
+  [SupportedFramework.STENCIL]: SupportedBuilder.STENCIL,
 };

code/core/src/common/utils/get-storybook-info.ts

@@ -34,6 +34,7 @@ export const rendererPackages: Record<string, SupportedRenderer> = {
   // community (outside of monorepo)
   'storybook-framework-qwik': SupportedRenderer.QWIK,
   'storybook-solidjs-vite': SupportedRenderer.SOLID,
+  '@stencil/storybook-plugin': SupportedRenderer.STENCIL,
 };
 
 export const frameworkPackages: Record<string, SupportedFramework> = {
@@ -59,13 +60,15 @@ export const frameworkPackages: Record<string, SupportedFramework> = {
   'storybook-web-components-rsbuild': SupportedFramework.WEB_COMPONENTS_RSBUILD,
   'storybook-html-rsbuild': SupportedFramework.HTML_RSBUILD,
   '@storybook-vue/nuxt': SupportedFramework.NUXT,
+  '@stencil/storybook-plugin': SupportedFramework.STENCIL,
 };
 
 export const builderPackages: Record<string, SupportedBuilder> = {
   '@storybook/builder-webpack5': SupportedBuilder.WEBPACK5,
   '@storybook/builder-vite': SupportedBuilder.VITE,
   // community (outside of monorepo)
   'storybook-builder-rsbuild': SupportedBuilder.RSBUILD,
+  '@stencil/storybook-plugin': SupportedBuilder.STENCIL,
 };
 
 export const compilerPackages: Record<string, CoreWebpackCompiler> = {

code/core/src/types/modules/builders.ts

@@ -4,4 +4,5 @@ export enum SupportedBuilder {
   VITE = 'vite',
   // COMMUNITY
   RSBUILD = 'rsbuild',
+  STENCIL = 'stencil',
 }

code/core/src/types/modules/frameworks.ts

@@ -21,6 +21,7 @@ export enum SupportedFramework {
   QWIK = 'qwik',
   REACT_RSBUILD = 'react-rsbuild',
   SOLID = 'solid',
+  STENCIL = 'stencil',
   VUE3_RSBUILD = 'vue3-rsbuild',
   WEB_COMPONENTS_RSBUILD = 'web-components-rsbuild',
 }

code/lib/create-storybook/src/generators/STENCIL/index.ts

@@ -1,8 +1,16 @@
-import { baseGenerator } from '../baseGenerator';
-import type { Generator } from '../types';
+import { ProjectType } from 'storybook/internal/cli';
+import { SupportedRenderer } from 'storybook/internal/types';
 
-const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'stencil', {}, 'stencil');
-};
+import { defineGeneratorModule } from '../modules/GeneratorModule';
 
-export default generator;
+export default defineGeneratorModule({
+  metadata: {
+    projectType: ProjectType.STENCIL,
+    renderer: SupportedRenderer.STENCIL,
+  },
+  configure: async () => {
+    return {
+      extraPackages: ['@stencil/storybook-plugin'],
+    };
+  },
+});

code/lib/create-storybook/src/generators/registerGenerators.ts

@@ -13,6 +13,7 @@ import reactNativeWebGenerator from './REACT_NATIVE_WEB';
 import reactScriptsGenerator from './REACT_SCRIPTS';
 import serverGenerator from './SERVER';
 import solidGenerator from './SOLID';
+import stencilGenerator from './STENCIL';
 import svelteGenerator from './SVELTE';
 import svelteKitGenerator from './SVELTEKIT';
 import vue3Generator from './VUE3';
@@ -38,6 +39,7 @@ const setOfGenerators = new Set<GeneratorModule>([
   solidGenerator,
   serverGenerator,
   qwikGenerator,
+  stencilGenerator,
 ]);
 
 /** Register all framework generators with the central registry */

code/lib/create-storybook/src/services/FrameworkDetectionService.ts

@@ -9,6 +9,7 @@ import { dedent } from 'ts-dedent';
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 const webpackConfigFiles = ['webpack.config.js'];
 const rsbuildConfigFiles = ['rsbuild.config.ts', 'rsbuild.config.js', 'rsbuild.config.mjs'];
+const stencilConfigFiles = ['stencil.config.ts'];
 
 export class FrameworkDetectionService {
   constructor(private jsPackageManager: JsPackageManager) {}
@@ -31,12 +32,14 @@ export class FrameworkDetectionService {
     const viteConfig = find.any(viteConfigFiles, { last: getProjectRoot() });
     const webpackConfig = find.any(webpackConfigFiles, { last: getProjectRoot() });
     const rsbuildConfig = find.any(rsbuildConfigFiles, { last: getProjectRoot() });
+    const stencilConfig = find.any(stencilConfigFiles, { last: getProjectRoot() });
     const dependencies = this.jsPackageManager.getAllDependencies();
 
     // Detect which builders are present
     const hasVite = viteConfig || !!dependencies.vite;
     const hasWebpack = webpackConfig || !!dependencies.webpack;
     const hasRsbuild = rsbuildConfig || !!dependencies['@rsbuild/core'];
+    const hasStencil = stencilConfig || !!dependencies['@stencil/core'];
 
     const detectedBuilders: SupportedBuilder[] = [];
 
@@ -52,6 +55,10 @@ export class FrameworkDetectionService {
       detectedBuilders.push(SupportedBuilder.RSBUILD);
     }
 
+    if (hasStencil) {
+      detectedBuilders.push(SupportedBuilder.STENCIL);
+    }
+
     // If exactly one builder is detected, return it
     if (detectedBuilders.length === 1) {
       return detectedBuilders[0];
@@ -62,6 +69,7 @@ export class FrameworkDetectionService {
       { label: 'Vite', value: SupportedBuilder.VITE },
       { label: 'Webpack 5', value: SupportedBuilder.WEBPACK5 },
       { label: 'Rsbuild', value: SupportedBuilder.RSBUILD },
+      { label: 'Stencil', value: SupportedBuilder.STENCIL },
     ];
 
     return prompt.select({