Merge pull request #13 from crashmax-dev/meta-banner

feat: add meta header for update and download userscript

Author: crashmax-dev

src/banner.ts

@@ -1,33 +1,50 @@
 import type { HeaderConfig } from './types.js'
 
-export function banner(config: HeaderConfig): string {
-  const header: string[] = []
-  const configKeys = Object.keys(config)
-  const maxKeyLength = Math.max(...configKeys.map((key) => key.length)) + 1
+export class Banner {
+  private header: string[] = []
+  private configKeys: string[]
+  private maxKeyLength: number
 
-  const addSpaces = (str: string): string => {
-    return ' '.repeat(maxKeyLength - str.length)
+  constructor(private readonly config: HeaderConfig) {
+    this.downloadMeta()
+    this.configKeys = Object.keys(this.config)
+    this.maxKeyLength =
+      Math.max(...this.configKeys.map((key) => key.length)) + 1
   }
 
-  const addMetadata = (key: string, value: string | number | boolean): void => {
+  private downloadMeta(): void {
+    const { name, homepage, updateURL, downloadURL } = this.config
+    if (homepage && !updateURL && !downloadURL) {
+      this.config.updateURL = new URL(`${name}.meta.js`, homepage).href
+      this.config.downloadURL = new URL(`${name}.user.js`, homepage).href
+    }
+  }
+
+  private addSpaces(str: string): string {
+    return ' '.repeat(this.maxKeyLength - str.length)
+  }
+
+  private addMetadata(key: string, value: string | number | boolean): void {
     const isBoolean = typeof value === 'boolean'
     if (isBoolean && !value) return
-    value = !isBoolean ? addSpaces(key) + value.toString() : ''
-    header.push(`// @${key}${value}`)
+    value = !isBoolean ? `${this.addSpaces(key)}${value}` : ''
+    this.header.push(`// @${key}${value}`)
   }
 
-  for (const [key, value] of Object.entries(config)) {
-    if (Array.isArray(value)) {
-      value.forEach((value) => addMetadata(key, value))
-    } else {
-      if (value === undefined) continue
-      addMetadata(key, value)
+  generate(): string {
+    for (const [key, value] of Object.entries(this.config)) {
+      if (Array.isArray(value)) {
+        value.forEach((value) => this.addMetadata(key, value))
+      } else {
+        if (value === undefined) continue
+        this.addMetadata(key, value)
+      }
     }
-  }
 
-  return [
-    '// ==UserScript==',
-    ...header,
-    '// ==/UserScript=='
-  ].join('\n')
+    return [
+      '// ==UserScript==',
+      ...this.header,
+      '// ==/UserScript=='
+    ].join('\n')
+  }
 }

src/index.ts

@@ -10,7 +10,7 @@ import serveHandler from 'serve-handler'
 import { PluginOption, ResolvedConfig, createLogger } from 'vite'
 import { server } from 'websocket'
 import type { connection } from 'websocket'
-import { banner } from './banner.js'
+import { Banner } from './banner.js'
 import { userConfig } from './config.js'
 import { grants, regexpScripts, regexpStyles } from './constants.js'
 import css from './css.js'
@@ -104,17 +104,19 @@ export default function UserscriptPlugin(
     },
     async writeBundle(_, bundle) {
       const { open, port } = config.server!
+      const userFilename = `${config.header.name}.user.js`
       const proxyFilename = `${config.header.name}.proxy.user.js`
+      const metaFilename = `${config.header.name}.meta.js`
 
       for (const [fileName] of Object.entries(bundle)) {
         if (regexpScripts.test(fileName)) {
           const rootDir = pluginConfig.root
           const outDir = pluginConfig.build.outDir
-          const userFilename = `${config.header.name}.user.js`
 
           const outPath = resolve(rootDir, outDir, fileName)
-          const proxyFilePath = resolve(rootDir, outDir, proxyFilename)
           const userFilePath = resolve(rootDir, outDir, userFilename)
+          const proxyFilePath = resolve(rootDir, outDir, proxyFilename)
+          const metaFilePath = resolve(rootDir, outDir, metaFilename)
           const hotReloadPath = resolve(
             dirname(fileURLToPath(import.meta.url)),
             `hot-reload-${config.header.name}.js`
@@ -141,14 +143,14 @@ export default function UserscriptPlugin(
               writeFileSync(hotReloadPath, hotReloadScript)
               writeFileSync(
                 proxyFilePath,
-                banner({
+                new Banner({
                   ...config.header,
                   require: [
                     ...config.header.require!,
                     'file://' + hotReloadPath,
                     'file://' + outPath
                   ]
-                })
+                }).generate()
               )
             }
 
@@ -165,8 +167,10 @@ export default function UserscriptPlugin(
                 : [...defineGrants(source), ...(config.header.grant ?? [])]
             )
 
+            const banner = new Banner(config.header).generate()
             writeFileSync(outPath, source)
-            writeFileSync(userFilePath, `${banner(config.header)}\n\n${source}`)
+            writeFileSync(userFilePath, `${banner}\n\n${source}`)
+            writeFileSync(metaFilePath, banner)
           } catch (err) {
             console.log(err)
           }

test/__snapshots__/banner.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`banner snapshot 1`] = `
+exports[`banner default snapshot 1`] = `
 "// ==UserScript==
 // @name        vitest
 // @version     1.0.0
@@ -52,3 +52,14 @@ exports[`banner snapshot 1`] = `
 // @run-at      document-start
 // ==/UserScript=="
 `;
+
+exports[`banner meta snapshot 1`] = `
+"// ==UserScript==
+// @name        vitest
+// @version     1.0.0
+// @match       https://example.com
+// @homepage    https://crashmax-dev.github.io/jsx/
+// @updateURL   https://crashmax-dev.github.io/jsx/vitest.meta.js
+// @downloadURL https://crashmax-dev.github.io/jsx/vitest.user.js
+// ==/UserScript=="
+`;

test/banner.test.ts

@@ -1,9 +1,9 @@
 import { expect, test } from 'vitest'
-import { banner } from '../src/banner.js'
+import { Banner } from '../src/banner.js'
 import { grants } from '../src/constants.js'
-import type { Grants, MetadataConfig } from '../src/types.js'
+import type { Grants, HeaderConfig } from '../src/types.js'
 
-const metadataConfig: MetadataConfig = {
+const defaultBanner: HeaderConfig = {
   name: 'vitest',
   version: '1.0.0',
   author: 'John Doe',
@@ -27,7 +27,19 @@ const metadataConfig: MetadataConfig = {
   'run-at': 'document-start'
 }
 
-test('banner snapshot', () => {
-  const defaultBanner = banner(metadataConfig)
-  expect(defaultBanner).toMatchSnapshot()
+test('banner default snapshot', () => {
+  const banner = new Banner(defaultBanner).generate()
+  expect(banner).toMatchSnapshot()
+})
+
+const metaBanner: HeaderConfig = {
+  name: 'vitest',
+  version: '1.0.0',
+  match: 'https://example.com',
+  homepage: 'https://crashmax-dev.github.io/jsx/'
+}
+
+test('banner meta snapshot', () => {
+  const banner = new Banner(metaBanner).generate()
+  expect(banner).toMatchSnapshot()
 })