@liqvid/katex 0.0.5 → 0.1.0

package/dist/cjs/RenderGroup.cjs

@@ -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

@@ -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

@@ -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/{plain.cjs → cjs/loading.cjs}

@@ -1,11 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime_js = require('react/jsx-runtime.js');
-var react$1 = require('@liqvid/utils/react');
-var react = require('react');
-
+"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\"]");
@@ -35,7 +30,7 @@ const KaTeXMacros = new Promise((resolve) => {
 /**
  * Ready Promise
  */
-const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
+exports.KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
 /**
  * Parse \newcommand macros in a file.
  * Also supports \ktxnewcommand (for use in conjunction with MathJax).
@@ -70,49 +65,3 @@ function parseMacros(file) {
     }
     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_js.jsx("span", { ...attrs, ref: spanRef }));
-});
-
-exports.KTX = KTX;

package/dist/cjs/plain.cjs

@@ -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

@@ -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

@@ -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

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

package/dist/{plain.mjs → esm/loading.mjs}

@@ -1,7 +1,3 @@
-import { jsx } from 'react/jsx-runtime.js';
-import { usePromise } from '@liqvid/utils/react';
-import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-
 // option of loading KaTeX asynchronously
 const KaTeXLoad = new Promise((resolve) => {
     const script = document.querySelector("script[src*=\"katex.js\"], script[src*=\"katex.min.js\"]");
@@ -31,7 +27,7 @@ const KaTeXMacros = new Promise((resolve) => {
 /**
  * Ready Promise
  */
-const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
+export const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
 /**
  * Parse \newcommand macros in a file.
  * Also supports \ktxnewcommand (for use in conjunction with MathJax).
@@ -66,49 +62,3 @@ function parseMacros(file) {
     }
     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 };

package/dist/esm/plain.mjs

@@ -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

@@ -0,0 +1,19 @@
+import React from "react";
+/** RenderGroup element API */
+interface Handle {
+    /** Promise that resolves once all KTX descendants have finished typesetting */
+    ready: Promise<void>;
+}
+interface Props {
+    children?: React.ReactNode;
+    /**
+     * Whether to reparse descendants for `during()` and `from()`
+     * @default false
+    */
+    reparse?: boolean;
+}
+/**
+ * Wait for several things to be rendered
+*/
+export declare const RenderGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<Handle>>;
+export {};

package/dist/types/fancy.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Handle, KTX as KTXPlain } from "./plain";
+interface Props extends React.ComponentProps<typeof KTXPlain> {
+    /**
+     * Player events to obstruct
+     * @default "canplay canplaythrough"
+    */
+    obstruct?: string;
+    /**
+     * Whether to reparse descendants for `during()` and `from()`
+     * @default false
+    */
+    reparse?: boolean;
+}
+/** Component for KaTeX code */
+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/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+export { KTX } from "./fancy";
+export { KaTeXReady } from "./loading";
+export { Handle } from "./plain";
+export { RenderGroup } from "./RenderGroup";
+declare global {
+    const katex: typeof katex;
+}

package/dist/types/loading.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ready Promise
+ */
+export declare const KaTeXReady: Promise<[typeof import("katex"), {
+    [key: string]: string;
+}]>;

package/dist/{plain.d.ts → types/plain.d.ts}

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-import * as react from 'react';
-
 /**
  * KTX element API
  */
-interface Handle {
+export interface Handle {
     /** The underlying <span> element */
     domElement: HTMLSpanElement;
     /** Promise that resolves once typesetting is finished */
@@ -18,6 +16,5 @@ interface Props extends React.HTMLAttributes<HTMLSpanElement> {
     display?: boolean;
 }
 /** Component for KaTeX code */
-declare const KTX: react.ForwardRefExoticComponent<Props & react.RefAttributes<Handle>>;
-
-export { Handle, KTX };
+export declare const KTX: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<Handle>>;
+export {};

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@liqvid/katex",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "KaTeX integration for Liqvid",
   "files": [
     "dist/*"
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
     },
     "./plain": {
-      "import": "./dist/plain.mjs",
-      "require": "./dist/plain.cjs"
+      "import": "./dist/esm/plain.mjs",
+      "require": "./dist/cjs/plain.cjs"
     }
   },
   "typesVersions": {
     "*": {
       "*": [
-        "./dist/*.d.ts"
+        "./dist/types/*.d.ts"
       ]
     }
   },
@@ -37,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.4",
-    "react": ">=17.0.0"
+    "@types/katex": ">=0.14.0",
+    "@types/react": ">=18.0.0",
+    "liqvid": "^2.1.7",
+    "react": ">=18.1.0"
   },
   "peerDependenciesMeta": {
     "liqvid": {
@@ -48,16 +48,19 @@
     }
   },
   "devDependencies": {
-    "liqvid": "^2.1.4"
+    "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 && node ../../build.mjs && rollup -c",
-    "build:postclean": "rm -rf dist/esm dist/types dist/tsconfig.tsbuildinfo",
+    "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.cjs

@@ -1,212 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime_js = require('react/jsx-runtime.js');
-var react$1 = require('@liqvid/utils/react');
-var liqvid = require('liqvid');
-var react = require('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).
- * @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;
-}
-
-/** Component for KaTeX code */
-const KTX$1 = 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_js.jsx("span", { ...attrs, ref: spanRef }));
-});
-
-/** Component for KaTeX code */
-const KTX = react.forwardRef(function KTX(props, ref) {
-    const { obstruct = "canplay canplaythrough", reparse = false, ...attrs } = props;
-    const plain = react.useRef();
-    const combined = react$1.combineRefs(plain, ref);
-    const player = liqvid.usePlayer();
-    react.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 (jsxRuntime_js.jsx(KTX$1, { ref: combined, ...attrs }));
-});
-
-/**
- * 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 === KTX$1);
-}
-/**
- * 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.d.ts

@@ -1,67 +0,0 @@
-/// <reference types="react" />
-import * as react from 'react';
-import * as katex from 'katex';
-
-/**
- * KTX element API
- */
-interface Handle$1 {
-    /** The underlying <span> element */
-    domElement: HTMLSpanElement;
-    /** Promise that resolves once typesetting is finished */
-    ready: Promise<void>;
-}
-interface Props$2 extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Whether to render in display style
-     * @default false
-     */
-    display?: boolean;
-}
-/** Component for KaTeX code */
-declare const KTX$1: react.ForwardRefExoticComponent<Props$2 & react.RefAttributes<Handle$1>>;
-
-interface Props$1 extends React.ComponentProps<typeof KTX$1> {
-    /**
-     * Player events to obstruct
-     * @default "canplay canplaythrough"
-    */
-    obstruct?: string;
-    /**
-     * Whether to reparse descendants for `during()` and `from()`
-     * @default false
-    */
-    reparse?: boolean;
-}
-/** Component for KaTeX code */
-declare const KTX: react.ForwardRefExoticComponent<Pick<Props$1, "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"> & react.RefAttributes<Handle$1>>;
-
-/**
- * Ready Promise
- */
-declare const KaTeXReady: Promise<[typeof katex, {
-    [key: string]: string;
-}]>;
-
-/** RenderGroup element API */
-interface Handle {
-    /** Promise that resolves once all KTX descendants have finished typesetting */
-    ready: Promise<void>;
-}
-interface Props {
-    /**
-     * Whether to reparse descendants for `during()` and `from()`
-     * @default false
-    */
-    reparse?: boolean;
-}
-/**
- * Wait for several things to be rendered
-*/
-declare const RenderGroup: react.ForwardRefExoticComponent<Props & react.RefAttributes<Handle>>;
-
-declare global {
-    const katex: typeof katex;
-}
-
-export { Handle$1 as Handle, KTX, KaTeXReady, RenderGroup };

package/dist/index.mjs

@@ -1,206 +0,0 @@
-import { jsx } from 'react/jsx-runtime.js';
-import { usePromise, combineRefs, recursiveMap } from '@liqvid/utils/react';
-import { usePlayer } from 'liqvid';
-import { forwardRef, useRef, useImperativeHandle, useEffect, isValidElement, cloneElement } from '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).
- * @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;
-}
-
-/** Component for KaTeX code */
-const KTX$1 = 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 }));
-});
-
-/** Component for KaTeX code */
-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(KTX$1, { ref: combined, ...attrs }));
-});
-
-/**
- * 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 || node.type === KTX$1);
-}
-/**
- * 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, KaTeXReady, RenderGroup };