@pathmx/core 0.5.0

package/view/syntax.ts

@@ -0,0 +1,372 @@
+import type { HtmlStringRewrite } from "../environment.ts"
+import { parseHtmlAttributes } from "../html-attributes.ts"
+import type { CompileContext } from "../plugins/types.ts"
+import {
+  transformMarkdownProse,
+  transformOutsideHtmlComments,
+} from "../source/markdown/prose.ts"
+
+const NAME = "[a-z][a-z0-9]*(?:-[a-z0-9]+)*"
+const VIEW_ELEMENT = new RegExp("^" + NAME + ":" + NAME + "$")
+const AUTHORED_VIEW_ELEMENT = new RegExp("^x-" + NAME + "$")
+const LITERATE_ELEMENT = /^[a-z][\w.-]*$/
+export const VIEW_USE_TAG = "pmx-view"
+export const VIEW_NAME_ATTR = "data-pmx-view"
+export const VIEW_SLOT_ATTR = "data-pmx-view-slot"
+const ATTRS = "((?:\\s+(?:[^<>\\\"']|\\\"[^\\\"]*\\\"|'[^']*')*)?)"
+const AUTHORED_VIEW_USE = new RegExp(
+  "<(x-" + NAME + ")" + ATTRS + "\\s*(?:/\\s*>|>\\s*</\\1\\s*>)",
+  "gi",
+)
+const REMAINING_AUTHORED_VIEW_USE = new RegExp(
+  "<(x-" + NAME + ")(?:\\s|/?>)",
+  "i",
+)
+const VIEW_SYNTAX_CANDIDATE = /<x-[a-z]/i
+const COMPONENT_SYNTAX_SLOT = /<!--pmx-component-syntax:(\d+)-->/g
+const VIEW_VARIABLE_USE =
+  /\{\{\s*([A-Za-z_][\w-]*)\.([A-Za-z_][\w-]*(?:\.[A-Za-z_][\w-]*)*)\s*\}\}/g
+export const COMPONENT_ORIGIN_ATTR = "data-pmx-component-origin"
+
+function escapeRegExp(value: string) {
+  return value.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
+}
+
+export function isViewComponentTag(tag: string) {
+  return VIEW_ELEMENT.test(tag)
+}
+
+export function isAuthoredViewTag(tag: string) {
+  return AUTHORED_VIEW_ELEMENT.test(tag)
+}
+
+export function isLiterateComponentTag(tag: string) {
+  return LITERATE_ELEMENT.test(tag)
+}
+
+/** Map a plugin-owned identity to its standards-compatible authored tag. */
+export function authoredViewTag(tag: string) {
+  if (!isViewComponentTag(tag)) {
+    throw new Error("Invalid View Component tag: " + tag)
+  }
+  return "x-" + tag.replace(":", "-")
+}
+
+export function viewUsePattern() {
+  const escaped = escapeRegExp(VIEW_USE_TAG)
+  const attrs = "((?:\\s+(?:[^<>\\\"']|\\\"[^\\\"]*\\\"|'[^']*')*)?)"
+  return new RegExp(
+    "<" + escaped + attrs + "\\s*(?:/\\s*>|>\\s*</" + escaped + "\\s*>)",
+    "gi",
+  )
+}
+
+export function hasRemainingViewUse(html: string) {
+  return new RegExp("<" + VIEW_USE_TAG + "(?:\\s|/?>)", "i").test(html)
+}
+
+function compileVisibleViewUses(markup: string, sourcePath: string) {
+  const compiled = markup.replace(
+    AUTHORED_VIEW_USE,
+    (_match, tag: string, attrs: string) =>
+      "<" +
+      VIEW_USE_TAG +
+      " " +
+      VIEW_NAME_ATTR +
+      '="' +
+      tag +
+      '"' +
+      attrs +
+      " />",
+  )
+  const remaining = compiled.match(REMAINING_AUTHORED_VIEW_USE)
+  if (remaining) {
+    throw new Error(
+      "<" +
+        remaining[1] +
+        "> must be empty or self-closing in " +
+        sourcePath +
+        ".",
+    )
+  }
+  return compiled
+}
+
+export function compileViewUses(markup: string, sourcePath: string) {
+  return transformOutsideHtmlComments(markup, (visible) =>
+    compileVisibleViewUses(visible, sourcePath),
+  )
+}
+
+function stashLiterateUses(
+  markup: string,
+  tags: readonly string[],
+  slots: string[],
+) {
+  if (!tags.length) return markup
+  const names = tags.map(escapeRegExp).join("|")
+  const uses = new RegExp("<\\/?(?:" + names + ")" + ATTRS + "\\s*\\/?>", "gi")
+  return markup.replace(uses, (use) => {
+    const slot = slots.push(use) - 1
+    return "<!--pmx-component-syntax:" + slot + "-->"
+  })
+}
+
+/** Compile authored syntax without touching comments, fences, or inline code. */
+function compileComponentSyntax(
+  markdown: string,
+  sourcePath: string,
+  literateTags: readonly string[] = [],
+  slots: string[] = [],
+) {
+  return transformMarkdownProse(markdown, (markup) =>
+    stashLiterateUses(compileViewUses(markup, sourcePath), literateTags, slots),
+  )
+}
+
+export type AuthoredViewComponentUse = Readonly<{
+  tag: string
+  props: Readonly<Record<string, string>>
+}>
+
+/** Read empty authored View Component uses without touching code examples. */
+export function authoredViewComponentUses(markdown: string) {
+  const uses: AuthoredViewComponentUse[] = []
+  transformMarkdownProse(markdown, (markup) => {
+    for (const match of markup.matchAll(
+      new RegExp(AUTHORED_VIEW_USE.source, "gi"),
+    )) {
+      uses.push(
+        Object.freeze({
+          tag: match[1]!.toLowerCase(),
+          props: Object.freeze(parseHtmlAttributes(match[2])),
+        }),
+      )
+    }
+    return markup
+  })
+  return Object.freeze(uses)
+}
+
+export function elementTagNames(markup: string) {
+  const tags = new Set<string>()
+  for (const match of markup.matchAll(/<([a-z][\w:.-]*)\b/gi)) {
+    if (match[1]) tags.add(match[1].toLowerCase())
+  }
+  return tags
+}
+
+/** Attach trusted origin metadata before authored components are expanded. */
+export function stampComponentOrigins(
+  html: string,
+  originPath: string,
+  authoredTags: Pick<ReadonlySet<string>, "has">,
+  rewriteHtml: HtmlStringRewrite,
+) {
+  return rewriteHtml(html, [
+    [
+      "*",
+      {
+        element(element) {
+          if (element.tagName === "pmx-content") return
+          if (
+            element.tagName === VIEW_USE_TAG ||
+            element.tagName.includes(":") ||
+            element.tagName.includes("-") ||
+            authoredTags.has(element.tagName)
+          ) {
+            element.setAttribute(COMPONENT_ORIGIN_ATTR, originPath)
+          }
+        },
+      },
+    ],
+  ])
+}
+
+/** Attach attributes to the first root in trusted rendered HTML. */
+export function stampHtmlRoot(
+  html: string,
+  attrs: Readonly<Record<string, string>>,
+  rewriteHtml: HtmlStringRewrite,
+) {
+  let stamped = false
+  return rewriteHtml(html, [
+    [
+      "*",
+      {
+        element(element) {
+          if (stamped) return
+          stamped = true
+          for (const [name, value] of Object.entries(attrs)) {
+            element.setAttribute(name, value)
+          }
+        },
+      },
+    ],
+  ])
+}
+
+/** Mark the first rendered root as the semantic boundary of a component. */
+export function stampComponentRoot(
+  html: string,
+  tag: string,
+  rewriteHtml: HtmlStringRewrite,
+  attrs?: Record<string, string>,
+) {
+  return stampHtmlRoot(
+    html,
+    {
+      "data-component": tag,
+      ...(attrs ? { "data-pmx-attrs": JSON.stringify(attrs) } : {}),
+    },
+    rewriteHtml,
+  )
+}
+
+export function stripComponentOrigins(html: string) {
+  if (!html.includes(COMPONENT_ORIGIN_ATTR)) return html
+  return html.replace(
+    new RegExp("\\s" + COMPONENT_ORIGIN_ATTR + '="[^"]*"', "g"),
+    "",
+  )
+}
+
+/** Stateful authored syntax indexes kept separate from component execution. */
+export class ViewComponentSyntax {
+  private variables = new Map<string, string>()
+  private variableMatcher?: RegExp
+  private authoredTags = new Map<string, string>()
+  private authoredMatcher?: RegExp
+  private slots = new WeakMap<CompileContext, string[]>()
+
+  registerVariables(variables: Iterable<readonly [string, string]>) {
+    let changed = false
+    for (const [namespace, tag] of variables) {
+      this.variables.set(namespace, tag)
+      changed = true
+    }
+    if (!changed) return
+    this.variableMatcher = new RegExp(
+      "\\{\\{\\s*(?:" +
+        [...this.variables.keys()].map(escapeRegExp).join("|") +
+        ")\\.",
+    )
+  }
+
+  compileVariables(markdown: string) {
+    if (!this.variableMatcher?.test(markdown)) return markdown
+    return transformMarkdownProse(markdown, (prose) =>
+      prose.replace(
+        VIEW_VARIABLE_USE,
+        (token, namespace: string, path: string) => {
+          const tag = this.variables.get(namespace)
+          return tag
+            ? "<" +
+                VIEW_USE_TAG +
+                " " +
+                VIEW_NAME_ATTR +
+                '="' +
+                tag +
+                '" data-pmx-variable="' +
+                path +
+                '" />'
+            : token
+        },
+      ),
+    )
+  }
+
+  compile(markdown: string, ctx: CompileContext) {
+    if (!markdown.includes("<")) return markdown
+    const hasViewSyntax = VIEW_SYNTAX_CANDIDATE.test(markdown)
+    const hasLiterateSyntax = this.authoredMatcher?.test(markdown) ?? false
+    if (!hasViewSyntax && !hasLiterateSyntax) return markdown
+    const slots: string[] = []
+    const compiled = compileComponentSyntax(
+      markdown,
+      ctx.source.path,
+      hasLiterateSyntax ? [...this.authoredTags.keys()] : [],
+      slots,
+    )
+    if (slots.length) this.slots.set(ctx, slots)
+    return compiled
+  }
+
+  restore(html: string, ctx: CompileContext) {
+    const slots = this.slots.get(ctx)
+    if (!slots) return html
+    this.slots.delete(ctx)
+    return html.replace(
+      COMPONENT_SYNTAX_SLOT,
+      (marker, index: string) => slots[Number(index)] ?? marker,
+    )
+  }
+
+  replaceAuthored(sourcePath: string, tags: Iterable<string>) {
+    const pending = new Set(tags)
+    for (const tag of pending) {
+      if (!isLiterateComponentTag(tag)) {
+        throw new Error("Invalid Literate Component tag: " + tag)
+      }
+      if (tag.startsWith("x-")) {
+        throw new Error(
+          "Literate Component tag <" + tag + "> uses the reserved x- prefix.",
+        )
+      }
+      const authoredBy = this.authoredTags.get(tag)
+      if (authoredBy && authoredBy !== sourcePath) {
+        throw new Error(
+          "Duplicate Literate Component <" +
+            tag +
+            "> in " +
+            sourcePath +
+            " and " +
+            authoredBy +
+            ".",
+        )
+      }
+    }
+    for (const [tag, owner] of this.authoredTags) {
+      if (owner === sourcePath) this.authoredTags.delete(tag)
+    }
+    for (const tag of pending) this.authoredTags.set(tag, sourcePath)
+    this.rebuildMatcher()
+  }
+
+  deleteAuthored(sourcePath: string) {
+    let deleted = false
+    for (const [tag, owner] of this.authoredTags) {
+      if (owner !== sourcePath) continue
+      this.authoredTags.delete(tag)
+      deleted = true
+    }
+    if (deleted) this.rebuildMatcher()
+  }
+
+  has(tag: string) {
+    return this.authoredTags.has(tag)
+  }
+
+  stampOrigins(
+    html: string,
+    originPath: string,
+    rewriteHtml: HtmlStringRewrite,
+  ) {
+    return stampComponentOrigins(
+      html,
+      originPath,
+      this.authoredTags,
+      rewriteHtml,
+    )
+  }
+
+  private rebuildMatcher() {
+    const tags = [...this.authoredTags.keys()]
+    this.authoredMatcher = tags.length
+      ? new RegExp(
+          "<(?:" + tags.map(escapeRegExp).join("|") + ")(?:\\s|/?>)",
+          "i",
+        )
+      : undefined
+  }
+}