npm - @liqvid/katex - Versions diffs - 0.0.3 → 0.1.0 - Mend

@liqvid/katex 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +1 -29
package/dist/cjs/RenderGroup.cjs +76 -0
package/dist/cjs/fancy.cjs +29 -0
package/dist/cjs/index.cjs +9 -0
package/dist/cjs/loading.cjs +67 -0
package/dist/cjs/plain.cjs +50 -0
package/dist/esm/RenderGroup.mjs +73 -0
package/dist/esm/fancy.mjs +26 -0
package/dist/esm/index.mjs +3 -0
package/dist/esm/loading.mjs +64 -0
package/dist/esm/plain.mjs +47 -0
package/dist/types/RenderGroup.d.ts +1 -0
package/dist/types/fancy.d.ts +1 -1
package/package.json +24 -27
package/dist/index.js +0 -168
package/dist/index.mjs +0 -206
package/dist/plain.js +0 -117
package/dist/plain.mjs +0 -113

package/README.md CHANGED Viewed

@@ -1,31 +1,3 @@
 # @liqvid/katex
-[KaTeX](https://katex.org/) integration for [Liqvid](https://liqvidjs.org).
-## Usage
-```tsx
-import {KTX} from "@liqvid/katex";
-function Quadratic() {
-  return (
-    <div>
-      The value of <KTX>x</KTX> is given by the quadratic formula
-      <KTX display>{String.raw`x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}`}</KTX>
-    </div>
-  );
-}
-```
-## Macros
-For convenience, this module supports loading macro definitions from a file. Simply include a `<script type="math/tex">` tag in the `<head>` of your html, pointing to a tex file containing `\newcommand`s.
-```html
-<!-- this has to go in <head> -->
-<script src="./macros.tex" type="math/tex"></script>
-```
-```tex
-% macros.tex
-\newcommand{\C}{\mathbb C}
-```
+[KaTeX](https://katex.org/) integration for [Liqvid](https://liqvidjs.org). See https://liqvidjs.org/docs/integrations/katex/ for documentation.

package/dist/cjs/RenderGroup.cjs ADDED Viewed

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderGroup = void 0;
+const react_1 = require("@liqvid/utils/react");
+const liqvid_1 = require("liqvid");
+const react_2 = require("react");
+const fancy_1 = require("./fancy.cjs");
+const plain_1 = require("./plain.cjs");
+/**
+ * Wait for several things to be rendered
+*/
+exports.RenderGroup = (0, react_2.forwardRef)(function RenderGroup(props, ref) {
+    const [ready, resolve] = (0, react_1.usePromise)();
+    // handle
+    (0, react_2.useImperativeHandle)(ref, () => ({ ready }));
+    const elements = (0, react_2.useRef)([]);
+    const promises = (0, react_2.useRef)([]);
+    // reparsing
+    const player = (0, liqvid_1.usePlayer)();
+    (0, react_2.useEffect)(() => {
+        // promises
+        Promise.all(promises.current).then(() => {
+            // reparse
+            if (props.reparse) {
+                player.reparseTree(leastCommonAncestor(elements.current));
+            }
+            // ready()
+            resolve();
+        });
+    }, []);
+    return (0, react_1.recursiveMap)(props.children, node => {
+        if (shouldInspect(node)) {
+            const originalRef = node.ref;
+            return (0, react_2.cloneElement)(node, {
+                ref: (ref) => {
+                    if (!ref)
+                        return;
+                    elements.current.push(ref.domElement);
+                    promises.current.push(ref.ready);
+                    // pass along original ref
+                    if (typeof originalRef === "function") {
+                        originalRef(ref);
+                    }
+                    else if (originalRef && typeof originalRef === "object") {
+                        originalRef.current = ref;
+                    }
+                }
+            });
+        }
+        return node;
+    });
+});
+/**
+ * Determine whether the node is a <KTX> element
+ * @param node Element to check
+ */
+function shouldInspect(node) {
+    return (0, react_2.isValidElement)(node) && typeof node.type === "object" && (node.type === fancy_1.KTX || node.type === plain_1.KTX);
+}
+/**
+ * Find least common ancestor of an array of elements
+ * @param elements Elements
+ * @returns Deepest node containing all passed elements
+ */
+function leastCommonAncestor(elements) {
+    if (elements.length === 0) {
+        throw new Error("Must pass at least one element");
+    }
+    let ancestor = elements[0];
+    let failing = elements.slice(1);
+    while (failing.length > 0) {
+        ancestor = ancestor.parentElement;
+        failing = failing.filter(node => !ancestor.contains(node));
+    }
+    return ancestor;
+}

package/dist/cjs/fancy.cjs ADDED Viewed

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KTX = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@liqvid/utils/react");
+const liqvid_1 = require("liqvid");
+const react_2 = require("react");
+const plain_1 = require("./plain.cjs");
+/** Component for KaTeX code */
+exports.KTX = (0, react_2.forwardRef)(function KTX(props, ref) {
+    const { obstruct = "canplay canplaythrough", reparse = false, ...attrs } = props;
+    const plain = (0, react_2.useRef)();
+    const combined = (0, react_1.combineRefs)(plain, ref);
+    const player = (0, liqvid_1.usePlayer)();
+    (0, react_2.useEffect)(() => {
+        // obstruction
+        if (obstruct.match(/\bcanplay\b/)) {
+            player.obstruct("canplay", plain.current.ready);
+        }
+        if (obstruct.match("canplaythrough")) {
+            player.obstruct("canplaythrough", plain.current.ready);
+        }
+        // reparsing
+        if (reparse) {
+            plain.current.ready.then(() => player.reparseTree(plain.current.domElement));
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(plain_1.KTX, { ref: combined, ...attrs }));
+});

package/dist/cjs/index.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderGroup = exports.KaTeXReady = exports.KTX = void 0;
+var fancy_1 = require("./fancy.cjs");
+Object.defineProperty(exports, "KTX", { enumerable: true, get: function () { return fancy_1.KTX; } });
+var loading_1 = require("./loading.cjs");
+Object.defineProperty(exports, "KaTeXReady", { enumerable: true, get: function () { return loading_1.KaTeXReady; } });
+var RenderGroup_1 = require("./RenderGroup.cjs");
+Object.defineProperty(exports, "RenderGroup", { enumerable: true, get: function () { return RenderGroup_1.RenderGroup; } });

package/dist/cjs/loading.cjs ADDED Viewed

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KaTeXReady = void 0;
+// option of loading KaTeX asynchronously
+const KaTeXLoad = new Promise((resolve) => {
+    const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
+    if (!script)
+        return;
+    if (window.hasOwnProperty("katex")) {
+        resolve(katex);
+    }
+    else {
+        script.addEventListener("load", () => resolve(katex));
+    }
+});
+// load macros from <head>
+const KaTeXMacros = new Promise((resolve) => {
+    const macros = {};
+    const scripts = Array.from(document.querySelectorAll("head > script[type='math/tex']"));
+    return Promise.all(scripts.map(script => fetch(script.src)
+        .then(res => {
+        if (res.ok)
+            return res.text();
+        throw new Error(`${res.status} ${res.statusText}: ${script.src}`);
+    })
+        .then(tex => {
+        Object.assign(macros, parseMacros(tex));
+    }))).then(() => resolve(macros));
+});
+/**
+ * Ready Promise
+ */
+exports.KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
+/**
+ * Parse \newcommand macros in a file.
+ * Also supports \ktxnewcommand (for use in conjunction with MathJax).
+ * @param file TeX file to parse
+*/
+function parseMacros(file) {
+    const macros = {};
+    const rgx = /\\(?:ktx)?newcommand\{(.+?)\}(?:\[\d+\])?\{/g;
+    let match;
+    while (match = rgx.exec(file)) {
+        let body = "";
+        const macro = match[1];
+        let braceCount = 1;
+        for (let i = match.index + match[0].length; (braceCount > 0) && (i < file.length); ++i) {
+            const char = file[i];
+            if (char === "{") {
+                braceCount++;
+            }
+            else if (char === "}") {
+                braceCount--;
+                if (braceCount === 0)
+                    break;
+            }
+            else if (char === "\\") {
+                body += file.slice(i, i + 2);
+                ++i;
+                continue;
+            }
+            body += char;
+        }
+        macros[macro] = body;
+    }
+    return macros;
+}

package/dist/cjs/plain.cjs ADDED Viewed

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KTX = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@liqvid/utils/react");
+const react_2 = require("react");
+const loading_1 = require("./loading.cjs");
+/** Component for KaTeX code */
+exports.KTX = (0, react_2.forwardRef)(function KTX(props, ref) {
+    const spanRef = (0, react_2.useRef)();
+    const { children, display = false, ...attrs } = props;
+    const [ready, resolve] = (0, react_1.usePromise)();
+    // handle
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        domElement: spanRef.current,
+        ready
+    }));
+    (0, react_2.useEffect)(() => {
+        loading_1.KaTeXReady.then(([katex, macros]) => {
+            katex.render(children.toString(), spanRef.current, {
+                displayMode: !!display,
+                macros,
+                strict: "ignore",
+                throwOnError: false,
+                trust: true
+            });
+            /* move katex into placeholder element */
+            const child = spanRef.current.firstElementChild;
+            // copy classes
+            for (let i = 0, len = child.classList.length; i < len; ++i) {
+                spanRef.current.classList.add(child.classList.item(i));
+            }
+            // move children
+            while (child.childNodes.length > 0) {
+                spanRef.current.appendChild(child.firstChild);
+            }
+            // delete child
+            child.remove();
+            // resolve promise
+            resolve();
+        });
+    }, [children]);
+    // Google Chrome fails without this
+    if (display) {
+        if (!attrs.style)
+            attrs.style = {};
+        attrs.style.display = "block";
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { ...attrs, ref: spanRef }));
+});

