@pathmx/core 0.5.0

package/plugins/literate/client.ts

@@ -0,0 +1,208 @@
+type Cleanup = () => void
+
+type Api = {
+  $: (selector: string) => Element | null
+  $$: (selector: string) => Element[]
+  on: (
+    target: EventTarget | string,
+    type: string,
+    handler: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ) => void
+  attrs: Record<string, string>
+  update: (fn: Cleanup) => void
+  cleanup: (fn: Cleanup) => void
+}
+
+type Setup = (el: Element, api: Api) => void | Cleanup
+type Entry = [string, Setup]
+
+type Instance = {
+  tag: string
+  attrs: Record<string, string>
+  cleanups: Cleanup[]
+  updates: Cleanup[]
+}
+
+declare global {
+  interface Window {
+    pmxq?: Entry[] | { push(entry: Entry): void }
+    __pmxCanonicalView?: HTMLElement
+  }
+}
+
+const registry = new Map<string, { setup: Setup; source: string }>()
+const instances = new Map<Element, Instance>()
+const executed = new WeakMap<HTMLScriptElement, string>()
+
+function attrsOf(el: Element) {
+  const encoded = el.getAttribute("data-pmx-attrs")
+  if (!encoded) return {}
+  try {
+    const attrs = JSON.parse(encoded)
+    return attrs && typeof attrs === "object"
+      ? (attrs as Record<string, string>)
+      : {}
+  } catch {
+    return {}
+  }
+}
+
+function refreshAttrs(target: Record<string, string>, el: Element) {
+  for (const key of Object.keys(target)) delete target[key]
+  Object.assign(target, attrsOf(el))
+}
+
+function dispose(el: Element) {
+  const instance = instances.get(el)
+  if (!instance) return
+  instances.delete(el)
+  for (let i = instance.cleanups.length - 1; i >= 0; i--) {
+    try {
+      instance.cleanups[i]!()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+function accept([tag, setup]: Entry) {
+  if (typeof tag !== "string" || typeof setup !== "function") return
+  const source = setup.toString()
+  if (registry.get(tag)?.source === source) return
+  for (const [el, instance] of [...instances]) {
+    if (instance.tag === tag) dispose(el)
+  }
+  registry.set(tag, { setup, source })
+}
+
+function mount(el: Element, tag: string) {
+  if (instances.has(el)) return
+  const entry = registry.get(tag)
+  if (!entry) return
+
+  const abort = new AbortController()
+  const instance: Instance = {
+    tag,
+    attrs: attrsOf(el),
+    cleanups: [() => abort.abort()],
+    updates: [],
+  }
+  instances.set(el, instance)
+
+  const $ = (selector: string) => el.querySelector(selector)
+  const $$ = (selector: string) => [...el.querySelectorAll(selector)]
+  const cleanup = (fn: Cleanup) => {
+    instance.cleanups.push(fn)
+  }
+  const update = (fn: Cleanup) => {
+    instance.updates.push(fn)
+    fn()
+  }
+  const on: Api["on"] = (target, type, handler, options) => {
+    const node = typeof target === "string" ? $(target) : target
+    if (!node) {
+      throw new Error(
+        typeof target === "string"
+          ? `on: no match for ${target}`
+          : `on: missing target for ${type}`,
+      )
+    }
+    const opts =
+      typeof options === "boolean" ? { capture: options } : { ...options }
+    node.addEventListener(type, handler, {
+      ...opts,
+      signal: opts.signal
+        ? AbortSignal.any([opts.signal, abort.signal])
+        : abort.signal,
+    })
+  }
+
+  try {
+    const result = entry.setup(el, {
+      $,
+      $$,
+      on,
+      attrs: instance.attrs,
+      update,
+      cleanup,
+    })
+    if (typeof result === "function") cleanup(result)
+  } catch (error) {
+    console.error(`[pmx ${tag}]`, error)
+    dispose(el)
+  }
+}
+
+function reexecuteChangedScripts() {
+  for (const script of [
+    ...document.querySelectorAll("script[data-pmx-component]"),
+  ]) {
+    if (!(script instanceof HTMLScriptElement)) continue
+    const text = script.textContent ?? ""
+    if (executed.get(script) === text) continue
+    const clone = document.createElement("script")
+    for (const attr of script.attributes) {
+      clone.setAttribute(attr.name, attr.value)
+    }
+    clone.textContent = text
+    script.replaceWith(clone)
+    executed.set(clone, text)
+  }
+}
+
+function sweep() {
+  for (const el of [...instances.keys()]) {
+    const instance = instances.get(el)!
+    if (!el.isConnected || el.getAttribute("data-component") !== instance.tag) {
+      dispose(el)
+    }
+  }
+  reexecuteChangedScripts()
+  const active = new Set(
+    [...document.querySelectorAll("script[data-pmx-component]")]
+      .map((script) => script.getAttribute("data-pmx-component"))
+      .filter((tag): tag is string => !!tag),
+  )
+  for (const tag of registry.keys()) {
+    if (active.has(tag)) continue
+    registry.delete(tag)
+    for (const [el, instance] of [...instances]) {
+      if (instance.tag === tag) dispose(el)
+    }
+  }
+  const surviving = new Set(instances.keys())
+  for (const tag of registry.keys()) {
+    for (const el of document.querySelectorAll(
+      `[data-component="${CSS.escape(tag)}"]`,
+    )) {
+      mount(el, tag)
+    }
+  }
+  for (const [el, instance] of instances) {
+    if (!surviving.has(el)) continue
+    refreshAttrs(instance.attrs, el)
+    for (const fn of instance.updates) {
+      try {
+        fn()
+      } catch (error) {
+        console.error(`[pmx ${instance.tag}]`, error)
+      }
+    }
+  }
+}
+
+const queued = window.pmxq
+window.pmxq = { push: accept }
+if (Array.isArray(queued)) for (const entry of queued) accept(entry)
+
+const canonicalView = document.querySelector("[data-pmx-view]")
+if (
+  canonicalView instanceof HTMLElement &&
+  !(window.__pmxCanonicalView instanceof HTMLElement)
+) {
+  window.__pmxCanonicalView = canonicalView.cloneNode(true) as HTMLElement
+}
+
+sweep()
+document.addEventListener("pmx:render", sweep)