flux-md 0.16.2 → 0.17.0

package/dist/element.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `<flux-markdown>` custom element — thin lifecycle glue over
+ * {@link mountFluxMarkdown}. It owns no diffing: connect mounts the DOM
+ * renderer into the element itself (LIGHT DOM, so the host app's markdown CSS
+ * reaches the content), disconnect tears the mount down. It never reimplements
+ * subscribe/patch.
+ *
+ * Two usage modes:
+ *   - **Caller-owned client** (`el.client = myClient`): the element subscribes
+ *     and mounts but NEVER destroys the client — the caller owns the
+ *     worker/stream lifecycle.
+ *   - **Self-owned client** (`markdown`/`src`/`textContent` attrs, or
+ *     `el.append()`): the element lazily creates an internal client from its
+ *     config attributes and destroys it on disconnect.
+ *
+ * Not auto-registered (SSR-unsafe): call {@link defineFluxMarkdown} from
+ * browser code.
+ */
+export declare function parseTriBool(value: string | null): boolean | undefined;
+export declare function defineFluxMarkdown(tag?: string): void;

package/dist/element.js

@@ -0,0 +1,287 @@
+import { FluxClient } from "./client.js";
+import { mountFluxMarkdown } from "./dom.js";
+function parseTriBool(value) {
+  if (value === null) return void 0;
+  if (value === "" || value === "true" || value === "1") return true;
+  if (value === "false" || value === "0") return false;
+  return void 0;
+}
+const CONFIG_ATTRS = [
+  "gfm-autolinks",
+  "gfm-alerts",
+  "gfm-footnotes",
+  "gfm-math",
+  "dir-auto",
+  "a11y",
+  "unsafe-html"
+];
+function defineFluxMarkdown(tag = "flux-markdown") {
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(tag)) return;
+  class FluxMarkdownElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["markdown", "src", "component-tags", ...CONFIG_ATTRS];
+    }
+    #client = null;
+    #ownsClient = false;
+    #components = void 0;
+    #sanitize = void 0;
+    #handle = null;
+    #connected = false;
+    // In-flight `src` fetch supersession. A self-owned client is REUSED across
+    // src changes (not torn down), so two concurrent #streamFromSrc runs would
+    // capture the same client and reset() even reuses the worker streamId — an
+    // identity guard alone can't separate them. Each run captures the current
+    // #srcSeq; a newer src (or teardown) bumps it and aborts the fetch, so a
+    // stale run bails before interleaving its chunks into the parser.
+    #srcSeq = 0;
+    #srcAbort = null;
+    // --- Accessor properties (objects/functions can't be attributes) ---------
+    get client() {
+      return this.#client;
+    }
+    set client(value) {
+      if (value === this.#client) return;
+      this.#teardownClient();
+      this.#client = value;
+      this.#ownsClient = false;
+      if (this.#connected) this.#remount();
+    }
+    get components() {
+      return this.#components;
+    }
+    set components(value) {
+      if (value === this.#components) return;
+      this.#components = value;
+      if (this.#connected) this.#remount();
+    }
+    get sanitize() {
+      return this.#sanitize;
+    }
+    set sanitize(value) {
+      if (value === this.#sanitize) return;
+      this.#sanitize = value;
+      if (this.#connected) this.#remount();
+    }
+    // --- Self-owned-client methods -------------------------------------------
+    append(chunk) {
+      this.#cancelSrcStream();
+      this.#ensureClient();
+      this.#client.append(chunk);
+    }
+    finalize() {
+      this.#cancelSrcStream();
+      this.#client?.finalize();
+    }
+    reset() {
+      this.#cancelSrcStream();
+      this.#client?.reset();
+    }
+    getClient() {
+      return this.#client;
+    }
+    // --- Lifecycle -----------------------------------------------------------
+    connectedCallback() {
+      if (this.#connected) return;
+      this.#connected = true;
+      this.#upgradeProperty("client");
+      this.#upgradeProperty("components");
+      this.#upgradeProperty("sanitize");
+      this.#mountIfReady();
+      if (!this.#client || this.#ownsClient) {
+        this.#resolveInitialContent();
+      }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (!this.#connected) return;
+      if (oldValue === newValue) return;
+      if (name === "markdown" || name === "src") {
+        if (!this.#client || this.#ownsClient) {
+          this.#resolveInitialContent();
+        }
+        return;
+      }
+      if (this.#client && !this.#ownsClient) {
+        console.warn(
+          "<flux-markdown>: config attributes are ignored while a caller-owned `client` is set (ParserConfig is immutable per stream)."
+        );
+        return;
+      }
+      if (this.#ownsClient) {
+        this.#teardownClient();
+        this.#mountIfReady();
+        this.#resolveInitialContent();
+      }
+    }
+    disconnectedCallback() {
+      this.#connected = false;
+      this.#cancelSrcStream();
+      this.#handle?.destroy();
+      this.#handle = null;
+      if (this.#ownsClient) {
+        this.#client?.destroy();
+        this.#client = null;
+        this.#ownsClient = false;
+      }
+    }
+    // --- Internals -----------------------------------------------------------
+    #upgradeProperty(prop) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
+    // Build a ParserConfig from the current config attributes. Read ONCE, at
+    // client creation — config is immutable per stream.
+    #readConfig() {
+      const cfg = {};
+      let any = false;
+      const set = (attr, key) => {
+        const v = parseTriBool(this.getAttribute(attr));
+        if (v !== void 0) {
+          cfg[key] = v;
+          any = true;
+        }
+      };
+      set("gfm-autolinks", "gfmAutolinks");
+      set("gfm-alerts", "gfmAlerts");
+      set("gfm-footnotes", "gfmFootnotes");
+      set("gfm-math", "gfmMath");
+      set("dir-auto", "dirAuto");
+      set("a11y", "a11y");
+      set("unsafe-html", "unsafeHtml");
+      const tags = this.getAttribute("component-tags");
+      if (tags !== null) {
+        const list = tags.split(/[\s,]+/).filter(Boolean);
+        if (list.length > 0) {
+          cfg.componentTags = list;
+          any = true;
+        }
+      }
+      return any ? cfg : void 0;
+    }
+    // Lazily create the internal client from config attributes (self-owned).
+    #ensureClient() {
+      if (this.#client) return;
+      this.#client = new FluxClient({ config: this.#readConfig() });
+      this.#ownsClient = true;
+      this.#mountIfReady();
+    }
+    // Mount once a client exists and we're connected. Idempotent.
+    #mountIfReady() {
+      if (!this.#connected || !this.#client || this.#handle) return;
+      this.#handle = mountFluxMarkdown(this.#client, this, {
+        components: this.#components,
+        sanitize: this.#sanitize
+      });
+    }
+    // Destroy the current mount and remount against the current client+options.
+    // Used when a property changes while connected.
+    #remount() {
+      this.#handle?.destroy();
+      this.#handle = null;
+      this.#mountIfReady();
+    }
+    // Tear down only the client side (mount stays / is handled by the caller).
+    // Destroys the client only if self-owned, then clears it and the mount so
+    // the next mount targets a fresh client.
+    #teardownClient() {
+      this.#cancelSrcStream();
+      this.#handle?.destroy();
+      this.#handle = null;
+      if (this.#ownsClient) this.#client?.destroy();
+      this.#client = null;
+      this.#ownsClient = false;
+    }
+    // Resolve the initial content of a self-owned stream from the attributes,
+    // in priority order: `src` (fetch+stream) > `markdown` (one-shot) >
+    // textContent (one-shot). A caller-owned client never reaches here.
+    #resolveInitialContent() {
+      this.#cancelSrcStream();
+      const src = this.getAttribute("src");
+      if (src) {
+        void this.#streamFromSrc(src);
+        return;
+      }
+      const markdown = this.getAttribute("markdown");
+      if (markdown !== null) {
+        this.#oneShot(markdown);
+        return;
+      }
+      const text = this.#captureSourceText();
+      if (text.trim().length > 0) this.#oneShot(text);
+    }
+    // Read the raw markdown the host put between the tags, ignoring the
+    // renderer's `.flux-md` root (and any other element children).
+    #captureSourceText() {
+      let text = "";
+      for (const node of Array.from(this.childNodes)) {
+        if (node.nodeType === 3) {
+          text += node.textContent ?? "";
+          node.parentNode?.removeChild(node);
+        }
+      }
+      return text;
+    }
+    // One-shot: reset the stream (in case content changed), feed it, finalize.
+    #oneShot(markdown) {
+      this.#ensureClient();
+      this.#client.reset();
+      this.#client.append(markdown);
+      this.#client.finalize();
+    }
+    // Abort any in-flight `src` fetch and invalidate its read loop, so it can
+    // no longer append into a client we're about to reuse, swap, or destroy.
+    #cancelSrcStream() {
+      this.#srcSeq++;
+      this.#srcAbort?.abort();
+      this.#srcAbort = null;
+    }
+    // Fetch a URL and stream its body. TextDecoder with {stream:true} carries a
+    // multibyte sequence that straddles a chunk boundary into the next decode.
+    async #streamFromSrc(src) {
+      this.#cancelSrcStream();
+      const token = this.#srcSeq;
+      const abort = new AbortController();
+      this.#srcAbort = abort;
+      this.#ensureClient();
+      this.#client.reset();
+      const owned = this.#client;
+      const current = () => this.#srcSeq === token && this.#client === owned;
+      try {
+        const res = await fetch(src, { signal: abort.signal });
+        if (!current()) return;
+        const body = res.body;
+        if (!body) {
+          const text = await res.text();
+          if (!current()) return;
+          owned.append(text);
+          owned.finalize();
+          return;
+        }
+        const reader = body.getReader();
+        const decoder = new TextDecoder();
+        for (; ; ) {
+          const { done, value } = await reader.read();
+          if (!current()) return;
+          if (done) break;
+          if (value) owned.append(decoder.decode(value, { stream: true }));
+        }
+        owned.append(decoder.decode());
+        owned.finalize();
+      } catch (err) {
+        if (abort.signal.aborted || !current()) return;
+        console.error(
+          "<flux-markdown>: failed to stream src",
+          err instanceof Error ? err.message : String(err)
+        );
+      }
+    }
+  }
+  customElements.define(tag, FluxMarkdownElement);
+}
+export {
+  defineFluxMarkdown,
+  parseTriBool
+};

