vite-userscript-plugin 0.3.0 → 0.6.1

package/dist/index.js

@@ -1,115 +1,290 @@
-import { readFileSync, writeFileSync } from 'node:fs';
-import { createServer } from 'node:http';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import websocket from 'websocket';
-import { banner } from './banner.js';
-import { grants, regexpScripts, template } from './constants.js';
-import css from './css.js';
-import { defineGrants, removeDuplicates, transform } from './helpers.js';
-function UserscriptPlugin(config) {
-    let pluginConfig;
-    let isBuildWatch;
-    let socketConnection = null;
-    const port = config.server?.port || 8000;
-    const server = createServer();
-    server.listen(port);
-    const WebSocketServer = websocket.server;
-    const ws = new WebSocketServer({ httpServer: server });
-    ws.on('request', (request) => {
-        socketConnection = request.accept(null, request.origin);
+// src/index.ts
+import { readFileSync, writeFileSync } from "fs";
+import { createServer } from "http";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+import { server } from "websocket";
+
+// src/banner.ts
+function banner(config) {
+  const metadata = [];
+  const configKeys = Object.keys(config);
+  const maxKeyLength = Math.max(...configKeys.map((key) => key.length)) + 1;
+  const addSpaces = (str) => {
+    return " ".repeat(maxKeyLength - str.length);
+  };
+  const addMetadata = (key, value) => {
+    const isBoolean = typeof value === "boolean";
+    if (isBoolean && !value)
+      return;
+    value = !isBoolean ? addSpaces(key) + value.toString() : "";
+    metadata.push(`// @${key}${value}`);
+  };
+  for (const [key, value] of Object.entries(config)) {
+    if (Array.isArray(value)) {
+      value.forEach((value2) => addMetadata(key, value2));
+    } else {
+      if (value === void 0)
+        continue;
+      addMetadata(key, value);
+    }
+  }
+  return [
+    "// ==UserScript==",
+    ...metadata,
+    "// ==/UserScript=="
+  ].join("\n");
+}
+
+// src/constants.ts
+var regexpScripts = new RegExp(/\.(tsx?|jsx?)$/);
+var regexpStyles = new RegExp(/\.(s?css|sass)$/);
+var template = `console.warn("__TEMPLATE__")`;
+var grants = [
+  "unsafeWindow",
+  "window.onurlchange",
+  "window.focus",
+  "window.close",
+  "GM_setValue",
+  "GM_getValue",
+  "GM_deleteValue",
+  "GM_listValues",
+  "GM_setClipboard",
+  "GM_addStyle",
+  "GM_addElement",
+  "GM_addValueChangeListener",
+  "GM_removeValueChangeListener",
+  "GM_registerMenuCommand",
+  "GM_unregisterMenuCommand",
+  "GM_download",
+  "GM_getTab",
+  "GM_getTabs",
+  "GM_saveTab",
+  "GM_openInTab",
+  "GM_notification",
+  "GM_getResourceURL",
+  "GM_getResourceText",
+  "GM_xmlhttpRequest",
+  "GM_webRequest",
+  "GM_log",
+  "GM_info"
+];
+
+// src/helpers.ts
+import { transformWithEsbuild } from "vite";
+function removeDuplicates(arr) {
+  return [...new Set(Array.isArray(arr) ? arr : arr ? [arr] : [])];
+}
+async function transform({
+  file,
+  name,
+  loader
+}) {
+  const { code } = await transformWithEsbuild(file, name, {
+    loader,
+    minify: true
+  });
+  return code;
+}
+function defineGrants(code) {
+  const definedGrants = [];
+  for (const grant of grants) {
+    if (code.indexOf(grant) !== -1) {
+      definedGrants.push(grant);
+    }
+  }
+  return definedGrants;
+}
+
+// src/css.ts
+var CSS = class {
+  styles = /* @__PURE__ */ new Map();
+  add(entry, code, path) {
+    if (regexpStyles.test(path)) {
+      this.styles.set(path, code);
+      return {
+        code: ""
+      };
+    }
+    if (path.includes(entry)) {
+      return {
+        code: code + template
+      };
+    }
+    return null;
+  }
+  async minify(file, name) {
+    return await transform({
+      file,
+      name,
+      loader: "css"
     });
-    return {
-        name: 'vite-userscript-plugin',
-        apply: 'build',
-        config() {
-            return {
-                build: {
-                    lib: {
-                        entry: config.entry,
-                        name: config.metadata.name,
-                        formats: ['iife'],
-                        fileName: () => `${config.metadata.name}.js`
-                    },
-                    rollupOptions: {
-                        output: {
-                            extend: true
-                        }
-                    }
-                }
-            };
-        },
-        configResolved(cfg) {
-            pluginConfig = cfg;
-            isBuildWatch = (cfg.build.watch ?? false);
-            const { match, require, include, exclude, resource, connect } = config.metadata;
-            config.metadata.match = removeDuplicates(match);
-            config.metadata.require = removeDuplicates(require);
-            config.metadata.include = removeDuplicates(include);
-            config.metadata.exclude = removeDuplicates(exclude);
-            config.metadata.resource = removeDuplicates(resource);
-            config.metadata.connect = removeDuplicates(connect);
-        },
-        async transform(code, path) {
-            const style = await css.minify(code, path);
-            return css.add(config.entry, style.replace('\n', ''), path);
-        },
-        generateBundle(_, bundle) {
-            for (const [_, file] of Object.entries(bundle)) {
-                const styleModules = Object.keys(file.modules);
-                css.merge(styleModules);
-            }
-        },
-        async writeBundle(_, bundle) {
-            for (const [fileName] of Object.entries(bundle)) {
-                if (regexpScripts.test(fileName)) {
-                    const rootDir = pluginConfig.root;
-                    const outDir = pluginConfig.build.outDir;
-                    const filePath = resolve(rootDir, outDir, fileName);
-                    const proxyFilePath = resolve(rootDir, outDir, `${config.metadata.name}.proxy.user.js`);
-                    const userFilePath = resolve(rootDir, outDir, `${config.metadata.name}.user.js`);
-                    try {
-                        let file = readFileSync(filePath, {
-                            encoding: 'utf8'
-                        });
-                        const hmrScript = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), 'hmr.js'), 'utf-8');
-                        file = file.replace(template, `
-                ${css.inject()}
-                const port = ${port}
-                ${hmrScript}
-              `);
-                        file = await transform({ file, name: fileName, loader: 'js' });
-                        // prettier-ignore
-                        config.metadata.grant = removeDuplicates(isBuildWatch
-                            ? grants
-                            : config.autoGrants ?? true
-                                ? defineGrants(file)
-                                : [...(config.metadata.grant ?? []), 'GM_addStyle', 'GM_info']);
-                        // prettier-ignore-end
-                        // source
-                        writeFileSync(filePath, file);
-                        // production
-                        writeFileSync(userFilePath, `${banner(config.metadata)}\n\n${file}`);
-                        // development
-                        writeFileSync(proxyFilePath, banner({
-                            ...config.metadata,
-                            require: [...config.metadata.require, 'file://' + filePath]
-                        }));
-                    }
-                    catch (err) {
-                        console.log(err);
-                    }
-                }
+  }
+  inject() {
+    const styles = [...this.styles.values()].join("");
+    if (!styles)
+      return;
+    return `GM_addStyle(\`${styles}\`)`;
+  }
+  merge(modules) {
+    const styleModules = [];
+    for (const module of modules) {
+      const style = this.styles.get(module);
+      if (!style)
+        continue;
+      styleModules.push([module, style]);
+    }
+    this.styles.clear();
+    styleModules.forEach((value) => this.styles.set(...value));
+  }
+};
+var css_default = new CSS();
+
+// src/index.ts
+function UserscriptPlugin(config) {
+  var _a;
+  let pluginConfig;
+  let isBuildWatch;
+  let socketConnection = null;
+  const port = ((_a = config.server) == null ? void 0 : _a.port) || 8e3;
+  const httpServer = createServer();
+  httpServer.listen(port);
+  const WebSocketServer = server;
+  const ws = new WebSocketServer({ httpServer });
+  ws.on("request", (request) => {
+    socketConnection = request.accept(null, request.origin);
+  });
+  return {
+    name: "vite-userscript-plugin",
+    apply: "build",
+    config() {
+      return {
+        build: {
+          lib: {
+            entry: config.entry,
+            name: config.metadata.name,
+            formats: ["iife"],
+            fileName: () => `${config.metadata.name}.js`
+          },
+          rollupOptions: {
+            output: {
+              exports: "none",
+              extend: true
             }
-        },
-        buildEnd() {
-            if (socketConnection) {
-                socketConnection.sendUTF(JSON.stringify({
-                    message: 'reload'
-                }));
+          }
+        }
+      };
+    },
+    configResolved(cfg) {
+      pluginConfig = cfg;
+      isBuildWatch = cfg.build.watch ?? false;
+      const { match, require: require2, include, exclude, resource, connect } = config.metadata;
+      config.metadata.match = removeDuplicates(match);
+      config.metadata.require = removeDuplicates(require2);
+      config.metadata.include = removeDuplicates(include);
+      config.metadata.exclude = removeDuplicates(exclude);
+      config.metadata.resource = removeDuplicates(resource);
+      config.metadata.connect = removeDuplicates(connect);
+    },
+    async transform(code, path) {
+      const style = await css_default.minify(code, path);
+      return css_default.add(config.entry, style.replace("\n", ""), path);
+    },
+    generateBundle(_, bundle) {
+      for (const [_2, file] of Object.entries(bundle)) {
+        const styleModules = Object.keys(
+          file.modules
+        );
+        css_default.merge(styleModules);
+      }
+    },
+    async writeBundle(_, bundle) {
+      for (const [fileName] of Object.entries(bundle)) {
+        if (regexpScripts.test(fileName)) {
+          const rootDir = pluginConfig.root;
+          const outDir = pluginConfig.build.outDir || "dist";
+          const outPath = resolve(rootDir, outDir, fileName);
+          const hotReloadPath = resolve(
+            dirname(fileURLToPath(import.meta.url)),
+            "__hot-reload__.js"
+          );
+          const proxyFilePath = resolve(
+            rootDir,
+            outDir,
+            `${config.metadata.name}.proxy.user.js`
+          );
+          const userFilePath = resolve(
+            rootDir,
+            outDir,
+            `${config.metadata.name}.user.js`
+          );
+          try {
+            let source = readFileSync(outPath, "utf8");
+            config.metadata.grant = removeDuplicates(
+              isBuildWatch ? grants : config.autoGrants ?? true ? defineGrants(source) : [...config.metadata.grant ?? [], "GM_addStyle", "GM_info"]
+            );
+            if (isBuildWatch) {
+              const hotReloadFile = readFileSync(
+                resolve(
+                  dirname(fileURLToPath(import.meta.url)),
+                  "hot-reload.js"
+                ),
+                "utf8"
+              );
+              const hotReloadScript = await transform({
+                file: hotReloadFile.replace("__PORT__", port.toString()),
+                name: hotReloadPath,
+                loader: "js"
+              });
+              writeFileSync(hotReloadPath, hotReloadScript);
+              writeFileSync(
+                proxyFilePath,
+                banner({
+                  ...config.metadata,
+                  require: [
+                    ...config.metadata.require,
+                    "file://" + hotReloadPath,
+                    "file://" + outPath
+                  ]
+                })
+              );
             }
+            source = source.replace(template, `${css_default.inject()}`);
+            source = await transform({
+              file: source,
+              name: fileName,
+              loader: "js"
+            });
+            writeFileSync(outPath, source);
+            writeFileSync(
+              userFilePath,
+              `${banner(config.metadata)}
+
+${source}`
+            );
+          } catch (err) {
+            console.log(err);
+          }
         }
-    };
+      }
+      if (!isBuildWatch) {
+        httpServer.close();
+        process.exit(0);
+      }
+    },
+    buildEnd() {
+      if (socketConnection) {
+        socketConnection.sendUTF(
+          JSON.stringify({
+            message: "reload"
+          })
+        );
+      }
+    }
+  };
 }
-export { UserscriptPlugin };
-export default UserscriptPlugin;
+var src_default = UserscriptPlugin;
+export {
+  UserscriptPlugin,
+  src_default as default
+};

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "vite-userscript-plugin",
-  "version": "0.3.0",
+  "version": "0.6.1",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    "require": "./dist/index.cjs",
+    "import": "./dist/index.js"
+  },
   "files": [
     "dist"
   ],
@@ -33,11 +38,10 @@
     "@types/websocket": "^1.0.5"
   },
   "peerDependencies": {
-    "@types/tampermonkey": "latest"
+    "@types/tampermonkey": ">=4.0.0"
   },
   "scripts": {
-    "dev": "tsc --build --watch",
-    "build": "pnpm clean && tsc --build",
-    "clean": "del-cli dist"
+    "dev": "tsup --watch",
+    "build": "tsup"
   }
 }

