File writer refactor

[jacksteamdev]

It's time to wind up the creation phase of CRXJS, and the file writer needs a better design. I have an idea for an HMR-based file writer that excludes the need for Rollup, or any kind of watcher.

Currently, the file writer is the most obtuse part of the project, with a confusing event-based model. Because it produces a full build for every change, even with caching it uses more resources than necessary.

This rewrite won't change any exposed API details, and with the existing tests, it shouldn't cause any significant regressions.

Specs

1. Track output scripts with file-writer-scripts
   1. type ScriptModule = Promise<{type, viteUrl, filename}>
   2. type ScriptType = 'loader'|'module'|'iife'|'dep'
   3. start(server: ViteDevServer): Promise<void>
   4. add(viteUrl: string, options?: {type: ScriptType}): ScriptModule
   5. update(viteUrl: string, options: {type: ScriptType}): Promise<void>
   6. reset(): Promise<void> Removes all content scripts and deletes files.
   7. modules Module graph as Map<ScriptModule>
      1. by Vite URL
   8. viteUrlToFilename(viteUrl: string): string Convert Vite URL to output filename
      1. /\?/g -> '__'
      2. /\&/g -> '--'
      3. replacedUrl + .js
2. Call start(server) to start file writer
   1. File writer will output scripts as Rollup and Vite call add()
   2. No need to wait until pre-bundling is complete
   3. Need to queue scripts in case pre-bundling starts before file writer
   4. Need to restart file writer when server restarts
3. Run Rollup to output the bones of the extension
   1. Emit manifest
   2. Emit html placeholders
   3. Emit script loaders
   4. Emit manifest assets
   5. Emit public assets
4. add content scripts from manifest
5. add content scripts from ?script imports
6. On call to add (sometimes no-op)
   1. Check for file in module graph
   2. If file in graph, resolve module
   3. Else, update file
7. On call to update (always rewrite file)
   1. Transform file, then concurrently
      1. Output to file system
      2. Recursively add file deps
   2. Resolve void
8. Output types
   1. script&loader Use content script loader to gain HMR
   2. script&module Output raw ES module
      1. Maybe don't need this; does Vite support ?module?
   3. script&iife Output IIFE format
      1. Use Worker API

Notes

Because this refactor won't use an internal instance of Rollup in watch mode, it may restore support for vite build --watch. Related #429

[changeset-bot]

⚠️ No Changeset found

Latest commit: 630c073

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
vite-plugin-docs	⬜️ Ignored (Inspect)		Oct 9, 2022 at 7:57PM (UTC)

[saxoncameron]

Ooh this is exciting @jacksteamdev - does this mean a release is imminent? 😍

[jacksteamdev]

@saxoncameron I'm going to do a beta release later today!

I gave it a test run with a Svelte project yesterday, I think things are mostly stable 🤞

[SpaceK33z]

Looks like the release failed (not sure if you saw) — happy to do a beta test after the release!

[jacksteamdev]

Finally had some time to get this release done right!

You can try it out on NPM 🚀

https://www.npmjs.com/package/@crxjs/vite-plugin/v/2.0.0-beta.1

This should fix some bugs, but there may be regressions I haven't caught yet.

Beta testers, please create issues, thank you so much!