vite-userscript-plugin 0.0.0 → 0.3.0

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Vitalij Ryndin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# vite-userscript-plugin
+
+![ci](https://img.shields.io/github/workflow/status/crashmax-dev/vite-userscript-plugin/npm-publish)
+![npm](https://img.shields.io/npm/v/vite-userscript-plugin)
+![license](https://img.shields.io/github/license/crashmax-dev/vite-userscript-plugin)
+
+> Tampermonkey userscript developing and build plugin based on [Vite](https://vitejs.dev).
+
+## Features
+
+- 🔥 Hot reloading after changing any files.
+- 🔧 Configure Tampermonkey's Userscript header.
+- 💨 Import all `grant` by default in development mode.
+- 📝 Automatically add used `grant` when building for production.
+
+## Install
+
+```
+npm install vite-userscript-plugin -D
+```
+
+```
+yarn add vite-userscript-plugin -D
+```
+
+```
+pnpm add vite-userscript-plugin -D
+```
+
+## Usage
+
+### `vite.config.ts`
+
+```js
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import { UserscriptPlugin } from 'vite-userscript-plugin'
+import { name, version } from './package.json'
+
+export default defineConfig({
+  plugins: [
+    UserscriptPlugin({
+      entry: resolve(__dirname, 'src/index.ts'),
+      metadata: {
+        name,
+        version,
+        match: [
+          'https://example.com',
+          'https://example.org',
+          'https://example.edu'
+        ]
+      }
+    })
+  ]
+})
+```
+
+### `package.json`
+
+```json
+{
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  }
+}
+```
+
+## Plugin Configuration
+
+```ts
+export interface UserscriptPluginConfig {
+  /**
+   * Path of userscript entry.
+   */
+  entry: string
+
+  /**
+   * Userscript header config.
+   */
+  metadata: MetadataConfig
+
+  /**
+   * Import all `@grant` in development mode.
+   * @default true
+   */
+  autoGrants?: boolean
+
+  /**
+   * Server config (used in development mode for hot reloading).
+   */
+  server?: ServerConfig
+}
+```
+
+## Example
+
+See the [example](https://github.com/crashmax-dev/vite-userscript-plugin/tree/master/packages/demo) folder.

package/dist/constants.d.ts

@@ -1,3 +1,4 @@
 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,3 +1,32 @@
 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 +1,11 @@
-import type { ESBuildTransformResult } from 'vite';
 declare class CSS {
-    private styles;
+    private readonly styles;
     add(entry: string, code: string, path: string): {
         code: string;
     } | null;
-    minify(css: string, path: string): Promise<ESBuildTransformResult>;
-    inject(): string;
+    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,17 +1,17 @@
-import { transformWithEsbuild } from 'vite';
 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: []
+            value: new Map()
         });
     }
     add(entry, code, path) {
         if (regexpStyles.test(path)) {
-            this.styles.push(code);
+            this.styles.set(path, code);
             return {
                 code: ''
             };
@@ -23,16 +23,29 @@ class CSS {
         }
         return null;
     }
-    async minify(css, path) {
-        return await transformWithEsbuild(css, path, {
-            minify: true,
+    async minify(file, name) {
+        return await transform({
+            file,
+            name,
             loader: 'css'
         });
     }
     inject() {
-        const css = `GM_addStyle(\`${this.styles.join('')}\`)`;
-        this.styles.length = 0;
-        return css;
+        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 +1,4 @@
-export declare function removeDuplicates(arr: string | string[] | undefined): any[];
+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,3 +1,21 @@
+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

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

package/dist/hmr.js

@@ -0,0 +1,11 @@
+"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();
+});

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { PluginOption } from 'vite';
-import type { PluginConfig } from './types.js';
-declare function UserscriptPlugin(config: PluginConfig): PluginOption;
+import type { UserscriptPluginConfig } from './types.js';
+declare function UserscriptPlugin(config: UserscriptPluginConfig): PluginOption;
 export { UserscriptPlugin };
 export default UserscriptPlugin;
-export type { PluginConfig };
+export type { UserscriptPluginConfig };

package/dist/index.js

@@ -1,12 +1,24 @@
 import { readFileSync, writeFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { transformWithEsbuild } from 'vite';
+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 { regexpScripts, template } from './constants.js';
+import { grants, regexpScripts, template } from './constants.js';
 import css from './css.js';
-import { removeDuplicates } from './helpers.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);
+    });
     return {
         name: 'vite-userscript-plugin',
         apply: 'build',
@@ -28,51 +40,56 @@ function UserscriptPlugin(config) {
             };
         },
         configResolved(cfg) {
-            const { match, require, include, exclude, resource, connect, grant } = config.metadata;
+            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);
-            config.metadata.grant = removeDuplicates([
-                ...(grant ?? []),
-                'GM_addStyle',
-                'GM_info'
-            ]);
-            pluginConfig = cfg;
         },
         async transform(code, path) {
-            const transformed = await css.minify(code, path);
-            return css.add(config.entry, transformed.code.replace('\n', ''), 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(options, bundle) {
+        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 userFileName = resolve(rootDir, outDir, `${config.metadata.name}.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 { script } = GM_info
-                console.group(script.name + ' / ' + script.version)
-                console.log(GM_info)
-                console.groupEnd()
+                const port = ${port}
+                ${hmrScript}
               `);
-                        const { code } = await transformWithEsbuild(file, fileName, {
-                            loader: 'js',
-                            minify: true
-                        });
+                        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, code);
+                        writeFileSync(filePath, file);
                         // production
-                        writeFileSync(userFileName, `${banner(config.metadata)}\n\n${code}`);
+                        writeFileSync(userFilePath, `${banner(config.metadata)}\n\n${file}`);
                         // development
                         writeFileSync(proxyFilePath, banner({
                             ...config.metadata,
@@ -84,6 +101,13 @@ function UserscriptPlugin(config) {
                     }
                 }
             }
+        },
+        buildEnd() {
+            if (socketConnection) {
+                socketConnection.sendUTF(JSON.stringify({
+                    message: 'reload'
+                }));
+            }
         }
     };
 }

package/dist/types.d.ts

@@ -1,5 +1,11 @@
+import { grants } from './constants.js';
+export interface Transform {
+    file: string;
+    name: string;
+    loader: 'js' | 'css';
+}
 export declare type RunAt = 'document-start' | 'document-body' | 'document-end' | 'document-idle' | 'context-menu';
-export declare type 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';
+export declare type Grants = typeof grants[number];
 export declare type MetadataConfig = {
     [property: string]: string | boolean | number | string[] | undefined;
     /**
@@ -183,13 +189,29 @@ export declare type MetadataConfig = {
      */
     'run-at'?: RunAt;
 };
-export interface PluginConfig {
+export interface ServerConfig {
+    /**
+     * Server port.
+     * @default 8000
+     */
+    port?: number;
+}
+export interface UserscriptPluginConfig {
     /**
      * Path of userscript entry.
      */
     entry: string;
     /**
-     * Userscript Metadata config.
+     * Userscript header config.
      */
     metadata: MetadataConfig;
+    /**
+     * Import all `@grant` in development mode.
+     * @default true
+     */
+    autoGrants?: boolean;
+    /**
+     * Server config (used in development mode for hot reloading).
+     */
+    server?: ServerConfig;
 }

package/package.json

@@ -1,14 +1,39 @@
 {
   "name": "vite-userscript-plugin",
-  "version": "0.0.0",
+  "version": "0.3.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "files": [
     "dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crashmax-dev/vite-userscript-plugin.git"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "userscript",
+    "tampermonkey"
+  ],
+  "author": {
+    "name": "Vitalij Ryndin",
+    "email": "sys@crashmax.ru",
+    "url": "https://crashmax.ru"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/crashmax-dev/vite-userscript-plugin/issues"
+  },
+  "dependencies": {
+    "websocket": "^1.0.34"
+  },
   "devDependencies": {
-    "@types/tampermonkey": "^4.0.5"
+    "@types/websocket": "^1.0.5"
+  },
+  "peerDependencies": {
+    "@types/tampermonkey": "latest"
   },
   "scripts": {
     "dev": "tsc --build --watch",