CLI: Add Stencil init support #31205

christian-bromann · 2025-04-23T15:42:01Z

Closes #

What I did

The Stencil team has published support for integrating into Storybook. We are still working out the details and adding docs to our project page but I wanted to start the process on the Storybook site to allow creating Storybook projects with Stencil. For now I've copied basically what Qwik has been doing to integrate into the CLI. I may have made changes that were not necessary so please advise what is required here. Thank you!

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Running yarn task --task sandbox --start-from auto --template stencil/default-ts fails due to:

Error running task sandbox for stencil/default-ts:
{
  "shortMessage": "Command failed with exit code 7: node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes",
  "command": "node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes",
  "escapedCommand": "\"node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes\"",
  "exitCode": 7,
  "failed": true,
  "timedOut": false,
  "isCanceled": false,
  "killed": false
}

Error: Command failed with exit code 7: node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes
    at makeError (/private/tmp/storybook/scripts/node_modules/execa/lib/error.js:59:13)
    at handlePromise (/private/tmp/storybook/scripts/node_modules/execa/index.js:119:50)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async exec (/private/tmp/storybook/scripts/utils/exec.ts:44:7)
    at async executeCLIStep (/private/tmp/storybook/scripts/utils/cli-step.ts:122:3)
    at async init (/private/tmp/storybook/scripts/tasks/sandbox-parts.ts:182:7)
    at async Object.run (/private/tmp/storybook/scripts/tasks/sandbox.ts:113:5)
    at async runTask (/private/tmp/storybook/scripts/task.ts:324:24)
    at async run (/private/tmp/storybook/scripts/task.ts:494:28) {
  shortMessage: 'Command failed with exit code 7: node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes',
  command: 'node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes',
  escapedCommand: '"node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes"',
  exitCode: 7,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
❯ node /private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs add @storybook/addon-a11y --yes
/private/tmp/storybook/code/lib/cli-storybook/bin/index.cjs:23
  throw error;
  ^

Error: Unable to find or evaluate null: SB_CORE-SERVER_0006 (MainFileMissingError): No configuration files have been found in your configDir: .storybook.
Storybook needs a "main.js" file, please add it.

You can pass a --config-dir flag to tell Storybook, where your main.js file is located at.

More info: https://storybook.js.org/docs/configure

    at getStorybookData (/private/tmp/storybook/code/lib/cli-storybook/dist/bin/index.cjs:1027:11)
    at async add (/private/tmp/storybook/code/lib/cli-storybook/dist/bin/index.cjs:1099:90)

Node.js v20.18.1

Running yarn task --task sandbox --start-from auto --template react-vite/default-ts was fine.

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-31205-sha-f4377325. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information


Published version	`0.0.0-pr-31205-sha-f4377325`
Triggered by	@shilman
Repository	christian-bromann/storybook
Branch	`cb/storybook`
Commit	`f4377325`
Datetime	Wed Apr 30 02:24:09 UTC 2025 (`1745979849`)
Workflow run	14745347979

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=31205

Greptile Summary

Adds support for Stencil framework in Storybook's CLI, including framework detection and sandbox template setup, though there are configuration issues to resolve.

Added Stencil framework detection in code/core/src/cli/project_types.ts using '@stencil/core' package
Added Stencil to framework mappings in code/core/src/common/utils/get-storybook-info.ts with '@stencil/storybook-plugin'
Added 'stencil/default-ts' template in code/lib/cli-storybook/src/sandbox-templates.ts (marked as inDevelopment)
Missing main.js configuration file in .storybook directory causing sandbox template failures
Documentation in docs/get-started/install.mdx needs correction for incorrect README link referencing Qwik

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

greptile-apps

_{15 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

docs/get-started/install.mdx

greptile-apps

_{15 file(s) reviewed, 2 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-04-23T15:47:43Z

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

+  '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'],
+  },


logic: The template uses '@stencil/storybook-plugin' for all three roles (framework, renderer, builder) which is unusual. Consider if this is the intended architecture or if separate packages should be used like other templates.

I oriented myself to storybook-framework-qwik which has all in one as well.

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

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

shilman · 2025-04-25T02:10:55Z

Thanks so much Christian!! I broke my wrist so I'm running at half speed--or less--but I'll kick the tires and try to figure out what it takes to get this merged over the coming week. Really exciting!!! 🙀

christian-bromann · 2025-04-25T05:52:21Z

@shilman thanks so much! No rush—focus on healing your wrist first. Even without CLI integration, the onboarding process is already super straightforward.

greptile-apps

_{15 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-04-25T07:10:51Z

scripts/create-nx-sandbox-projects.ts

@@ -19,7 +19,7 @@ const projectJson = (name: string, framework: string, tags: string[]) => ({
    'links',
    'onboarding',
    'blocks',
-    ...(!['storybook-framework-qwik', 'storybook-solidjs-vite'].includes(framework)
+    ...(!['storybook-framework-qwik', 'storybook-solidjs-vite', '@stencil/storybook-plugin'].includes(framework)


style: Consider extracting special framework packages into a constant array to avoid repetition and make maintenance easier

nx-cloud · 2025-04-30T02:25:34Z

View your CI Pipeline Execution ↗ for commit f437732.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 41s	View ↗

☁️ Nx Cloud last updated this comment at 2025-04-30 02:25:33 UTC

shilman · 2025-04-30T02:54:20Z

Hi Christian, thanks for your patience on this. I did a canary release and tested it out in a fresh Stencil "component" project.

 1041  npm init stencil
 1042  cd my-stencil
 1043  npm create [email protected]

I found a few problems that we should address. I didn't dig into debug any of these yet:

The CLI did not detect that it was a stencil project. I chose stencil by hand.
The CLA gave me the choice of both webpack and vite. Not so much a problem, but a suggestion that we should probably just support vite for new projects.
Once installed, I hit the following error. I resolved it by manually installing @storybook/html.

10:39:05 AM [vite] Internal server error: Failed to resolve import "@storybook/html/dist/entry-preview-docs.mjs" from "virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: virtual:/@storybook/builder-vite/vite-app.js:18:43
  16 |     
  17 |      const configs = await Promise.all([hmrPreviewAnnotationModules[0] ?? import('@stencil/storybook-plugin/dist/preview.js'),
  18 |   hmrPreviewAnnotationModules[1] ?? import('@storybook/html/dist/entry-preview-docs.mjs'),
     |                                            ^
  19 |   hmrPreviewAnnotationModules[2] ?? import('@storybook/addon-docs/preview')])
  20 |      return composeConfigs([...configs, preview]);

There's a version mismatch between the stencil plugin and storybook. This is because the stencil plugin is targeting the latest version of Storybook. However, this PR is targeting the next version, 9.0. Given that we're going to release 9.0 in a few weeks, I propose updating the stencil plugin to ^9.0.0-0.0, since I don't think it's worth jumping through the hoops required to patch this back to 8.x. and our users will upgrade pretty fast anyway.

WARN You are currently using Storybook 0.0.0-pr-31205-sha-f4377325 but you have packages which are incompatible with it:
WARN - @storybook/[email protected] which depends on ^9.0.0-beta.6
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/renderers/html
WARN - @stencil/[email protected] which depends on ^8.6.12
WARN  Repo: https://github.com/stenciljs/storybook

Let me know what you think and if you'd like to discuss or need any help resolving any of these issues! I'm also happy to create a new canary whenever it's useful.

christian-bromann · 2025-04-30T02:56:30Z

@shilman thanks for testing it. I will take a look and report back.

minecrawler · 2025-07-07T12:27:21Z

@christian-bromann do you have an update?

christian-bromann · 2025-07-07T17:35:34Z

Not yet, I have been busy with some other tasks but am planning to get back to this.

christian-bromann added 2 commits April 23, 2025 08:29

CLI: add support for generating Storybook with Stencil

9d57d5e

fix ordering

77e8ff2

christian-bromann requested review from kylegach and jonniebigodes as code owners April 23, 2025 15:42

greptile-apps bot reviewed Apr 23, 2025

View reviewed changes

docs/get-started/install.mdx Outdated Show resolved Hide resolved

greptile-apps bot reviewed Apr 23, 2025

View reviewed changes

christian-bromann and others added 3 commits April 23, 2025 08:51

don't run daily until we have officialy released it

dc5452d

Update docs/get-started/install.mdx

1f50c4f

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Merge branch 'next' into cb/storybook

9a7436f

shilman added feature request cli web-components stencil labels Apr 25, 2025

shilman changed the title ~~CLI: add support for generating Storybook with Stencil~~ CLI: Add Stencil init support Apr 25, 2025

greptile-apps bot reviewed Apr 25, 2025

View reviewed changes

valentinpalkovic assigned shilman Apr 28, 2025

Merge branch 'next' into cb/storybook

f437732

shilman added the ci:normal label Apr 30, 2025

github-actions bot added the Stale label Jul 4, 2025

github-actions bot added needs triage and removed Stale labels Jul 11, 2025

github-actions bot added the Stale label Jul 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CLI: Add Stencil init support #31205

CLI: Add Stencil init support #31205

christian-bromann commented Apr 23, 2025 •

edited by storybook-bot

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

christian-bromann Apr 23, 2025

Uh oh!

Uh oh!

shilman commented Apr 25, 2025

Uh oh!

christian-bromann commented Apr 25, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Apr 25, 2025

Uh oh!

nx-cloud bot commented Apr 30, 2025

Uh oh!

shilman commented Apr 30, 2025 •

edited

Loading

Uh oh!

christian-bromann commented Apr 30, 2025

Uh oh!

minecrawler commented Jul 7, 2025

Uh oh!

christian-bromann commented Jul 7, 2025

Uh oh!

Uh oh!

Uh oh!

CLI: Add Stencil init support #31205

Are you sure you want to change the base?

CLI: Add Stencil init support #31205

Conversation

christian-bromann commented Apr 23, 2025 • edited by storybook-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

christian-bromann Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shilman commented Apr 25, 2025

Uh oh!

christian-bromann commented Apr 25, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

nx-cloud bot commented Apr 30, 2025

Uh oh!

shilman commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christian-bromann commented Apr 30, 2025

Uh oh!

minecrawler commented Jul 7, 2025

Uh oh!

christian-bromann commented Jul 7, 2025

Uh oh!

Uh oh!

christian-bromann commented Apr 23, 2025 •

edited by storybook-bot

Loading

shilman commented Apr 30, 2025 •

edited

Loading