Allow rollupOptions set by other plugins to be respected

[blake-simpson]

Description 📖

Storybook (builder-vite) adds an iframe.html entry into the rollupOptions when building a static build. I found that vite-plugin-ruby is overriding these options meaning that the Storybook build fails.

Background 📜

Storybook builds are failing for projects using vite-plugin-ruby or vite-plugin-rails.

Build/Rollup options without the spread:

{
  emptyOutDir: false,
  sourcemap: true,
  target: [ 'chrome108', 'edge108', 'firefox109', 'ios15', 'safari15' ],
  outDir: '<path-to-project>/storybook-static',
  rollupOptions: {
    external: [ './sb-preview/runtime.js', /\.\/sb-common-assets\/.*\.woff2/ ],
    input: {
      'entrypoints/application.ts': '<path-to-project>/app/frontend/entrypoints/application.ts',
      'entrypoints/vue.ts': '<path-to-project>/app/frontend/entrypoints/vue.ts'
    },
    output: {
      assetFileNames: [Function (anonymous)],
      entryFileNames: [Function (anonymous)]
    }
  },
  assetsDir: 'assets',
  manifest: true
}

The Fix 🔨

Here I am allowing any existing rollup options + inputs to be spread into the config before the plugin returns it.

Rollup options with the spread:

build: {
  emptyOutDir: false,
  sourcemap: true,
  target: [ 'chrome108', 'edge108', 'firefox109', 'ios15', 'safari15' ],
  outDir: '<path-to-project>/storybook-static',
  rollupOptions: {
    external: [ './sb-preview/runtime.js', /\.\/sb-common-assets\/.*\.woff2/ ],
    input: {
      '<path-to-project>/node_modules/.pnpm/@[email protected][email protected]_@[email protected]_@babel_mehfrma2w74ofinzeaaidxqt6y/node_modules/@storybook/builder-vite/input/iframe.html': '<path-to-project>/node_modules/.pnpm/@[email protected][email protected]_@[email protected]_@babel_mehfrma2w74ofinzeaaidxqt6y/node_modules/@storybook/builder-vite/input/iframe.html',
      'entrypoints/application.ts': '<path-to-project>/app/frontend/entrypoints/application.ts',
      'entrypoints/vue.ts': '<path-to-project>/app/frontend/entrypoints/vue.ts'
    },
    output: {
      assetFileNames: [Function (anonymous)],
      entryFileNames: [Function (anonymous)]
    }
  },
  assetsDir: 'assets',
  manifest: true
},

Notes

I appreciate this may not be the correct fix for the problem. If you would like a different style / approach to solve this please let me know!

[eriknygren]

Woah! Well done figuring this one out. I've been struggling with the storybook static builds for years on my vite-ruby projects and could not understand what was going on!

[eriknygren]

@ElMassimo any chance you could have a look? I appreciate all your hard work and know that you have a lot on your plate with your suite of OSS projects so don't mean to rush you/come across as ungrateful.

This would be awesome for all of us vite_ruby using teams who use storybook as documentation for our front end. ❤️ Cheers!

[iamdriz]

Also just run into this issue and couldn't understand why the iframe was missing until I came across this discussion.

Is there a way to patch this manually until a proper fix is in place? I tried using the patched Gem:

gem 'vite_rails', github: 'blake-simpson/vite_ruby', branch: 'patch-1'

But the iframe is still missing from builds...

Thanks

[iamdriz]

@ElMassimo I've seen that this is merged now, but still not getting the iframe in the Storybook output after updating to the latest version of this gem... do I need to update something else as well?

[eriknygren]

@ElMassimo I've seen that this is merged now, but still not getting the iframe in the Storybook output after updating to the latest version of this gem... do I need to update something else as well?

Same @iamdriz, maybe it makes most sense to continue the conversation here. We might have had a different issue than @blake-simpson that's not vite_ruby related.

[iamdriz]

@eriknygren Yeah I'm seeing the same issue as mentioned in the other conversation with the iframe.html being added into /public/vite folder instead of storybook-static. The comments seem to still suggest that vite_ruby is the culprit.

