I made a successful Storybook 9 config with hot reload

[jttommy]

// ./storybook/main.ts
import { type StorybookConfig } from '@storybook/html-vite';
import { dirname, join, resolve } from "path";

const config: StorybookConfig = {
  staticDirs: ['static'], // or [{ from: 'static', to: '/' }]
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    /**
    Optional
    getAbsolutePath("@storybook/addon-designs"),
    getAbsolutePath("@storybook/addon-a11y"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-links"), 
    getAbsolutePath("@storybook/addon-docs")
    */
  ],
  framework: {
    name: getAbsolutePath('@storybook/html-vite'),
    options: {},
  },
  async viteFinal(config) {
    return {
      ...config,
      server: {
        ...config.server,
        watch: {
          ...config.server?.watch,
          // Watch the Stencil build output for changes
          ignored: ['!**/dist/**'],
          usePolling: true,
          interval: 300,
        },
        headers: {
          // Prevent browser caching of Stencil build artifacts
          'Cache-Control': 'no-store, no-cache, must-revalidate',
        },
      },
      // Disable Vite's aggressive caching for Stencil build artifacts
      optimizeDeps: {
        ...config.optimizeDeps,
        exclude: [...(config.optimizeDeps?.exclude || []), 'YOUR_PACKAGE_NAME_HERE'],
        force: true,
      },
      // Force Vite to always fetch fresh versions of build artifacts
      // You might have to swap `../node_modules with ./node_modules (note the "./")`
      cacheDir: resolve(__dirname, '../node_modules/.vite-storybook'),
    };
  },
  docs: {},
};

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}
export default config;

// /.storybook/preview.js
import { defineCustomElements } from '../loader';

defineCustomElements();

//rest of your file

//package.json
 "build:watch": "stencil build --watch",
 "dev": "npm run clean:cache && npx concurrently \"npm run build:watch\" \"npm run storybook\"",
 "clean:cache": "node -e \"const fs=require('fs');['node_modules/.vite-storybook','.storybook-cache'].forEach(d=>{try{fs.rmSync(d,{recursive:true,force:true})}catch(e){}})\"",
 "storybook": "storybook dev -p 6001 --quiet",

[johnjenkins]

awesome! can this be fed into https://github.com/stenciljs/storybook somehow?
(The caveat is that i don't use storybook anymore, so I'm not sure on the current status of the Stencil integration)

[jttommy]

I can look into this next week. For now, if someone else can confirm this works, that would be great. It's working 4 workspaces for me so far.
Maybe a note gets added to the docs? Idk.

[fgeierst]

For me, the crucial part was to understand that you need to remove /dist from vite's ignore list, compare https://github.com/fgeierst/pencil-components/blob/f3e0356e86b324471d2ff1fa2f39fa24b1f1994c/.storybook/main.ts#L20