Add remark about autoreload for stories to README

[offlinehacker]

Today I spent some time trying to figure out why autoreload for story files doesn't work. This pull request adds remark to README about naming of story files for autoreload to work.

This is related to: #53

[IanVS]

@offlinehacker thanks for the PR. Did you try changing the exclude setting of @vitejs/plugin-react-refresh in your viteFinal? That might be easier than renaming story files, and it might be better to provide some instructions on how to do that, than to say it has to be named a particular way. What do you think?

[eirslett]

I think it's a fair trade-off to put this in the README - and then explore better options eventually.

[offlinehacker]

Thanks for merging. I haven't tried changing viteFinal, as I am unsure viteFinal is the right place to do this.

One extra thing I have done is implement a merge between "base" vitejs config and storybook config, as previously i was wrongly assuming that this plugin will take vite.config.ts config.

import type { UserConfig } from 'vite';
import type { StorybookConfig } from '@storybook/react/types';
import merge from 'ts-deepmerge';

import { baseConfig } from '../vite.config';

export default {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-dark-mode'
  ],
  core: {
    builder: 'storybook-builder-vite' as any
  },
  async viteFinal(config: UserConfig) {
    return merge(baseConfig, config);
  }
} as StorybookConfig;

Yeah, you can have storybook config in typescript, as long as you have ts-node installed and module mode in tsconfig set to commonjs, quite cool.

[imdongchen]

@offlinehacker May I know how you made storybook config work in typescript? I've installed ts-node and specify in ./storybook/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
  }
}

But it's still reporting SyntaxError: Cannot use import statement outside a module with my ./storybook/main.ts. Do I need to tell storybook to use ts-node somehow?

[offlinehacker]

I have set "module": "commonjs" in ./tsconfig.json not in ./.storybook/tsconfig.json, so it needs to be in root of the project.