package/dist/banner.d.ts

@@ -1,2 +0,0 @@
-import type { MetadataConfig } from './types.js';
-export declare function banner(config: MetadataConfig): string;

package/dist/banner.js

@@ -1,30 +0,0 @@
-export function banner(config) {
-    const metadata = [];
-    const configKeys = Object.keys(config);
-    const maxKeyLength = Math.max(...configKeys.map((key) => key.length)) + 1;
-    const addSpaces = (str) => {
-        return ' '.repeat(maxKeyLength - str.length);
-    };
-    const addMetadata = (key, value) => {
-        const isBoolean = typeof value === 'boolean';
-        if (isBoolean && !value)
-            return;
-        value = !isBoolean ? addSpaces(key) + value.toString() : '';
-        metadata.push(`// @${key}${value}`);
-    };
-    for (const [key, value] of Object.entries(config)) {
-        if (Array.isArray(value)) {
-            value.forEach((value) => addMetadata(key, value));
-        }
-        else {
-            if (value === undefined)
-                continue;
-            addMetadata(key, value);
-        }
-    }
-    return [
-        '// ==UserScript==',
-        ...metadata,
-        '// ==/UserScript=='
-    ].join('\n');
-}

package/dist/constants.d.ts

@@ -1,4 +0,0 @@
-export declare const regexpScripts: RegExp;
-export declare const regexpStyles: RegExp;
-export declare const template = "console.warn(\"__TEMPLATE__\")";
-export declare const grants: readonly ["unsafeWindow", "window.onurlchange", "window.focus", "window.close", "GM_setValue", "GM_getValue", "GM_deleteValue", "GM_listValues", "GM_setClipboard", "GM_addStyle", "GM_addElement", "GM_addValueChangeListener", "GM_removeValueChangeListener", "GM_registerMenuCommand", "GM_unregisterMenuCommand", "GM_download", "GM_getTab", "GM_getTabs", "GM_saveTab", "GM_openInTab", "GM_notification", "GM_getResourceURL", "GM_getResourceText", "GM_xmlhttpRequest", "GM_webRequest", "GM_log", "GM_info"];

