@chromamark/renderer 0.1.1 → 0.2.1

package/README.md

@@ -63,13 +63,32 @@ ChromaMark.autoRender();
 | `autoRender(options?)`         | Inject the theme, then render every target on the page.                |
 | `renderElement(target, opts?)` | Render one element (selector or node) in place / as a sibling.         |
 | `renderAll(selector?, opts?)`  | Render all matching elements.                                          |
+| `renderSrc(target, opts?)`     | Fetch the element's `data-chromamark-src` file and render it in place. |
 | `injectTheme(doc?)`            | Add the theme `<style>` once (idempotent).                             |
 | `render(src, opts?)`           | ChromaMark string → HTML.                                              |
 | `theme`                        | The theme CSS as a string.                                             |
 
 Targets default to `<script type="text/chromamark">`, `template.chromamark`,
-`.chromamark`, and `[data-chromamark]`. Adding `data-chromamark-auto` to the
-loading `<script>` runs `autoRender()` automatically once the DOM is ready.
+`.chromamark`, `[data-chromamark]`, and `[data-chromamark-src]`. Adding
+`data-chromamark-auto` to the loading `<script>` runs `autoRender()`
+automatically once the DOM is ready.
+
+### Load ChromaMark from an external file
+
+Point an element at a `.cm` file with `data-chromamark-src` and the bundle
+fetches and renders it — the same idea as an external script or stylesheet, so
+the page itself stays lean:
+
+```html
+<div data-chromamark-src="report.cm"></div>
+<script src="https://cdn.jsdelivr.net/npm/@chromamark/renderer/dist/chromamark.min.js"
+        data-chromamark-auto></script>
+```
+
+The file is fetched with `fetch()`, so the page must be served over `http(s)`
+(not opened as `file://`) and same-origin/CORS rules apply. If the file can't be
+loaded the element keeps its existing content and gets a `data-chromamark-error`
+attribute, so a missing file degrades gracefully instead of throwing.
 
 ## Theme
 

package/dist/chromamark.esm.js