package/dist/esm/RenderGroup.mjs ADDED Viewed

@@ -0,0 +1,73 @@
+import { recursiveMap, usePromise } from "@liqvid/utils/react";
+import { usePlayer } from "liqvid";
+import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef } from "react";
+import { KTX } from "./fancy.mjs";
+import { KTX as KTXPlain } from "./plain.mjs";
+/**
+ * Wait for several things to be rendered
+*/
+export const RenderGroup = forwardRef(function RenderGroup(props, ref) {
+    const [ready, resolve] = usePromise();
+    // handle
+    useImperativeHandle(ref, () => ({ ready }));
+    const elements = useRef([]);
+    const promises = useRef([]);
+    // reparsing
+    const player = usePlayer();
+    useEffect(() => {
+        // promises
+        Promise.all(promises.current).then(() => {
+            // reparse
+            if (props.reparse) {
+                player.reparseTree(leastCommonAncestor(elements.current));
+            }
+            // ready()
+            resolve();
+        });
+    }, []);
+    return recursiveMap(props.children, node => {
+        if (shouldInspect(node)) {
+            const originalRef = node.ref;
+            return cloneElement(node, {
+                ref: (ref) => {
+                    if (!ref)
+                        return;
+                    elements.current.push(ref.domElement);
+                    promises.current.push(ref.ready);
+                    // pass along original ref
+                    if (typeof originalRef === "function") {
+                        originalRef(ref);
+                    }
+                    else if (originalRef && typeof originalRef === "object") {
+                        originalRef.current = ref;
+                    }
+                }
+            });
+        }
+        return node;
+    });
+});
+/**
+ * Determine whether the node is a <KTX> element
+ * @param node Element to check
+ */
+function shouldInspect(node) {
+    return isValidElement(node) && typeof node.type === "object" && (node.type === KTX || node.type === KTXPlain);
+}
+/**
+ * Find least common ancestor of an array of elements
+ * @param elements Elements
+ * @returns Deepest node containing all passed elements
+ */
+function leastCommonAncestor(elements) {
+    if (elements.length === 0) {
+        throw new Error("Must pass at least one element");
+    }
+    let ancestor = elements[0];
+    let failing = elements.slice(1);
+    while (failing.length > 0) {
+        ancestor = ancestor.parentElement;
+        failing = failing.filter(node => !ancestor.contains(node));
+    }
+    return ancestor;
+}

