vite-userscript-plugin 2.4.0 → 2.5.0

package/README.md

@@ -15,6 +15,7 @@
 - 📝 Only used `@grant`s in the production build
 - 📦 Built-in types for Tampermonkey, Greasemonkey and Violentmonkey
 - 📄 Virtual module with script metadata
+- 🧵 Support Web Workers
 
 ## Getting started
 
@@ -107,6 +108,14 @@ import './style.css'
 > [!NOTE]
 > Do not put userscript assets in `public/` — those URLs hit the host site and 404. Import the file so Vite inlines it.
 
+## Web Workers
+
+HMR serve rewrites `import Worker from './w?worker'` (and `?worker&inline`) to a data-URI module worker that imports Vite's `?worker_file`. The host page cannot load `/src/w.ts?worker_file` from localhost.
+
+`vite build` and `server.file` keep Vite's worker emit. A plain `?worker` is a separate file the match site cannot serve — use `?worker&inline`. `?worker&url` and `?sharedworker` stay as Vite emits them.
+
+See [examples/web-worker](./examples/web-worker).
+
 ## HTML pages
 
 `index.html` is a normal Vite app next to the userscript. `vite` serves it at `/`. `vite build` writes it to `dist/` beside `{fileName}.user.js`.
@@ -184,6 +193,7 @@ In serve mode the header lists every grant. In production the plugin scans the b
 | [sourcemap](./examples/sourcemap) | Inline map, HTML page, virtual module. |
 | [serve-file](./examples/serve-file) | `server.file`, install `.user.js` or the proxy from the printed URLs. |
 | [external-cdn](./examples/external-cdn) | `@types/jquery` only; runtime `$` from a CDN `@require`. |
+| [web-worker](./examples/web-worker) | `?worker&inline`, data-URI bridge in HMR. |
 
 ## FAQ
 

package/dist/index.js

@@ -881,6 +881,7 @@ function shouldShimModule(id) {
 	if (/\.(?:css|scss|sass|less|styl|stylus|pcss)(?:$|\?)/i.test(cleanId)) return false;
 	if (/[?&](?:vue|svelte)&type=style/.test(cleanId)) return false;
 	if (/[?&](?:raw|url)(?:&|$)/.test(cleanId)) return false;
+	if (/[?&](?:worker_file|sharedworker|worker)(?:&|$)/.test(cleanId)) return false;
 	if (/\.(?:m|c)?[jt]sx?(?:$|\?)/.test(cleanId)) return true;
 	if (/[?&]vue&type=script/.test(cleanId) || cleanId.endsWith(".vue")) return true;
 	if (/[?&]svelte&type=script/.test(cleanId) || cleanId.endsWith(".svelte")) return true;
@@ -1202,6 +1203,26 @@ function createDebouncedSingleFlight(task, delay, onError) {
 	};
 }
 //#endregion
+//#region src/serve/web-worker.ts
+function isWebWorkerRequest(id) {
+	const queryIndex = id.indexOf("?");
+	if (queryIndex === -1) return false;
+	const query = new URLSearchParams(id.slice(queryIndex + 1));
+	return query.has("worker") && !query.has("url");
+}
+const webWorkerWrapper = `const dataUri = \`data:text/javascript;charset=utf-8,\${encodeURIComponent(
+  \`import \${JSON.stringify(
+    new URL('?worker_file&type=module', import.meta['url']).href,
+  )};\`,
+)}\`;
+
+export default function WorkerWrapper(options) {
+  return new Worker(dataUri, {
+    type: 'module',
+    name: options?.name,
+  });
+}`;
+//#endregion
 //#region src/plugin.ts
 function absolutizeEntries(config, root) {
 	return { scripts: config.scripts.map((script) => ({
@@ -1345,6 +1366,14 @@ function UserscriptPlugin(config) {
 				return renderExternalModule(external.global);
 			}
 		},
+		{
+			name: `${PLUGIN_NAME}:web-worker`,
+			enforce: "pre",
+			apply: "serve",
+			load(id) {
+				if (isWebWorkerRequest(id)) return webWorkerWrapper;
+			}
+		},
 		{
 			name: `${PLUGIN_NAME}:serve`,
 			apply: "serve",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-userscript-plugin",
   "type": "module",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "author": {
     "name": "Vitalij Ryndin",
     "url": "https://github.com/crashmax-dev"