CLI: Add Stencil Integration

README.md

@@ -110,6 +110,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
 | [SolidJS](https://github.com/solidjs-community/storybook)      | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/)                                                                      | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook)        |
 | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
+| [StencilJS](https://github.com/stenciljs/storybook)            | [![](https://img.shields.io/npm/v/@stencil/storybook-plugin/latest?style=flat-square&color=blue&label)](/)                                                                   | [![Stencil](https://img.shields.io/npm/dm/@stencil/storybook-plugin?style=flat-square&color=eee)](https://github.com/stenciljs/storybook)             |
 
 ### Addons
 

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.VITE,
 };

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,6 +60,7 @@ 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> = {

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/core/src/types/modules/renderers.ts

@@ -12,4 +12,5 @@ export enum SupportedRenderer {
   SERVER = 'server',
   SOLID = 'solid',
   NUXT = 'nuxt',
+  STENCIL = 'stencil',
 }

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -813,6 +813,19 @@ export const baseTemplates = {
       type: ProjectType.REACT_NATIVE_WEB,
     },
   },
+  'stencil/default-ts': {
+    name: 'StencilJS CLI Latest (Vite | TypeScript)',
+    script: 'npm init stencil@latest component {{beforeDir}}',
+    // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
+    inDevelopment: true,
+    expected: {
+      framework: '@stencil/storybook-plugin',
+      renderer: '@stencil/storybook-plugin',
+      builder: '@stencil/storybook-plugin',
+    },
+    // TODO: The community template does not provide standard stories, which is required for e2e tests.
+    skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'],
+  },
 } satisfies Record<string, BaseTemplates>;
 
 /**
@@ -1036,6 +1049,7 @@ export const daily: TemplateKey[] = [
   'lit-rsbuild/default-ts',
   'html-rsbuild/default-ts',
   // 'react-native-web-vite/rn-cli-ts',
+  // 'stencil/default-ts',
 ];
 
 export const templatesByCadence = { normal, merged, daily };

code/lib/create-storybook/src/bin/modernInputs.ts

@@ -16,6 +16,7 @@ export const supportedFrameworks = [
   'react-webpack5',
   'server-webpack5',
   'solid',
+  'stencil',
   'svelte-vite',
   'sveltekit',
   'vue3-rsbuild',
@@ -45,6 +46,7 @@ export const supportedFrameworksPackages = {
   nuxt: '@storybook/vue3-vite',
   qwik: 'storybook-framework-qwik',
   solid: 'storybook-solidjs-vite',
+  stencil: '@stencil/storybook-plugin',
   sveltekit: '@storybook/sveltekit',
   'react-native': '@storybook/react-native',
 } satisfies Record<Framework, string>;
@@ -68,6 +70,7 @@ export const supportedFrameworksNames = {
   nuxt: 'Nuxt',
   qwik: 'Qwik',
   solid: 'Solid',
+  stencil: 'Stencil',
   sveltekit: 'SvelteKit',
   'react-native': 'React Native',
 } satisfies Record<Framework, string>;

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

@@ -0,0 +1,16 @@
+import { ProjectType } from 'storybook/internal/cli';
+import { SupportedRenderer } from 'storybook/internal/types';
+
+import { defineGeneratorModule } from '../modules/GeneratorModule';
+
+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/initiate.ts

@@ -6,7 +6,6 @@ import {
 } from 'storybook/internal/common';
 import { withTelemetry } from 'storybook/internal/core-server';
 import { logTracker, logger } from 'storybook/internal/node-logger';
-import { ErrorCollector } from 'storybook/internal/telemetry';
 
 import {
   executeAddonConfiguration,

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,16 +32,18 @@ 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[] = [];
 
-    if (hasVite) {
+    if (hasVite || hasStencil) {
       detectedBuilders.push(SupportedBuilder.VITE);
     }
 

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

@@ -141,6 +141,13 @@ export class ProjectTypeService {
           return dependencies?.every(Boolean) ?? true;
         },
       },
+      {
+        preset: ProjectType.STENCIL,
+        dependencies: ['@stencil/core'],
+        matcherFunction: ({ dependencies }) => {
+          return dependencies?.every(Boolean) ?? true;
+        },
+      },
       // DO NOT MOVE ANY TEMPLATES BELOW THIS LINE
       // React is part of every Template, after Storybook is initialized once
       {