npm - @liqvid/katex - Versions diffs - 0.0.1 → 0.0.2 - Mend

@liqvid/katex 0.0.1 → 0.0.2

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 (17) hide show

package/dist/index.js +168 -4
package/dist/index.mjs +206 -0
package/dist/plain.js +117 -0
package/dist/plain.mjs +113 -0
package/dist/types/RenderGroup.d.ts +18 -0
package/dist/types/fancy.d.ts +17 -0
package/dist/{index.d.ts → types/index.d.ts} +2 -2
package/dist/{loading.d.ts → types/loading.d.ts} +3 -0
package/dist/types/plain.d.ts +20 -0
package/package.json +21 -9
package/dist/Blocking.d.ts +0 -2
package/dist/Blocking.js +0 -32
package/dist/NonBlocking.d.ts +0 -9
package/dist/NonBlocking.js +0 -60
package/dist/RenderGroup.d.ts +0 -10
package/dist/RenderGroup.js +0 -76
package/dist/loading.js +0 -54

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,168 @@
-export { KTXBlocking as KTX, KTXBlocking } from "./Blocking";
-export { KaTeXReady } from "./loading";
-export { KTXNonBlocking } from "./NonBlocking";
-export { RenderGroup } from "./RenderGroup";
+'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 ADDED Viewed

@@ -0,0 +1,206 @@
+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 ADDED Viewed

@@ -0,0 +1,117 @@
+'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 ADDED Viewed

@@ -0,0 +1,113 @@
+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 };

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

@@ -0,0 +1,18 @@
+import React from "react";
+/** 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
+*/
+export declare const RenderGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<Handle>>;
+export {};

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

@@ -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, "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 {};

package/dist/{index.d.ts → types/index.d.ts} RENAMED Viewed

@@ -1,6 +1,6 @@
-export { KTXBlocking as KTX, KTXBlocking } from "./Blocking";
+export { KTX } from "./fancy";
 export { KaTeXReady } from "./loading";
-export { Handle, KTXNonBlocking } from "./NonBlocking";
+export { Handle } from "./plain";
 export { RenderGroup } from "./RenderGroup";
 declare global {
     const katex: typeof katex;

package/dist/{loading.d.ts → types/loading.d.ts} RENAMED Viewed

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

package/dist/types/plain.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/**
+ * KTX element API
+ */
+export interface Handle {
+    /** The underlying <span> element */
+    domElement: HTMLSpanElement;
+    /** Promise that resolves once typesetting is finished */
+    ready: Promise<void>;
+}
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Whether to render in display style
+     * @default false
+     */
+    display?: boolean;
+}
+/** Component for KaTeX code */
+export declare const KTX: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<Handle>>;
+export {};

package/package.json CHANGED Viewed

@@ -1,17 +1,24 @@
 {
   "name": "@liqvid/katex",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "KaTeX integration for Liqvid",
   "files": [
     "dist/*"
   ],
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./plain": {
+      "import": "./dist/plain.mjs",
+      "require": "./dist/plain.js"
+    }
   },
   "typesVersions": {
     "*": {
       "*": [
-        "./dist/*"
+        "./dist/types/*"
       ]
     }
   },
@@ -20,6 +27,10 @@
     "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"
@@ -30,9 +41,10 @@
   "homepage": "https://github.com/liqvidjs/liqvid/tree/main/packages/katex",
   "license": "MIT",
   "peerDependencies": {
-    "@types/react": "^17.0.39",
-    "liqvid": "2.1.0-beta.3",
-    "react": "^17.0.2"
+    "@types/katex": "^0.11.1",
+    "@types/react": ">=17.0.0",
+    "liqvid": ">=2.1.0-beta.4",
+    "react": ">=17.0.0"
   },
   "peerDependenciesMeta": {
     "liqvid": {
@@ -46,12 +58,12 @@
     "@yuri/eslint-config": "^1.0.1",
     "eslint": "^8.10.0",
     "eslint-plugin-react": "^7.29.3",
-    "liqvid": "2.1.0-beta.3",
+    "liqvid": ">=2.1.0-beta.4",
     "react": "^17.0.2",
+    "rollup": "^2.70.0",
     "typescript": "^4.6.2"
   },
   "dependencies": {
-    "@types/events": "^3.0.0",
-    "@types/katex": "^0.11.1"
+    "@liqvid/utils": "^1.3.0"
   }
 }

package/dist/Blocking.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- /// <reference types="react" />
2	- export declare const KTXBlocking: import("react").ForwardRefExoticComponent<Pick<Props, string \| number \| symbol> & import("react").RefAttributes<Handle>>;