@@ -2387,12 +2387,12 @@ function escapedSplit(str) {
   const max = str.length;
   let pos = 0;
   let ch = str.charCodeAt(pos);
-  let isEscaped = false;
+  let isEscaped2 = false;
   let lastPos = 0;
   let current = "";
   while (pos < max) {
     if (ch === 124) {
-      if (!isEscaped) {
+      if (!isEscaped2) {
         result.push(current + str.substring(lastPos, pos));
         current = "";
         lastPos = pos + 1;
@@ -2401,7 +2401,7 @@ function escapedSplit(str) {
         lastPos = pos;
       }
     }
-    isEscaped = ch === 92;
+    isEscaped2 = ch === 92;
     pos++;
     ch = str.charCodeAt(pos);
   }
@@ -5673,10 +5673,14 @@ var SIGILS = { "!": "pill", ".": "text", "=": "meter" };
 function unescape(text2) {
   return text2.replace(/\\([\s\S])/g, "$1");
 }
-function splitSpec(inner) {
-  const match2 = inner.match(/^(\S+)(?:\s+([\s\S]*))?$/);
-  if (!match2) return null;
-  return { specToken: match2[1], rest: (match2[2] || "").trim() };
+var WS = /\s/;
+function splitInline(src, from, end) {
+  let s = from;
+  while (s < end && WS.test(src[s])) s++;
+  let e = s;
+  while (e < end && !WS.test(src[e])) e++;
+  if (e === s) return null;
+  return { specToken: src.slice(s, e), restStart: e };
 }
 function meterWidth(value) {
   let pct;
@@ -5694,18 +5698,32 @@ function meterWidth(value) {
   pct = Math.max(0, Math.min(100, pct));
   return String(+pct.toFixed(2));
 }
-function findClose(state, from) {
-  const src = state.src;
-  for (let i = from; i < state.posMax; i++) {
-    const c = src.charCodeAt(i);
-    if (c === 92) {
-      i++;
-      continue;
-    }
-    if (c === 10) return -1;
-    if (c === 93) return i;
+function nextIndex(state, slot, needle, from) {
+  const c = state[slot];
+  if (c !== void 0 && c.from <= from && (c.at === -1 || from <= c.at)) return c.at;
+  const at = state.src.indexOf(needle, from);
+  state[slot] = { from, at };
+  return at;
+}
+function isEscaped(src, pos, floor2) {
+  let n = 0;
+  for (let i = pos - 1; i >= floor2 && src.charCodeAt(i) === 92; i--) n++;
+  return (n & 1) === 1;
+}
+function nextUnescaped(state, slot, needle, from, floor2, max) {
+  let at = nextIndex(state, slot, needle, from);
+  while (at !== -1 && at < max && isEscaped(state.src, at, floor2)) {
+    at = nextIndex(state, slot, needle, at + 1);
   }
-  return -1;
+  return at;
+}
+function findClose(state, from) {
+  const max = state.posMax;
+  const bracket = nextUnescaped(state, "_cmBr", "]", from, from, max);
+  if (bracket === -1 || bracket >= max) return -1;
+  const newline2 = nextUnescaped(state, "_cmNl", "\n", from, from, max);
+  if (newline2 !== -1 && newline2 < bracket) return -1;
+  return bracket;
 }
 function makeRule(enabled) {
   return function chromaInline(state, silent) {
@@ -5715,12 +5733,12 @@ function makeRule(enabled) {
     if (!kind || !enabled[kind]) return false;
     const end = findClose(state, start + 2);
     if (end === -1) return false;
-    const inner = state.src.slice(start + 2, end).trim();
-    const parts = inner && splitSpec(inner);
+    const src = state.src;
+    const parts = splitInline(src, start + 2, end);
     if (!parts) return false;
     const spec = parseSpec(parts.specToken);
     if (!spec) return false;
-    const rest = unescape(parts.rest);
+    const rest = unescape(src.slice(parts.restStart, end).trim());
     let token;
     if (kind === "meter") {
       if (!rest) return false;
@@ -5780,6 +5798,14 @@ var KINDS = {
   "==": { kind: "mark", close: "==}" },
   ">>": { kind: "comment", close: "<<}" }
 };
+function findClose2(state, needle, from) {
+  const slot = "_cmCritic" + needle;
+  const c = state[slot];
+  if (c !== void 0 && c.from <= from && (c.at === -1 || from <= c.at)) return c.at;
+  const at = state.src.indexOf(needle, from);
+  state[slot] = { from, at };
+  return at;
+}
 function criticRule(state, silent) {
   const start = state.pos;
   const src = state.src;
@@ -5787,7 +5813,7 @@ function criticRule(state, silent) {
   const spec = KINDS[src.slice(start + 1, start + 3)];
   if (!spec) return false;
   const contentStart = start + 3;
-  const closeIdx = src.indexOf(spec.close, contentStart);
+  const closeIdx = findClose2(state, spec.close, contentStart);
   if (closeIdx === -1 || closeIdx + spec.close.length > state.posMax) return false;
   const raw = src.slice(contentStart, closeIdx);
   if (!silent) {
@@ -5955,6 +5981,15 @@ function containerPlugin(md, enabled) {
     alt: ["paragraph", "reference", "blockquote", "list"]
   });
   const esc = md.utils.escapeHtml;
+  const renderInlineSafe = (text2) => {
+    const prevHtml = md.options.html;
+    md.options.html = false;
+    try {
+      return md.renderInline(text2);
+    } finally {
+      md.options.html = prevHtml;
+    }
+  };
   function decorate(meta) {
     const custom = meta.color ? " cm-custom" : "";
     const style = meta.color ? ` style="--fg:${esc(meta.color)}"` : "";
@@ -5966,25 +6001,19 @@ function containerPlugin(md, enabled) {
     const { custom, style, tone } = decorate(meta);
     if (meta.structure === "details") {
       const open = meta.open ? " open" : "";
-      return `<details class="cm-details${custom}"${tone}${style}${open}><summary>${esc(meta.summary)}</summary><div class="cm-body">`;
+      return `<details class="cm-details${custom}"${tone}${style}${open}><summary>${renderInlineSafe(meta.summary)}</summary><div class="cm-body">`;
     }
     let html = `<div class="cm-block${custom}"${tone}${style}>`;
-    if (meta.title) html += `<div class="cm-title">${esc(meta.title)}</div>`;
+    if (meta.title) html += `<div class="cm-title">${renderInlineSafe(meta.title)}</div>`;
     return html + '<div class="cm-body">';
   };
   md.renderer.rules.cm_container_close = (tokens, idx) => tokens[idx].meta.structure === "details" ? "</div></details>" : "</div></div>";
   md.renderer.rules.cm_fields = (tokens, idx) => {
-    const prevHtml = md.options.html;
-    md.options.html = false;
-    try {
-      let html = '<dl class="cm-fields">';
-      for (const [key, value] of tokens[idx].meta.rows) {
-        html += `<dt>${esc(key)}</dt><dd>${md.renderInline(value)}</dd>`;
-      }
-      return html + "</dl>";
-    } finally {
-      md.options.html = prevHtml;
+    let html = '<dl class="cm-fields">';
+    for (const [key, value] of tokens[idx].meta.rows) {
+      html += `<dt>${esc(key)}</dt><dd>${renderInlineSafe(value)}</dd>`;
     }
+    return html + "</dl>";
   };
 }
 
@@ -6033,7 +6062,9 @@ function render(src, options = {}) {
 // src/browser-core.js
 var STYLE_ID = "chromamark-theme";
 var DONE_ATTR = "data-chromamark-done";
-var DEFAULT_SELECTOR = 'script[type="text/chromamark"], template.chromamark, [data-chromamark], .chromamark';
+var SRC_ATTR = "data-chromamark-src";
+var ERR_ATTR = "data-chromamark-error";
+var DEFAULT_SELECTOR = 'script[type="text/chromamark"], template.chromamark, [data-chromamark], [data-chromamark-src], .chromamark';
 var theme = "";
 function configureTheme(css) {
   theme = css || "";
@@ -6071,20 +6102,44 @@ function sourceOf(el, tag) {
 function renderElement(target, options) {
   const el = resolve(target);
   if (!el || el.hasAttribute(DONE_ATTR)) return null;
+  if (el.hasAttribute && el.hasAttribute(SRC_ATTR)) return renderSrc(el, options);
+  const doc = el.ownerDocument || (typeof document !== "undefined" ? document : null);
   const tag = (el.tagName || "").toLowerCase();
   const html = render(dedent(sourceOf(el, tag)), options);
   el.setAttribute(DONE_ATTR, "");
   if (tag === "script" || tag === "template") {
-    const out = document.createElement("div");
+    const out = doc.createElement("div");
     out.className = "chromamark-output";
     out.innerHTML = html;
-    el.parentNode.insertBefore(out, el.nextSibling);
+    if (el.parentNode) el.parentNode.insertBefore(out, el.nextSibling);
     return out;
   }
   el.innerHTML = html;
   el.classList.add("chromamark-output");
   return el;
 }
+function renderSrc(target, options) {
+  const el = resolve(target);
+  if (!el || el.hasAttribute(DONE_ATTR)) return Promise.resolve(null);
+  const url = el.getAttribute(SRC_ATTR);
+  if (!url) return Promise.resolve(null);
+  el.setAttribute(DONE_ATTR, "");
+  const view = el.ownerDocument && el.ownerDocument.defaultView;
+  const doFetch = view && view.fetch || (typeof fetch !== "undefined" ? fetch : null);
+  const fail = (message) => {
+    el.setAttribute(ERR_ATTR, message);
+    return null;
+  };
+  if (!doFetch) return Promise.resolve(fail("ChromaMark: fetch is unavailable"));
+  return Promise.resolve().then(() => doFetch(url)).then((res) => {
+    if (!res || !res.ok) throw new Error(`HTTP ${res ? res.status : "?"}`);
+    return res.text();
+  }).then((text2) => {
+    el.innerHTML = render(text2, options);
+    el.classList.add("chromamark-output");
+    return el;
+  }).catch((err) => fail(`ChromaMark: failed to load ${url} (${err && err.message || err})`));
+}
 function renderAll(selector, options) {
   const nodes = document.querySelectorAll(selector || DEFAULT_SELECTOR);
   return Array.from(nodes).map((el) => renderElement(el, options));
@@ -6097,6 +6152,7 @@ var ChromaMark = {
   render: render2,
   renderElement,
   renderAll,
+  renderSrc,
   injectTheme,
   autoRender,
   createRenderer,
@@ -6128,5 +6184,6 @@ export {
   render2 as render,
   renderAll,
   renderElement,
+  renderSrc,
   theme
 };