[eriknygren]

@iamdriz seeing the same. @blake-simpson have you got this working on your end now?

[blake-simpson]

Hi all, sorry for the late reply, I was away on a longer vacation.

First of all thank you @ElMassimo for merging + releasing this!

To the thread above, I also have the same issue. I can't quite pin down why but it seems all of the rollup options for vite-plugin-ruby ensure that the assets are built into the ./vite directory instead of of the usual static one. I think it may be related to making the Ruby on Rails asset pipeline work? I think changing this may break this library entirely though, so I've been working with the following hack:

storybook build --force-build-preview --preview-url=vite/iframe.html && \ 
  cp -R storybook-static/sb-preview storybook-static/vite && \
  cp -R storybook-static/sb-common-assets storybook-static/vite && \
  cp -R storybook-static/sb-addons storybook-static/vite &&  \
  cp storybook-static/index.json storybook-static/vite/index.json

It's ugly but the best I can figure out for now. I'd be happy to hear if someone has a better way or if @ElMassimo knows a way to make the files build into . instead of ./vite when using Storybook?

This is however working for me locally but I'm having issues with GitHub pages. If anyone has anymore input please let me know.

cc/ @eriknygren @iamdriz

[eriknygren]

Thanks @blake-simpson for getting back to us. So I don't really understand the nuances of this, my iframe.html ends up in the vite-dev folder for example (and others have reported it ending up in the vite folder), even though I'm building with both NODE_ENV and RAILS_ENV set to production 🤷

And even when I copy files over manually, loading a page from the static build results in no components, it doesn't even look like it's trying to fetch them.

I feel pretty stuck on this and don't know what to suggest. Maybe another approach is needed, maintaining a completely separate vite config for storybook for example. Would love to hear if anyone does find a solution, but personally I've sort of given up at the moment (althought I would love to have this working).

[ElMassimo]

a way to make the files build into . instead of ./vite when using Storybook

Have you tried configuring publicOutputDir to .?

Maybe you could pass the VITE_RUBY_PUBLIC_OUTPUT_DIR="." environment variable when building Storybook. I haven't used Storybook, so I'm not familiar on whether it requires a separate command to build, or if it's integrated in the default Vite build.

[blake-simpson]

@ElMassimo Thank you that helps with the VITE_RUBY_PUBLIC_OUTPUT_DIR var. I now have to move a lot less files around.

Interestingly though for me, in this case, the ifame.html no longer builds into the . dir (<rails-root>/storybook-static/) but instead into ../public (<rails-root>/public/)
I'm not sure why that is happening but personally I am copying that file over + the assets (also in ../public) after build. Just an FYI to others who are on this chain.

[eriknygren]

I'm returning with some good news, just got this working for me! 🎉

Running the storybook build command with these output dir vars have made sure everything ends up where expected. So in my package.json I build storybook with

"build-storybook": "VITE_RUBY_PUBLIC_OUTPUT_DIR='.' VITE_RUBY_PUBLIC_DIR='./storybook-static' storybook build"

In my storybook config (.storybook/main.js), to resolve imports to my components, I copy that over from the main vite config with:

import path from 'path';

const config = {
  ...
  staticDirs: ['../public'],
  async viteFinal(storybookConfig) {
    const { mergeConfig, loadConfigFromFile } = await import('vite');
    const { config: mainAppConfig } = await loadConfigFromFile(
      path.resolve(__dirname, '../vite.config.ts'),
    );
    const pickedConfigFieldsFromMainApp = { resolve: mainAppConfig.resolve };
    const mergedConfig = mergeConfig(storybookConfig, pickedConfigFieldsFromMainApp);
    return mergedConfig;
  },
  ...
};
export default config;

Without needing to copy anything over, runtime.js from storybook seems to be in the right place, and so does iframe.html

Hopefully this unblocks everyone else too! cc @blake-simpson @iamdriz

Edit: On a second review: I think the .storybook/main.js part is not needed. I hadn't realise it was clever enough to merge things in from your vite.config.ts to start with.