package/dist/constants.js

@@ -1,32 +0,0 @@
-export const regexpScripts = new RegExp(/\.js/);
-export const regexpStyles = new RegExp(/\.css|\.sass|\.scss|\.less/);
-export const template = `console.warn("__TEMPLATE__")`;
-export const grants = [
-    'unsafeWindow',
-    'window.onurlchange',
-    'window.focus',
-    'window.close',
-    'GM_setValue',
-    'GM_getValue',
-    'GM_deleteValue',
-    'GM_listValues',
-    'GM_setClipboard',
-    'GM_addStyle',
-    'GM_addElement',
-    'GM_addValueChangeListener',
-    'GM_removeValueChangeListener',
-    'GM_registerMenuCommand',
-    'GM_unregisterMenuCommand',
-    'GM_download',
-    'GM_getTab',
-    'GM_getTabs',
-    'GM_saveTab',
-    'GM_openInTab',
-    'GM_notification',
-    'GM_getResourceURL',
-    'GM_getResourceText',
-    'GM_xmlhttpRequest',
-    'GM_webRequest',
-    'GM_log',
-    'GM_info'
-];

package/dist/css.d.ts

@@ -1,11 +0,0 @@
-declare class CSS {
-    private readonly styles;
-    add(entry: string, code: string, path: string): {
-        code: string;
-    } | null;
-    minify(file: string, name: string): Promise<string>;
-    inject(): string | void;
-    merge(modules: string[]): void;
-}
-declare const _default: CSS;
-export default _default;