package/dist/esm/fancy.mjs ADDED Viewed

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { combineRefs } from "@liqvid/utils/react";
+import { usePlayer } from "liqvid";
+import { forwardRef, useEffect, useRef } from "react";
+import { KTX as KTXPlain } from "./plain.mjs";
+/** Component for KaTeX code */
+export const KTX = forwardRef(function KTX(props, ref) {
+    const { obstruct = "canplay canplaythrough", reparse = false, ...attrs } = props;
+    const plain = useRef();
+    const combined = combineRefs(plain, ref);
+    const player = usePlayer();
+    useEffect(() => {
+        // obstruction
+        if (obstruct.match(/\bcanplay\b/)) {
+            player.obstruct("canplay", plain.current.ready);
+        }
+        if (obstruct.match("canplaythrough")) {
+            player.obstruct("canplaythrough", plain.current.ready);
+        }
+        // reparsing
+        if (reparse) {
+            plain.current.ready.then(() => player.reparseTree(plain.current.domElement));
+        }
+    }, []);
+    return (_jsx(KTXPlain, { ref: combined, ...attrs }));
+});

package/dist/esm/index.mjs ADDED Viewed

@@ -0,0 +1,3 @@
+export { KTX } from "./fancy.mjs";
+export { KaTeXReady } from "./loading.mjs";
+export { RenderGroup } from "./RenderGroup.mjs";

package/dist/esm/loading.mjs ADDED Viewed

