Vite: Fix prebundling

[IanVS]

Issue: N/A

@ndelangen noticed that /sb-preview/runtime.mjs was being bundled into the bundle created by vite for the iframe, rather than being externalized and requested from the static output folder as it should have been.

What I did

This replaces the esbuild plugin, @fal-works/esbuild-plugin-global-externals with a rollup plugin that works more similarly to the webpack externals method. We can give it a list of packages which should be treated as globals, and the name of the global variable where they can be accessed.

This also removes the re-exports of storybook packages from the vite frameworks, since they are not accessed from global scope instead. This essentially reverts #19216.

And I simplified @storybook/preview, since we no longer need to generate the ModuleInfo objects for the esbuild plugin. And we can export the mapping between package names and global variables, to use in both vite and webpack.

How to test

CI. We should also check that pnpm still works correctly.

[IanVS]

This is mostly working. Building storybook succeeds, and sb-preview/runtime.mjs is no longer being bundled. Storybook loads the page correctly, but changing stories by clicking in the sidebar is broken, in both dev and built storybooks. Refreshing the page will load the correct story. The webpack projects are working correctly, just not vite, and I'm not sure why. Maybe @ndelangen you might have an idea here?

[ndelangen]

@IanVS I'm still seeing this in the dev mode of storybook:

Also see it in build-mode

---

I build-mode i can see it working though:

Also confirmed to be working in dev-mode:

[ndelangen]

The CI error is weird because it's a peerDep and we add it to the project when initializing storybook:

storybook/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts

Line 6 in 6b6a860

extraPackages: ['lit-html'],

How could the dep not be there?

[ndelangen]

can confirm, it's not being added as a dep when running the sanbox command:

  "dependencies": {
    "@types/node": "16",
    "lit": "^2.4.0"
  },

Need to debug this, why

[ndelangen]

@IanVS I think I found the problem:

storybook/code/lib/builder-vite/src/build.ts

Lines 16 to 19 in 30cfe6c

	rollupOptions: {
	// Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
	external: ['/sb-preview/runtime.mjs'],
	},

conflicts with:

// sandbox/lit-vite-default-ts/vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/my-element.ts',
      formats: ['es']
    },
    rollupOptions: {
      external: /^lit/
    }
  }
})

Might not be getting merged correctly?

Also there's this code:

storybook/code/lib/builder-vite/src/plugins/code-generator-plugin.ts

Lines 64 to 67 in 30cfe6c

	config.build.rollupOptions = {
	...config.build.rollupOptions,
	input: iframePath,
	};

---

Or maybe this:

external: /^lit/

Matches too much?

I tried removing that bit of code from the sandbox's vite.config.ts, and that made no difference..

---

Another bit of information @IanVS the dev-mode is working fine, it's only a problem when building storybook.

[ndelangen]

the main.js viteFinal method is the same across all 4 vite sandboxes are exactly the same.

[IanVS]

We could remove the mergeConfig here, since we do not want to merge the build config with the user's build config.