search

ithaka / pharos

JSTOR's design system
https://pharos.jstor.org
MIT License
114 stars 15 forks source link

Storybook: Enable single command hot reloading #584

Open michael-iden opened 1 year ago

michael-iden commented 1 year ago

Expected behavior Hot reloading of storybook works with a single command

Actual behavior We need to run two commands to get hot reloading to work

Steps to reproduce the issue

  1. Start storybook
  2. Make a change in the pharos component code
  3. See that the changes are not reflected in storybook

Additional information

See description in #582 and #579

satya-achanta-venkata commented 10 months ago

@daneah @michael-iden I would like to fix this and spent some time looking into this. I almost fell in rabbit hole when I started looking into vite HMR feature (because we use vite builder, so I thoughts its builder's job to perform hot reload). But realized the fix could be as simple as adding yarn workspace @ithaka/pharos build:tsc:watch to list of commands currently running in yarn storybook:wc:dev

daneah commented 10 months ago

@satya-achanta-venkata I have tried that but it creates a conflict somewhere that interferes with icons in particular, likely because they're dynamic modules. It needs deeper investigation.

satya-achanta-venkata commented 10 months ago

@daneah After your comments, I realized that icons were not loading and I believe dynamic import statement in icons is causing the issue and I found these docs. I am seeing some interesting Note in the docs saying that Note that variables only represent file names one level deep. If file is 'foo/bar', the import would fail. For more advanced usage, you can use the [glob import](https://vitejs.dev/guide/features.html#glob-import) feature. I will look into it sooner as I got two other issues I assigned myself for. Thanks for the quick response earlier, @daneah . I just wanted to make sure I was not going deep in rabbit hole.