npm - @pyreon/head - Versions diffs - 0.1.0 - Mend

@pyreon/head 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/LICENSE +21 -0
package/README.md +64 -0
package/lib/analysis/index.js.html +5406 -0
package/lib/index.js +276 -0
package/lib/index.js.map +1 -0
package/lib/types/index.d.ts +250 -0
package/lib/types/index.d.ts.map +1 -0
package/lib/types/index2.d.ts +131 -0
package/lib/types/index2.d.ts.map +1 -0
package/package.json +64 -0
package/src/context.ts +108 -0
package/src/dom.ts +117 -0
package/src/index.ts +7 -0
package/src/provider.tsx +35 -0
package/src/ssr.ts +90 -0
package/src/tests/head.test.ts +890 -0
package/src/tests/setup.ts +3 -0
package/src/use-head.ts +104 -0

package/lib/types/index2.d.ts ADDED Viewed

@@ -0,0 +1,131 @@
+import * as _pyreon_core0 from "@pyreon/core";
+import { ComponentFn, Props, VNode, VNodeChild } from "@pyreon/core";
+//#region src/context.d.ts
+interface HeadTag {
+  /** HTML tag name */
+  tag: "title" | "meta" | "link" | "script" | "style" | "base" | "noscript";
+  /**
+   * Deduplication key. Tags with the same key replace each other;
+   * innermost component (last added) wins.
+   * Example: all components setting the page title use key "title".
+   */
+  key?: string;
+  /** HTML attributes for the tag */
+  props?: Record<string, string>;
+  /** Text content — for <title>, <script>, <style>, <noscript> */
+  children?: string;
+}
+interface UseHeadInput {
+  title?: string;
+  /**
+   * Title template — use `%s` as a placeholder for the page title.
+   * Applied to the resolved title after deduplication.
+   * @example useHead({ titleTemplate: "%s | My App" })
+   */
+  titleTemplate?: string | ((title: string) => string);
+  meta?: Record<string, string>[];
+  link?: Record<string, string>[];
+  script?: ({
+    src?: string;
+    children?: string;
+  } & Record<string, string | undefined>)[];
+  style?: ({
+    children: string;
+  } & Record<string, string | undefined>)[];
+  noscript?: {
+    children: string;
+  }[];
+  /** Convenience: emits a <script type="application/ld+json"> tag with JSON.stringify'd content */
+  jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+  base?: Record<string, string>;
+  /** Attributes to set on the <html> element (e.g. { lang: "en", dir: "ltr" }) */
+  htmlAttrs?: Record<string, string>;
+  /** Attributes to set on the <body> element (e.g. { class: "dark" }) */
+  bodyAttrs?: Record<string, string>;
+}
+interface HeadEntry {
+  tags: HeadTag[];
+  titleTemplate?: string | ((title: string) => string) | undefined;
+  htmlAttrs?: Record<string, string> | undefined;
+  bodyAttrs?: Record<string, string> | undefined;
+}
+interface HeadContextValue {
+  add(id: symbol, entry: HeadEntry): void;
+  remove(id: symbol): void;
+  /** Returns deduplicated tags — last-added entry wins per key */
+  resolve(): HeadTag[];
+  /** Returns the merged titleTemplate (last-added wins) */
+  resolveTitleTemplate(): (string | ((title: string) => string)) | undefined;
+  /** Returns merged htmlAttrs (later entries override earlier) */
+  resolveHtmlAttrs(): Record<string, string>;
+  /** Returns merged bodyAttrs (later entries override earlier) */
+  resolveBodyAttrs(): Record<string, string>;
+}
+declare function createHeadContext(): HeadContextValue;
+declare const HeadContext: _pyreon_core0.Context<HeadContextValue | null>;
+//#endregion
+//#region src/provider.d.ts
+interface HeadProviderProps extends Props {
+  context?: HeadContextValue | undefined;
+  children?: VNodeChild;
+}
+/**
+ * Provides a HeadContextValue to all descendant components.
+ * Wrap your app root with this to enable useHead() throughout the tree.
+ *
+ * If no `context` prop is passed, a new HeadContext is created automatically.
+ *
+ * @example
+ * // Auto-create context:
+ * <HeadProvider><App /></HeadProvider>
+ *
+ * // Explicit context (e.g. for SSR):
+ * const headCtx = createHeadContext()
+ * mount(h(HeadProvider, { context: headCtx }, h(App, null)), root)
+ */
+declare const HeadProvider: ComponentFn<HeadProviderProps>;
+//#endregion
+//#region src/ssr.d.ts
+/**
+ * Render a Pyreon app to an HTML fragment + a serialized <head> string.
+ *
+ * The returned `head` string can be injected directly into your HTML template:
+ *
+ * @example
+ * const { html, head } = await renderWithHead(h(App, null))
+ * const page = `<!DOCTYPE html>
+ * <html>
+ *   <head>
+ *     <meta charset="UTF-8" />
+ *     ${head}
+ *   </head>
+ *   <body><div id="app">${html}</div></body>
+ * </html>`
+ */
+interface RenderWithHeadResult {
+  html: string;
+  head: string;
+  /** Attributes to set on the <html> element */
+  htmlAttrs: Record<string, string>;
+  /** Attributes to set on the <body> element */
+  bodyAttrs: Record<string, string>;
+}
+declare function renderWithHead(app: VNode): Promise<RenderWithHeadResult>;
+//#endregion
+//#region src/use-head.d.ts
+/**
+ * Register head tags (title, meta, link, script, style, noscript, base, jsonLd)
+ * for the current component.
+ *
+ * Accepts a static object or a reactive getter:
+ *   useHead({ title: "My Page", meta: [{ name: "description", content: "..." }] })
+ *   useHead(() => ({ title: `${count()} items` }))  // updates when signal changes
+ *
+ * Tags are deduplicated by key — innermost component wins.
+ * Requires a <HeadProvider> (CSR) or renderWithHead() (SSR) ancestor.
+ */
+declare function useHead(input: UseHeadInput | (() => UseHeadInput)): void;
+//#endregion
+export { HeadContext, type HeadContextValue, type HeadEntry, HeadProvider, type HeadProviderProps, type HeadTag, type RenderWithHeadResult, type UseHeadInput, createHeadContext, renderWithHead, useHead };
+//# sourceMappingURL=index2.d.ts.map

