resolve #2

packages/vite-userscript-plugin/package.json

@@ -12,7 +12,11 @@
     "build": "pnpm clean && tsc --build",
     "clean": "del-cli dist"
   },
+  "dependencies": {
+    "@types/tampermonkey": "^4.0.5",
+    "websocket": "^1.0.34"
+  },
   "devDependencies": {
-    "@types/tampermonkey": "^4.0.5"
+    "@types/websocket": "^1.0.5"
   }
 }

packages/vite-userscript-plugin/src/css.ts

@@ -3,11 +3,11 @@ import type { ESBuildTransformResult } from 'vite'
 import { regexpStyles, template } from './constants.js'
 
 class CSS {
-  private styles: string[] = []
+  private readonly styles = new Map<string, string>()
 
   add(entry: string, code: string, path: string): { code: string } | null {
     if (regexpStyles.test(path)) {
-      this.styles.push(code)
+      this.styles.set(path, code)
       return {
         code: ''
       }
@@ -30,9 +30,7 @@ class CSS {
   }
 
   inject(): string {
-    const css = `GM_addStyle(\`${this.styles.join('')}\`)`
-    this.styles.length = 0
-    return css
+    return `GM_addStyle(\`${[...this.styles.values()].join('')}\`)`
   }
 }
 

packages/vite-userscript-plugin/src/hmr.ts

@@ -0,0 +1,13 @@
+declare const port: number
+
+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()
+})

packages/vite-userscript-plugin/src/index.ts

@@ -1,6 +1,9 @@
 import { readFileSync, writeFileSync } from 'node:fs'
-import { resolve } from 'node:path'
+import { createServer } from 'node:http'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { PluginOption, ResolvedConfig, transformWithEsbuild } from 'vite'
+import websocket from 'websocket'
 import { banner } from './banner.js'
 import { regexpScripts, template } from './constants.js'
 import css from './css.js'
@@ -9,6 +12,17 @@ import type { PluginConfig } from './types.js'
 
 function UserscriptPlugin(config: PluginConfig): PluginOption {
   let pluginConfig: ResolvedConfig
+  let socketConnection: websocket.connection | null = 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',
@@ -63,7 +77,7 @@ function UserscriptPlugin(config: PluginConfig): PluginOption {
             `${config.metadata.name}.proxy.user.js`
           )
 
-          const userFileName = resolve(
+          const userFilePath = resolve(
             rootDir,
             outDir,
             `${config.metadata.name}.user.js`
@@ -74,14 +88,17 @@ function UserscriptPlugin(config: PluginConfig): PluginOption {
               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}
               `
             )
 
@@ -94,7 +111,7 @@ function UserscriptPlugin(config: PluginConfig): PluginOption {
             writeFileSync(filePath, code)
 
             // production
-            writeFileSync(userFileName, `${banner(config.metadata)}\n\n${code}`)
+            writeFileSync(userFilePath, `${banner(config.metadata)}\n\n${code}`)
 
             // development
             writeFileSync(
@@ -109,6 +126,15 @@ function UserscriptPlugin(config: PluginConfig): PluginOption {
           }
         }
       }
+    },
+    buildEnd() {
+      if (socketConnection) {
+        socketConnection.sendUTF(
+          JSON.stringify({
+            message: 'reload'
+          })
+        )
+      }
     }
   }
 }

packages/vite-userscript-plugin/src/types.ts

@@ -237,12 +237,21 @@ export type MetadataConfig = {
   'run-at'?: RunAt
 }
 
+export interface ServerConfig {
+  /**
+   * @default 8000
+   */
+  port?: number
+}
+
 export interface PluginConfig {
   /**
    * Path of userscript entry.
    */
   entry: string
 
+  server?: ServerConfig
+
   /**
    * Userscript Metadata config.
    */