flux-md 0.16.2 → 0.17.0

package/dist/html-to-react.js

@@ -0,0 +1,344 @@
+import { createElement } from "react";
+const VOID = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+const ATTR_MAP = Object.assign(/* @__PURE__ */ Object.create(null), {
+  class: "className",
+  for: "htmlFor",
+  colspan: "colSpan",
+  rowspan: "rowSpan",
+  tabindex: "tabIndex",
+  maxlength: "maxLength",
+  minlength: "minLength",
+  readonly: "readOnly",
+  autocomplete: "autoComplete",
+  autofocus: "autoFocus",
+  spellcheck: "spellCheck",
+  contenteditable: "contentEditable",
+  crossorigin: "crossOrigin",
+  enterkeyhint: "enterKeyHint",
+  inputmode: "inputMode"
+});
+const URL_ATTRS = /* @__PURE__ */ new Set(["href", "src", "xlink:href", "formaction", "action", "poster", "data"]);
+const PROP_DENY = /* @__PURE__ */ new Set([
+  "dangerouslysetinnerhtml",
+  "ref",
+  "key",
+  "defaultvalue",
+  "defaultchecked",
+  "suppresshydrationwarning",
+  "suppresscontenteditablewarning"
+]);
+const SAFE_ATTR_NAME = /^[a-z][a-z0-9-]*$/i;
+function safeUrl(value) {
+  let decoded = value;
+  for (let i = 0, prev = ""; i < 8 && decoded !== prev; i++) {
+    prev = decoded;
+    decoded = decodeEntities(decoded);
+  }
+  const probe = decoded.replace(/[\u0000-\u001f\u007f-\u009f]/g, "").replace(/^\s+/, "").toLowerCase();
+  if (probe.startsWith("javascript:") || probe.startsWith("vbscript:") || probe.startsWith("data:text/html") || probe.startsWith("data:text/javascript")) {
+    return "#";
+  }
+  return value;
+}
+const NAMED_ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: "\xA0",
+  copy: "\xA9",
+  reg: "\xAE",
+  hellip: "\u2026",
+  mdash: "\u2014",
+  ndash: "\u2013"
+};
+function decodeEntities(s) {
+  if (s.indexOf("&") === -1) return s;
+  return s.replace(/&(#x[0-9a-fA-F]+|#\d+|[a-zA-Z][a-zA-Z0-9]*);/g, (m, body) => {
+    if (body[0] === "#") {
+      const code = body[1] === "x" || body[1] === "X" ? parseInt(body.slice(2), 16) : parseInt(body.slice(1), 10);
+      if (Number.isNaN(code) || code < 0 || code > 1114111) return m;
+      try {
+        return String.fromCodePoint(code);
+      } catch {
+        return m;
+      }
+    }
+    const named = NAMED_ENTITIES[body];
+    return named === void 0 ? m : named;
+  });
+}
+function parseStyle(css) {
+  const out = {};
+  for (const decl of css.split(";")) {
+    const c = decl.indexOf(":");
+    if (c === -1) continue;
+    const rawName = decl.slice(0, c).trim();
+    const value = decl.slice(c + 1).trim();
+    if (!rawName || !value) continue;
+    const name = rawName.startsWith("--") ? rawName : rawName.toLowerCase().replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+    out[name] = value;
+  }
+  return out;
+}
+const DANGEROUS_CSS_VALUE = /url\(|expression\(|image-set\(|-moz-binding|@import|behavior\s*:/i;
+function safeStyle(style) {
+  const out = {};
+  for (const k in style) {
+    const v = style[k];
+    if (DANGEROUS_CSS_VALUE.test(v)) continue;
+    if (k.toLowerCase() === "position" && /\b(?:fixed|sticky)\b/i.test(v)) continue;
+    out[k] = v;
+  }
+  return out;
+}
+const TAG_CHAR = /[a-zA-Z0-9-]/;
+const WS_CHAR = /\s/;
+const ATTR_NAME_END = /[\s=>/]/;
+const UNQUOTED_VALUE_END = /[\s>]/;
+function parseOpenTag(html, start) {
+  let i = start + 1;
+  let j = i;
+  while (j < html.length && TAG_CHAR.test(html[j])) j++;
+  const tag = html.slice(i, j);
+  i = j;
+  const attrs = {};
+  while (i < html.length) {
+    const loopStart = i;
+    while (i < html.length && WS_CHAR.test(html[i])) i++;
+    if (html[i] === ">") return { tag, attrs, selfClose: false, next: i + 1 };
+    if (html[i] === "/" && html[i + 1] === ">") return { tag, attrs, selfClose: true, next: i + 2 };
+    if (i >= html.length) break;
+    let k = i;
+    while (k < html.length && !ATTR_NAME_END.test(html[k])) k++;
+    const name = html.slice(i, k);
+    i = k;
+    while (i < html.length && WS_CHAR.test(html[i])) i++;
+    if (html[i] === "=") {
+      i++;
+      while (i < html.length && WS_CHAR.test(html[i])) i++;
+      let value = "";
+      const q = html[i];
+      if (q === '"' || q === "'") {
+        i++;
+        const e = html.indexOf(q, i);
+        value = html.slice(i, e === -1 ? html.length : e);
+        i = e === -1 ? html.length : e + 1;
+      } else {
+        let v = i;
+        while (v < html.length && !UNQUOTED_VALUE_END.test(html[v])) v++;
+        value = html.slice(i, v);
+        i = v;
+      }
+      if (name) attrs[name] = decodeEntities(value);
+    } else if (name) {
+      attrs[name] = true;
+    }
+    if (i <= loopStart) i = loopStart + 1;
+  }
+  return { tag, attrs, selfClose: false, next: i };
+}
+let parseCount = 0;
+function getParseCount() {
+  return parseCount;
+}
+function resetParseCount() {
+  parseCount = 0;
+}
+function parseTrustedHtml(html) {
+  parseCount++;
+  const root = [];
+  const stack = [];
+  let i = 0;
+  const push = (n) => {
+    if (stack.length) stack[stack.length - 1].children.push(n);
+    else root.push(n);
+  };
+  while (i < html.length) {
+    const lt = html.indexOf("<", i);
+    if (lt === -1) {
+      const t = html.slice(i);
+      if (t) push({ kind: "text", text: decodeEntities(t) });
+      break;
+    }
+    if (lt > i) push({ kind: "text", text: decodeEntities(html.slice(i, lt)) });
+    if (html.startsWith("<!--", lt)) {
+      const end = html.indexOf("-->", lt + 4);
+      i = end === -1 ? html.length : end + 3;
+      continue;
+    }
+    if (html[lt + 1] === "!") {
+      const end = html.indexOf(">", lt);
+      i = end === -1 ? html.length : end + 1;
+      continue;
+    }
+    if (html[lt + 1] === "/") {
+      const end = html.indexOf(">", lt);
+      const closeLower = html.slice(lt + 2, end === -1 ? html.length : end).trim().toLowerCase();
+      for (let s = stack.length - 1; s >= 0; s--) {
+        if (stack[s].tag.toLowerCase() === closeLower) {
+          stack.length = s;
+          break;
+        }
+      }
+      i = end === -1 ? html.length : end + 1;
+      continue;
+    }
+    const c1 = html[lt + 1];
+    const isName = c1 >= "a" && c1 <= "z" || c1 >= "A" && c1 <= "Z";
+    if (!isName) {
+      push({ kind: "text", text: "<" });
+      i = lt + 1;
+      continue;
+    }
+    const { tag, attrs, selfClose, next } = parseOpenTag(html, lt);
+    const el = { kind: "el", tag, attrs, children: [] };
+    push(el);
+    if (!selfClose && !VOID.has(tag.toLowerCase())) stack.push(el);
+    i = next;
+  }
+  return root;
+}
+function attrsToProps(tag, attrs, key) {
+  const props = { key };
+  for (const name in attrs) {
+    const value = attrs[name];
+    const lower = name.toLowerCase();
+    if (lower.startsWith("on")) continue;
+    if (PROP_DENY.has(lower)) continue;
+    if (lower === "style" && typeof value === "string") {
+      props.style = safeStyle(parseStyle(value));
+      continue;
+    }
+    if (URL_ATTRS.has(lower) && typeof value === "string") {
+      props[ATTR_MAP[lower] ?? name] = safeUrl(value);
+      continue;
+    }
+    if (tag.toLowerCase() === "input" && lower === "checked") {
+      props.defaultChecked = value === true ? true : value;
+      continue;
+    }
+    if (!(lower in ATTR_MAP) && !SAFE_ATTR_NAME.test(name)) continue;
+    props[ATTR_MAP[lower] ?? name] = value;
+  }
+  return props;
+}
+function nodesToReact(nodes, components, keyPrefix) {
+  const out = [];
+  for (let idx = 0; idx < nodes.length; idx++) {
+    const n = nodes[idx];
+    if (n.kind === "text") {
+      out.push(n.text);
+      continue;
+    }
+    const key = keyPrefix + idx;
+    const type = components[n.tag] ?? n.tag;
+    const props = attrsToProps(n.tag, n.attrs, key);
+    if (VOID.has(n.tag.toLowerCase())) {
+      out.push(createElement(type, props));
+    } else {
+      out.push(createElement(type, props, nodesToReact(n.children, components, key + ".")));
+    }
+  }
+  return out.length === 0 ? null : out.length === 1 ? out[0] : out;
+}
+function topLevelSegments(html) {
+  const segs = [];
+  let depth = 0;
+  let segStart = 0;
+  let i = 0;
+  while (i < html.length) {
+    const lt = html.indexOf("<", i);
+    if (lt === -1) break;
+    if (html.startsWith("<!--", lt)) {
+      const end = html.indexOf("-->", lt + 4);
+      i = end === -1 ? html.length : end + 3;
+      continue;
+    }
+    if (html[lt + 1] === "!") {
+      const end = html.indexOf(">", lt);
+      i = end === -1 ? html.length : end + 1;
+      continue;
+    }
+    if (html[lt + 1] === "/") {
+      const end = html.indexOf(">", lt);
+      if (depth > 0) {
+        depth--;
+        if (depth === 0) {
+          const stop = end === -1 ? html.length : end + 1;
+          segs.push(html.slice(segStart, stop));
+          segStart = stop;
+        }
+      }
+      i = end === -1 ? html.length : end + 1;
+      continue;
+    }
+    const c1 = html[lt + 1];
+    const isName = c1 >= "a" && c1 <= "z" || c1 >= "A" && c1 <= "Z";
+    if (!isName) {
+      i = lt + 1;
+      continue;
+    }
+    const { tag, selfClose, next } = parseOpenTag(html, lt);
+    if (depth === 0) {
+      if (lt > segStart) {
+        segs.push(html.slice(segStart, lt));
+        segStart = lt;
+      }
+    }
+    const isVoid = selfClose || VOID.has(tag.toLowerCase());
+    if (isVoid) {
+      if (depth === 0) {
+        segs.push(html.slice(segStart, next));
+        segStart = next;
+      }
+    } else {
+      depth++;
+    }
+    i = next;
+  }
+  if (segStart < html.length) segs.push(html.slice(segStart));
+  return segs;
+}
+function htmlToReact(html, components, childMemoMap) {
+  if (!childMemoMap) return nodesToReact(parseTrustedHtml(html), components, "");
+  const segs = topLevelSegments(html);
+  const out = [];
+  for (let idx = 0; idx < segs.length; idx++) {
+    const seg = segs[idx];
+    const cacheKey = idx + "\0" + seg;
+    const hit = childMemoMap.get(cacheKey);
+    if (hit !== void 0) {
+      out.push(hit);
+      continue;
+    }
+    const node = nodesToReact(parseTrustedHtml(seg), components, idx + ".");
+    childMemoMap.set(cacheKey, node);
+    out.push(node);
+  }
+  return out.length === 0 ? null : out.length === 1 ? out[0] : out;
+}
+export {
+  decodeEntities,
+  getParseCount,
+  htmlToReact,
+  parseStyle,
+  parseTrustedHtml,
+  resetParseCount
+};

package/{src/index.ts → dist/index.d.ts}

@@ -15,28 +15,8 @@
  *     // ... wherever your tokens land: client.append(deltaText);
  *     client.finalize();
  */
-export { FluxClient, FluxPool, getDefaultPool } from "./client";
-export { FluxMarkdown, useFluxStream, useFluxMarkdownString } from "./react";
-export { highlight, supportedLangs } from "./hi";
-export { htmlToReact, parseTrustedHtml } from "./html-to-react";
-export type {
-  Block,
-  BlockKind,
-  BlockKindTag,
-  BlockComponentProps,
-  Components,
-  Patch,
-  FromWorker,
-  ToWorker,
-  WorkerLike,
-  ParserConfig,
-  Align,
-  TableCell,
-  TableData,
-  HeadingData,
-  CodeBlockData,
-  MathBlockData,
-  ListData,
-  NestedBlock,
-  ContainerData,
-} from "./types";
+export { FluxClient, FluxPool, getDefaultPool } from "./client.js";
+export { FluxMarkdown, useFluxStream, useFluxMarkdownString } from "./react.js";
+export { highlight, supportedLangs } from "./hi.js";
+export { htmlToReact, parseTrustedHtml } from "./html-to-react.js";
+export type { Block, BlockKind, BlockKindTag, BlockComponentProps, Components, Patch, FromWorker, ToWorker, WorkerLike, ParserConfig, Align, TableCell, TableData, HeadingData, CodeBlockData, MathBlockData, ListData, NestedBlock, ContainerData, } from "./types.js";

package/dist/index.js

@@ -0,0 +1,16 @@
+import { FluxClient, FluxPool, getDefaultPool } from "./client.js";
+import { FluxMarkdown, useFluxStream, useFluxMarkdownString } from "./react.js";
+import { highlight, supportedLangs } from "./hi.js";
+import { htmlToReact, parseTrustedHtml } from "./html-to-react.js";
+export {
+  FluxClient,
+  FluxMarkdown,
+  FluxPool,
+  getDefaultPool,
+  highlight,
+  htmlToReact,
+  parseTrustedHtml,
+  supportedLangs,
+  useFluxMarkdownString,
+  useFluxStream
+};

package/dist/morph.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Tiny, self-contained idiomorph-style DOM morph (zero npm dependency, to keep
+ * the security/supply-chain posture). It mutates a live element's children to
+ * match a desired tree **in place** instead of replacing them wholesale, so the
+ * browser only repaints/relayouts the parts that actually changed and focus +
+ * text-selection survive a streaming update.
+ *
+ * Scope: this is intentionally minimal — it handles the cases the streaming
+ * open-block tail produces (text growth, appended trailing nodes, attribute
+ * tweaks). It is OPT-IN (see `morphOpenBlocks` in dom.ts) and never runs on the
+ * default path.
+ *
+ * Matching strategy (per child level):
+ *  - Build an id-set over the *new* subtree so a node carrying an `id` that the
+ *    incoming tree also has can be matched across reorders/insertions.
+ *  - Walk old/new children with two cursors. When the heads are "soft-equal"
+ *    (same nodeType, same tagName for elements) we morph them in place and
+ *    recurse; otherwise we id-match, insert, or remove the minimum.
+ *  - Mutate matched element attributes/text in place; append trailing new nodes;
+ *    remove old nodes with no match.
+ */
+/** Parse an HTML string into a detached `<template>`'s content (a DocumentFragment). */
+export declare function htmlToFragment(html: string): DocumentFragment;
+/**
+ * Morph `from`'s children to match `to` (a fragment, element, or HTML string).
+ * `from` itself is never replaced — only its subtree is reconciled in place.
+ */
+export declare function morph(from: Element, to: string | DocumentFragment | Element): void;

package/dist/morph.js

@@ -0,0 +1,166 @@
+function htmlToFragment(html) {
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html;
+  return tpl.content;
+}
+function saveFocus(root) {
+  if (typeof document === "undefined") return null;
+  const active = document.activeElement;
+  if (!active || active === document.body) return null;
+  if (!root.contains(active)) return null;
+  let start = null;
+  let end = null;
+  const el = active;
+  try {
+    if (typeof el.selectionStart === "number") {
+      start = el.selectionStart;
+      end = el.selectionEnd;
+    }
+  } catch {
+  }
+  return { node: active, start, end };
+}
+function restoreFocus(saved) {
+  if (!saved) return;
+  const node = saved.node;
+  if (typeof document !== "undefined" && !document.contains(node)) return;
+  if (document.activeElement === node) {
+  } else if (typeof node.focus === "function") {
+    try {
+      node.focus({ preventScroll: true });
+    } catch {
+      try {
+        node.focus();
+      } catch {
+      }
+    }
+  }
+  if (saved.start !== null && typeof node.setSelectionRange === "function") {
+    try {
+      node.setSelectionRange(saved.start, saved.end ?? saved.start);
+    } catch {
+    }
+  }
+}
+function morph(from, to) {
+  const fragment = typeof to === "string" ? htmlToFragment(to) : to;
+  const saved = saveFocus(from);
+  morphChildren(from, fragment);
+  restoreFocus(saved);
+}
+function isSoftMatch(a, b) {
+  if (a.nodeType !== b.nodeType) return false;
+  if (a.nodeType === 1) {
+    return a.tagName === b.tagName;
+  }
+  return true;
+}
+function nodeId(n) {
+  if (n.nodeType !== 1) return null;
+  const id = n.getAttribute("id");
+  return id && id.length > 0 ? id : null;
+}
+function childIdSet(parent) {
+  const ids = /* @__PURE__ */ new Set();
+  for (let c = parent.firstChild; c; c = c.nextSibling) {
+    const id = nodeId(c);
+    if (id) ids.add(id);
+  }
+  return ids;
+}
+function morphChildren(oldParent, newParent) {
+  const newIds = childIdSet(newParent);
+  let oldChild = oldParent.firstChild;
+  let newChild = newParent.firstChild;
+  while (newChild) {
+    const nextNew = newChild.nextSibling;
+    if (!oldChild) {
+      oldParent.appendChild(importNode(oldParent, newChild));
+      newChild = nextNew;
+      continue;
+    }
+    const nextOld = oldChild.nextSibling;
+    const newKey = nodeId(newChild);
+    const oldKey = nodeId(oldChild);
+    if (isSoftMatch(oldChild, newChild) && newKey === oldKey) {
+      morphNode(oldChild, newChild);
+      oldChild = nextOld;
+      newChild = nextNew;
+      continue;
+    }
+    if (oldKey && !newIds.has(oldKey)) {
+      const toRemove = oldChild;
+      oldChild = nextOld;
+      oldParent.removeChild(toRemove);
+      continue;
+    }
+    if (newKey) {
+      const match = findChildById(oldParent, newKey);
+      if (match) {
+        if (match !== oldChild) oldParent.insertBefore(match, oldChild);
+        morphNode(match, newChild);
+        oldChild = match.nextSibling;
+        newChild = nextNew;
+        continue;
+      }
+      oldParent.insertBefore(importNode(oldParent, newChild), oldChild);
+      newChild = nextNew;
+      continue;
+    }
+    if (isSoftMatch(oldChild, newChild)) {
+      morphNode(oldChild, newChild);
+      oldChild = nextOld;
+      newChild = nextNew;
+      continue;
+    }
+    oldParent.insertBefore(importNode(oldParent, newChild), oldChild);
+    oldParent.removeChild(oldChild);
+    oldChild = nextOld;
+    newChild = nextNew;
+  }
+  while (oldChild) {
+    const next = oldChild.nextSibling;
+    oldParent.removeChild(oldChild);
+    oldChild = next;
+  }
+}
+function findChildById(parent, id) {
+  for (let c = parent.firstChild; c; c = c.nextSibling) {
+    if (nodeId(c) === id) return c;
+  }
+  return null;
+}
+function importNode(target, source) {
+  const doc = target.ownerDocument ?? document;
+  return doc.importNode(source, true);
+}
+function morphNode(oldNode, newNode) {
+  if (oldNode.nodeType === 1) {
+    morphAttributes(oldNode, newNode);
+    morphChildren(oldNode, newNode);
+    return;
+  }
+  if (oldNode.nodeValue !== newNode.nodeValue) {
+    oldNode.nodeValue = newNode.nodeValue;
+  }
+}
+function morphAttributes(oldEl, newEl) {
+  const newAttrs = newEl.attributes;
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i];
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value);
+    }
+  }
+  const oldAttrs = oldEl.attributes;
+  const stale = [];
+  for (let i = 0; i < oldAttrs.length; i++) {
+    const name = oldAttrs[i].name;
+    if (!newEl.hasAttribute(name)) stale.push(name);
+  }
+  for (const name of stale) oldEl.removeAttribute(name);
+}
+export {
+  htmlToFragment,
+  morph
+};