@wippy-fe/vite-plugin 0.0.27

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@wippy-fe/vite-plugin",
+  "type": "module",
+  "version": "0.0.27",
+  "description": "Vite plugins for Wippy apps and web components — package metadata injection, future build-time helpers.",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "peerDependencies": {
+    "vite": "^5 || ^6 || ^7"
+  },
+  "dependencies": {
+    "@wippy-fe/shared": "0.0.27"
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,84 @@
+/**
+ * @vitest-environment node
+ *
+ * Vite plugin runs at build time and reads the file system — node env,
+ * not jsdom. We mock `node:fs.readFileSync` so the test doesn't touch
+ * the actual repo's package.json.
+ */
+import type { IndexHtmlTransformContext } from 'vite'
+import { describe, expect, it, vi } from 'vitest'
+import { wippyPackagePlugin } from './index'
+
+vi.mock('node:fs', () => ({
+  readFileSync: vi.fn(),
+}))
+
+const { readFileSync } = await import('node:fs')
+
+interface InvokablePlugin {
+  configResolved?: (config: unknown) => void
+  transformIndexHtml: {
+    handler: (html: string, ctx?: IndexHtmlTransformContext) => string
+  }
+}
+
+function invokePlugin(html: string, packageJson: string | Error): string {
+  if (packageJson instanceof Error) {
+    vi.mocked(readFileSync).mockImplementationOnce(() => {
+      throw packageJson
+    })
+  }
+  else {
+    vi.mocked(readFileSync).mockReturnValueOnce(packageJson)
+  }
+
+  const plugin = wippyPackagePlugin() as unknown as InvokablePlugin
+  plugin.configResolved?.({ root: '/fake' })
+  return plugin.transformIndexHtml.handler(html)
+}
+
+describe('wippyPackagePlugin', () => {
+  it('injects the package JSON as a data-role script at the top of <head>', () => {
+    const out = invokePlugin('<html><head><meta charset="utf-8"></head></html>', '{"name":"demo"}')
+    expect(out).toContain('<script type="application/json" data-role="@wippy/package">{"name":"demo"}</script>')
+    expect(out.indexOf('data-role="@wippy/package"')).toBeLessThan(out.indexOf('charset'))
+  })
+
+  it('defangs `</script>` sequences inside the JSON so the tag cannot be terminated early', () => {
+    const malicious = '{"trick": "</script><img src=x onerror=alert(1)>"}'
+    const out = invokePlugin('<html><head></head></html>', malicious)
+    // The literal `</script` must not survive intact between the script
+    // tag we opened and the matching close — otherwise the browser
+    // would parse the rest of the JSON as HTML.
+    const inside = out.split('data-role="@wippy/package">')[1].split('</script>')[0]
+    expect(inside).not.toContain('</script')
+    expect(inside).toContain('<\\/script')
+  })
+
+  it('defangs case-insensitively (`</SCRIPT`, `</Script`)', () => {
+    const out = invokePlugin('<html><head></head></html>', '{"a":"</SCRIPT</Script"}')
+    const inside = out.split('data-role="@wippy/package">')[1].split('</script>')[0]
+    expect(inside).not.toMatch(/<\/script/i)
+  })
+
+  it('silently no-ops when package.json is missing and required is false (default)', () => {
+    const html = '<html><head></head></html>'
+    const out = invokePlugin(html, new Error('ENOENT'))
+    expect(out).toBe(html)
+    expect(out).not.toContain('@wippy/package')
+  })
+
+  it('throws when package.json is missing and required: true', () => {
+    vi.mocked(readFileSync).mockImplementationOnce(() => {
+      throw new Error('ENOENT: missing')
+    })
+    const plugin = wippyPackagePlugin({ required: true }) as unknown as InvokablePlugin
+    plugin.configResolved?.({ root: '/fake' })
+    expect(() => plugin.transformIndexHtml.handler('<html><head></head></html>')).toThrow(/ENOENT/)
+  })
+
+  it('best-effort prepends the script tag when <head> is missing', () => {
+    const out = invokePlugin('<html><body>no head</body></html>', '{"name":"x"}')
+    expect(out.startsWith('<script type="application/json" data-role="@wippy/package">')).toBe(true)
+  })
+})

package/src/index.ts

@@ -0,0 +1,90 @@
+/**
+ * Vite plugins shared across Wippy apps and web components.
+ *
+ * **Status: Draft 1 (preview).** API may change between minor releases.
+ */
+
+import type { Plugin, ResolvedConfig } from 'vite'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { WIPPY_PACKAGE_DATA_ROLE } from '@wippy-fe/shared'
+
+export { WIPPY_PACKAGE_DATA_ROLE }
+
+export interface WippyPackagePluginOptions {
+  /**
+   * Path to the project's `package.json`. Defaults to `package.json`
+   * relative to Vite's resolved root (which is the directory containing
+   * `vite.config.ts` for typical app layouts).
+   */
+  packageJsonPath?: string
+  /**
+   * If `true`, fail the build when `package.json` cannot be read. If
+   * `false` (default), the plugin silently no-ops — useful for shared
+   * configs where some target apps don't need the injection.
+   */
+  required?: boolean
+}
+
+/**
+ * Injects the consuming app's `package.json` content into `app.html` as
+ * `<script type="application/json" data-role="@wippy/package">`. The
+ * script is placed at the top of `<head>` so it lands in the DOM before
+ * `dev-proxy.js` runs in host-less mode.
+ *
+ * dev-proxy reads the JSON synchronously at boot to seed proxy injection
+ * defaults from `wippy.proxy.injections` and per-page theme defaults
+ * from `wippy.configOverrides.customization`. Under a real Wippy host
+ * the script tag is harmless metadata — the host reads `package.json`
+ * from the registry server-side and ignores the inline copy.
+ *
+ * Usage:
+ *
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from 'vite'
+ * import vue from '@vitejs/plugin-vue'
+ * import { wippyPackagePlugin } from '@wippy-fe/vite-plugin'
+ *
+ * export default defineConfig({
+ *   plugins: [vue(), wippyPackagePlugin()],
+ *   // …
+ * })
+ * ```
+ */
+export function wippyPackagePlugin(options: WippyPackagePluginOptions = {}): Plugin {
+  let root: string
+
+  return {
+    name: '@wippy-fe/vite-plugin:wippy-package',
+    enforce: 'pre',
+    configResolved(config: ResolvedConfig) {
+      root = config.root
+    },
+    transformIndexHtml: {
+      order: 'pre',
+      handler(html) {
+        const pkgPath = options.packageJsonPath ?? resolve(root, 'package.json')
+        let raw: string
+        try {
+          raw = readFileSync(pkgPath, 'utf-8')
+        }
+        catch (err) {
+          if (options.required)
+            throw new Error(`[@wippy-fe/vite-plugin] failed to read ${pkgPath}: ${(err as Error).message}`)
+          return html
+        }
+        // Defang `</script>` sequences inside the JSON so the script tag
+        // can't be terminated early. JSON.stringify(JSON.parse(raw))
+        // would also collapse whitespace; we keep formatting for
+        // readability and just escape the close tag.
+        const safeJson = raw.replace(/<\/script/gi, '<\\/script')
+        const tag = `<script type="application/json" data-role="${WIPPY_PACKAGE_DATA_ROLE}">${safeJson}</script>`
+        if (html.includes('<head>'))
+          return html.replace('<head>', `<head>\n    ${tag}`)
+        // No <head> tag — best effort prepend.
+        return tag + html
+      },
+    },
+  }
+}