release v0.0.3: add queue version rendering function

DarkHighness · Mar 2, 2022 · cfd18d3 · cfd18d3
1 parent 6d6b5e1
commit cfd18d3
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 24 deletions.
diff --git a/dist/vue3-mathjax.es.js b/dist/vue3-mathjax.es.js
@@ -1,4 +1,54 @@
 import { defineComponent, onMounted, getCurrentInstance, nextTick, onUpdated, onUnmounted, renderSlot } from "vue";
+function throttle(delay, noTrailing, callback, debounceMode) {
+  var timeoutID;
+  var cancelled = false;
+  var lastExec = 0;
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+  function cancel() {
+    clearExistingTimeout();
+    cancelled = true;
+  }
+  if (typeof noTrailing !== "boolean") {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = void 0;
+  }
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+    if (cancelled) {
+      return;
+    }
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+    function clear() {
+      timeoutID = void 0;
+    }
+    if (debounceMode && !timeoutID) {
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === void 0 && elapsed > delay) {
+      exec();
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === void 0 ? delay - elapsed : delay);
+    }
+  }
+  wrapper.cancel = cancel;
+  return wrapper;
+}
+function debounce(delay, atBegin, callback) {
+  return callback === void 0 ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
+}
 let mathJaxInjected = false;
 let mathJaxReady = false;
 let pendingQueue = [];
@@ -107,13 +157,48 @@ async function renderByMathJax(el) {
     }
   });
 }
+let waitingQueue = /* @__PURE__ */ new Set();
+let doRendering = () => {
+  let batch = [];
+  for (const el of waitingQueue.values()) {
+    batch.push(el);
+    window.MathJax.typeset(batch);
+  }
+  waitingQueue.clear();
+};
+let debouncedRendering = debounce(500, false, doRendering);
+function renderByMathJaxQueued(el, flush = false) {
+  if (!mathJaxReady) {
+    if (Array.isArray(el)) {
+      pendingQueue.concat(el.map((v) => {
+        return {
+          type: "sync",
+          el: v
+        };
+      }));
+    } else {
+      pendingQueue.push({ type: "sync", el });
+    }
+  }
+  if (Array.isArray(el)) {
+    el.forEach((v) => waitingQueue.add(v));
+  } else {
+    waitingQueue.add(el);
+  }
+  if (flush) {
+    debouncedRendering.cancel();
+    doRendering();
+  } else {
+    debouncedRendering();
+  }
+}
 const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     let el;
