vite-userscript-plugin 0.1.0 → 0.4.0

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/hmr.d.ts

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

package/dist/hmr.js

@@ -1,5 +1,5 @@
 "use strict";
-const ws = new WebSocket(`ws://localhost:${port}`);
+const ws = new WebSocket('ws://localhost:__PORT__');
 ws.addEventListener('message', () => {
     location.reload();
 });

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

@@ -12,7 +12,13 @@ function UserscriptPlugin(config) {
     let isBuildWatch;
     let socketConnection = null;
     const port = config.server?.port || 8000;
-    const server = createServer();
+    const server = createServer((_, res) => {
+        // const index = resolve(
+        //   dirname(fileURLToPath(import.meta.url)), '..', 'src', 'index.html'
+        // )
+        // res.writeHead(200, { 'Content-Type': 'html' })
+        // res.end(readFileSync(index))
+    });
     server.listen(port);
     const WebSocketServer = websocket.server;
     const ws = new WebSocketServer({ httpServer: server });
@@ -33,6 +39,7 @@ function UserscriptPlugin(config) {
                     },
                     rollupOptions: {
                         output: {
+                            exports: 'none',
                             extend: true
                         }
                     }
@@ -65,36 +72,45 @@ function UserscriptPlugin(config) {
                 if (regexpScripts.test(fileName)) {
                     const rootDir = pluginConfig.root;
                     const outDir = pluginConfig.build.outDir;
-                    const filePath = resolve(rootDir, outDir, fileName);
+                    const outPath = resolve(rootDir, outDir, fileName);
+                    const hmrPath = resolve(rootDir, outDir, 'hmr.js');
                     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' });
+                        let source = readFileSync(outPath, 'utf8');
                         // prettier-ignore
                         config.metadata.grant = removeDuplicates(isBuildWatch
                             ? grants
-                            : config.autoGrants
-                                ? defineGrants(file)
+                            : config.autoGrants ?? true
+                                ? defineGrants(source)
                                 : [...(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]
-                        }));
+                        if (isBuildWatch) {
+                            const hmrScript = await transform({
+                                file: `
+                  ${readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), 'hmr.js'), 'utf8')}
+                `.replace('__PORT__', port.toString()),
+                                name: hmrPath,
+                                loader: 'js'
+                            });
+                            writeFileSync(hmrPath, hmrScript);
+                            writeFileSync(proxyFilePath, banner({
+                                ...config.metadata,
+                                require: [
+                                    ...config.metadata.require,
+                                    'file://' + hmrPath,
+                                    'file://' + outPath
+                                ]
+                            }));
+                        }
+                        source = source.replace(template, `${css.inject()}`);
+                        source = await transform({
+                            file: source,
+                            name: fileName,
+                            loader: 'js'
+                        });
+                        writeFileSync(outPath, source);
+                        writeFileSync(userFilePath, `${banner(config.metadata)}\n\n${source}`);
                     }
                     catch (err) {
                         console.log(err);

package/dist/types.d.ts

@@ -191,22 +191,27 @@ export declare type MetadataConfig = {
 };
 export interface ServerConfig {
     /**
+     * Server port.
      * @default 8000
      */
     port?: number;
 }
-export interface PluginConfig {
+export interface UserscriptPluginConfig {
     /**
      * Path of userscript entry.
      */
     entry: string;
     /**
-     * @default false
+     * Userscript header config.
+     */
+    metadata: MetadataConfig;
+    /**
+     * Import all `@grant` in development mode.
+     * @default true
      */
     autoGrants?: boolean;
-    server?: ServerConfig;
     /**
-     * Userscript Metadata config.
+     * Server config (used in development mode for hot reloading).
      */
-    metadata: MetadataConfig;
+    server?: ServerConfig;
 }

package/package.json

@@ -1,18 +1,40 @@
 {
   "name": "vite-userscript-plugin",
-  "version": "0.1.0",
+  "version": "0.4.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/websocket": "^1.0.5"
   },
+  "peerDependencies": {
+    "@types/tampermonkey": "latest"
+  },
   "scripts": {
     "dev": "tsc --build --watch",
     "build": "pnpm clean && tsc --build",