I had a lot of trouble getting this setup and working properly, but I finally managed to get it working. I hope this saves someone the same anguish I went through.
Step 1: Install Stencil
npm init stencil
At the prompt select components then name your project and confirm.
Step 2: Navigate to Project and Install Dependencies
cd <your-project-name>
npm install
Step 3: Integrate Storybook
npx sb init --type web_components
Select Vite at the prompt.
Step 4. Update compilerOptions in tsconfig.json
"compilerOptions": {
...,
"skipLibCheck": true
}
Step 5. Configure Storybook
Open .storybook/preview.js and add the following code to the top of the file.
import {defineCustomElements} from '../loader';
defineCustomElements();
Now, open .storybook/main.ts (you may have to update the js file to ts) and copy the following code.
import type { StorybookConfig } from '@storybook/web-components-vite';
const config: StorybookConfig = {
stories: ['../src/components', '../src/styleguide', '../src/stories'],
addons: ['@storybook/addon-essentials'],
//staticDirs: ['../dist/lib-components'],
docs: {
autodocs: true
},
async viteFinal(config, { configType }) {
const { mergeConfig } = await import('vite')
if (configType !== 'DEVELOPMENT') {
return config
}
return mergeConfig(config, {
build: {
// this is set to 'dist' by default which causes hot-reloading for stencil components to break
// see: https://vitejs.dev/config/server-options.html#server-watch
// setting it to anything other than dist fixes the issue
outDir: 'dist-vite'
}
})
},
core: {
disableTelemetry: true
},
framework: '@storybook/web-components-vite'
}
export default config
You may have to install vite.
npm install -D vite --legacy-peer-deps
The --legacy-peer-deps flag was need as of this writing.
Step 6. Setup first Story
Delete src/stories.
In the src/components/my-component folder, create my-component.stories.tsx and add the following code.
export default {
// this creates a 'Components' folder and a 'MyComponent' subfolder
title: 'Components/MyComponent',
};
const Template = (args) => `<my-component first="${args.first}" middle="${args.middle}" last="${args.last}"></my-component>`;
export const Example = Template.bind({});
Example.args = {
first: 'Alan',
middle: 'Dean',
last: 'Foster'
};
Final Step: Run Project
Open terminal and run:
npm run build -- --watch
Open a separate terminal and run.
npm run storybook
Your project should be up and running and any changes you make in you my-component.tsx file will immediately be reflected in Storybook.
I hope this helps someone out there.
Top comments (0)