feat: remove css injecting, update apis

.github/workflows/npm-publish.yaml

@@ -11,18 +11,18 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory
@@ -31,7 +31,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
@@ -46,7 +46,7 @@ jobs:
         run: pnpm build
 
       - name: Publish
-        uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
-          access: public
+        shell: bash
+        run: |
+          echo "//registry.npmjs.org/:_authToken="${{ secrets.NPM_TOKEN }}"" > ~/.npmrc
+          pnpm publish --access public

README.md

@@ -6,9 +6,17 @@
 
 > ⚡️ A plugin for developing and building a Tampermonkey userscript based on [Vite](https://vitejs.dev).
 
+## Table of contents
+
+- [Features](#features)
+- [Install](#install)
+- [Setup config](#setup-config)
+- [Using style modules](#using-style-modules)
+- [Plugin configuration](#plugin-configuration)
+
 ## Features
 
-- 🔥 Hot reloading after changing any files.
+- 🔥 Reloading page after changing any files.
 - 🔧 Configure Tampermonkey's Userscript header.
 - 💨 Import all [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s to the header by default in development mode.
 - 📝 Automatic addition of used [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s in the code when building for production.
@@ -28,7 +36,7 @@ yarn add vite-userscript-plugin -D
 pnpm add vite-userscript-plugin -D
 ```
 
-### Setup `vite.config.ts`
+### Setup config
 
 ```js
 import { defineConfig } from 'vite'
@@ -83,7 +91,19 @@ export default defineConfig((config) => {
 }
 ```
 
-## Plugin Configuration
+### Using style modules
+
+```js
+import style from './style.css?raw'
+
+// inject style element
+const styleElement = GM_addStyle(style)
+
+// remove style element
+styleElement.remove()
+```
+
+## Plugin configuration
 
 ```ts
 interface ServerConfig {

examples/basic/package.json

@@ -8,7 +8,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "sass": "1.59.2",
+    "sass": "1.78.0",
     "vite-userscript-plugin": "workspace:*"
   }
 }

examples/basic/src/button.ts

@@ -1,5 +1,3 @@
-import './styles/style.scss'
-
 export function createButton() {
   const el = document.createElement('button')
   el.textContent = 'Button'

examples/basic/src/index.ts

@@ -1,6 +1,7 @@
 import { createButton } from './button.js'
-import './styles/style.css'
-import './styles/style.sass'
+import style from './style.scss?raw'
+
+GM_addStyle(style)
 
 const div = document.querySelector('div')!
 div.appendChild(createButton())

examples/basic/src/style.scss

@@ -0,0 +1,3 @@
+h1 {
+  text-decoration: underline;
+}

examples/basic/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import Userscript from 'vite-userscript-plugin'
+
 import { name, version } from './package.json'
 
 export default defineConfig((config) => {
@@ -14,8 +15,12 @@ export default defineConfig((config) => {
         },
         server: {
           port: 2000
+        },
+        esbuildTransformOptions: {
+          minify: false
         }
       })
+
     ]
   }
 })

examples/jsx/src/App.tsx

@@ -1,7 +1,8 @@
 import { mount, unmount } from 'redom-jsx'
-import { Counter } from './Counter.js'
 import type { RedomComponent, RedomEl } from 'redom-jsx'
 
+import { Counter } from './Counter.js'
+
 export class App implements RedomComponent {
   el: RedomEl
 
@@ -10,7 +11,7 @@ export class App implements RedomComponent {
 
   constructor() {
     // prettier-ignore
-    <div this="el">
+    ;<div this="el">
       <Counter
         this="counter"
         initialValue={-10}

examples/jsx/src/Counter.tsx

@@ -38,6 +38,6 @@ export class Counter implements RedomComponent {
 
   private render(): void {
     // prettier-ignore
-    <h1 this="el"></h1>
+    ;<h1 this="el"></h1>
   }
 }

examples/jsx/src/Heading.tsx

@@ -1,12 +1,12 @@
-import { RedomElement, router } from 'redom-jsx'
+import { router } from 'redom-jsx'
 import type { RedomComponent, RedomEl, Router } from 'redom-jsx'
 
 class H1 implements RedomComponent {
   el: RedomEl
 
   constructor() {
     // prettier-ignore
-    <h1 this="el">Lorem ipsum dolor sit amet. (h1)</h1>
+    ;<h1 this="el">Lorem ipsum dolor sit amet. (h1)</h1>
   }
 }
 
@@ -15,7 +15,7 @@ class H2 implements RedomComponent {
 
   constructor() {
     // prettier-ignore
-    <h2 this="el">Lorem ipsum dolor sit amet. (h2)</h2>
+    ;<h2 this="el">Lorem ipsum dolor sit amet. (h2)</h2>
   }
 }
 

examples/jsx/src/List.tsx

@@ -40,7 +40,7 @@ class Items implements RedomComponent {
 
   private render(): void {
     // prettier-ignore
-    <span this="el">{this.generateList()}</span>
+    ;<span this="el">{this.generateList()}</span>
   }
 }
 
@@ -55,7 +55,7 @@ export class List implements RedomComponent {
 
   private render(): void {
     // prettier-ignore
-    <div this="el">
+    ;<div this="el">
       <h1 this="h1">List</h1>
       <Items this="items" count={5} />
       <button onclick={() => this.items.update()}>Update</button>

examples/jsx/src/Toggle.tsx

@@ -1,4 +1,5 @@
-import { RedomComponent, RedomEl } from 'redom-jsx'
+import type { RedomComponent, RedomEl } from 'redom-jsx'
+
 import { Heading } from './Heading.js'
 
 export class Toggle implements RedomComponent {
@@ -8,7 +9,7 @@ export class Toggle implements RedomComponent {
 
   constructor() {
     // prettier-ignore
-    <div this="el">
+    ;<div this="el">
       <Heading this="heading" />
       <button
         onclick={() => {

examples/jsx/src/index.tsx

@@ -1,4 +1,5 @@
 import { mount } from 'redom-jsx'
+
 import { App } from './App.js'
 import { List } from './List.js'
 import { Toggle } from './Toggle.js'

examples/jsx/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import Redom from 'vite-redom-jsx'
 import Userscript from 'vite-userscript-plugin'
+
 import { name, version } from './package.json'
 
 export default defineConfig((config) => {
@@ -16,8 +17,12 @@ export default defineConfig((config) => {
         },
         server: {
           port: 4000
+        },
+        esbuildTransformOptions: {
+          minify: false
         }
       })
+
     ]
   }
 })

package.json

@@ -1,27 +1,27 @@
 {
   "name": "vite-userscript-plugin",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
   "exports": {
-    "require": "./dist/index.cjs",
-    "import": "./dist/index.js"
+    ".": "./dist/index.js"
   },
   "files": [
     "dist",
     "types"
   ],
+  "packageManager": "pnpm@9.9.0",
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
     "test": "vitest",
     "test:ui": "vitest --ui --watch",
-    "dev:examples": "turbo run dev --filter='./examples/*'",
-    "build:examples": "turbo run build --filter='./examples/*'",
-    "format": "prettier --write --ignore-unknown **",
-    "prepublishOnly": "pnpm build"
+    "dev:examples": "turbo run dev --filter=./examples/*",
+    "build:examples": "turbo run build --filter=./examples/*",
+    "format": "prettier --write --ignore-unknown **"
   },
   "repository": {
     "type": "git",
@@ -45,25 +45,25 @@
     "url": "https://github.com/crashmax-dev/vite-userscript-plugin/issues"
   },
   "dependencies": {
-    "get-port": "7.0.0",
-    "open": "9.1.0",
-    "picocolors": "1.0.0",
+    "get-port": "7.1.0",
+    "open": "10.1.0",
+    "picocolors": "1.1.0",
     "serve-handler": "6.1.5",
-    "websocket": "1.0.34"
+    "websocket": "1.0.35"
   },
   "devDependencies": {
-    "@crashmax/prettier-config": "3.2.1",
-    "@crashmax/tsconfig": "2.0.1",
-    "@types/node": "18.15.3",
-    "@types/serve-handler": "6.1.1",
-    "@types/websocket": "1.0.5",
-    "@vitest/ui": "0.33.0",
-    "tsup": "7.1.0",
-    "turbo": "1.10.7",
-    "typescript": "5.1.6",
-    "vite": "4.4.2",
-    "vite-plugin-dts": "3.1.1",
-    "vitest": "0.33.0"
+    "@crashmax/prettier-config": "5.0.2",
+    "@crashmax/tsconfig": "2.1.0",
+    "@types/node": "22.5.4",
+    "@types/serve-handler": "6.1.4",
+    "@types/websocket": "1.0.10",
+    "@vitest/ui": "2.0.5",
+    "tsup": "8.2.4",
+    "turbo": "2.1.1",
+    "typescript": "5.5.4",
+    "vite": "5.4.3",
+    "vite-plugin-dts": "4.1.1",
+    "vitest": "2.0.5"
   },
   "peerDependencies": {
     "vite": ">=3.0.0"