@@ -0,0 +1,64 @@
+// option of loading KaTeX asynchronously
+const KaTeXLoad = new Promise((resolve) => {
+    const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
+    if (!script)
+        return;
+    if (window.hasOwnProperty("katex")) {
+        resolve(katex);
+    }
+    else {
+        script.addEventListener("load", () => resolve(katex));
+    }
+});
+// load macros from <head>
+const KaTeXMacros = new Promise((resolve) => {
+    const macros = {};
+    const scripts = Array.from(document.querySelectorAll("head > script[type='math/tex']"));
+    return Promise.all(scripts.map(script => fetch(script.src)
+        .then(res => {
+        if (res.ok)
+            return res.text();
+        throw new Error(`${res.status} ${res.statusText}: ${script.src}`);
+    })
+        .then(tex => {
+        Object.assign(macros, parseMacros(tex));
+    }))).then(() => resolve(macros));
+});
+/**
+ * Ready Promise
+ */
+export const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
+/**
+ * Parse \newcommand macros in a file.
+ * Also supports \ktxnewcommand (for use in conjunction with MathJax).
+ * @param file TeX file to parse
+*/
+function parseMacros(file) {
+    const macros = {};
+    const rgx = /\\(?:ktx)?newcommand\{(.+?)\}(?:\[\d+\])?\{/g;
+    let match;
+    while (match = rgx.exec(file)) {
+        let body = "";
+        const macro = match[1];
+        let braceCount = 1;
+        for (let i = match.index + match[0].length; (braceCount > 0) && (i < file.length); ++i) {
+            const char = file[i];
+            if (char === "{") {
+                braceCount++;
+            }
+            else if (char === "}") {
+                braceCount--;
+                if (braceCount === 0)
+                    break;
+            }
+            else if (char === "\\") {
+                body += file.slice(i, i + 2);
+                ++i;
+                continue;
+            }
+            body += char;
+        }
+        macros[macro] = body;
+    }
+    return macros;
+}

package/dist/esm/plain.mjs ADDED Viewed

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePromise } from "@liqvid/utils/react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { KaTeXReady } from "./loading.mjs";
+/** Component for KaTeX code */
+export const KTX = forwardRef(function KTX(props, ref) {
+    const spanRef = useRef();
+    const { children, display = false, ...attrs } = props;
+    const [ready, resolve] = usePromise();
+    // handle
+    useImperativeHandle(ref, () => ({
+        domElement: spanRef.current,
+        ready
+    }));
+    useEffect(() => {
+        KaTeXReady.then(([katex, macros]) => {
+            katex.render(children.toString(), spanRef.current, {
+                displayMode: !!display,
+                macros,
+                strict: "ignore",
+                throwOnError: false,
+                trust: true
+            });
+            /* move katex into placeholder element */
+            const child = spanRef.current.firstElementChild;
+            // copy classes
+            for (let i = 0, len = child.classList.length; i < len; ++i) {
+                spanRef.current.classList.add(child.classList.item(i));
+            }
+            // move children
+            while (child.childNodes.length > 0) {
+                spanRef.current.appendChild(child.firstChild);
+            }
+            // delete child
+            child.remove();
+            // resolve promise
+            resolve();
+        });
+    }, [children]);
+    // Google Chrome fails without this
+    if (display) {
+        if (!attrs.style)
+            attrs.style = {};
+        attrs.style.display = "block";
+    }
+    return (_jsx("span", { ...attrs, ref: spanRef }));
+});

package/dist/types/RenderGroup.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ interface Handle {
     ready: Promise<void>;
 }
 interface Props {
+    children?: React.ReactNode;
     /**
      * Whether to reparse descendants for `during()` and `from()`
      * @default false

package/dist/types/fancy.d.ts CHANGED Viewed

@@ -13,5 +13,5 @@ interface Props extends React.ComponentProps<typeof KTXPlain> {
     reparse?: boolean;
 }
 /** Component for KaTeX code */
-export declare const KTX: import("react").ForwardRefExoticComponent<Pick<Props, "hidden" | "color" | "style" | "display" | "translate" | "slot" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "obstruct" | "reparse"> & import("react").RefAttributes<Handle>>;
+export declare const KTX: import("react").ForwardRefExoticComponent<Pick<Props, "key" | "id" | "color" | "display" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "obstruct" | "reparse"> & import("react").RefAttributes<Handle>>;
 export {};

package/package.json CHANGED Viewed

@@ -1,24 +1,24 @@
 {
   "name": "@liqvid/katex",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "KaTeX integration for Liqvid",
   "files": [
     "dist/*"
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
     },
     "./plain": {
-      "import": "./dist/plain.mjs",
-      "require": "./dist/plain.js"
+      "import": "./dist/esm/plain.mjs",
+      "require": "./dist/cjs/plain.cjs"
     }
   },
   "typesVersions": {
     "*": {
       "*": [
-        "./dist/types/*"
+        "./dist/types/*.d.ts"
       ]
     }
   },
@@ -27,10 +27,6 @@
     "liqvid",
     "katex"
   ],