package/dist/hi.d.ts

@@ -0,0 +1,12 @@
+/**
+ * In-house syntax highlighter. Native RegExp only — no Shiki, no Prism, no
+ * Highlight.js. Covers the languages an LLM typically emits:
+ * js/ts/tsx/jsx, rust, python, go, bash, json, html, css, sql. Unknown
+ * languages fall through to plain escaped text. ~6KB minified.
+ *
+ * Highlighting is per-block, runs once when the block closes. We never
+ * highlight an open (streaming) block, which avoids re-highlighting the same
+ * code on every chunk — the main perf win for streaming code.
+ */
+export declare function highlight(code: string, lang: string): string;
+export declare function supportedLangs(): string[];

package/{src/hi.ts → dist/hi.js}

@@ -1,55 +1,38 @@
-/**
- * In-house syntax highlighter. Native RegExp only — no Shiki, no Prism, no
- * Highlight.js. Covers the languages an LLM typically emits:
- * js/ts/tsx/jsx, rust, python, go, bash, json, html, css, sql. Unknown
- * languages fall through to plain escaped text. ~6KB minified.
- *
- * Highlighting is per-block, runs once when the block closes. We never
- * highlight an open (streaming) block, which avoids re-highlighting the same
- * code on every chunk — the main perf win for streaming code.
- */
-
 const KEYWORDS_JS = new Set(
   "async await break case catch class const continue debugger default delete do else export extends false finally for from function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while with yield".split(
-    " ",
-  ),
+    " "
+  )
 );
