Merge pull request #15 from crashmax-dev/tampermonkey-types

feat: added Tampermonkey's type difinition

Author: crashmax-dev

README.md

@@ -12,6 +12,7 @@
 - 🔧 Configure Tampermonkey's Userscript header.
 - 💨 Import all `grant` by default in development mode.
 - 📝 Automatically add used `grant` when building for production.
+- 📦 Built-in Tampermonkey's TypeScript type difinition.
 
 ## Install
 
@@ -36,21 +37,23 @@ import { defineConfig } from 'vite'
 import Userscript from 'vite-userscript-plugin'
 import { name, version } from './package.json'
 
-export default defineConfig({
-  plugins: [
-    Userscript({
-      entry: 'src/index.ts',
-      header: {
-        name,
-        version,
-        match: [
-          'https://example.com',
-          'https://example.org',
-          'https://example.edu'
-        ]
-      }
-    })
-  ]
+export default defineConfig((config) => {
+  return {
+    plugins: [
+      Userscript({
+        entry: 'src/index.ts',
+        header: {
+          name,
+          version,
+          match: [
+            '*://example.com',
+            '*://example.org',
+            '*://example.edu'
+          ]
+        }
+      })
+    ]
+  }
 })
 ```
 
@@ -65,6 +68,18 @@ export default defineConfig({
 }
 ```
 
+### `tsconfig.json`
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "vite-userscript-plugin/tampermonkey"
+    ]
+  }
+}
+```
+
 ## Plugin Configuration
 
 ```ts

examples/basic/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --mode development",
     "build": "vite build"
   },
   "devDependencies": {

examples/basic/src/index.ts

@@ -4,3 +4,5 @@ import './styles/style.sass'
 
 const div = document.querySelector('div')!
 div.appendChild(createButton())
+
+GM_addStyle('')

examples/basic/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-userscript-plugin/tampermonkey" />

examples/basic/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "@crashmax/tsconfig",
   "compilerOptions": {
-    "outDir": "dist",
-    "resolveJsonModule": true
-  }
+    "outDir": "dist"
+  },
+  "include": [
+    "src/**/*"
+  ]
 }

examples/basic/vite.config.ts

@@ -2,19 +2,24 @@ import { defineConfig } from 'vite'
 import Userscript from 'vite-userscript-plugin'
 import { name, version } from './package.json'
 
-export default defineConfig({
-  plugins: [
-    Userscript({
-      entry: 'src/index.ts',
-      header: {
-        name,
-        version,
-        match: [
-          '*://example.com',
-          '*://example.org',
-          '*://example.edu'
-        ]
-      }
-    })
-  ]
+export default defineConfig((config) => {
+  return {
+    plugins: [
+      Userscript({
+        entry: 'src/index.ts',
+        header: {
+          name,
+          version,
+          match: [
+            '*://example.com',
+            '*://example.org',
+            '*://example.edu'
+          ]
+        },
+        server: {
+          port: 3000
+        }
+      })
+    ]
+  }
 })

examples/jsx/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --mode development",
     "build": "vite build"
   },
   "devDependencies": {
@@ -13,6 +13,6 @@
     "vite-userscript-plugin": "workspace:*"
   },
   "dependencies": {
-    "redom-jsx": "^3.29.3"
+    "redom-jsx": "^3.29.4"
   }
 }

examples/jsx/tsconfig.json

@@ -2,10 +2,12 @@
   "extends": "@crashmax/tsconfig",
   "compilerOptions": {
     "outDir": "dist",
-    "resolveJsonModule": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "types": [
+      "vite-userscript-plugin/tampermonkey"
+    ]
   },
   "include": [
-    "src"
+    "src/**/*"
   ]
 }

examples/jsx/vite.config.ts

@@ -3,16 +3,21 @@ import Redom from 'vite-redom-jsx'
 import Userscript from 'vite-userscript-plugin'
 import { name, version } from './package.json'
 
-export default defineConfig({
-  plugins: [
-    Redom(),
-    Userscript({
-      entry: 'src/index.tsx',
-      header: {
-        name,
-        version,
-        match: '*://example.com'
-      }
-    })
-  ]
+export default defineConfig((config) => {
+  return {
+    plugins: [
+      Redom(),
+      Userscript({
+        entry: 'src/index.tsx',
+        header: {
+          name,
+          version,
+          match: '*://example.com'
+        },
+        server: {
+          port: 4000
+        }
+      })
+    ]
+  }
 })

package.json

@@ -10,7 +10,8 @@
     "import": "./dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "tampermonkey.d.ts"
   ],
   "scripts": {
     "dev": "tsup --watch",
@@ -44,7 +45,6 @@
     "url": "https://github.com/crashmax-dev/vite-userscript-plugin/issues"
   },
   "dependencies": {
-    "@types/tampermonkey": "^4.0.5",
     "get-port": "^6.1.2",
     "open": "^8.4.0",
     "picocolors": "^1.0.0",
@@ -60,14 +60,13 @@
     "@types/websocket": "^1.0.5",
     "@vitest/ui": "^0.23.2",
     "tsup": "^6.2.3",
-    "turbo": "^1.4.6",
+    "turbo": "^1.4.7",
     "typescript": "^4.8.3",
-    "vite": "^3.1.1",
+    "vite": "^3.1.2",
     "vite-plugin-dts": "^1.5.0",
     "vitest": "^0.23.2"
   },
   "peerDependencies": {
-    "@types/tampermonkey": ">=4.0.0",
     "vite": ">=2.9.0"
   }
 }