-  "scripts": {
-    "build": "tsc --build --force",
-    "lint": "eslint --ext ts,tsx --fix src"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/liqvidjs/liqvid.git"
@@ -41,10 +37,10 @@
   "homepage": "https://github.com/liqvidjs/liqvid/tree/main/packages/katex",
   "license": "MIT",
   "peerDependencies": {
-    "@types/katex": "^0.11.1",
-    "@types/react": ">=17.0.0",
-    "liqvid": "^2.1.1",
-    "react": ">=17.0.0"
+    "@types/katex": ">=0.14.0",
+    "@types/react": ">=18.0.0",
+    "liqvid": "^2.1.7",
+    "react": ">=18.1.0"
   },
   "peerDependenciesMeta": {
     "liqvid": {
@@ -52,18 +48,19 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^17.0.40",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "@yuri/eslint-config": "^1.0.1",
-    "eslint": "^8.11.0",
-    "eslint-plugin-react": "^7.29.3",
-    "liqvid": "^2.1.1",
-    "react": "^17.0.2",
-    "rollup": "^2.70.0",
-    "typescript": "^4.6.2"
+    "liqvid": "^2.1.7"
   },
   "dependencies": {
-    "@liqvid/utils": "^1.3.0"
-  }
-}
+    "@liqvid/utils": "^1.6.0"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "pnpm build:clean && pnpm build:js && pnpm build:postclean",
+    "build:clean": "rm -rf dist",
+    "build:js": "tsc --module esnext --outDir dist/esm; tsc --module commonjs --outDir dist/cjs; node ../../build.mjs",
+    "build:postclean": "rm dist/tsconfig.tsbuildinfo",
+    "lint": "eslint --ext ts,tsx --fix src"
+  },
+  "readme": "# @liqvid/katex\n\n[KaTeX](https://katex.org/) integration for [Liqvid](https://liqvidjs.org). See https://liqvidjs.org/docs/integrations/katex/ for documentation.\n"
+}

package/dist/index.js DELETED Viewed