package/dist/css.js

@@ -1,51 +0,0 @@
-import { regexpStyles, template } from './constants.js';
-import { transform } from './helpers.js';
-class CSS {
-    constructor() {
-        Object.defineProperty(this, "styles", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-    }
-    add(entry, code, path) {
-        if (regexpStyles.test(path)) {
-            this.styles.set(path, code);
-            return {
-                code: ''
-            };
-        }
-        if (path.includes(entry)) {
-            return {
-                code: code + template
-            };
-        }
-        return null;
-    }
-    async minify(file, name) {
-        return await transform({
-            file,
-            name,
-            loader: 'css'
-        });
-    }
-    inject() {
-        const styles = [...this.styles.values()].join('');
-        if (!styles)
-            return;
-        return `GM_addStyle(\`${styles}\`)`;
-    }
-    merge(modules) {
-        const styleModules = [];
-        for (const module of modules) {
-            const style = this.styles.get(module);
-            if (!style)
-                continue;
-            styleModules.push([module, style]);
-        }
-        this.styles.clear();
-        styleModules.forEach((value) => this.styles.set(...value));
-    }
-}
-export default new CSS();

package/dist/helpers.d.ts

@@ -1,4 +0,0 @@
-import { Grants, Transform } from './types.js';
-export declare function removeDuplicates(arr: string | string[] | readonly string[] | undefined): any[];
-export declare function transform({ file, name, loader }: Transform): Promise<string>;
-export declare function defineGrants(code: string): Grants[];

package/dist/helpers.js

@@ -1,21 +0,0 @@
-import { transformWithEsbuild } from 'vite';
-import { grants } from './constants.js';
-export function removeDuplicates(arr) {
-    return [...new Set(Array.isArray(arr) ? arr : arr ? [arr] : [])];
-}
-export async function transform({ file, name, loader }) {
-    const { code } = await transformWithEsbuild(file, name, {
-        loader,
-        minify: true
-    });
-    return code;
-}
-export function defineGrants(code) {
-    const definedGrants = [];
-    for (const grant of grants) {
-        if (code.indexOf(grant) !== -1) {
-            definedGrants.push(grant);
-        }
-    }
-    return definedGrants;
-}

package/dist/hmr.d.ts

@@ -1,2 +0,0 @@
-declare const port: number;
-declare const ws: WebSocket;

package/dist/hmr.js

@@ -1,11 +0,0 @@
-"use strict";
-const ws = new WebSocket(`ws://localhost:${port}`);
-ws.addEventListener('message', () => {
-    location.reload();
-});
-ws.addEventListener('open', () => {
-    const { script } = GM_info;
-    console.group(`${script.name} / ${script.version}`);
-    console.log(GM_info);
-    console.groupEnd();
-});