Merge pull request #12 from crashmax-dev/open-browser

feat: server options, serve static

Author: crashmax-dev

README.md

@@ -39,7 +39,7 @@ export default defineConfig({
   plugins: [
     Userscript({
       entry: 'src/index.ts',
-      metadata: {
+      header: {
         name,
         version,
         match: [
@@ -67,22 +67,35 @@ export default defineConfig({
 ## 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
+interface ServerConfig {
+    /**
+     * {@link https://github.com/sindresorhus/get-port}
+     */
+    port?: number;
+    /**
+     * @default true
+     */
+    open?: boolean;
+}
+
+interface UserscriptPluginConfig {
+    /**
+     * Path of userscript entry.
+     */
+    entry: string;
+    /**
+     * Userscript header config.
+     */
+    header: HeaderConfig;
+    /**
+     * Server config.
+     */
+    server?: ServerConfig;
+    /**
+     * Import all `@grant` in development mode.
+     * @default true
+     */
+    autoGrants?: boolean;
 }
 ```
 

examples/basic/vite.config.ts

@@ -6,14 +6,17 @@ export default defineConfig({
   plugins: [
     Userscript({
       entry: 'src/index.ts',
-      metadata: {
+      header: {
         name,
         version,
         match: [
           'https://example.com',
           'https://example.org',
           'https://example.edu'
         ]
+      },
+      server: {
+        open: false
       }
     })
   ]

examples/jsx/package.json

@@ -9,10 +9,10 @@
   },
   "devDependencies": {
     "babel-plugin-transform-react-jsx": "^6.24.1",
-    "vite-redom-jsx": "^2.0.2",
+    "vite-redom-jsx": "^2.0.3",
     "vite-userscript-plugin": "workspace:*"
   },
   "dependencies": {
-    "redom-jsx": "^3.29.1"
+    "redom-jsx": "^3.29.2"
   }
 }

examples/jsx/src/ListId.tsx renamed to examples/jsx/src/List.tsx

@@ -1,5 +1,10 @@
 import { mount } from 'redom-jsx'
-import type { RedomComponent, RedomEl, RedomElement, RedomProps } from 'redom-jsx'
+import type {
+  RedomComponent,
+  RedomEl,
+  RedomElement,
+  RedomProps
+} from 'redom-jsx'
 
 interface ItemsProps {
   count: number
@@ -34,11 +39,12 @@ class Items implements RedomComponent {
   }
 
   private render(): void {
+    // prettier-ignore
     <span this="el">{this.generateList()}</span>
   }
 }
 
-export class ListId implements RedomComponent {
+export class List implements RedomComponent {
   el: RedomEl
 
   private items: Items

examples/jsx/src/Toggle.tsx

@@ -1,12 +1,13 @@
-import { RedomComponent, RedomEl } from "redom-jsx";
-import { Heading } from "./Heading.jsx";
+import { RedomComponent, RedomEl } from 'redom-jsx'
+import { Heading } from './Heading.jsx'
 
 export class Toggle implements RedomComponent {
-  el: RedomEl;
+  el: RedomEl
 
   private heading: Heading
 
   constructor() {
+    // prettier-ignore
     <div this="el">
       <Heading this="heading" />
       <button

examples/jsx/src/index.tsx

@@ -1,8 +1,8 @@
 import { mount } from 'redom-jsx'
-import { App } from './App.js'
-import { ListId } from './ListId.jsx'
+import { App } from './App.jsx'
+import { List } from './List.jsx'
 import { Toggle } from './Toggle.jsx'
 
 mount(document.body, <App />)
 mount(document.body, <Toggle />)
-mount(document.body, <ListId />)
+mount(document.body, <List />)

examples/jsx/vite.config.ts

@@ -8,10 +8,13 @@ export default defineConfig({
     Redom(),
     Userscript({
       entry: 'src/index.tsx',
-      metadata: {
+      header: {
         name,
         version,
         match: 'https://example.com'
+      },
+      server: {
+        open: false
       }
     })
   ]

package.json

@@ -46,13 +46,17 @@
   "dependencies": {
     "@types/tampermonkey": "^4.0.5",
     "get-port": "^6.1.2",
+    "open": "^8.4.0",
+    "picocolors": "^1.0.0",
     "sanitize-filename": "^1.6.3",
+    "serve-handler": "^6.1.3",
     "websocket": "^1.0.34"
   },
   "devDependencies": {
     "@crashmax/prettier-config": "^2.0.3",
     "@crashmax/tsconfig": "^1.0.2",
     "@types/node": "^18.7.13",
+    "@types/serve-handler": "^6.1.1",
     "@types/websocket": "^1.0.5",
     "@vitest/ui": "^0.22.1",
     "tsup": "^6.2.3",