-    const renderMathJax = async () => {
+    const renderMathJax = () => {
       if (!el)
         return;
-      await renderByMathJax(el);
+      renderByMathJaxQueued(el);
     };
     onMounted(() => {
       var _a, _b, _c;

diff --git a/dist/vue3-mathjax.umd.js b/dist/vue3-mathjax.umd.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-mathjax",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "dist/vue3-mathjax.umd.js",
   "module": "dist/vue3-mathjax.es.js",
   "types": "types/index.d.ts",
@@ -25,10 +25,12 @@
     "format": "prettier --write src/**/*.{js,ts,vue,tsx}"
   },
   "dependencies": {
+    "throttle-debounce": "^3.0.1",
     "vue": "^3.2.25"
   },
   "devDependencies": {
     "@types/node": "^17.0.21",
+    "@types/throttle-debounce": "^2.1.0",
     "@vitejs/plugin-vue": "^2.2.0",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/MathJax.vue b/src/components/MathJax.vue
@@ -8,16 +8,16 @@ import {
   getCurrentInstance,
   nextTick,
   onUpdated,
-  onUnmounted
+  onUnmounted,
 } from "vue";
-import { renderByMathJax, initMathJax } from "../utils/util";
+import { initMathJax, renderByMathJaxQueued } from "../utils/util";
 
 let el: HTMLElement | null;
 
-const renderMathJax = async () => {
+const renderMathJax = () => {
   if (!el) return;
 
-  await renderByMathJax(el);
+  renderByMathJaxQueued(el);
 };
 
 onMounted(() => {

diff --git a/src/utils/util.ts b/src/utils/util.ts
@@ -1,3 +1,5 @@
+import { debounce } from "throttle-debounce";
+
 let mathJaxInjected = false;
 let mathJaxReady = false;
 let pendingQueue: (
@@ -42,7 +44,7 @@ export function initMathJax(options = {}, callback?: () => void) {
       inlineMath: [["$", "$"]],
       displayMath: [["$$", "$$"]],
       processEnvironments: true,
-      processRefs: true
+      processRefs: true,
     },
     options: {
       skipHtmlTags: [
@@ -53,28 +55,28 @@ export function initMathJax(options = {}, callback?: () => void) {
         "pre",
         "code",
         "annotation",
-        "annotation-xml"
+        "annotation-xml",
       ],
-      ignoreHtmlClass: "tex2jax_ignore"
+      ignoreHtmlClass: "tex2jax_ignore",
     },
     startup: {
       pageReady: () => {
         mathJaxReady = true;
 
-        mathJax().typeset(pendingQueue.map(v => v.el));
+        mathJax().typeset(pendingQueue.map((v) => v.el));
 
-        pendingQueue.forEach(v => {
+        pendingQueue.forEach((v) => {
           if (v.type == "async") v.callback();
         });
 
         pendingQueue.splice(0, pendingQueue.length);
 
         callback && callback();
-      }
+      },
     },
     svg: {
-      fontCache: "global"
-    }
+      fontCache: "global",
+    },
   };
 
   const mergedOptions = Object.assign({}, defaultOptions, options);
@@ -96,17 +98,17 @@ export function renderByMathJaxSync(el: HTMLElement | HTMLElement[]): void {
   if (!mathJaxReady) {
     if (Array.isArray(el)) {
       pendingQueue.concat(
-        el.map(v => {
+        el.map((v) => {
           return {
             type: "sync",
-            el: v
+            el: v,
           };
         })
       );
     } else {
       pendingQueue.push({
         type: "sync",
-        el
+        el,
       });
     }
 
@@ -129,22 +131,70 @@ export async function renderByMathJax(
         for (let i = 0; i < el.length; i++) {
           pendingQueue.push({
             type: "sync",
-            el: el[i]
+            el: el[i],
           });
         }
 
         pendingQueue.push({
           type: "async",
           el: el[el.length - 1],
-          callback: resolve
+          callback: resolve,
         });
       } else {
         pendingQueue.push({
           type: "async",
           el,
-          callback: resolve
+          callback: resolve,
         });
       }
     }
   });
 }
+
+let waitingQueue: Set<HTMLElement> = new Set<HTMLElement>();
+let doRendering = () => {
+  let batch: HTMLElement[] = [];
+
+  for (const el of waitingQueue.values()) {
+    batch.push(el);
+
+    (window as any).MathJax.typeset(batch);
+  }
+
+  waitingQueue.clear();
+};
+
+let debouncedRendering = debounce(500, false, doRendering);
+
+export function renderByMathJaxQueued(
+  el: HTMLElement | HTMLElement[],
+  flush: boolean = false
+) {
+  if (!mathJaxReady) {
+    if (Array.isArray(el)) {
+      pendingQueue.concat(
+        el.map((v) => {
+          return {
+            type: "sync",
+            el: v,
+          };
+        })
+      );
+    } else {
+      pendingQueue.push({ type: "sync", el });
+    }
+  }
+
+  if (Array.isArray(el)) {
+    el.forEach((v) => waitingQueue.add(v));
+  } else {
+    waitingQueue.add(el);
+  }
+
+  if (flush) {
+    debouncedRendering.cancel();
+    doRendering();
+  } else {
+    debouncedRendering();
+  }
+}
diff --git a/types/src/components/MathJax.vue.d.ts b/types/src/components/MathJax.vue.d.ts
@@ -1,5 +1,5 @@
 declare const _sfc_main: import("vue").DefineComponent<{}, {
     el: HTMLElement | null;
-    renderMathJax: () => Promise<void>;
+    renderMathJax: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _sfc_main;
diff --git a/types/src/index.d.ts b/types/src/index.d.ts
@@ -4,7 +4,7 @@ declare const _default: {
     install: typeof install;
     MathJax: import("vue").DefineComponent<{}, {
         el: HTMLElement | null;
-        renderMathJax: () => Promise<void>;
+        renderMathJax: () => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     initMathJax: typeof initMathJax;
     renderByMathJax: typeof renderByMathJax;

diff --git a/types/src/utils/util.d.ts b/types/src/utils/util.d.ts
@@ -5,3 +5,4 @@ export declare function isMathJaxInjected(): boolean;
 export declare function isMathJaxReady(): boolean;
 export declare function renderByMathJaxSync(el: HTMLElement | HTMLElement[]): void;
 export declare function renderByMathJax(el: HTMLElement | HTMLElement[]): Promise<void>;
+export declare function renderByMathJaxQueued(el: HTMLElement | HTMLElement[], flush?: boolean): void;