package/lib/types/index2.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index2.d.ts","names":[],"sources":["../../src/context.ts","../../src/provider.tsx","../../src/ssr.ts","../../src/use-head.ts"],"mappings":";;;;UAIiB,OAAA;;EAEf,GAAA;;AAFF;;;;EAQE,GAAA;EAAA;EAEA,KAAA,GAAQ,MAAA;EAAA;EAER,QAAA;AAAA;AAAA,UAGe,YAAA;EACf,KAAA;EAD2B;;;;;EAO3B,aAAA,cAA2B,KAAA;EAC3B,IAAA,GAAO,MAAA;EACP,IAAA,GAAO,MAAA;EACP,MAAA;IAAY,GAAA;IAAc,QAAA;EAAA,IAAsB,MAAA;EAChD,KAAA;IAAW,QAAA;EAAA,IAAqB,MAAA;EAChC,QAAA;IAAa,QAAA;EAAA;EAHb;EAKA,MAAA,GAAS,MAAA,oBAA0B,MAAA;EACnC,IAAA,GAAO,MAAA;EALK;EAOZ,SAAA,GAAY,MAAA;EAPoC;EAShD,SAAA,GAAY,MAAA;AAAA;AAAA,UAKG,SAAA;EACf,IAAA,EAAM,OAAA;EACN,aAAA,cAA2B,KAAA;EAC3B,SAAA,GAAY,MAAA;EACZ,SAAA,GAAY,MAAA;AAAA;AAAA,UAGG,gBAAA;EACf,GAAA,CAAI,EAAA,UAAY,KAAA,EAAO,SAAA;EACvB,MAAA,CAAO,EAAA;EAhBK;EAkBZ,OAAA,IAAW,OAAA;EAhBC;EAkBZ,oBAAA,gBAAoC,KAAA;EAlBlB;EAoBlB,gBAAA,IAAoB,MAAA;EAfI;EAiBxB,gBAAA,IAAoB,MAAA;AAAA;AAAA,iBAGN,iBAAA,CAAA,GAAqB,gBAAA;AAAA,cA4CxB,WAAA,EAAW,aAAA,CAAA,OAAA,CAAA,gBAAA;;;UCtGP,iBAAA,SAA0B,KAAA;EACzC,OAAA,GAAU,gBAAA;EACV,QAAA,GAAW,UAAA;AAAA;;;;;;;;;;ADYb;;;;;cCKa,YAAA,EAAc,WAAA,CAAY,iBAAA;;;;;;ADpBvC;;;;;;;;;;;AAeA;;UEKiB,oBAAA;EACf,IAAA;EACA,IAAA;EFGgD;EEDhD,SAAA,EAAW,MAAA;EFKF;EEHT,SAAA,EAAW,MAAA;AAAA;AAAA,iBAGS,cAAA,CAAe,GAAA,EAAK,KAAA,GAAQ,OAAA,CAAQ,oBAAA;;;;;;AF7B1D;;;;;;;;iBGoEgB,OAAA,CAAQ,KAAA,EAAO,YAAA,UAAsB,YAAA"}

