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

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

package/LICENSE ADDED Viewed

@@ -0,0 +1,9 @@
+MIT License
+Copyright (c) Yuri Sulyma
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,31 @@
+# @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}
+```

package/dist/Blocking.d.ts ADDED Viewed

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

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

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

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

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

@@ -0,0 +1,76 @@
+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/index.d.ts ADDED Viewed

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

package/dist/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { KTXBlocking as KTX, KTXBlocking } from "./Blocking";
+export { KaTeXReady } from "./loading";
+export { KTXNonBlocking } from "./NonBlocking";
+export { RenderGroup } from "./RenderGroup";

package/dist/loading.d.ts ADDED Viewed

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

package/dist/loading.js ADDED Viewed

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

package/package.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "name": "@liqvid/katex",
+  "version": "0.0.1",
+  "description": "KaTeX integration for Liqvid",
+  "files": [
+    "dist/*"
+  ],
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*"
+      ]
+    }
+  },
+  "author": "Yuri Sulyma <yuri@liqvidjs.org>",
+  "keywords": [
+    "liqvid",
+    "katex"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liqvidjs/liqvid.git"
+  },
+  "bugs": {
+    "url": "https://github.com/liqvidjs/liqvid/issues"
+  },
+  "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"
+  },
+  "peerDependenciesMeta": {
+    "liqvid": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "@yuri/eslint-config": "^1.0.1",
+    "eslint": "^8.10.0",
+    "eslint-plugin-react": "^7.29.3",
+    "liqvid": "2.1.0-beta.3",
+    "react": "^17.0.2",
+    "typescript": "^4.6.2"
+  },
+  "dependencies": {
+    "@types/events": "^3.0.0",
+    "@types/katex": "^0.11.1"
+  }
+}

@liqvid/katex 0.0.1