diff --git a/README.md b/README.md index 8ace05705106..437a2d6d6bbb 100644 --- a/README.md +++ b/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 diff --git a/code/core/scripts/generate-source-files.ts b/code/core/scripts/generate-source-files.ts index 0d07dd4468ff..0fb143c38f52 100644 --- a/code/core/scripts/generate-source-files.ts +++ b/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'); diff --git a/code/core/src/cli/projectTypes.ts b/code/core/src/cli/projectTypes.ts index b91f16460c86..e695237092f8 100644 --- a/code/core/src/cli/projectTypes.ts +++ b/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', diff --git a/code/core/src/common/utils/framework.ts b/code/core/src/common/utils/framework.ts index cb5e08434af6..03af346fb1d4 100644 --- a/code/core/src/common/utils/framework.ts +++ b/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 = { @@ -61,4 +62,5 @@ export const frameworkToBuilder: Record = [SupportedFramework.VUE3_RSBUILD]: SupportedBuilder.RSBUILD, [SupportedFramework.HTML_RSBUILD]: SupportedBuilder.RSBUILD, [SupportedFramework.WEB_COMPONENTS_RSBUILD]: SupportedBuilder.RSBUILD, + [SupportedFramework.STENCIL]: SupportedBuilder.VITE, }; diff --git a/code/core/src/common/utils/get-storybook-info.ts b/code/core/src/common/utils/get-storybook-info.ts index 4fe99186987a..78a735acf704 100644 --- a/code/core/src/common/utils/get-storybook-info.ts +++ b/code/core/src/common/utils/get-storybook-info.ts @@ -34,6 +34,7 @@ export const rendererPackages: Record = { // community (outside of monorepo) 'storybook-framework-qwik': SupportedRenderer.QWIK, 'storybook-solidjs-vite': SupportedRenderer.SOLID, + '@stencil/storybook-plugin': SupportedRenderer.STENCIL, }; export const frameworkPackages: Record = { @@ -59,6 +60,7 @@ export const frameworkPackages: Record = { '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 = { diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index e48771ceb2e1..ee703134a05d 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/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', } diff --git a/code/core/src/types/modules/renderers.ts b/code/core/src/types/modules/renderers.ts index a776f6fb7040..c3d291dea7cd 100644 --- a/code/core/src/types/modules/renderers.ts +++ b/code/core/src/types/modules/renderers.ts @@ -12,4 +12,5 @@ export enum SupportedRenderer { SERVER = 'server', SOLID = 'solid', NUXT = 'nuxt', + STENCIL = 'stencil', } diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index c6a7f29ebbcd..8c7c9149dc76 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/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; /** @@ -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 }; diff --git a/code/lib/create-storybook/src/bin/modernInputs.ts b/code/lib/create-storybook/src/bin/modernInputs.ts index 14cc822a1505..5d7946aaa448 100644 --- a/code/lib/create-storybook/src/bin/modernInputs.ts +++ b/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; @@ -68,6 +70,7 @@ export const supportedFrameworksNames = { nuxt: 'Nuxt', qwik: 'Qwik', solid: 'Solid', + stencil: 'Stencil', sveltekit: 'SvelteKit', 'react-native': 'React Native', } satisfies Record; diff --git a/code/lib/create-storybook/src/generators/STENCIL/index.ts b/code/lib/create-storybook/src/generators/STENCIL/index.ts new file mode 100644 index 000000000000..3061c7627a46 --- /dev/null +++ b/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'], + }; + }, +}); diff --git a/code/lib/create-storybook/src/generators/registerGenerators.ts b/code/lib/create-storybook/src/generators/registerGenerators.ts index 3ce2683888f7..c32b7dcd2084 100644 --- a/code/lib/create-storybook/src/generators/registerGenerators.ts +++ b/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([ solidGenerator, serverGenerator, qwikGenerator, + stencilGenerator, ]); /** Register all framework generators with the central registry */ diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 25780e25a4f5..d24f24ef660d 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/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, diff --git a/code/lib/create-storybook/src/services/FrameworkDetectionService.ts b/code/lib/create-storybook/src/services/FrameworkDetectionService.ts index b341afc424d5..8b221991945a 100644 --- a/code/lib/create-storybook/src/services/FrameworkDetectionService.ts +++ b/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); } diff --git a/code/lib/create-storybook/src/services/ProjectTypeService.ts b/code/lib/create-storybook/src/services/ProjectTypeService.ts index fe25cb5fda2a..0f61664ad570 100644 --- a/code/lib/create-storybook/src/services/ProjectTypeService.ts +++ b/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 {