package/package.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "name": "@pyreon/head",
+  "version": "0.1.0",
+  "description": "Head tag management for Pyreon — works in SSR and CSR",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/pyreon.git",
+    "directory": "packages/head"
+  },
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/head#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    },
+    "./provider": {
+      "bun": "./src/provider.tsx",
+      "import": "./lib/provider.js",
+      "types": "./lib/types/provider.d.ts"
+    },
+    "./use-head": {
+      "bun": "./src/use-head.ts",
+      "import": "./lib/use-head.js",
+      "types": "./lib/types/use-head.d.ts"
+    },
+    "./ssr": {
+      "bun": "./src/ssr.ts",
+      "import": "./lib/ssr.js",
+      "types": "./lib/types/ssr.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@pyreon/core": "workspace:*",
+    "@pyreon/reactivity": "workspace:*",
+    "@pyreon/runtime-server": "workspace:*"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "*",
+    "@pyreon/runtime-dom": "workspace:*"
+  }
+}

package/src/context.ts ADDED Viewed

@@ -0,0 +1,108 @@
+import { createContext } from "@pyreon/core"
+// ─── Types ────────────────────────────────────────────────────────────────────
+export interface HeadTag {
+  /** HTML tag name */
+  tag: "title" | "meta" | "link" | "script" | "style" | "base" | "noscript"
+  /**
+   * Deduplication key. Tags with the same key replace each other;
+   * innermost component (last added) wins.
+   * Example: all components setting the page title use key "title".
+   */
+  key?: string
+  /** HTML attributes for the tag */
+  props?: Record<string, string>
+  /** Text content — for <title>, <script>, <style>, <noscript> */
+  children?: string
+}
+export interface UseHeadInput {
+  title?: string
+  /**
+   * Title template — use `%s` as a placeholder for the page title.
+   * Applied to the resolved title after deduplication.
+   * @example useHead({ titleTemplate: "%s | My App" })
+   */
+  titleTemplate?: string | ((title: string) => string)
+  meta?: Record<string, string>[]
+  link?: Record<string, string>[]
+  script?: ({ src?: string; children?: string } & Record<string, string | undefined>)[]
+  style?: ({ children: string } & Record<string, string | undefined>)[]
+  noscript?: { children: string }[]
+  /** Convenience: emits a <script type="application/ld+json"> tag with JSON.stringify'd content */
+  jsonLd?: Record<string, unknown> | Record<string, unknown>[]
+  base?: Record<string, string>
+  /** Attributes to set on the <html> element (e.g. { lang: "en", dir: "ltr" }) */
+  htmlAttrs?: Record<string, string>
+  /** Attributes to set on the <body> element (e.g. { class: "dark" }) */
+  bodyAttrs?: Record<string, string>
+}
+// ─── Context ──────────────────────────────────────────────────────────────────
+export interface HeadEntry {
+  tags: HeadTag[]
+  titleTemplate?: string | ((title: string) => string) | undefined
+  htmlAttrs?: Record<string, string> | undefined
+  bodyAttrs?: Record<string, string> | undefined
+}
+export interface HeadContextValue {
+  add(id: symbol, entry: HeadEntry): void
+  remove(id: symbol): void
+  /** Returns deduplicated tags — last-added entry wins per key */
+  resolve(): HeadTag[]
+  /** Returns the merged titleTemplate (last-added wins) */
+  resolveTitleTemplate(): (string | ((title: string) => string)) | undefined
+  /** Returns merged htmlAttrs (later entries override earlier) */
+  resolveHtmlAttrs(): Record<string, string>
+  /** Returns merged bodyAttrs (later entries override earlier) */
+  resolveBodyAttrs(): Record<string, string>
+}
+export function createHeadContext(): HeadContextValue {
+  const map = new Map<symbol, HeadEntry>()
+  return {
+    add(id, entry) {
+      map.set(id, entry)
+    },
+    remove(id) {
+      map.delete(id)
+    },
+    resolve() {
+      const keyed = new Map<string, HeadTag>()
+      const unkeyed: HeadTag[] = []
+      for (const entry of map.values()) {
+        for (const tag of entry.tags) {
+          if (tag.key) keyed.set(tag.key, tag)
+          else unkeyed.push(tag)
+        }
+      }
+      return [...keyed.values(), ...unkeyed]
+    },
+    resolveTitleTemplate() {
+      let template: (string | ((title: string) => string)) | undefined
+      for (const entry of map.values()) {
+        if (entry.titleTemplate !== undefined) template = entry.titleTemplate
+      }
+      return template
+    },
+    resolveHtmlAttrs() {
+      const attrs: Record<string, string> = {}
+      for (const entry of map.values()) {
+        if (entry.htmlAttrs) Object.assign(attrs, entry.htmlAttrs)
+      }
+      return attrs
+    },
+    resolveBodyAttrs() {
+      const attrs: Record<string, string> = {}
+      for (const entry of map.values()) {
+        if (entry.bodyAttrs) Object.assign(attrs, entry.bodyAttrs)
+      }
+      return attrs
+    },
+  }
+}
+export const HeadContext = createContext<HeadContextValue | null>(null)