package/dist/Blocking.js DELETED Viewed

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { usePlayer } from "liqvid";
-import { forwardRef, useEffect, useMemo, useRef } from "react";
-import { KTXNonBlocking } from "./NonBlocking";
-export const KTXBlocking = forwardRef(function KTX(props, ref) {
-    const player = usePlayer();
-    const innerRef = useRef();
-    if (typeof ref === "function") {
-        ref(innerRef.current);
-    }
-    else if (ref) {
-        ref.current = innerRef.current;
-    }
-    const resolve = useRef(null);
-    useMemo(() => {
-        const promise = new Promise((res) => {
-            resolve.current = res;
-        });
-        player.obstruct("canplay", promise);
-        player.obstruct("canplaythrough", promise);
-    }, []);
-    useEffect(() => {
-        if (typeof ref === "function") {
-            ref(innerRef.current);
-        }
-        else if (ref) {
-            ref.current = innerRef.current;
-        }
-        innerRef.current.ready.then(() => resolve.current());
-    }, []);
-    return (_jsx(KTXNonBlocking, Object.assign({ ref: innerRef }, props)));
-});

package/dist/NonBlocking.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface Handle {
-    domElement: HTMLSpanElement;
-    ready: Promise<void>;
-}
-export declare const KTXNonBlocking: import("react").ForwardRefExoticComponent<{
-    display?: boolean;
-    reparse?: boolean;
-} & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<Handle>>;

package/dist/NonBlocking.js DELETED Viewed

@@ -1,60 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { usePlayer } from "liqvid";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
-import { KaTeXReady } from "./loading";
-const implementation = function KTX(props, ref) {
-    const spanRef = useRef();
-    const { children, display, reparse } = props, attrs = __rest(props, ["children", "display", "reparse"]);
-    const resolveRef = useRef();
-    const player = usePlayer();
-    const ready = useMemo(() => {
-        return new Promise((resolve) => {
-            resolveRef.current = resolve;
-        });
-    }, []);
-    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
-            });
-            const child = spanRef.current.firstElementChild;
-            for (let i = 0, len = child.classList.length; i < len; ++i) {
-                spanRef.current.classList.add(child.classList.item(i));
-            }
-            while (child.childNodes.length > 0) {
-                spanRef.current.appendChild(child.firstChild);
-            }
-            child.remove();
-            if (reparse) {
-                player.reparseTree(spanRef.current);
-            }
-            resolveRef.current();
-        });
-    }, [children]);
-    if (display) {
-        if (!attrs.style)
-            attrs.style = {};
-        attrs.style.display = "block";
-    }
-    return (_jsx("span", Object.assign({}, attrs, { ref: spanRef })));
-};
-export const KTXNonBlocking = forwardRef(implementation);

package/dist/RenderGroup.d.ts DELETED Viewed

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-interface Handle {
-    ready: Promise<void>;
-}
-interface Props {
-    reparse?: boolean;
-}
-export declare const RenderGroup: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<Handle>>;
-export declare function recursiveMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): React.ReactNode;
-export {};

package/dist/RenderGroup.js DELETED Viewed

@@ -1,76 +0,0 @@
-import { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useImperativeHandle } from "react";
-import { usePlayer } from "liqvid";
-import { KTXNonBlocking } from "./NonBlocking";
-import { KTXBlocking } from "./Blocking";
-export const RenderGroup = forwardRef(function RenderGroup(props, ref) {
-    const [ready, resolve] = usePromise();
-    useImperativeHandle(ref, () => ({ ready }));
-    const elements = useRef([]);
-    const promises = useRef([]);
-    const player = usePlayer();
-    useEffect(() => {
-        Promise.all(promises.current).then(() => {
-            if (props.reparse) {
-                player.reparseTree(leastCommonAncestor(elements.current));
-            }
-            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);
-                    if (typeof originalRef === "function") {
-                        originalRef(ref);
-                    }
-                    else if (originalRef && typeof originalRef === "object") {
-                        originalRef.current = ref;
-                    }
-                }
-            });
-        }
-        return node;
-    });
-});
-function shouldInspect(node) {
-    return isValidElement(node) && typeof node.type === "object" && (node.type === KTXBlocking || node.type === KTXNonBlocking);
-}
-export function recursiveMap(children, fn) {
-    return Children.map(children, (child) => {
-        if (!isValidElement(child)) {
-            return child;
-        }
-        if ("children" in child.props) {
-            child = cloneElement(child, {
-                children: recursiveMap(child.props.children, fn)
-            });
-        }
-        return fn(child);
-    });
-}
-function usePromise(deps = []) {
-    const resolve = useRef();
-    const reject = useRef();
-    const promise = useMemo(() => new Promise((res, rej) => {
-        resolve.current = res;
-        reject.current = rej;
-    }), deps);
-    return [promise, resolve.current, reject.current];
-}
-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/loading.js DELETED Viewed

@@ -1,54 +0,0 @@
-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));
-    }
-});
-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));
-});
-export const KaTeXReady = Promise.all([KaTeXLoad, KaTeXMacros]);
-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;
-}