@@ -1,168 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@liqvid/utils/react');
-var liqvid = require('liqvid');
-var react = require('react');
-var plain = require('./plain');
-/** Component for KaTeX code */
-const KTX = react.forwardRef(function KTX(props, ref) {
-    const { obstruct = "canplay canplaythrough", reparse = false, ...attrs } = props;
-    const plain$1 = react.useRef();
-    const combined = react$1.combineRefs(plain$1, ref);
-    const player = liqvid.usePlayer();
-    react.useEffect(() => {
-        // obstruction
-        if (obstruct.match(/\bcanplay\b/)) {
-            player.obstruct("canplay", plain$1.current.ready);
-        }
-        if (obstruct.match("canplaythrough")) {
-            player.obstruct("canplaythrough", plain$1.current.ready);
-        }
-        // reparsing
-        if (reparse) {
-            plain$1.current.ready.then(() => player.reparseTree(plain$1.current.domElement));
-        }
-    }, []);
-    return (jsxRuntime.jsx(plain.KTX, { ref: combined, ...attrs }));
-});
-// option of loading KaTeX asynchronously
-const KaTeXLoad = new Promise((resolve) => {
-    const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
-    if (!script)
-        return;
-    if (window.hasOwnProperty("katex")) {
-        resolve(katex);
-    }
-    else {
-        script.addEventListener("load", () => resolve(katex));
-    }
-});
-// load macros from <head>
-const KaTeXMacros = new Promise((resolve) => {
-    const macros = {};
-    const scripts = Array.from(document.querySelectorAll("head > script[type='math/tex']"));
-    return Promise.all(scripts.map(script => fetch(script.src)
-        .then(res => {
-        if (res.ok)
-            return res.text();
-        throw new Error(`${res.status} ${res.statusText}: ${script.src}`);
-    })
-        .then(tex => {
-        Object.assign(macros, parseMacros(tex));
-    }))).then(() => resolve(macros));
-});
-/**
- * Ready Promise
- */
-const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
-/**
-Parse \newcommand macros in a file.
-Also supports \ktxnewcommand (for use in conjunction with MathJax).
-*/
-function parseMacros(file) {
-    const macros = {};
-    const rgx = /\\(?:ktx)?newcommand\{(.+?)\}(?:\[\d+\])?\{/g;
-    let match;
-    while (match = rgx.exec(file)) {
-        let body = "";
-        const macro = match[1];
-        let braceCount = 1;
-        for (let i = match.index + match[0].length; (braceCount > 0) && (i < file.length); ++i) {
-            const char = file[i];
-            if (char === "{") {
-                braceCount++;
-            }
-            else if (char === "}") {
-                braceCount--;
-                if (braceCount === 0)
-                    break;
-            }
-            else if (char === "\\") {
-                body += file.slice(i, i + 2);
-                ++i;
-                continue;
-            }
-            body += char;
-        }
-        macros[macro] = body;
-    }
-    return macros;
-}
-/**
- * Wait for several things to be rendered
-*/
-const RenderGroup = react.forwardRef(function RenderGroup(props, ref) {
-    const [ready, resolve] = react$1.usePromise();
-    // handle
-    react.useImperativeHandle(ref, () => ({ ready }));
-    const elements = react.useRef([]);
-    const promises = react.useRef([]);
-    // reparsing
-    const player = liqvid.usePlayer();
-    react.useEffect(() => {
-        // promises
-        Promise.all(promises.current).then(() => {
-            // reparse
-            if (props.reparse) {
-                player.reparseTree(leastCommonAncestor(elements.current));
-            }
-            // ready()
-            resolve();
-        });
-    }, []);
-    return react$1.recursiveMap(props.children, node => {
-        if (shouldInspect(node)) {
-            const originalRef = node.ref;
-            return react.cloneElement(node, {
-                ref: (ref) => {
-                    if (!ref)
-                        return;
-                    elements.current.push(ref.domElement);
-                    promises.current.push(ref.ready);
-                    // pass along original ref
-                    if (typeof originalRef === "function") {
-                        originalRef(ref);
-                    }
-                    else if (originalRef && typeof originalRef === "object") {
-                        originalRef.current = ref;
-                    }
-                }
-            });
-        }
-        return node;
-    });
-});
-/**
- * Determine whether the node is a <KTX> element
- * @param node Element to check
- */
-function shouldInspect(node) {
-    return react.isValidElement(node) && typeof node.type === "object" && (node.type === KTX || node.type === plain.KTX);
-}
-/**
- * Find least common ancestor of an array of elements
- * @param elements Elements
- * @returns Deepest node containing all passed elements
- */
-function leastCommonAncestor(elements) {
-    if (elements.length === 0) {
-        throw new Error("Must pass at least one element");
-    }
-    let ancestor = elements[0];
-    let failing = elements.slice(1);
-    while (failing.length > 0) {
-        ancestor = ancestor.parentElement;
-        failing = failing.filter(node => !ancestor.contains(node));
-    }
-    return ancestor;
-}
-exports.KTX = KTX;
-exports.KaTeXReady = KaTeXReady;
-exports.RenderGroup = RenderGroup;

package/dist/index.mjs DELETED Viewed

@@ -1,206 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { combineRefs, usePromise, recursiveMap } from '@liqvid/utils/react';
-import { usePlayer } from 'liqvid';
-import { forwardRef, useRef, useEffect, useImperativeHandle, isValidElement, cloneElement } from 'react';
-import { KTX as KTX$2 } from './plain.mjs';
-/** Component for KaTeX code */
-const KTX$1 = forwardRef(function KTX(props, ref) {
-    const { obstruct = "canplay canplaythrough", reparse = false, ...attrs } = props;
-    const plain = useRef();
-    const combined = combineRefs(plain, ref);
-    const player = usePlayer();
-    useEffect(() => {
-        // obstruction
-        if (obstruct.match(/\bcanplay\b/)) {
-            player.obstruct("canplay", plain.current.ready);
-        }
-        if (obstruct.match("canplaythrough")) {
-            player.obstruct("canplaythrough", plain.current.ready);
-        }
-        // reparsing
-        if (reparse) {
-            plain.current.ready.then(() => player.reparseTree(plain.current.domElement));
-        }
-    }, []);
-    return (jsx(KTX$2, { ref: combined, ...attrs }));
-});
-// option of loading KaTeX asynchronously
-const KaTeXLoad = new Promise((resolve) => {
-    const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
-    if (!script)
-        return;
-    if (window.hasOwnProperty("katex")) {
-        resolve(katex);
-    }
-    else {
-        script.addEventListener("load", () => resolve(katex));
-    }
-});
-// load macros from <head>
-const KaTeXMacros = new Promise((resolve) => {
-    const macros = {};
-    const scripts = Array.from(document.querySelectorAll("head > script[type='math/tex']"));
-    return Promise.all(scripts.map(script => fetch(script.src)
-        .then(res => {
-        if (res.ok)
-            return res.text();
-        throw new Error(`${res.status} ${res.statusText}: ${script.src}`);
-    })
-        .then(tex => {
-        Object.assign(macros, parseMacros(tex));
-    }))).then(() => resolve(macros));
-});
-/**
- * Ready Promise
- */
-const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
-/**
-Parse \newcommand macros in a file.
-Also supports \ktxnewcommand (for use in conjunction with MathJax).
-*/
-function parseMacros(file) {
-    const macros = {};
-    const rgx = /\\(?:ktx)?newcommand\{(.+?)\}(?:\[\d+\])?\{/g;
-    let match;
-    while (match = rgx.exec(file)) {
-        let body = "";
-        const macro = match[1];
-        let braceCount = 1;
-        for (let i = match.index + match[0].length; (braceCount > 0) && (i < file.length); ++i) {
-            const char = file[i];
-            if (char === "{") {
-                braceCount++;
-            }
-            else if (char === "}") {
-                braceCount--;
-                if (braceCount === 0)
-                    break;
-            }
-            else if (char === "\\") {
-                body += file.slice(i, i + 2);
-                ++i;
-                continue;
-            }
-            body += char;
-        }
-        macros[macro] = body;
-    }
-    return macros;
-}
-/** Component for KaTeX code */
-const KTX = forwardRef(function KTX(props, ref) {
-    const spanRef = useRef();
-    const { children, display = false, ...attrs } = props;
-    const [ready, resolve] = usePromise();
-    // handle
-    useImperativeHandle(ref, () => ({
-        domElement: spanRef.current,
-        ready
-    }));
-    useEffect(() => {
-        KaTeXReady.then(([katex, macros]) => {
-            katex.render(children.toString(), spanRef.current, {
-                displayMode: !!display,
-                macros,
-                strict: "ignore",
-                throwOnError: false,
-                trust: true
-            });
-            /* move katex into placeholder element */
-            const child = spanRef.current.firstElementChild;
-            // copy classes
-            for (let i = 0, len = child.classList.length; i < len; ++i) {
-                spanRef.current.classList.add(child.classList.item(i));
-            }
-            // move children
-            while (child.childNodes.length > 0) {
-                spanRef.current.appendChild(child.firstChild);
-            }
-            // delete child
-            child.remove();
-            // resolve promise
-            resolve();
-        });
-    }, [children]);
-    // Google Chrome fails without this
-    if (display) {
-        if (!attrs.style)
-            attrs.style = {};
-        attrs.style.display = "block";
-    }
-    return (jsx("span", { ...attrs, ref: spanRef }));
-});
-/**
- * Wait for several things to be rendered
-*/
-const RenderGroup = forwardRef(function RenderGroup(props, ref) {
-    const [ready, resolve] = usePromise();
-    // handle
-    useImperativeHandle(ref, () => ({ ready }));
-    const elements = useRef([]);
-    const promises = useRef([]);
-    // reparsing
-    const player = usePlayer();
-    useEffect(() => {
-        // promises
-        Promise.all(promises.current).then(() => {
-            // reparse
-            if (props.reparse) {
-                player.reparseTree(leastCommonAncestor(elements.current));
-            }
-            // ready()
-            resolve();
-        });
-    }, []);
-    return recursiveMap(props.children, node => {
-        if (shouldInspect(node)) {
-            const originalRef = node.ref;
-            return cloneElement(node, {
-                ref: (ref) => {
-                    if (!ref)
-                        return;
-                    elements.current.push(ref.domElement);
-                    promises.current.push(ref.ready);
-                    // pass along original ref
-                    if (typeof originalRef === "function") {
-                        originalRef(ref);
-                    }
-                    else if (originalRef && typeof originalRef === "object") {
-                        originalRef.current = ref;
-                    }
-                }
-            });
-        }
-        return node;
-    });
-});
-/**
- * Determine whether the node is a <KTX> element
- * @param node Element to check
- */
-function shouldInspect(node) {
-    return isValidElement(node) && typeof node.type === "object" && (node.type === KTX$1 || node.type === KTX);
-}
-/**
- * Find least common ancestor of an array of elements
- * @param elements Elements
- * @returns Deepest node containing all passed elements
- */
-function leastCommonAncestor(elements) {
-    if (elements.length === 0) {
-        throw new Error("Must pass at least one element");
-    }
-    let ancestor = elements[0];
-    let failing = elements.slice(1);
-    while (failing.length > 0) {
-        ancestor = ancestor.parentElement;
-        failing = failing.filter(node => !ancestor.contains(node));
-    }
-    return ancestor;
-}
-export { KTX$1 as KTX, KaTeXReady, RenderGroup };

package/dist/plain.js DELETED Viewed

@@ -1,117 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var react$1 = require('@liqvid/utils/react');
-// option of loading KaTeX asynchronously
-const KaTeXLoad = new Promise((resolve) => {
-    const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
-    if (!script)
-        return;
-    if (window.hasOwnProperty("katex")) {
-        resolve(katex);
-    }
-    else {
-        script.addEventListener("load", () => resolve(katex));
-    }
-});
-// load macros from <head>
-const KaTeXMacros = new Promise((resolve) => {
-    const macros = {};
-    const scripts = Array.from(document.querySelectorAll("head > script[type='math/tex']"));
-    return Promise.all(scripts.map(script => fetch(script.src)
-        .then(res => {
-        if (res.ok)
-            return res.text();
-        throw new Error(`${res.status} ${res.statusText}: ${script.src}`);
-    })
-        .then(tex => {
-        Object.assign(macros, parseMacros(tex));
-    }))).then(() => resolve(macros));
-});
-/**
- * Ready Promise
- */
-const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
-/**
-Parse \newcommand macros in a file.
-Also supports \ktxnewcommand (for use in conjunction with MathJax).
-*/
-function parseMacros(file) {
-    const macros = {};
-    const rgx = /\\(?:ktx)?newcommand\{(.+?)\}(?:\[\d+\])?\{/g;
-    let match;
-    while (match = rgx.exec(file)) {
-        let body = "";
-        const macro = match[1];
-        let braceCount = 1;
-        for (let i = match.index + match[0].length; (braceCount > 0) && (i < file.length); ++i) {
-            const char = file[i];
-            if (char === "{") {
-                braceCount++;
-            }
-            else if (char === "}") {
-                braceCount--;
-                if (braceCount === 0)
-                    break;
-            }
-            else if (char === "\\") {
-                body += file.slice(i, i + 2);
-                ++i;
-                continue;
-            }
-            body += char;
-        }
-        macros[macro] = body;
-    }
-    return macros;
-}
-/** Component for KaTeX code */
-const KTX = react.forwardRef(function KTX(props, ref) {
-    const spanRef = react.useRef();
-    const { children, display = false, ...attrs } = props;
-    const [ready, resolve] = react$1.usePromise();
-    // handle
-    react.useImperativeHandle(ref, () => ({
-        domElement: spanRef.current,
-        ready
-    }));
-    react.useEffect(() => {
-        KaTeXReady.then(([katex, macros]) => {
-            katex.render(children.toString(), spanRef.current, {
-                displayMode: !!display,
-                macros,
-                strict: "ignore",
-                throwOnError: false,
-                trust: true
-            });
-            /* move katex into placeholder element */
-            const child = spanRef.current.firstElementChild;
-            // copy classes
-            for (let i = 0, len = child.classList.length; i < len; ++i) {
-                spanRef.current.classList.add(child.classList.item(i));
-            }
-            // move children
-            while (child.childNodes.length > 0) {
-                spanRef.current.appendChild(child.firstChild);
-            }
-            // delete child
-            child.remove();
-            // resolve promise
-            resolve();
-        });
-    }, [children]);
-    // Google Chrome fails without this
-    if (display) {
-        if (!attrs.style)
-            attrs.style = {};
-        attrs.style.display = "block";
-    }
-    return (jsxRuntime.jsx("span", { ...attrs, ref: spanRef }));
-});
-exports.KTX = KTX;

package/dist/plain.mjs DELETED Viewed

@@ -1,113 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-import { usePromise } from '@liqvid/utils/react';
-// option of loading KaTeX asynchronously
-const KaTeXLoad = new Promise((resolve) => {
-    const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
-    if (!script)
-        return;
-    if (window.hasOwnProperty("katex")) {
-        resolve(katex);
-    }
-    else {
-        script.addEventListener("load", () => resolve(katex));
-    }
-});
-// load macros from <head>
-const KaTeXMacros = new Promise((resolve) => {
-    const macros = {};
-    const scripts = Array.from(document.querySelectorAll("head > script[type='math/tex']"));
-    return Promise.all(scripts.map(script => fetch(script.src)
-        .then(res => {
-        if (res.ok)
-            return res.text();
-        throw new Error(`${res.status} ${res.statusText}: ${script.src}`);
-    })
-        .then(tex => {
-        Object.assign(macros, parseMacros(tex));
-    }))).then(() => resolve(macros));
-});
-/**
- * Ready Promise
- */
-const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
-/**
-Parse \newcommand macros in a file.
-Also supports \ktxnewcommand (for use in conjunction with MathJax).
-*/
-function parseMacros(file) {
-    const macros = {};
-    const rgx = /\\(?:ktx)?newcommand\{(.+?)\}(?:\[\d+\])?\{/g;
-    let match;
-    while (match = rgx.exec(file)) {
-        let body = "";
-        const macro = match[1];
-        let braceCount = 1;
-        for (let i = match.index + match[0].length; (braceCount > 0) && (i < file.length); ++i) {
-            const char = file[i];
-            if (char === "{") {
-                braceCount++;
-            }
-            else if (char === "}") {
-                braceCount--;
-                if (braceCount === 0)
-                    break;
-            }
-            else if (char === "\\") {
-                body += file.slice(i, i + 2);
-                ++i;
-                continue;
-            }
-            body += char;
-        }
-        macros[macro] = body;
-    }
-    return macros;
-}
-/** Component for KaTeX code */
-const KTX = forwardRef(function KTX(props, ref) {
-    const spanRef = useRef();
-    const { children, display = false, ...attrs } = props;
-    const [ready, resolve] = usePromise();
-    // handle
-    useImperativeHandle(ref, () => ({
-        domElement: spanRef.current,
-        ready
-    }));
-    useEffect(() => {
-        KaTeXReady.then(([katex, macros]) => {
-            katex.render(children.toString(), spanRef.current, {
-                displayMode: !!display,
-                macros,
-                strict: "ignore",
-                throwOnError: false,
-                trust: true
-            });
-            /* move katex into placeholder element */
-            const child = spanRef.current.firstElementChild;
-            // copy classes
-            for (let i = 0, len = child.classList.length; i < len; ++i) {
-                spanRef.current.classList.add(child.classList.item(i));
-            }
-            // move children
-            while (child.childNodes.length > 0) {
-                spanRef.current.appendChild(child.firstChild);
-            }
-            // delete child
-            child.remove();
-            // resolve promise
-            resolve();
-        });
-    }, [children]);
-    // Google Chrome fails without this
-    if (display) {
-        if (!attrs.style)
-            attrs.style = {};
-        attrs.style.display = "block";
-    }
-    return (jsx("span", { ...attrs, ref: spanRef }));
-});
-export { KTX };