-const KEYWORDS_TS = new Set([
+const KEYWORDS_TS = /* @__PURE__ */ new Set([
   ...KEYWORDS_JS,
-  ...["any", "as", "boolean", "declare", "enum", "interface", "is", "keyof", "module", "namespace", "never", "number", "private", "protected", "public", "readonly", "string", "type", "unknown", "satisfies"],
+  ...["any", "as", "boolean", "declare", "enum", "interface", "is", "keyof", "module", "namespace", "never", "number", "private", "protected", "public", "readonly", "string", "type", "unknown", "satisfies"]
 ]);
 const KEYWORDS_RUST = new Set(
   "as async await break const continue crate dyn else enum extern false fn for if impl in let loop match mod move mut pub ref return Self self static struct super trait true type unsafe use where while".split(
-    " ",
-  ),
+    " "
+  )
 );
 const KEYWORDS_PY = new Set(
   "False None True and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield".split(
-    " ",
-  ),
+    " "
+  )
 );
 const KEYWORDS_GO = new Set(
   "break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var nil true false".split(
-    " ",
-  ),
+    " "
+  )
 );
 const KEYWORDS_BASH = new Set(
   "if then elif else fi case esac for select while until do done function in time coproc return break continue".split(
-    " ",
-  ),
+    " "
+  )
 );
 const KEYWORDS_SQL = new Set(
   "SELECT FROM WHERE JOIN LEFT RIGHT INNER OUTER ON GROUP BY ORDER HAVING LIMIT OFFSET INSERT INTO VALUES UPDATE SET DELETE CREATE TABLE DROP ALTER INDEX VIEW IF EXISTS NOT NULL DEFAULT PRIMARY KEY FOREIGN REFERENCES UNIQUE AS WITH UNION ALL DISTINCT IS BETWEEN LIKE IN AND OR".split(
-    " ",
-  ),
+    " "
+  )
 );
