Setting up Stencil 4 with Storybook 8

Joaquin Senosiain, Jr — Fri, 31 Jan 2025 18:25:21 +0000

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.

DEV Community: Joaquin Senosiain, Jr