@pathmx/core 0.5.0

package/plugins/literate/index.ts

@@ -0,0 +1,742 @@
+import {
+  createBlock,
+  isExternalHref,
+  splitMarkdownBlocks,
+  type MarkdownCodeFence,
+  type Source,
+} from "../../source/index.ts"
+import type { View } from "../../view/model.ts"
+import { queryRecordValue } from "../../query/fields.ts"
+import { isIndexSource, publicPath } from "../../server/router.ts"
+import { queryDependency } from "../../query/kernel.ts"
+import type { SourceQueryRequest } from "../../query/model.ts"
+import { posixPath } from "../../path.ts"
+import {
+  defineViewComponent,
+  type AppContext,
+  type DependencyContext,
+  type Plugin,
+} from "../types.ts"
+import { actorProfileDependency } from "../actor-profile.ts"
+import { escapeHtml } from "../../util.ts"
+import type { HtmlStringRewrite } from "../../environment.ts"
+import { parseHtmlAttributes } from "../../html-attributes.ts"
+import {
+  authoredViewTag,
+  COMPONENT_ORIGIN_ATTR,
+  elementTagNames,
+  stampComponentOrigins,
+  stampComponentRoot,
+} from "../../view/syntax.ts"
+
+const clientEntry = new URL("./client.ts", import.meta.url)
+const NO_COMPONENT_TAGS = new Set<string>()
+const NO_COMPONENTS = new Map<string, ComponentTemplate>()
+const LITERATE_QUERY_COMPONENT = "literate-components:query"
+const LITERATE_QUERY_TAG = authoredViewTag(LITERATE_QUERY_COMPONENT)
+
+export type ComponentTemplate = {
+  html: string
+  css: string
+  js: string
+  origin: string
+  references?: string[]
+}
+
+class ComponentRegistry extends Map<string, ComponentTemplate> {
+  revision = 0
+
+  override set(tag: string, template: ComponentTemplate) {
+    this.revision++
+    return super.set(tag, template)
+  }
+
+  override delete(tag: string) {
+    const deleted = super.delete(tag)
+    if (deleted) this.revision++
+    return deleted
+  }
+
+  override clear() {
+    if (!this.size) return
+    super.clear()
+    this.revision++
+  }
+}
+
+function importedComponents(
+  source: Source,
+  app: AppContext,
+  registry: ComponentRegistry,
+) {
+  const components = new Map<string, ComponentTemplate>()
+  const visited = new Set<string>()
+  const pending = [source]
+  while (pending.length) {
+    const importer = pending.pop()!
+    for (const link of importer.links) {
+      if (link.kind !== "definition" || !link.directive) continue
+      const href = link.href.split(/[?#]/, 1)[0]
+      if (!href || href.startsWith("~/") || /^[a-z][a-z\d+.-]*:/i.test(href))
+        continue
+      const path = href.startsWith("/")
+        ? app.sources.path(href)
+        : new URL(href, `file://${importer.path}`).pathname
+      const imported = app.sources.get(path)
+      if (!imported || imported.type !== "components" || visited.has(path))
+        continue
+      visited.add(path)
+      pending.push(imported)
+      for (const [tag, component] of registry) {
+        if (component.origin === path) components.set(tag, component)
+      }
+    }
+  }
+  return components
+}
+
+type ComponentIndex = {
+  key: number | string
+  matcher?: RegExp
+  tags: Set<string>
+  patterns: Map<string, { selfClosing: RegExp; wrapped: RegExp }>
+}
+
+const componentIndexes = new WeakMap<
+  Map<string, ComponentTemplate>,
+  ComponentIndex
+>()
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
+function componentIndexKey(components: Map<string, ComponentTemplate>) {
+  return components instanceof ComponentRegistry
+    ? components.revision
+    : [...components.keys()].join("\0")
+}
+
+function componentIndex(components: Map<string, ComponentTemplate>) {
+  const key = componentIndexKey(components)
+  const cached = componentIndexes.get(components)
+  if (cached?.key === key) return cached
+
+  const tags = [...components.keys()]
+  const patterns = new Map<string, { selfClosing: RegExp; wrapped: RegExp }>()
+  for (const tag of tags) {
+    const escaped = escapeRegExp(tag)
+    patterns.set(tag, {
+      selfClosing: new RegExp(`<${escaped}(\\s[^>]*)?\\s*/>`, "gi"),
+      wrapped: new RegExp(
+        `<${escaped}(\\s[^>]*)?>([\\s\\S]*?)</${escaped}>`,
+        "gi",
+      ),
+    })
+  }
+
+  const index: ComponentIndex = {
+    key,
+    tags: new Set(tags),
+    matcher: tags.length
+      ? new RegExp(`<(?:${tags.map(escapeRegExp).join("|")})(?:\\s|>|/)`, "i")
+      : undefined,
+    patterns,
+  }
+  componentIndexes.set(components, index)
+  return index
+}
+
+function compileLiterateComponent(fences: MarkdownCodeFence[]) {
+  const html: string[] = []
+  const css: string[] = []
+  const js: string[] = []
+
+  for (const fence of fences) {
+    const lang = fence.lang.toLowerCase()
+    const body = fence.body.trim()
+    if (!lang || !body) continue
+    if (lang === "html" || lang === "htm") html.push(body)
+    else if (lang === "css") css.push(body)
+    else if (lang === "js" || lang === "javascript") js.push(body)
+  }
+
+  return {
+    html: html.join("\n"),
+    css: css.join("\n"),
+    js: js.join("\n"),
+  }
+}
+
+function canonicalTemplateUrl(value: string, origin: string, app: AppContext) {
+  const href = value.trim()
+  if (
+    !href ||
+    href.startsWith("/") ||
+    href.startsWith("#") ||
+    href.startsWith("?") ||
+    href.startsWith("~/") ||
+    href.includes("{{") ||
+    isExternalHref(href)
+  ) {
+    return value
+  }
+  const suffixAt = href.search(/[?#]/)
+  const pathname = suffixAt === -1 ? href : href.slice(0, suffixAt)
+  const suffix = suffixAt === -1 ? "" : href.slice(suffixAt)
+  const targetPath = posixPath.join(posixPath.dirname(origin), pathname)
+  const target = app.sources.get(targetPath)
+  return `${target && app.sources.isPage(target) ? publicPath(target) : targetPath}${suffix}`
+}
+
+function canonicalTemplateUrls(html: string, origin: string, app: AppContext) {
+  if (!html) return html
+  return app.html.rewrite(html, [
+    [
+      "[href], [src]",
+      {
+        element(element) {
+          for (const attribute of ["href", "src"] as const) {
+            const value = element.getAttribute(attribute)
+            if (value != null) {
+              element.setAttribute(
+                attribute,
+                canonicalTemplateUrl(value, origin, app),
+              )
+            }
+          }
+        },
+      },
+    ],
+  ])
+}
+
+function compileComponentTemplate(
+  fences: MarkdownCodeFence[],
+  origin: string,
+  app: AppContext,
+) {
+  const compiled = compileLiterateComponent(fences)
+  return {
+    ...compiled,
+    html: canonicalTemplateUrls(compiled.html, origin, app),
+  }
+}
+
+function normalizedTag(tag: string) {
+  return tag.trim().toLowerCase()
+}
+
+function blocksFor(source: Source, app: AppContext) {
+  if (source.blocks.length) return source.blocks
+  return splitMarkdownBlocks(source.body).map((content, ordinal) =>
+    createBlock(source, ordinal, content, {}, app.yaml),
+  )
+}
+
+function componentDefinitions(source: Source | undefined, app: AppContext) {
+  const definitions = new Map<
+    string,
+    ReturnType<typeof compileLiterateComponent>
+  >()
+  if (source?.type !== "components") return definitions
+
+  for (const block of blocksFor(source, app)) {
+    const tag =
+      typeof block.data.componentName === "string"
+        ? normalizedTag(block.data.componentName)
+        : ""
+    if (!tag) continue
+    const compiled = compileComponentTemplate(block.fences, source.path, app)
+    if (compiled.html || compiled.css || compiled.js) {
+      definitions.set(tag, compiled)
+    }
+  }
+  return definitions
+}
+
+function sameDefinition(
+  left: ReturnType<typeof compileLiterateComponent> | undefined,
+  right: ReturnType<typeof compileLiterateComponent> | undefined,
+) {
+  return (
+    left?.html === right?.html &&
+    left?.css === right?.css &&
+    left?.js === right?.js
+  )
+}
+
+function componentChanges(
+  before: Source | undefined,
+  after: Source | undefined,
+  app: AppContext,
+) {
+  const previous = componentDefinitions(before, app)
+  const current = componentDefinitions(after, app)
+  const tags = new Set([...previous.keys(), ...current.keys()])
+  const changed = [...tags].filter(
+    (tag) => !sameDefinition(previous.get(tag), current.get(tag)),
+  )
+  const introduced = [...current.keys()].filter((tag) => !previous.has(tag))
+  return { changed, introduced }
+}
+
+function componentDependency(tag: string) {
+  return {
+    type: "plugin" as const,
+    plugin: "literate-components",
+    key: normalizedTag(tag),
+  }
+}
+
+function componentTagPattern(tag: string) {
+  return new RegExp(`<${escapeRegExp(tag)}(?:\\s|>|/)`, "i")
+}
+
+function componentAttrs(attrs: Record<string, string>) {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(
+      ([key]) =>
+        key !== "from" &&
+        key !== "as" &&
+        key !== "id" &&
+        key !== COMPONENT_ORIGIN_ATTR,
+    ),
+  )
+}
+
+type ComponentExpansionOptions = {
+  rewriteHtml: HtmlStringRewrite
+  dependencies?: DependencyContext
+  used?: Set<string>
+  allows?: (tag: string, origin?: string) => boolean
+  stamp?: { tag: string; includeAttrs: boolean }
+  originTags?: ReadonlySet<string>
+}
+
+function applyComponent(
+  html: string,
+  attrs: Record<string, string>,
+  children = "",
+  options: ComponentExpansionOptions,
+) {
+  const { dependencies, rewriteHtml, used, stamp, originTags } = options
+  const origin = attrs[COMPONENT_ORIGIN_ATTR]
+  const authoredAttrs = { ...attrs }
+  delete authoredAttrs[COMPONENT_ORIGIN_ATTR]
+  if (attrs.as) used?.add(attrs.as)
+  const slot = attrs.from
+    ? `<${LITERATE_QUERY_TAG} from="${escapeHtml(attrs.from)}" as="${escapeHtml(attrs.as ?? "")}" />`
+    : children
+  const expanded = html
+    .replace(/<yield\s*\/?>/gi, slot)
+    .replace(/\{\{\s*([\w-]+)\s*\}\}/g, (_match, key: string) =>
+      escapeHtml(authoredAttrs[key] ?? ""),
+    )
+  const stamped = stamp
+    ? stampComponentRoot(
+        expanded,
+        stamp.tag,
+        rewriteHtml,
+        stamp.includeAttrs ? componentAttrs(authoredAttrs) : undefined,
+      )
+    : expanded
+  return origin
+    ? stampComponentOrigins(
+        stamped,
+        origin,
+        originTags ?? NO_COMPONENT_TAGS,
+        rewriteHtml,
+      )
+    : stamped
+}
+
+export function expandComponents(
+  content: string,
+  components: Map<string, ComponentTemplate>,
+  options: Pick<
+    ComponentExpansionOptions,
+    "allows" | "dependencies" | "rewriteHtml" | "used"
+  >,
+) {
+  const index = componentIndex(components)
+  if (!index.matcher?.test(content)) return content
+
+  let current = content
+  for (let pass = 0; pass < 8; pass++) {
+    const before = current
+    for (const [tag, config] of components) {
+      const template = config.html
+      if (!template) continue
+      const patterns = index.patterns.get(tag)
+      if (!patterns) continue
+      const render = (match: string, raw: string, children = "") => {
+        const attrs = parseHtmlAttributes(raw)
+        if (
+          options.allows &&
+          !options.allows(tag, attrs[COMPONENT_ORIGIN_ATTR])
+        ) {
+          return match
+        }
+        options.used?.add(tag)
+        return applyComponent(template, attrs, children, {
+          ...options,
+          stamp: { tag, includeAttrs: Boolean(config.js) },
+          originTags: index.tags,
+        })
+      }
+      current = current.replace(patterns.selfClosing, (match, raw) => {
+        return render(match, raw)
+      })
+      current = current.replace(patterns.wrapped, (match, raw, children) => {
+        return render(match, raw, children)
+      })
+    }
+    if (current === before) break
+  }
+  return current
+}
+
+function wrapComponentScript(tag: string, body: string) {
+  const script = componentScript(tag, body)
+  return [
+    `<script data-pmx-component="${escapeHtml(tag)}">`,
+    script,
+    "</script>",
+  ].join("\n")
+}
+
+function componentScript(tag: string, body: string) {
+  const safe = body.replace(/<\/script/gi, "<\\/script")
+  return `(window.pmxq=window.pmxq||[]).push([${JSON.stringify(tag)},function(el,{$,$$,on,attrs,update,cleanup}){\n${safe}\n}])`
+}
+
+function assetsFor(
+  used: Set<string>,
+  components: Map<string, ComponentTemplate>,
+) {
+  const css: string[] = []
+  const scripts: string[] = []
+  for (const tag of used) {
+    const config = components.get(tag)
+    if (!config) continue
+    if (config.css) css.push(config.css)
+    if (config.js) scripts.push(wrapComponentScript(tag, config.js))
+  }
+  return { css, scripts }
+}
+
+function attrsFromData(data: Record<string, unknown>) {
+  return Object.entries(data)
+    .filter(
+      ([, value]) =>
+        typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean",
+    )
+    .map(([key, value]) => `${key}="${escapeHtml(String(value))}"`)
+    .join(" ")
+}
+
+const PROJECTED_SOURCE_FIELDS = new Set([
+  "title",
+  "subtitle",
+  "author",
+  "published",
+  "isbn",
+  "name",
+  "message",
+  "note",
+  "created",
+  "heart_count",
+  "component",
+])
+
+function projectedSourceData(app: AppContext, source: Source) {
+  const data = Object.fromEntries(
+    Object.entries(source.data).filter(([field]) =>
+      PROJECTED_SOURCE_FIELDS.has(field),
+    ),
+  )
+  const actorId = typeof source.data.actor === "string" ? source.data.actor : ""
+  const profile = actorId ? app.actors.profile(actorId) : undefined
+  return {
+    ...data,
+    ...(actorId ? { actor: actorId } : {}),
+    ...(profile
+      ? {
+          actor_name: profile.name,
+          ...(profile.avatar ? { avatar: profile.avatar } : {}),
+        }
+      : {}),
+  }
+}
+
+function blockAttrs(data: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(data).filter(
+      ([key]) => key !== "component" && key !== "type" && key !== "id",
+    ),
+  )
+}
+
+function selfRenderTag(data: Record<string, unknown>) {
+  return typeof data.component === "string" ? data.component.trim() : ""
+}
+
+function interpolateStructuredData(template: string, data: unknown) {
+  return template.replace(
+    /\{\{\s*data\.([A-Za-z_][\w-]*(?:\.[A-Za-z_][\w-]*)*)\s*\}\}/g,
+    (_match, path: string) => {
+      const value = queryRecordValue(data, path)
+      return value == null
+        ? ""
+        : escapeHtml(
+            typeof value === "object" ? JSON.stringify(value) : String(value),
+          )
+    },
+  )
+}
+
+async function renderFrom(
+  app: AppContext,
+  view: View,
+  request: SourceQueryRequest,
+  components: Map<string, ComponentTemplate>,
+  as?: string,
+) {
+  const tags = (await view.query.sources(request))
+    .filter((summary) => {
+      const source = app.sources.get(summary.id)
+      return source ? !isIndexSource(source) : true
+    })
+    .map((summary) => {
+      const source = app.sources.get(summary.id)
+      const attrs = attrsFromData({
+        ...(source ? projectedSourceData(app, source) : summary.data),
+        href: summary.href,
+        from: request.from ?? "/",
+      })
+      return `<${as || summary.type} ${attrs} />`
+    })
+    .join("")
+  return expandComponents(tags, components, { rewriteHtml: app.html.rewrite })
+}
+
+export function ComponentTemplatePlugin(): Plugin {
+  const components = new ComponentRegistry()
+  const QueryResults = defineViewComponent({
+    tag: LITERATE_QUERY_COMPONENT,
+    async compile(use, ctx, app) {
+      const spec = use.props.from ?? "/"
+      const from =
+        spec.startsWith("~/") || spec.startsWith("/")
+          ? spec
+          : posixPath.resolve(posixPath.dirname(use.origin.path), spec)
+      const request: SourceQueryRequest = {
+        from,
+        ...(use.props.as ? { type: use.props.as } : {}),
+        sort: [{ by: "meta.title" }],
+      }
+      const plan = await app.query.prepare("sources", request)
+      ctx.depend(queryDependency(plan))
+      return Object.freeze(request)
+    },
+    render(use, request, { view }, app) {
+      return renderFrom(
+        app,
+        view,
+        request,
+        importedComponents(use.origin, app, components),
+        use.props.as || undefined,
+      )
+    },
+  })
+
+  return {
+    id: "literate-components",
+    schema: {
+      sources: {
+        components: {
+          label: "Components",
+          description: "Authored Literate Component definitions.",
+          icon: "boxes",
+          color: "amber",
+        },
+      },
+    },
+    components: [QueryResults],
+    index(source, app) {
+      if (source.type !== "components") return
+
+      const definitions: {
+        tag: string
+        compiled: ReturnType<typeof compileLiterateComponent>
+      }[] = []
+      const collect = (tag: string, fences: MarkdownCodeFence[]) => {
+        tag = normalizedTag(tag)
+        const compiled = compileComponentTemplate(fences, source.path, app)
+        if (compiled.html || compiled.css || compiled.js) {
+          definitions.push({ tag, compiled })
+        }
+      }
+
+      for (const block of source.blocks) {
+        const tag =
+          typeof block.data.componentName === "string"
+            ? block.data.componentName.trim()
+            : ""
+        if (tag) collect(tag, block.fences)
+      }
+      app.components.claim(
+        source.path,
+        definitions.map(({ tag }) => tag),
+      )
+      for (const { tag, compiled } of definitions) {
+        components.set(tag, {
+          ...compiled,
+          origin: source.path,
+          references: [...elementTagNames(compiled.html)],
+        })
+      }
+      app.components.replaceData(
+        source.path,
+        definitions.map(({ tag }) => ({
+          tag,
+          available(origin: Source) {
+            return importedComponents(origin, app, components).has(tag)
+          },
+          async compile(origin, ctx) {
+            const imported = importedComponents(origin, app, components)
+            const template = imported.get(tag)
+            if (!template) {
+              throw new Error(
+                `Literate Component <${tag}> is not imported by ${origin.path}.`,
+              )
+            }
+            ctx.depend(componentDependency(tag))
+            for (const reference of template.references ?? []) {
+              if (!app.components.has(reference)) {
+                ctx.depend(componentDependency(reference))
+              }
+            }
+            if (template.css) {
+              ctx.addAsset({ type: "style", text: template.css })
+            }
+            if (template.js) {
+              ctx.addAsset({
+                type: "script",
+                text: componentScript(tag, template.js),
+              })
+              await ctx.addBrowserBundle(clientEntry, "components")
+            }
+            return { template, imported }
+          },
+          render(use, prepared, _ctx, runtimeApp) {
+            const { template, imported } = prepared as {
+              template: ComponentTemplate
+              imported: Map<string, ComponentTemplate>
+            }
+            const expanded = applyComponent(
+              interpolateStructuredData(template.html, use.data),
+              { ...use.props },
+              "",
+              {
+                rewriteHtml: runtimeApp.html.rewrite,
+                stamp: { tag, includeAttrs: Boolean(template.js) },
+                originTags: componentIndex(imported).tags,
+              },
+            )
+            return expandComponents(expanded, imported, {
+              rewriteHtml: runtimeApp.html.rewrite,
+            })
+          },
+        })),
+      )
+    },
+
+    unindex(sourcePath, app) {
+      app.components.release(sourcePath)
+      for (const [tag, config] of components) {
+        if (config.origin === sourcePath) components.delete(tag)
+      }
+    },
+
+    invalidate({ before, after }, app) {
+      const { changed, introduced } = componentChanges(before, after, app)
+      if (!changed.length) return
+      const patterns = introduced.map(componentTagPattern)
+      return {
+        dependencies: changed.map(componentDependency),
+        sourceIds: patterns.length
+          ? app.sources
+              .builtPages()
+              .filter((page) =>
+                patterns.some((pattern) => pattern.test(page.html)),
+              )
+              .map((page) => page.sourceId)
+          : [],
+      }
+    },
+
+    precompile(content, ctx, app) {
+      const { block } = ctx
+      const actorId =
+        typeof block?.data.actor === "string" ? block.data.actor : ""
+      if (actorId) ctx.depend(actorProfileDependency(actorId))
+      const tag = block ? selfRenderTag(block.data) : ""
+      if (tag) ctx.depend(componentDependency(tag))
+      if (
+        !block ||
+        content.trim() ||
+        !tag ||
+        !importedComponents(ctx.source, app, components).has(tag)
+      )
+        return content
+      const attrs = attrsFromData(blockAttrs(block.data))
+      const origin = `${COMPONENT_ORIGIN_ATTR}="${escapeHtml(ctx.source.path)}"`
+      return attrs ? `<${tag} ${origin} ${attrs} />` : `<${tag} ${origin} />`
+    },
+
+    page(html, ctx, app) {
+      const before = html
+      const used = new Set<string>()
+      const scopes = new Map<string, Map<string, ComponentTemplate>>()
+      const scope = (origin = ctx.source.path) => {
+        const cached = scopes.get(origin)
+        if (cached) return cached
+        const source = app.sources.get(origin)
+        const imported = source
+          ? importedComponents(source, app, components)
+          : NO_COMPONENTS
+        scopes.set(origin, imported)
+        return imported
+      }
+      html = expandComponents(html, components, {
+        allows: (tag, origin) => scope(origin).has(tag),
+        dependencies: ctx,
+        rewriteHtml: app.html.rewrite,
+        used,
+      })
+
+      for (const tag of used) {
+        ctx.depend(componentDependency(tag))
+        for (const reference of components.get(tag)?.references ?? []) {
+          if (app.components.has(reference)) continue
+          ctx.depend(componentDependency(reference))
+        }
+      }
+
+      if (html === before) return html
+      const { css, scripts } = assetsFor(used, components)
+      if (css.length) html += `\n<style>${css.join("\n")}</style>`
+      if (scripts.length) html += `\n${scripts.join("\n")}`
+      return html
+    },
+
+    async documentAssets(ctx) {
+      if (!ctx.page?.html.includes("<script data-pmx-component=")) return
+      await ctx.addBrowserBundle(clientEntry, "components")
+    },
+  }
+}