rapier-math 1.0.1 → 1.1.0

package/src/math/examples/browser.mjs

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+import {render, observe} from '../index.mjs';
+const container = document.querySelector('#equation');
+const source = document.querySelector('#source');
+let stop = () => {};
+function update() {
+  stop();
+  try {
+    const result = render(source.value, {displayMode: true});
+    document.querySelector('#errors').textContent = JSON.stringify(result.errors);
+    if (result.errors.length) container.replaceChildren(document.createTextNode(source.value));
+    else {
+      // Only this renderer's freshly returned SVG reaches the HTML sink.
+      container.innerHTML = result.svg;
+      stop = observe(container);
+    }
+  } catch (error) {
+    container.replaceChildren(document.createTextNode(source.value));
+    document.querySelector('#errors').textContent = error.message;
+  }
+}
+document.querySelector('#render').addEventListener('click', update);
+window.addEventListener('pagehide', () => stop());
+update();

package/src/math/examples/formula.mjs

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+import {render, renderToString} from 'rapier-math';
+
+// Works in Node/SSR: the result needs no browser JavaScript or remote font.
+const source = String.raw`\frac{-b\pm\sqrt{b^2-4ac}}{2a}`;
+const result = render(source, {displayMode: true});
+if (result.errors.length) throw new Error(JSON.stringify(result.errors));
+console.log(result.svg);
+console.log(renderToString('E=mc^2'));
+const failure = render(String.raw`\unsupported{x}`);
+console.error({source: String.raw`\unsupported{x}`, errors: failure.errors});
+// Retain the original source for editing/copying, even if admission throws.

package/src/math/examples/markdown.mjs

@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: MIT
+import MarkdownIt from 'markdown-it';
+import rapierMath from 'rapier-math/markdown-it';
+
+export const md = new MarkdownIt({html: false}).use(rapierMath);
+const source = 'It costs $5 and $10. Code: `$$x$$`. Math: \\(x^2\\).\n\n$$\\frac{1}{2}$$\n';
+const env = {};
+console.log(md.render(source, env));
+console.error(env.rapierMathErrors || []);

package/src/math/examples/react.tsx

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: MIT
+import {useEffect, useMemo, useRef} from 'react';
+import {render, observe} from 'rapier-math';
+
+export function Equation({source, displayMode = false}: {source: string; displayMode?: boolean}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const result = useMemo(() => {
+    try { return render(source, {displayMode}); }
+    catch { return null; }
+  }, [source, displayMode]);
+  const svg = result && result.errors.length === 0 ? result.svg : null;
+  useEffect(() => {
+    if (ref.current && svg) return observe(ref.current);
+  }, [svg]); // Cleanup runs before replacement setup and on unmount.
+  if (!svg) return <code>{source}</code>;
+  // The server and initial client render use identical source/options. Fit only
+  // after hydration; never pass authored HTML to dangerouslySetInnerHTML.
+  return <span ref={ref} dangerouslySetInnerHTML={{__html: svg}} />;
+}

package/src/math/examples/stream.mjs

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: MIT
+import MarkdownIt from 'markdown-it';
+import rapierMath from 'rapier-math/markdown-it';
+import {createMarkdownStream} from 'rapier-math/stream';
+
+const md = new MarkdownIt({html: false}).use(rapierMath);
+const stream = createMarkdownStream(source => md.render(source, {}), {previewEvery: 16});
+for (const chunk of ['The answer is \\(', '\\frac{1}', '{2}', '\\)', '. Code: `$$x$$`.']) {
+  const preview = stream.write(chunk);
+  if (preview) console.log({phase: 'preview', ...preview});
+}
+const final = stream.finish();
+console.log({phase: 'complete', ...final});
+if (final.html !== md.render(final.source, {})) throw new Error('Batch mismatch');
+
+// One stream per message. On replacement: cancel its transport, reset, write.
+stream.reset();
+stream.write('Replacement \\(y\\).');
+console.log(stream.finish());

package/src/math/examples/unified.mjs

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: MIT
+import {unified} from 'unified';
+import remarkParse from 'remark-parse';
+import remarkMath from 'remark-math';
+import remarkRehype from 'remark-rehype';
+import rehypeSanitize, {defaultSchema} from 'rehype-sanitize';
+import rehypeRapierMath from 'rapier-math/rehype';
+import rehypeStringify from 'rehype-stringify';
+import {pathToFileURL} from 'node:url';
+
+export const processor = unified().use(remarkParse)
+  .use(remarkMath, {singleDollarTextMath: false}).use(remarkRehype)
+  .use(rehypeSanitize, {
+    ...defaultSchema,
+    attributes: {...defaultSchema.attributes, code: [
+      ...(defaultSchema.attributes.code || []).filter(rule => !(Array.isArray(rule) && rule[0] === 'className')),
+      ['className', 'language-math', 'math-inline', 'math-display'],
+    ]},
+  })
+  .use(rehypeRapierMath).use(rehypeStringify);
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  const file = await processor.process('Price $5. Code `$$x$$`. Math $$x^2$$.\n\n$$\n\\frac{1}{2}\n$$');
+  console.log(String(file));
+  console.error(file.messages);
+}

