{"library":"storybook-addon-stencil","title":"storybook-addon-stencil","type":"library","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.","language":"javascript","status":"active","last_verified":"Fri May 01","install":{"commands":["npm install storybook-addon-stencil"],"cli":null},"imports":["{\n  name: 'storybook-addon-stencil',\n  options: { stencilOptions: {} }\n}","import { stencilVitePlugin } from 'storybook-addon-stencil/vite'","import { cssVitePlugin } from 'storybook-addon-stencil/vite'"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/ZanichelliEditore/storybook-addon-stencil","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-addon-stencil","openapi_spec":null,"status_page":null,"smithery":null},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}