-
-// Each language is described by an ordered list of (token-class, regex) pairs.
-// The regex must be sticky (y flag) so it only matches at the current cursor.
-// First match wins.
-type Pat = [string, RegExp];
-
-const jsPats: Pat[] = [
+const jsPats = [
   ["com", /\/\/[^\n]*/y],
   ["com", /\/\*[\s\S]*?\*\//y],
   ["str", /"(?:\\.|[^"\\\n])*"/y],
@@ -59,10 +42,9 @@ const jsPats: Pat[] = [
   ["num", /\b(?:0x[\da-fA-F_]+|0b[01_]+|0o[0-7_]+|\d[\d_]*(?:\.\d[\d_]*)?(?:[eE][+-]?\d+)?)\b/y],
   ["ident", /[A-Za-z_$][\w$]*/y],
   ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const rustPats: Pat[] = [
+const rustPats = [
   ["com", /\/\/[^\n]*/y],
   ["com", /\/\*[\s\S]*?\*\//y],
   ["str", /b?"(?:\\.|[^"\\])*"/y],
@@ -73,10 +55,9 @@ const rustPats: Pat[] = [
   ["attr", /#!?\[[^\]]*\]/y],
   ["ident", /[A-Za-z_]\w*/y],
   ["pun", /[+\-*/=<>!&|^~?:;,.\[\](){}@]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const pyPats: Pat[] = [
+const pyPats = [
   ["com", /#[^\n]*/y],
   ["str", /[fFrRbB]{0,2}"""[\s\S]*?"""/y],
   ["str", /[fFrRbB]{0,2}'''[\s\S]*?'''/y],
@@ -86,10 +67,9 @@ const pyPats: Pat[] = [
   ["dec", /@[A-Za-z_]\w*(?:\.[A-Za-z_]\w*)*/y],
   ["ident", /[A-Za-z_]\w*/y],
   ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}@%]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const goPats: Pat[] = [
+const goPats = [
   ["com", /\/\/[^\n]*/y],
   ["com", /\/\*[\s\S]*?\*\//y],
   ["str", /"(?:\\.|[^"\\\n])*"/y],
@@ -98,10 +78,9 @@ const goPats: Pat[] = [
   ["num", /\b\d[\d_]*(?:\.\d[\d_]*)?\b/y],
   ["ident", /[A-Za-z_]\w*/y],
   ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const bashPats: Pat[] = [
+const bashPats = [
   ["com", /#[^\n]*/y],
   ["str", /"(?:\\.|[^"\\])*"/y],
   ["str", /'[^']*'/y],
@@ -109,18 +88,16 @@ const bashPats: Pat[] = [
   ["num", /\b\d+\b/y],
   ["ident", /[A-Za-z_][\w-]*/y],
   ["pun", /[|&;<>(){}[\]=]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const jsonPats: Pat[] = [
+const jsonPats = [
   ["str", /"(?:\\.|[^"\\\n])*"/y],
   ["num", /-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/y],
   ["kw", /\b(?:true|false|null)\b/y],
   ["pun", /[{}[\]:,]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const sqlPats: Pat[] = [
+const sqlPats = [
   ["com", /--[^\n]*/y],
   ["com", /\/\*[\s\S]*?\*\//y],
   ["str", /'(?:''|[^'])*'/y],
@@ -128,30 +105,27 @@ const sqlPats: Pat[] = [
   ["num", /\b\d+(?:\.\d+)?\b/y],
   ["ident", /[A-Za-z_][\w]*/y],
   ["pun", /[+\-*/=<>!,;.(){}]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const htmlPats: Pat[] = [
+const htmlPats = [
   ["com", /<!--[\s\S]*?-->/y],
   ["tag", /<\/?[A-Za-z][\w-]*/y],
   ["str", /"[^"]*"/y],
   ["str", /'[^']*'/y],
   ["attr", /[A-Za-z][\w-]*(?==)/y],
   ["pun", /[=/>]/y],
-  ["txt", /[^<>"'=]+/y],
+  ["txt", /[^<>"'=]+/y]
 ];
-
-const cssPats: Pat[] = [
+const cssPats = [
   ["com", /\/\*[\s\S]*?\*\//y],
   ["str", /"[^"]*"/y],
   ["str", /'[^']*'/y],
   ["num", /-?\d+(?:\.\d+)?(?:px|em|rem|%|vh|vw|s|ms|deg)?/y],
   ["sel", /[#.]?[A-Za-z][\w-]*/y],
   ["pun", /[:;,{}()]/y],
-  ["ws", /\s+/y],
+  ["ws", /\s+/y]
 ];
-
-const LANGS: Record<string, { pats: Pat[]; kw?: Set<string> }> = {
+const LANGS = {
   js: { pats: jsPats, kw: KEYWORDS_JS },
   javascript: { pats: jsPats, kw: KEYWORDS_JS },
   ts: { pats: jsPats, kw: KEYWORDS_TS },
@@ -170,10 +144,9 @@ const LANGS: Record<string, { pats: Pat[]; kw?: Set<string> }> = {
   sql: { pats: sqlPats, kw: KEYWORDS_SQL },
   html: { pats: htmlPats },
   xml: { pats: htmlPats },
-  css: { pats: cssPats },
+  css: { pats: cssPats }
 };
-
-function escapeHtml(s: string): string {
+function escapeHtml(s) {
   let out = "";
   for (let i = 0; i < s.length; i++) {
     const c = s[i];
@@ -185,19 +158,14 @@ function escapeHtml(s: string): string {
   }
   return out;
 }
-
-export function highlight(code: string, lang: string): string {
-  // Defense-in-depth: never tokenize a pathologically huge block on the main
-  // thread — fall back to plain escaped text.
-  if (code.length > 50_000) return escapeHtml(code);
+function highlight(code, lang) {
+  if (code.length > 5e4) return escapeHtml(code);
   const conf = LANGS[lang.toLowerCase()];
   if (!conf) return escapeHtml(code);
-
   let out = "";
   let pos = 0;
   const pats = conf.pats;
   const kw = conf.kw;
-  // Linear pass with sticky regex tracking lastIndex.
   while (pos < code.length) {
     let matched = false;
     for (let i = 0; i < pats.length; i++) {
@@ -216,7 +184,6 @@ export function highlight(code: string, lang: string): string {
         } else if (text.length > 1 && text[0] >= "A" && text[0] <= "Z") {
           finalCls = "ty";
         } else {
-          // Plain identifier — no span needed.
           out += escapeHtml(text);
           pos = after;
           matched = true;
@@ -233,15 +200,16 @@ export function highlight(code: string, lang: string): string {
       break;
     }
     if (!matched) {
-      // No pattern matched (shouldn't happen with a catch-all ws/other) — emit
-      // one char as plain text to make progress.
       out += escapeHtml(code[pos]);
       pos += 1;
     }
   }
   return out;
 }
-
-export function supportedLangs(): string[] {
+function supportedLangs() {
   return Object.keys(LANGS);
 }
+export {
+  highlight,
+  supportedLangs
+};

package/dist/html-to-react.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import type { Components } from "./types.js";
+type HNode = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "el";
+    tag: string;
+    attrs: Record<string, string | true>;
+    children: HNode[];
+};
+/** Decode the (small, known) set of entities the core emits, plus numeric refs. */
+export declare function decodeEntities(s: string): string;
+/**
+ * Parse an inline CSS string (`"text-align:left;color:red"`) into the object
+ * React's `style` prop requires, camelCasing property names. Custom properties
+ * (`--x`) keep their literal name.
+ */
+export declare function parseStyle(css: string): Record<string, string>;
+export declare function getParseCount(): number;
+export declare function resetParseCount(): void;
+export declare function parseTrustedHtml(html: string): HNode[];
+/**
+ * Convert a block's trusted HTML string into a React node tree, replacing any
+ * element whose tag name appears in `components`.
+ *
+ * With no `childMemoMap`, behavior is byte-identical to a single
+ * `parseTrustedHtml` + convert pass — the closed-block call site memoizes on
+ * `(html, components)`.
+ *
+ * Passing a `childMemoMap` opts into OPEN-block child reuse: the html is split
+ * into top-level node segments and each is keyed by its exact substring. On a
+ * hit the cached React node is reused (no re-parse, no re-serialize); only new /
+ * changed trailing segments are parsed. The caller owns the map's lifetime and
+ * must scope it per block.id and invalidate it when `components` changes (a hit
+ * carries the React node built under the previous components map). Segment keys
+ * carry their original document order via `keyOffset` so React keys stay stable.
+ */
+export declare function htmlToReact(html: string, components: Components, childMemoMap?: Map<string, ReactNode>): ReactNode;
+export {};