package/src/dom.ts ADDED Viewed

@@ -0,0 +1,117 @@
+import type { HeadContextValue } from "./context"
+const ATTR = "data-pyreon-head"
+/**
+ * Sync the resolved head tags to the real DOM <head>.
+ * Uses incremental diffing: matches existing elements by key, patches attributes
+ * in-place, adds new elements, and removes stale ones.
+ * Also syncs htmlAttrs, bodyAttrs, and applies titleTemplate.
+ * No-op on the server (typeof document === "undefined").
+ */
+function patchExistingTag(
+  found: Element,
+  tag: { props: Record<string, unknown>; children: string },
+  kept: Set<Element>,
+): void {
+  kept.add(found)
+  patchAttrs(found, tag.props as Record<string, string>)
+  const content = String(tag.children)
+  if (found.textContent !== content) found.textContent = content
+}
+function createNewTag(tag: {
+  tag: string
+  props: Record<string, unknown>
+  children: string
+  key: unknown
+}): void {
+  const el = document.createElement(tag.tag)
+  el.setAttribute(ATTR, tag.key as string)
+  for (const [k, v] of Object.entries(tag.props as Record<string, string>)) {
+    el.setAttribute(k, v)
+  }
+  if (tag.children) el.textContent = tag.children
+  document.head.appendChild(el)
+}
+export function syncDom(ctx: HeadContextValue): void {
+  if (typeof document === "undefined") return
+  const tags = ctx.resolve()
+  const titleTemplate = ctx.resolveTitleTemplate()
+  const existing = document.head.querySelectorAll(`[${ATTR}]`)
+  const byKey = new Map<string, Element>()
+  for (const el of existing) {
+    byKey.set(el.getAttribute(ATTR) as string, el)
+  }
+  const kept = new Set<Element>()
+  for (const tag of tags) {
+    if (tag.tag === "title") {
+      document.title = applyTitleTemplate(String(tag.children), titleTemplate)
+      continue
+    }
+    const key = tag.key as string
+    const found = byKey.get(key)
+    if (found && found.tagName.toLowerCase() === tag.tag) {
+      patchExistingTag(found, tag as { props: Record<string, unknown>; children: string }, kept)
+    } else {
+      createNewTag(
+        tag as { tag: string; props: Record<string, unknown>; children: string; key: unknown },
+      )
+    }
+  }
+  for (const el of existing) {
+    if (!kept.has(el)) el.remove()
+  }
+  syncElementAttrs(document.documentElement, ctx.resolveHtmlAttrs())
+  syncElementAttrs(document.body, ctx.resolveBodyAttrs())
+}
+/** Patch an element's attributes to match the desired props. */
+function patchAttrs(el: Element, props: Record<string, string>): void {
+  for (let i = el.attributes.length - 1; i >= 0; i--) {
+    const attr = el.attributes[i]
+    if (!attr || attr.name === ATTR) continue
+    if (!(attr.name in props)) el.removeAttribute(attr.name)
+  }
+  for (const [k, v] of Object.entries(props)) {
+    if (el.getAttribute(k) !== v) el.setAttribute(k, v)
+  }
+}
+function applyTitleTemplate(
+  title: string,
+  template: string | ((t: string) => string) | undefined,
+): string {
+  if (!template) return title
+  if (typeof template === "function") return template(title)
+  return template.replace(/%s/g, title)
+}
+/** Sync pyreon-managed attributes on <html> or <body>. */
+function syncElementAttrs(el: Element, attrs: Record<string, string>): void {
+  // Remove previously managed attrs that are no longer present
+  const managed = el.getAttribute(`${ATTR}-attrs`)
+  if (managed) {
+    for (const name of managed.split(",")) {
+      if (name && !(name in attrs)) el.removeAttribute(name)
+    }
+  }
+  const keys: string[] = []
+  for (const [k, v] of Object.entries(attrs)) {
+    keys.push(k)
+    if (el.getAttribute(k) !== v) el.setAttribute(k, v)
+  }
+  if (keys.length > 0) {
+    el.setAttribute(`${ATTR}-attrs`, keys.join(","))
+  } else if (managed) {
+    el.removeAttribute(`${ATTR}-attrs`)
+  }
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export type { HeadContextValue, HeadEntry, HeadTag, UseHeadInput } from "./context"
+export { createHeadContext, HeadContext } from "./context"
+export type { HeadProviderProps } from "./provider"
+export { HeadProvider } from "./provider"
+export type { RenderWithHeadResult } from "./ssr"
+export { renderWithHead } from "./ssr"
+export { useHead } from "./use-head"

package/src/provider.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { ComponentFn, Props, VNodeChild } from "@pyreon/core"
+import { onUnmount, popContext, pushContext } from "@pyreon/core"
+import type { HeadContextValue } from "./context"
+import { createHeadContext, HeadContext } from "./context"
+export interface HeadProviderProps extends Props {
+  context?: HeadContextValue | undefined
+  children?: VNodeChild
+}
+/**
+ * Provides a HeadContextValue to all descendant components.
+ * Wrap your app root with this to enable useHead() throughout the tree.
+ *
+ * If no `context` prop is passed, a new HeadContext is created automatically.
+ *
+ * @example
+ * // Auto-create context:
+ * <HeadProvider><App /></HeadProvider>
+ *
+ * // Explicit context (e.g. for SSR):
+ * const headCtx = createHeadContext()
+ * mount(h(HeadProvider, { context: headCtx }, h(App, null)), root)
+ */
+export const HeadProvider: ComponentFn<HeadProviderProps> = (props) => {
+  const ctx = props.context ?? createHeadContext()
+  // Push context frame synchronously (before children mount) so all descendants
+  // can read HeadContext via useContext(). Pop on unmount for correct cleanup.
+  const frame = new Map([[HeadContext.id, ctx]])
+  pushContext(frame)
+  onUnmount(() => popContext())
+  const ch = props.children
+  return (typeof ch === "function" ? (ch as () => VNodeChild)() : ch) as ReturnType<ComponentFn>
+}

package/src/ssr.ts ADDED Viewed

@@ -0,0 +1,90 @@
+import type { ComponentFn, VNode } from "@pyreon/core"
+import { h, pushContext } from "@pyreon/core"
+import { renderToString } from "@pyreon/runtime-server"
+import type { HeadTag } from "./context"
+import { createHeadContext, HeadContext } from "./context"
+const VOID_TAGS = new Set(["meta", "link", "base"])
+/**
+ * Render a Pyreon app to an HTML fragment + a serialized <head> string.
+ *
+ * The returned `head` string can be injected directly into your HTML template:
+ *
+ * @example
+ * const { html, head } = await renderWithHead(h(App, null))
+ * const page = `<!DOCTYPE html>
+ * <html>
+ *   <head>
+ *     <meta charset="UTF-8" />
+ *     ${head}
+ *   </head>
+ *   <body><div id="app">${html}</div></body>
+ * </html>`
+ */
+export interface RenderWithHeadResult {
+  html: string
+  head: string
+  /** Attributes to set on the <html> element */
+  htmlAttrs: Record<string, string>
+  /** Attributes to set on the <body> element */
+  bodyAttrs: Record<string, string>
+}
+export async function renderWithHead(app: VNode): Promise<RenderWithHeadResult> {
+  const ctx = createHeadContext()
+  // HeadInjector runs inside renderToString's ALS scope, so pushContext reaches
+  // the per-request context stack rather than the module-level fallback stack.
+  function HeadInjector(): VNode {
+    pushContext(new Map([[HeadContext.id, ctx]]))
+    return app
+  }
+  const html = await renderToString(h(HeadInjector as ComponentFn, null))
+  const titleTemplate = ctx.resolveTitleTemplate()
+  const head = ctx
+    .resolve()
+    .map((tag) => serializeTag(tag, titleTemplate))
+    .join("\n  ")
+  return {
+    html,
+    head,
+    htmlAttrs: ctx.resolveHtmlAttrs(),
+    bodyAttrs: ctx.resolveBodyAttrs(),
+  }
+}
+function serializeTag(tag: HeadTag, titleTemplate?: string | ((title: string) => string)): string {
+  if (tag.tag === "title") {
+    const raw = tag.children || ""
+    const title = titleTemplate
+      ? typeof titleTemplate === "function"
+        ? titleTemplate(raw)
+        : titleTemplate.replace(/%s/g, raw)
+      : raw
+    return `<title>${esc(title)}</title>`
+  }
+  const props = tag.props as Record<string, string> | undefined
+  const attrs = props
+    ? Object.entries(props)
+        .map(([k, v]) => `${k}="${esc(v)}"`)
+        .join(" ")
+    : ""
+  const open = attrs ? `<${tag.tag} ${attrs}` : `<${tag.tag}`
+  if (VOID_TAGS.has(tag.tag)) return `${open} />`
+  const content = tag.children || ""
+  // Escape sequences that could break out of script/style/noscript blocks:
+  // 1. Closing tags like </script> — use Unicode escape in the slash
+  // 2. HTML comment openers <!-- that could confuse parsers
+  const body = content.replace(/<\/(script|style|noscript)/gi, "<\\/$1").replace(/<!--/g, "<\\!--")
+  return `${open}>${body}</${tag.tag}>`
+}
+function esc(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}