{"id":26438,"library":"storybook-addon-stencil","title":"storybook-addon-stencil","description":"A Stencil compiler integration for Storybook (v8). Current stable version 0.2.3, published April 2024. Integrates with @storybook/web-components-vite to transpile Stencil components on the fly, automatically handling custom element definition, dependencies, and HMR. Key differentiators: eliminates need for manual defineCustomElements calls, extracts ArgTypes and Controls from Stencil source, and manages CSS and component imports via Vite plugins. Requires Stencil v4 and Storybook v8. Peer dependency on TypeScript ^5.4.3. Limited adoption; last release over a year ago.","status":"active","version":"0.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/ZanichelliEditore/storybook-addon-stencil","tags":["javascript","storybook","storybook-addons","stencil","web-components","typescript"],"install":[{"cmd":"npm install storybook-addon-stencil","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-addon-stencil","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-addon-stencil","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Stencil compilation","package":"typescript","optional":true}],"imports":[{"note":"Register in .storybook/main.js as an addon entry with object syntax to pass stencilOptions","wrong":"\"storybook-addon-stencil\" (string without options object)","symbol":"default (addon registration)","correct":"{\n  name: 'storybook-addon-stencil',\n  options: { stencilOptions: {} }\n}"},{"note":"Vite plugins are exported from a separate subpath; available since v0.2.0","wrong":"import { stencilVitePlugin } from 'storybook-addon-stencil'","symbol":"stencilVitePlugin","correct":"import { stencilVitePlugin } from 'storybook-addon-stencil/vite'"},{"note":"Separate Vite plugin for CSS; required alongside stencilVitePlugin for full functionality","wrong":"import { cssVitePlugin } from 'storybook-addon-stencil'","symbol":"cssVitePlugin","correct":"import { cssVitePlugin } from 'storybook-addon-stencil/vite'"}],"quickstart":{"code":"// .storybook/main.js\n/** @type { import('@storybook/web-components-vite').StorybookConfig } */\nconst config = {\n  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],\n  framework: '@storybook/web-components-vite',\n  addons: [\n    {\n      name: 'storybook-addon-stencil',\n      options: {\n        stencilOptions: {\n          // optional: Stencil transpile options\n        },\n      },\n    },\n  ],\n};\nexport default config;\n\n// .storybook/preview.js\n// No need to call defineCustomElements here\n\n// stories/MyComponent.stories.js\nimport './my-component';\n\nexport default {\n  title: 'MyComponent',\n  component: 'my-component', // auto-infers argTypes\n};\n\nexport const Default = {\n  args: {\n    'first-prop': 'Hello',\n  },\n};","lang":"javascript","description":"Minimal setup to add the addon, register it in Storybook config, and import a Stencil component in a story."},"warnings":[{"fix":"Upgrade Stencil to ^4.0.0 and Storybook to ^8.0.0.","message":"v0.2.0 dropped support for Stencil v3 and Storybook v7; requires Stencil v4 and Storybook v8.","severity":"breaking","affected_versions":"< 0.2.0"},{"fix":"Switch to @storybook/web-components-vite and remove any webpack-related addons.","message":"v0.2.0 moved from Webpack to Vite. Existing projects using custom Webpack configs must migrate to Vite.","severity":"breaking","affected_versions":"< 0.2.0"},{"fix":"Remove defineCustomElements() from .storybook/preview.js.","message":"Do NOT call defineCustomElements in preview.js; the addon handles it automatically. Doing so can cause double registration errors or broken HMR.","severity":"gotcha","affected_versions":">= 0.1.0"},{"fix":"Add import './my-component' at the top of each story file for every component used.","message":"All components must be explicitly imported in each story file; the addon does not auto-discover them.","severity":"gotcha","affected_versions":">= 0.1.0"},{"fix":"Use <ArgTypes of={Default} /> in MDX files instead of relying on autodocs.","message":"The addon's automatic doc extraction may not work with Storybook's autodocs; manual ArgTypes doc block is recommended.","severity":"deprecated","affected_versions":">= 0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Upgrade to >=0.2.0, or import from 'storybook-addon-stencil' (but only the addon entry point).","cause":"Only available since v0.2.0; old versions do not export from subpath.","error":"Error: Cannot find module 'storybook-addon-stencil/vite'"},{"fix":"Remove defineCustomElements() from .storybook/preview.js.","cause":"Calling defineCustomElements() in preview.js after the addon already handles it.","error":"TypeError: e.defineCustomElements is not a function"},{"fix":"Switch framework to '@storybook/web-components-vite' in Storybook config.","cause":"Using this addon with @storybook/react instead of @storybook/web-components-vite.","error":"Warning: React is not a registered component (or similar React-related error)"},{"fix":"Run stencil build first, or ensure storybook: true in Stencil config for HMR.","cause":"Stencil build output not found; the addon expects a dist directory with Stencil output.","error":"ENOENT: no such file or directory, open '...dist/stencil-output.json'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}