CLI: Add Stencil Integration #32768
CLI: Add Stencil Integration #32768
Conversation
artursopelnik
requested review from
jonniebigodes and
kylegach
as code owners
📝 WalkthroughWalkthroughAdds StencilJS support across the codebase: types, enums, mappings, detection, CLI templates, generator wiring, and create-storybook inputs so tooling can recognize and initialize Stencil projects; also updates README to list StencilJS. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
✨ Finishing touches
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (5)**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (3)📚 Learning: 2025-09-29T13:20:23.346ZApplied to files:
📚 Learning: 2025-11-24T17:49:59.279ZApplied to files:
📚 Learning: 2025-09-17T07:31:04.432ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
artursopelnik
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
code/core/src/cli/detect.test.ts (1)
229-238: Consider updating test fixture to use current version of @stencil/core.The latest stable version of @stencil/core is 4.36.3, but the test fixture uses version 4.30.0. While this is a valid historical version and the test will work correctly, test fixtures should ideally reflect current package versions to avoid testing with outdated dependencies. Consider updating the fixture to use version 4.36.3 or another recent stable version.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
README.md(1 hunks)code/core/src/cli/detect.test.ts(1 hunks)code/core/src/cli/detect.ts(1 hunks)code/core/src/cli/helpers.ts(1 hunks)code/core/src/cli/project_types.ts(4 hunks)code/core/src/common/utils/framework-to-renderer.ts(1 hunks)code/core/src/types/modules/frameworks.ts(1 hunks)code/core/src/types/modules/renderers.ts(1 hunks)code/lib/cli-storybook/src/sandbox-templates.ts(2 hunks)code/lib/create-storybook/src/bin/modernInputs.ts(3 hunks)code/lib/create-storybook/src/generators/STENCIL/index.ts(1 hunks)code/lib/create-storybook/src/initiate.ts(2 hunks)docs/get-started/install.mdx(3 hunks)scripts/create-nx-sandbox-projects.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/core/src/cli/detect.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/core/src/cli/detect.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/core/src/cli/detect.test.tsscripts/create-nx-sandbox-projects.tscode/core/src/cli/helpers.tscode/lib/create-storybook/src/generators/STENCIL/index.tscode/core/src/types/modules/renderers.tscode/core/src/cli/detect.tscode/lib/create-storybook/src/initiate.tscode/lib/cli-storybook/src/sandbox-templates.tscode/core/src/cli/project_types.tscode/core/src/types/modules/frameworks.tscode/core/src/common/utils/framework-to-renderer.tscode/lib/create-storybook/src/bin/modernInputs.ts
**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests usingvi.mock()(e.g., filesystem, loggers)
Files:
code/core/src/cli/detect.test.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/src/cli/detect.test.tsscripts/create-nx-sandbox-projects.tscode/core/src/cli/helpers.tscode/lib/create-storybook/src/generators/STENCIL/index.tscode/core/src/types/modules/renderers.tscode/core/src/cli/detect.tscode/lib/create-storybook/src/initiate.tscode/lib/cli-storybook/src/sandbox-templates.tscode/core/src/cli/project_types.tscode/core/src/types/modules/frameworks.tscode/core/src/common/utils/framework-to-renderer.tscode/lib/create-storybook/src/bin/modernInputs.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/src/cli/detect.test.tscode/core/src/cli/helpers.tscode/lib/create-storybook/src/generators/STENCIL/index.tscode/core/src/types/modules/renderers.tscode/core/src/cli/detect.tscode/lib/create-storybook/src/initiate.tscode/lib/cli-storybook/src/sandbox-templates.tscode/core/src/cli/project_types.tscode/core/src/types/modules/frameworks.tscode/core/src/common/utils/framework-to-renderer.tscode/lib/create-storybook/src/bin/modernInputs.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/cli/detect.test.tsscripts/create-nx-sandbox-projects.tscode/core/src/cli/helpers.tscode/lib/create-storybook/src/generators/STENCIL/index.tscode/core/src/types/modules/renderers.tscode/core/src/cli/detect.tscode/lib/create-storybook/src/initiate.tscode/lib/cli-storybook/src/sandbox-templates.tscode/core/src/cli/project_types.tscode/core/src/types/modules/frameworks.tscode/core/src/common/utils/framework-to-renderer.tscode/lib/create-storybook/src/bin/modernInputs.ts
scripts/**/*.{ts,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In Node.js scripts, use
storybook/internal/node-loggerinstead ofconsole.*
Files:
scripts/create-nx-sandbox-projects.ts
**/README.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Update package or feature README files when making significant changes
Files:
README.md
docs/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Update documentation under
docs/for significant changes, including migration guides for breaking changes
Files:
docs/get-started/install.mdx
🧬 Code graph analysis (1)
code/lib/create-storybook/src/generators/STENCIL/index.ts (2)
code/lib/create-storybook/src/generators/types.ts (1)
Generator(35-40)code/lib/create-storybook/src/generators/baseGenerator.ts (1)
baseGenerator(222-482)
🪛 markdownlint-cli2 (0.18.1)
README.md
113-113: Images should have alternate text (alt text)
(MD045, no-alt-text)
🔇 Additional comments (21)
scripts/create-nx-sandbox-projects.ts (1)
22-24: LGTM! Consistent handling of external Stencil plugin.The addition of
'@stencil/storybook-plugin'to the exclusion list follows the same pattern used for other external frameworks like Qwik and SolidJS, ensuring proper dependency handling for community-maintained plugins.code/core/src/cli/detect.ts (1)
138-138: LGTM! Correct builder selection for STENCIL.The addition of
ProjectType.STENCILto the Vite builder fallback is consistent with theframeworkToDefaultBuildermapping inhelpers.ts(line 156) and appropriately groups STENCIL with other Vite-based frameworks.code/core/src/common/utils/framework-to-renderer.ts (1)
34-34: LGTM! Renderer mapping correctly added.The
stenciltostencilmapping is properly placed alphabetically and follows the same pattern as other renderer entries.docs/get-started/install.mdx (3)
156-156: LGTM! Framework type table updated correctly.The Stencil entry in the CLI framework detection table is properly formatted and consistent with other framework entries.
293-296: LGTM! Troubleshooting section added for Stencil users.The IfRenderer block for Stencil follows the same pattern as other renderer-specific troubleshooting sections and provides appropriate links to the Stencil Storybook repository and community support.
319-319: LGTM! Renderer array updated to include Stencil.The addition of
'stencil'to the IfRenderer's renderer array ensures that the conditional content displays correctly for Stencil projects.code/lib/create-storybook/src/initiate.ts (2)
54-54: LGTM! Generator import correctly added.The
stencilGeneratorimport is properly placed alphabetically among other framework generator imports.
199-202: LGTM! STENCIL project type handler correctly implemented.The
ProjectType.STENCILcase follows the exact same pattern as other framework cases, properly calling the generator and logging an appropriate message.code/core/src/cli/helpers.ts (1)
156-156: LGTM! Default builder mapping correctly configured.The
stencil: CoreBuilder.Vitemapping is properly placed alphabetically and aligns with the builder detection logic indetect.ts(line 138), ensuring consistent Vite builder selection for Stencil projects.code/lib/create-storybook/src/generators/STENCIL/index.ts (1)
4-6: LGTM!The generator implementation correctly delegates to
baseGeneratorwith 'stencil' as both the renderer and framework. This follows the established pattern for framework generators.code/core/src/types/modules/frameworks.ts (1)
21-22: LGTM!The addition of 'stencil' to
SupportedFrameworksis consistent with the other framework entries.code/lib/create-storybook/src/bin/modernInputs.ts (3)
19-19: LGTM!Adding 'stencil' to the
supportedFrameworksarray is correct and maintains alphabetical ordering within the array.
49-49: LGTM!The package mapping to '@stencil/storybook-plugin' is consistent with the external framework configuration.
73-73: LGTM!The display name 'Stencil' is clear and consistent with the naming convention used for other frameworks.
code/core/src/types/modules/renderers.ts (1)
15-15: LGTM!The addition of 'stencil' to
SupportedRenderersis consistent with the other renderer entries.code/lib/cli-storybook/src/sandbox-templates.ts (2)
667-679: LGTM!The Stencil template configuration is well-structured with appropriate flags:
inDevelopment: trueprevents CI usage until the template is production-ready- Extensive
skipTaskslist accounts for missing standard stories- The expected framework/renderer/builder all pointing to '@stencil/storybook-plugin' matches the pattern used by other community frameworks like Qwik
890-890: LGTM!Commenting out 'stencil/default-ts' in the daily templates is appropriate given the
inDevelopment: trueflag.code/core/src/cli/project_types.ts (4)
35-39: LGTM!The external framework configuration for Stencil is correctly structured and consistent with similar frameworks like Qwik.
52-52: LGTM!Adding 'stencil' to the
SUPPORTED_RENDERERSarray is correct and necessary for renderer support.
79-79: LGTM!The
ProjectType.STENCILenum member addition is consistent with other framework types.
258-264: Move STENCIL template above the "DO NOT MOVE" comment or clarify constraint intent.Stencil projects do not require React as a dependency, so the original concern about detection order is unfounded—there's no risk of a Stencil project matching the REACT template first.
However, the placement issue remains: STENCIL is positioned below the "DO NOT MOVE ANY TEMPLATES BELOW THIS LINE" comment at line 242, which appears to violate the documented constraint. While WEBPACK_REACT and REACT templates are also below this line, moving STENCIL above it would:
- Clarify whether the constraint applies to all templates or only React-related ones
- Maintain logical grouping with other early-detection frameworks
- Avoid confusion about intentional constraint violations
Either move STENCIL above line 242, or add a clarifying comment explaining why this template is exempt from the "DO NOT MOVE" constraint.
|
View your CI Pipeline Execution ↗ for commit 95098e2 ☁️ Nx Cloud last updated this comment at |
docs/get-started/install.mdx
Outdated
| </IfRenderer> | ||
|
|
||
| <IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid' ]}> | ||
| <IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid', 'stencil' ]}> |
There was a problem hiding this comment.
@artursopelnik, the same applies here as already mentioned regarding the documentation rendering
docs/get-started/install.mdx
Outdated
| <IfRenderer renderer="stencil"> | ||
| * [Storybook's Stencil README](https://github.com/stenciljs/storybook) for more information on how to set up Storybook in your Stencil project. | ||
| * [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help. | ||
| </IfRenderer> |
There was a problem hiding this comment.
@artursopelnik, quick item here, if you don't mind. This will require a change in the Storybook documentation website to allow it to render when a user selects the Stencil framework, as we currently don't have support for it. This may lead to inconsistent documentation rendering. Until that happens, we can rely on the renderer="web-components"to allow the documentation to render effectively, wouldn't you agree?
There was a problem hiding this comment.
@jonniebigodes yes, let's update the documentation later once the feature has been implemented.
|
@shilman ? |
|
@shilman We need your opinion on whether we want to add Stencil as a core framework in the monorepo. |
|
@ghengeveld Can you please test this out? If it works well, then we should add it. It did not work at all last time I tried it. I don't have time to field this, which is why I removed my assignment last week and am removing it again now. |
|
Our recent CLI revamp work was quite disruptive, which explains the merge conflicts. I'll try my best to update the PR! |
- 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.
|
I have updated the PR. Please let me know whether the changes make sense! |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/core/src/common/utils/framework.ts (1)
3-40: Add missing framework→renderer mapping for STENCIL.
frameworkToRendereris declared asRecord<SupportedFramework | SupportedRenderer, SupportedRenderer>, but there’s no entry forSupportedFramework.STENCIL. Only the renderer key is present:[SupportedRenderer.STENCIL]: SupportedRenderer.STENCIL,This will either fail type‑checking (missing required key) or yield
undefinedwhen resolving a STENCIL framework to its renderer.Add the framework mapping in the “frameworks” section, e.g.:
[SupportedFramework.NUXT]: SupportedRenderer.VUE3, + [SupportedFramework.STENCIL]: SupportedRenderer.STENCIL,
♻️ Duplicate comments (1)
README.md (1)
113-113: Add alt text to the Stencil version badge for accessibility.The npm version badge in the StencilJS row still lacks alt text (
), which is flagged by markdownlint (MD045) and harms screen‑reader accessibility.-| [StencilJS](https://github.com/stenciljs/storybook) | [](/) | [](https://github.com/stenciljs/storybook) | +| [StencilJS](https://github.com/stenciljs/storybook) | [](/) | [](https://github.com/stenciljs/storybook) |
🧹 Nitpick comments (1)
code/core/scripts/generate-source-files.ts (1)
90-100: Stencil added to generated community frameworks is correct; comment could be generalized.Including
'stencil'inthirdPartyFrameworkscorrectly ensures it appears in the generatedSupportedFrameworkenum alongside other community frameworks. The preceding comment still calls out onlyqwikandsolid, which is now outdated; consider rewording it to describe the mechanism generically instead of listing specific frameworks.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
README.md(1 hunks)code/core/scripts/generate-source-files.ts(1 hunks)code/core/src/cli/projectTypes.ts(1 hunks)code/core/src/common/utils/framework.ts(2 hunks)code/core/src/common/utils/get-storybook-info.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use ESLint and Prettier configurations that are enforced in the codebase
Files:
code/core/scripts/generate-source-files.tscode/core/src/cli/projectTypes.tscode/core/src/common/utils/get-storybook-info.tscode/core/src/common/utils/framework.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Enable TypeScript strict mode
Files:
code/core/scripts/generate-source-files.tscode/core/src/cli/projectTypes.tscode/core/src/common/utils/get-storybook-info.tscode/core/src/common/utils/framework.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/scripts/generate-source-files.tscode/core/src/cli/projectTypes.tscode/core/src/common/utils/get-storybook-info.tscode/core/src/common/utils/framework.ts
code/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions that need to be tested from their modules
Files:
code/core/scripts/generate-source-files.tscode/core/src/cli/projectTypes.tscode/core/src/common/utils/get-storybook-info.tscode/core/src/common/utils/framework.ts
code/**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing
Files:
code/core/scripts/generate-source-files.tscode/core/src/cli/projectTypes.tscode/core/src/common/utils/get-storybook-info.tscode/core/src/common/utils/framework.ts
README.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Update relevant README files for significant code changes
Files:
README.md
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Follow existing patterns and conventions in the Storybook codebase
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
README.md
📚 Learning: 2025-11-28T14:50:24.889Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Follow existing patterns and conventions in the Storybook codebase
Applied to files:
README.md
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
README.md
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
README.md
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/core/src/common/utils/get-storybook-info.ts
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/core/src/common/utils/get-storybook-info.ts
🪛 markdownlint-cli2 (0.18.1)
README.md
113-113: Images should have alternate text (alt text)
(MD045, no-alt-text)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: normal
🔇 Additional comments (3)
code/core/src/cli/projectTypes.ts (1)
19-20: ProjectType.STENCIL enum entry looks consistent.The
STENCIL = 'stencil'addition fits the existing naming pattern and ordering for project types; no further changes needed here.code/core/src/common/utils/framework.ts (1)
42-66: frameworkToBuilder STENCIL mapping is wired correctly.
[SupportedFramework.STENCIL]: SupportedBuilder.STENCILaligns with how other community builders are mapped and matches the new builder enum; once the renderer mapping above is added, this part should work as expected.code/core/src/common/utils/get-storybook-info.ts (1)
22-72: Stencil plugin mappings are consistent across renderer, framework, and builder.The
@stencil/storybook-pluginentries inrendererPackages,frameworkPackages, andbuilderPackagesall point to the correspondingSupportedRenderer.STENCIL,SupportedFramework.STENCIL, andSupportedBuilder.STENCILvalues, matching the patterns used for other community frameworks and keepinggetStorybookInfo’s resolution logic coherent.
- Updated framework mappings to replace 'stencil' with 'vite' in framework.ts and get-storybook-info.ts. - Removed Stencil from the SupportedBuilder enum in builders.ts. - Adjusted FrameworkDetectionService to detect Vite when Stencil is present, removing direct Stencil support.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/core/src/common/utils/framework.ts(2 hunks)code/core/src/common/utils/get-storybook-info.ts(2 hunks)code/lib/create-storybook/src/services/FrameworkDetectionService.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- code/core/src/common/utils/get-storybook-info.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use ESLint and Prettier configurations that are enforced in the codebase
Files:
code/lib/create-storybook/src/services/FrameworkDetectionService.tscode/core/src/common/utils/framework.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Enable TypeScript strict mode
Files:
code/lib/create-storybook/src/services/FrameworkDetectionService.tscode/core/src/common/utils/framework.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/lib/create-storybook/src/services/FrameworkDetectionService.tscode/core/src/common/utils/framework.ts
code/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions that need to be tested from their modules
Files:
code/lib/create-storybook/src/services/FrameworkDetectionService.tscode/core/src/common/utils/framework.ts
code/**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing
Files:
code/lib/create-storybook/src/services/FrameworkDetectionService.tscode/core/src/common/utils/framework.ts
🧠 Learnings (1)
📚 Learning: 2025-11-28T14:50:24.889Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Use ESLint and Prettier configurations that are enforced in the codebase
Applied to files:
code/lib/create-storybook/src/services/FrameworkDetectionService.ts
🔇 Additional comments (2)
code/lib/create-storybook/src/services/FrameworkDetectionService.ts (2)
35-35: Package names verified. Both@stencil/core(4.39.0) and@stencil/storybook-plugin(0.5.6) are valid npm packages. The Stencil detection logic correctly mirrors the pattern used for other builders and appropriately treats Stencil as using the Vite builder.
12-12: > Likely an incorrect or invalid review comment.
| [SupportedRenderer.SVELTE]: SupportedRenderer.SVELTE, | ||
| [SupportedRenderer.VUE3]: SupportedRenderer.VUE3, | ||
| [SupportedRenderer.WEB_COMPONENTS]: SupportedRenderer.WEB_COMPONENTS, | ||
| [SupportedRenderer.STENCIL]: SupportedRenderer.STENCIL, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, find the type definition files
fd -t f "renderers.ts|frameworks.ts" code/Repository: storybookjs/storybook
Length of output: 213
🏁 Script executed:
# Check if those specific files exist and their locations
find code -name "renderers.ts" -o -name "frameworks.ts" 2>/dev/nullRepository: storybookjs/storybook
Length of output: 147
🏁 Script executed:
# Also check the framework.ts file to see context around lines 39 and 65
wc -l code/core/src/common/utils/framework.ts
head -n 80 code/core/src/common/utils/framework.tsRepository: storybookjs/storybook
Length of output: 3487
🏁 Script executed:
cat -n code/core/src/types/modules/renderers.tsRepository: storybookjs/storybook
Length of output: 484
🏁 Script executed:
cat -n code/core/src/types/modules/frameworks.tsRepository: storybookjs/storybook
Length of output: 989
STENCIL types are not defined in the type system.
The enums SupportedRenderer.STENCIL and SupportedFramework.STENCIL do not exist in code/core/src/types/modules/renderers.ts or code/core/src/types/modules/frameworks.ts. These type definitions must be added before the mappings at lines 39 and 65 in framework.ts can be used. Note that frameworks.ts is marked as auto-generated and should not be edited directly.
🤖 Prompt for AI Agents
In code/core/src/common/utils/framework.ts around line 39, the mapping
references SupportedRenderer.STENCIL and SupportedFramework.STENCIL but those
enum members are missing from code/core/src/types/modules/renderers.ts and
code/core/src/types/modules/frameworks.ts (frameworks.ts is auto-generated and
must not be edited directly). Add the STENCIL member to the canonical type
definitions: update code/core/src/types/modules/renderers.ts to export
SupportedRenderer.STENCIL and update the source that generates
code/core/src/types/modules/frameworks.ts so SupportedFramework.STENCIL is
generated (or, if changing the generator is not possible, add a separate
declaration augmentation file that extends the SupportedFramework enum/type with
STENCIL) so the mappings in framework.ts resolve cleanly.
|
@artursopelnik I am making some progress. Now I am stumbling upon some wrongly defined dependencies, such as:
|
5 participants
What I did
This PR continues the work started in the previous branch #31205 from @christian-bromann
It aims to integrate a Stencil installer into Storybook’s CLI, enabling users to easily set up Stencil projects with Storybook.
If we can get everything working well, I would be happy to add the Stencil installer officially to Storybook’s CLI.
Following up on comments from #31205 from @shilman , I’ve made some adjustments to fix the following issues:
CLI project detection for Stencil
CLI using Vite as the default for Stencil projects
I believe the last two points may already be fixed in newer versions, as users should be on an updated Storybook 9 version.
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.