package/src/math/examples/worker.mjs

@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MIT
+import {render} from '../index.mjs';
+self.onmessage = ({data: {id, source}}) => {
+  try { self.postMessage({id, source, result: render(source)}); }
+  catch (error) { self.postMessage({id, source, error: {code: error.code, message: error.message}}); }
+};
+// Keep a request id per message; install a reply only if it is still current.

package/src/math/fallbacks.js

@@ -14,7 +14,7 @@ function mathFallbackGlyph(value,c,extra={}) {
       {left:-radius,right:width*unit+radius,inkTop:-high*unit-radius,inkBottom:-low*unit+radius,...extra});
   };
   if(value==='ϝ') {
-    const b=draw('𝑓'),g=MATH_FONT.glyphs[b.glyph],path=g[7],bars=[...path.matchAll(/H(\d+)/g)],
+    const b=draw('𝑓'),g=MATH_FONT.glyph(b.glyph),path=g[7],bars=[...path.matchAll(/H(\d+)/g)],
       start=bars[1],end=bars[2],cut=Number(path.slice(0,start.index).match(/-?\d+/g).at(-1)),
       left=Number(start[1]),right=Number(path.slice(start.index,end.index).match(/-?\d+/g).at(-2)),
       body='M'+left+' '+cut+path.slice(start.index+start[0].length,end.index)+'Z',unit=b.unitScale,
@@ -39,7 +39,7 @@ function mathFallbackGlyph(value,c,extra={}) {
     return centered(draw('⋄',factor));
   }
   if(value==='◆') {
-    const b=draw('◊'),path=MATH_FONT.glyphs[b.glyph][7],contours=path.match(/M[^M]+/g);
+    const b=draw('◊'),path=MATH_FONT.glyph(b.glyph)[7],contours=path.match(/M[^M]+/g);
     const range=part=>{const numbers=part.match(/-?\d+(?:\.\d+)?/g).map(Number);return Math.max(...numbers)-Math.min(...numbers);};
     const outer=contours.reduce((a,b)=>range(a)>range(b)?a:b);
     return {...b,svg:b.svg.replace('d="'+path+'"','d="'+outer+'"'),glyph:undefined,...extra};
@@ -51,7 +51,7 @@ function mathFallbackGlyph(value,c,extra={}) {
     return contour(800,-75-t,575,'M'+points.map(point=>point.map(mathNumber).join(' ')).join('L')+'Z');
   }
   if(value==='⋔') {
-    const b=draw('∩',.86),g=MATH_FONT.glyphs[b.glyph],x=(g[1]+g[3])/2,t=MATH_FONT.constants.FractionRuleThickness,
+    const b=draw('∩',.86),g=MATH_FONT.glyph(b.glyph),x=(g[1]+g[3])/2,t=MATH_FONT.constants.FractionRuleThickness,
       stem=contour(g[0],g[2],g[4]+100,'M'+mathNumber(x-t/2)+' '+g[2]+'V'+(g[4]+100)+'H'+mathNumber(x+t/2)+'V'+g[2]+'Z',.86);
     return centered(mathCompose([[b,0,0],[stem,0,0]],b.w));
   }
@@ -72,7 +72,7 @@ function mathFallbackGlyph(value,c,extra={}) {
     return mathCompose(items,width,extra);
   }
   if(value==='⇠'||value==='⇢') {
-    const right=value==='⇢',b=draw(right?'→':'←'),g=MATH_FONT.glyphs[b.glyph],unit=b.unitScale,
+    const right=value==='⇢',b=draw(right?'→':'←'),g=MATH_FONT.glyph(b.glyph),unit=b.unitScale,
       width=Math.max(b.w,extra.stretchAxis==='horizontal'?extra.stretchTarget || 0:0),added=width-b.w,
       split=g[0]*(right?.65:.35);let command='',coordinate=0;
     const path=g[7].replace(/[MLHVCZ]|-?\d+(?:\.\d+)?/g,token=>{
@@ -100,7 +100,7 @@ function mathFallbackGlyph(value,c,extra={}) {
       total=Math.max(target,top.h+bottom.h),gap=Math.max(0,total-top.h-bottom.h),width=top.w,
       ty=-axis-total/2-top.inkTop,by=ty+top.inkBottom+gap-bottom.inkTop,items=[[top,0,ty],[bottom,0,by]];
     if(gap>0) {
-      const part=MATH_FONT.glyphs[MATH_FONT.chars['⎪'.codePointAt(0)]],unit=s*factor/MATH_FONT.units,
+      const part=MATH_FONT.glyph(MATH_FONT.chars['⎪'.codePointAt(0)]),unit=s*factor/MATH_FONT.units,
         overlap=Math.max(MATH_FONT.minConnectorOverlap,40),height=gap/unit+2*overlap,
         stem=contour(part[0],0,height,'M'+part[1]+' 0V'+mathNumber(height)+'H'+part[3]+'V0Z',factor);
       items.push([stem,0,ty+top.inkBottom+gap+overlap*unit]);