vite-userscript-plugin 1.9.2 → 1.11.0

package/README.md

@@ -6,9 +6,17 @@
 
 > ⚡️ A plugin for developing and building a Tampermonkey userscript based on [Vite](https://vitejs.dev).
 
+## Table of contents
+
+- [Features](#features)
+- [Install](#install)
+- [Setup config](#setup-config)
+- [Using style modules](#using-style-modules)
+- [Plugin configuration](#plugin-configuration)
+
 ## Features
 
-- 🔥 Hot reloading after changing any files.
+- 🔥 Reloading page after changing any files.
 - 🔧 Configure Tampermonkey's Userscript header.
 - 💨 Import all [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s to the header by default in development mode.
 - 📝 Automatic addition of used [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s in the code when building for production.
@@ -28,7 +36,7 @@ yarn add vite-userscript-plugin -D
 pnpm add vite-userscript-plugin -D
 ```
 
-### Setup `vite.config.ts`
+### Setup config
 
 ```js
 import { defineConfig } from 'vite'
@@ -83,7 +91,19 @@ export default defineConfig((config) => {
 }
 ```
 
-## Plugin Configuration
+### Using style modules
+
+```js
+import style from './style.css?raw'
+
+// inject style element
+const styleElement = GM_addStyle(style)
+
+// remove style element
+styleElement.remove()
+```
+
+## Plugin configuration
 
 ```ts
 interface ServerConfig {

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-import { PluginOption } from 'vite';
+import { EsbuildTransformOptions, PluginOption } from 'vite';
 
 declare const GM: readonly ["setValue", "getValue", "deleteValue", "listValues", "setClipboard", "addStyle", "addElement", "addValueChangeListener", "removeValueChangeListener", "registerMenuCommand", "unregisterMenuCommand", "download", "getTab", "getTabs", "saveTab", "openInTab", "notification", "getResourceURL", "getResourceText", "xmlhttpRequest", "log", "info"];
 declare const GMwindow: readonly ["unsafeWindow", "window.onurlchange", "window.focus", "window.close"];
 
 type RunAt = 'document-start' | 'document-body' | 'document-end' | 'document-idle' | 'context-menu';
 type GMLiterals<T extends string> = [`GM_${T}` | `GM.${T}`];
-type GMWindow = typeof GMwindow[number];
-type Grants = GMWindow | GMLiterals<typeof GM[number]>[number];
+type GMWindow = (typeof GMwindow)[number];
+type Grants = GMWindow | GMLiterals<(typeof GM)[number]>[number];
 type HeaderConfig = {
     [property: string]: any;
     /**
@@ -154,6 +154,10 @@ interface UserscriptPluginConfig {
      * Path of userscript entry.
      */
     entry: string;
+    /**
+     * Userscript file name.
+     */
+    fileName?: string;
     /**
      * Userscript header config.
      *
@@ -164,8 +168,20 @@ interface UserscriptPluginConfig {
      * Server config.
      */
     server?: ServerConfig;
+    /**
+     * Override default esbuild transform options.
+     *
+     * @default
+     * ```json
+     * {
+     *   "minify": true,
+     *   "legalComments": "none"
+     * }
+     * ```
+     */
+    esbuildTransformOptions?: Omit<EsbuildTransformOptions, 'format' | 'target' | 'loader' | 'sourcemap'>;
 }
 
 declare function UserscriptPlugin(config: UserscriptPluginConfig): PluginOption;
 
-export { UserscriptPluginConfig, UserscriptPlugin as default };
+export { type UserscriptPluginConfig, UserscriptPlugin as default };

package/dist/index.js

@@ -1,5 +1,295 @@
-import{readFileSync as _,writeFileSync as h}from"fs";import{createServer as I}from"http";import{resolve as c}from"path";import J from"get-port";import Y from"open";import C from"picocolors";import Q from"serve-handler";import{createLogger as X}from"vite";import{server as Z}from"websocket";var d=class{constructor(r){this.config=r;this.addHomepageMeta(),this.maxKeyLength=Math.max(...Object.keys(this.config).map(e=>e.length))+1}header=[];maxKeyLength;addHomepageMeta(){let r=this.config.homepage??this.config.homepageURL;r&&(this.config.updateURL=new URL(`${this.config.name}.meta.js`,r).href,this.config.downloadURL=new URL(`${this.config.name}.user.js`,r).href)}addSpaces(r){return" ".repeat(this.maxKeyLength-r.length)}addMetadata(r,e){e=Array.isArray(e)?e.join(" "):e===!0?"":e,this.header.push(`// @${r}${this.addSpaces(r)}${e}`)}generate(){for(let[r,e]of Object.entries(this.config))if(Array.isArray(e))e.forEach(n=>this.addMetadata(r,n));else{if(e===void 0)continue;this.addMetadata(r,e)}return["// ==UserScript==",...this.header,"// ==/UserScript=="].join(`
-`)}};import{dirname as W}from"path";import{fileURLToPath as q}from"url";var S=W(q(import.meta.url)),b="vite-userscript-plugin",M='console.warn("__STYLE__")',F=new RegExp(/\.(t|j)sx?$/),P=new RegExp(/\.(s[ac]|c|le)ss$/),z=["setValue","getValue","deleteValue","listValues","setClipboard","addStyle","addElement","addValueChangeListener","removeValueChangeListener","registerMenuCommand","unregisterMenuCommand","download","getTab","getTabs","saveTab","openInTab","notification","getResourceURL","getResourceText","xmlhttpRequest","log","info"],B=["unsafeWindow","window.onurlchange","window.focus","window.close"],f=z.map(t=>[`GM_${t}`,`GM.${t}`]).flat();f.push(...B);import{transformWithEsbuild as K}from"vite";function L(t){return[...new Set(Array.isArray(t)?t:t?[t]:[])]}async function g({minify:t,file:r,name:e,loader:n}){let{code:a}=await K(r,e,{minify:t,loader:n,sourcemap:!1,legalComments:"none"});return a}function T(t){let r=[];for(let e of f)t.indexOf(e)!==-1&&r.push(e);return r}var R=class{styles=new Map;async add(r,e,n){let a=await g({name:r,file:e,minify:n,loader:"css"});return this.styles.set(r,a.replace(`
-`,"")),""}inject(){return this.styles.size?`GM_addStyle(\`${[...this.styles.values()].join("")}\`)`:void 0}merge(r){let e=[];for(let n of r){let a=this.styles.get(n);a&&e.push([n,a])}this.styles.clear(),e.forEach(n=>this.styles.set(...n))}},v=new R;function ee(t){try{let r,e,n=null,a=X("info",{prefix:`[${b}]`,allowClearScreen:!0}),y=I((s,o)=>Q(s,o,{public:r.build.outDir})),O=Z;return new O({httpServer:y}).on("request",s=>{n=s.accept(null,s.origin)}),{name:b,apply:"build",config(){return{build:{target:"esnext",minify:!1,lib:{entry:t.entry,name:t.header.name,formats:["iife"],fileName:()=>`${t.header.name}.js`},rollupOptions:{output:{extend:!0}}}}},async configResolved(s){r=s,e=s.build.watch??!1,t.entry=c(s.root,t.entry),Array.from(["match","require","include","exclude","resource","connect"]).forEach(o=>{let i=t.header[o];t.header[o]=L(i)}),t.server={port:await J(),open:!1,...t.server}},async transform(s,o){let i=s;return P.test(o)&&(i=await v.add(o,i,!e)),o.includes(t.entry)&&(i=s+M),{code:i,map:null}},generateBundle(s,o){for(let i of Object.values(o)){if(i.type==="asset")continue;let p=Object.keys(i.modules).filter(m=>P.test(m));p.length&&v.merge(p)}},async writeBundle(s,o){let{open:i,port:p}=t.server,m=s.sanitizeFileName(t.header.name),E=`${m}.user.js`,U=`${m}.proxy.user.js`,D=`${m}.meta.js`;for(let[u]of Object.entries(o))if(F.test(u)){let w=r.root,x=r.build.outDir,j=c(w,x,u),k=c(w,x,E),A=c(w,x,U),N=c(w,x,D),$=c(S,`ws-${m}.js`);try{let l=_(j,"utf8");if(l=l.replace(M,`${v.inject()}`),l=await g({minify:!e,file:l,name:u,loader:"js"}),t.header.grant=L(e?f:[...T(l),...t.header.grant??[]]),e){let V=_(c(S,"ws.js"),"utf8"),H=await g({minify:!e,file:V.replace("__WS__",`ws://localhost:${p}`),name:$,loader:"js"});h($,H),h(A,new d({...t.header,require:[...t.header.require??[],"file://"+$,"file://"+j]}).generate())}let G=new d(t.header).generate();h(j,l),h(N,G),h(k,`${G}
+// src/index.ts
+import { readFileSync, writeFileSync } from "node:fs";
+import { createServer } from "node:http";
+import { resolve } from "node:path";
+import getPort from "get-port";
+import openLink from "open";
+import colors from "picocolors";
+import serveHandler from "serve-handler";
+import { createLogger } from "vite";
+import { server } from "websocket";
 
-${l}`)}catch(l){console.log(l)}}if(e&&!y.listening){let u=`http://localhost:${p}`;y.listen(p,()=>{a.clearScreen("info"),a.info(C.bold(`${C.cyan(">>> [vite-userscript-plugin]")} ${C.gray(u)}`))}),i&&await Y(`${u}/${U}`)}else e||(y.close(),process.exit(0))},buildEnd(){e&&(a.clearScreen("info"),n&&n.sendUTF(JSON.stringify({message:"reload"})))}}}catch(r){return console.error(r),{name:b}}}export{ee as default};
+// src/banner.ts
+var Banner = class {
+  constructor(config) {
+    this.config = config;
+    this.addHomepageMeta();
+    this.maxKeyLength = Math.max(...Object.keys(this.config).map((key) => key.length)) + 1;
+  }
+  header = [];
+  maxKeyLength;
+  addHomepageMeta() {
+    const homePage = this.config.homepage ?? this.config.homepageURL;
+    if (homePage) {
+      this.config.updateURL = new URL(
+        `${this.config.name}.meta.js`,
+        homePage
+      ).href;
+      this.config.downloadURL = new URL(
+        `${this.config.name}.user.js`,
+        homePage
+      ).href;
+    }
+  }
+  addSpaces(str) {
+    return " ".repeat(this.maxKeyLength - str.length);
+  }
+  addMetadata(key, value) {
+    value = Array.isArray(value) ? value.join(" ") : value === true ? "" : value;
+    this.header.push(`// @${key}${this.addSpaces(key)}${value}`);
+  }
+  generate() {
+    for (const [key, value] of Object.entries(this.config)) {
+      if (Array.isArray(value)) {
+        value.forEach((value2) => this.addMetadata(key, value2));
+      } else {
+        if (value === void 0) continue;
+        this.addMetadata(key, value);
+      }
+    }
+    return [
+      "// ==UserScript==",
+      ...this.header,
+      "// ==/UserScript=="
+    ].join("\n");
+  }
+};
+
+// src/constants.ts
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+var pluginDir = dirname(fileURLToPath(import.meta.url));
+var pluginName = "vite-userscript-plugin";
+var regexpScripts = new RegExp(/\.(t|j)sx?$/);
+var GM = [
+  "setValue",
+  "getValue",
+  "deleteValue",
+  "listValues",
+  "setClipboard",
+  "addStyle",
+  "addElement",
+  "addValueChangeListener",
+  "removeValueChangeListener",
+  "registerMenuCommand",
+  "unregisterMenuCommand",
+  "download",
+  "getTab",
+  "getTabs",
+  "saveTab",
+  "openInTab",
+  "notification",
+  "getResourceURL",
+  "getResourceText",
+  "xmlhttpRequest",
+  "log",
+  "info"
+];
+var GMwindow = [
+  "unsafeWindow",
+  "window.onurlchange",
+  "window.focus",
+  "window.close"
+];
+var grants = GM.map((grant) => [
+  `GM_${grant}`,
+  `GM.${grant}`
+]).flat();
+grants.push(...GMwindow);
+
+// src/helpers.ts
+import { transformWithEsbuild } from "vite";
+function removeDuplicates(arr) {
+  return [...new Set(Array.isArray(arr) ? arr : arr ? [arr] : [])];
+}
+async function transform({ minify, file, name, loader }, transformOptions) {
+  const { code } = await transformWithEsbuild(file, name, {
+    minify,
+    loader,
+    sourcemap: false,
+    legalComments: "none",
+    ...transformOptions
+  });
+  return code;
+}
+function defineGrants(code) {
+  const definedGrants = [];
+  for (const grant of grants) {
+    if (code.indexOf(grant) !== -1) {
+      definedGrants.push(grant);
+    }
+  }
+  return definedGrants;
+}
+
+// src/index.ts
+function UserscriptPlugin(config) {
+  try {
+    let pluginConfig;
+    let isBuildWatch;
+    let socketConnection = null;
+    const fileName = config.fileName ?? config.header.name;
+    const logger = createLogger("info", {
+      prefix: `[${pluginName}]`,
+      allowClearScreen: true
+    });
+    const httpServer = createServer((req, res) => {
+      return serveHandler(req, res, {
+        public: pluginConfig.build.outDir
+      });
+    });
+    const WebSocketServer = server;
+    const ws = new WebSocketServer({ httpServer });
+    ws.on("request", (request) => {
+      socketConnection = request.accept(null, request.origin);
+    });
+    return {
+      name: pluginName,
+      apply: "build",
+      config() {
+        return {
+          build: {
+            target: "esnext",
+            minify: false,
+            lib: {
+              name: fileName,
+              entry: config.entry,
+              formats: ["iife"],
+              fileName: () => `${fileName}.js`
+            },
+            rollupOptions: {
+              output: {
+                extend: true
+              }
+            }
+          }
+        };
+      },
+      async configResolved(userConfig) {
+        pluginConfig = userConfig;
+        isBuildWatch = userConfig.build.watch ?? false;
+        config.entry = resolve(userConfig.root, config.entry);
+        Array.from([
+          "match",
+          "require",
+          "include",
+          "exclude",
+          "resource",
+          "connect"
+        ]).forEach((key) => {
+          const value = config.header[key];
+          config.header[key] = removeDuplicates(value);
+        });
+        config.server = {
+          port: await getPort(),
+          open: false,
+          ...config.server
+        };
+      },
+      async writeBundle(output, bundle) {
+        const { open, port } = config.server;
+        const sanitizedFilename = output.sanitizeFileName(fileName);
+        const userFilename = `${sanitizedFilename}.user.js`;
+        const proxyFilename = `${sanitizedFilename}.proxy.user.js`;
+        const metaFilename = `${sanitizedFilename}.meta.js`;
+        for (const [fileName2] of Object.entries(bundle)) {
+          if (regexpScripts.test(fileName2)) {
+            const rootDir = pluginConfig.root;
+            const outDir = pluginConfig.build.outDir;
+            const outPath = resolve(rootDir, outDir, fileName2);
+            const userFilePath = resolve(rootDir, outDir, userFilename);
+            const proxyFilePath = resolve(rootDir, outDir, proxyFilename);
+            const metaFilePath = resolve(rootDir, outDir, metaFilename);
+            const wsPath = resolve(pluginDir, `ws-${sanitizedFilename}.js`);
+            try {
+              let source = readFileSync(outPath, "utf8");
+              source = await transform(
+                {
+                  minify: !isBuildWatch,
+                  file: source,
+                  name: fileName2,
+                  loader: "js"
+                },
+                config.esbuildTransformOptions
+              );
+              config.header.grant = removeDuplicates(
+                isBuildWatch ? grants : [...defineGrants(source), ...config.header.grant ?? []]
+              );
+              if (isBuildWatch) {
+                const wsFile = readFileSync(resolve(pluginDir, "ws.js"), "utf8");
+                const wsScript = await transform(
+                  {
+                    minify: !isBuildWatch,
+                    file: wsFile.replace("__WS__", `ws://localhost:${port}`),
+                    name: wsPath,
+                    loader: "js"
+                  },
+                  config.esbuildTransformOptions
+                );
+                writeFileSync(wsPath, wsScript);
+                writeFileSync(
+                  proxyFilePath,
+                  new Banner({
+                    ...config.header,
+                    require: [
+                      ...config.header.require ?? [],
+                      "file://" + wsPath,
+                      "file://" + outPath
+                    ]
+                  }).generate()
+                );
+              }
+              const banner = new Banner(config.header).generate();
+              writeFileSync(outPath, source);
+              writeFileSync(metaFilePath, banner);
+              writeFileSync(userFilePath, `${banner}
+
+${source}`);
+            } catch (err) {
+              console.log(err);
+            }
+          }
+        }
+        if (isBuildWatch && !httpServer.listening) {
+          const link = `http://localhost:${port}`;
+          httpServer.listen(port, () => {
+            logger.clearScreen("info");
+            logger.info(
+              colors.bold(
+                `${colors.cyan(">>> [vite-userscript-plugin]")} ${colors.gray(
+                  link
+                )}`
+              )
+            );
+          });
+          if (open) {
+            await openLink(`${link}/${proxyFilename}`);
+          }
+        } else if (!isBuildWatch) {
+          httpServer.close();
+          process.exit(0);
+        }
+      },
+      buildEnd() {
+        if (isBuildWatch) {
+          logger.clearScreen("info");
+          if (socketConnection) {
+            socketConnection.sendUTF(
+              JSON.stringify({
+                message: "reload"
+              })
+            );
+          }
+        }
+      }
+    };
+  } catch (err) {
+    console.error(err);
+    return {
+      name: pluginName
+    };
+  }
+}
+export {
+  UserscriptPlugin as default
+};

package/dist/ws.js

@@ -1 +1,14 @@
-function n(){let e=new WebSocket("__WS__");e.addEventListener("close",()=>{setTimeout(n,1e3)}),e.addEventListener("error",()=>{e.close()}),e.addEventListener("message",()=>{location.reload()})}n();
+// src/ws.ts
+function connection() {
+  const ws = new WebSocket("__WS__");
+  ws.addEventListener("close", () => {
+    setTimeout(connection, 1e3);
+  });
+  ws.addEventListener("error", () => {
+    ws.close();
+  });
+  ws.addEventListener("message", () => {
+    location.reload();
+  });
+}
+connection();

package/package.json

@@ -1,27 +1,17 @@
 {
   "name": "vite-userscript-plugin",
-  "version": "1.9.2",
+  "version": "1.11.0",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
   "exports": {
-    "require": "./dist/index.cjs",
-    "import": "./dist/index.js"
+    ".": "./dist/index.js"
   },
   "files": [
     "dist",
     "types"
   ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "test": "vitest",
-    "test:ui": "vitest --ui --watch",
-    "dev:examples": "turbo run dev --filter='./examples/*'",
-    "build:examples": "turbo run build --filter='./examples/*'",
-    "format": "prettier --write --ignore-unknown **",
-    "prepublishOnly": "pnpm build"
+  "engines": {
+    "node": ">=20"
   },
   "repository": {
     "type": "git",
@@ -45,27 +35,36 @@
     "url": "https://github.com/crashmax-dev/vite-userscript-plugin/issues"
   },
   "dependencies": {
-    "get-port": "7.0.0",
-    "open": "9.1.0",
-    "picocolors": "1.0.0",
+    "get-port": "7.1.0",
+    "open": "10.1.0",
+    "picocolors": "1.1.0",
     "serve-handler": "6.1.5",
-    "websocket": "1.0.34"
+    "websocket": "1.0.35"
   },
   "devDependencies": {
-    "@crashmax/prettier-config": "3.2.1",
-    "@crashmax/tsconfig": "2.0.1",
-    "@types/node": "18.15.3",
-    "@types/serve-handler": "6.1.1",
-    "@types/websocket": "1.0.5",
-    "@vitest/ui": "0.33.0",
-    "tsup": "7.1.0",
-    "turbo": "1.10.7",
-    "typescript": "5.1.6",
-    "vite": "4.4.2",
-    "vite-plugin-dts": "3.1.1",
-    "vitest": "0.33.0"
+    "@crashmax/prettier-config": "5.0.2",
+    "@crashmax/tsconfig": "2.1.0",
+    "@types/node": "22.5.4",
+    "@types/serve-handler": "6.1.4",
+    "@types/websocket": "1.0.10",
+    "@vitest/ui": "2.0.5",
+    "tsup": "8.2.4",
+    "turbo": "2.1.1",
+    "typescript": "5.5.4",
+    "vite": "5.4.3",
+    "vite-plugin-dts": "4.1.1",
+    "vitest": "2.0.5"
   },
   "peerDependencies": {
     "vite": ">=3.0.0"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "test": "vitest",
+    "test:ui": "vitest --ui --watch",
+    "dev:examples": "turbo run dev --filter=./examples/*",
+    "build:examples": "turbo run build --filter=./examples/*",
+    "format": "prettier --write --ignore-unknown **"
   }
-}
+}