release 0.0.2: make the srcipt reloadable

dist/vue3-mathjax.es.js

@@ -1,11 +1,17 @@
-import { defineComponent, onMounted, getCurrentInstance, nextTick, onUpdated, renderSlot } from "vue";
+import { defineComponent, onMounted, getCurrentInstance, nextTick, onUpdated, onUnmounted, renderSlot } from "vue";
 let mathJaxInjected = false;
 let mathJaxReady = false;
 let pendingQueue = [];
 function mathJax() {
   return window.MathJax;
 }
 function injectMathJaxScript() {
+  const instance = mathJax();
+  if (!instance || !instance.version) {
+    mathJaxInjected = false;
+    mathJaxReady = false;
+    pendingQueue.splice(0, pendingQueue.length);
+  }
   if (!mathJaxInjected) {
     const mathJaxScript = document.createElement("script");
     mathJaxScript.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
@@ -43,6 +49,7 @@ function initMathJax(options = {}, callback) {
           if (v.type == "async")
             v.callback();
         });
+        pendingQueue.splice(0, pendingQueue.length);
         callback && callback();
       }
     },
@@ -104,9 +111,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     let el;
     const renderMathJax = async () => {
-      if (el) {
-        await renderByMathJax(el);
-      }
+      if (!el)
+        return;
+      await renderByMathJax(el);
     };
     onMounted(() => {
       var _a, _b, _c;
@@ -119,9 +126,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onUpdated(() => {
       var _a, _b, _c;
       el = (_c = (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode) == null ? void 0 : _b.el) == null ? void 0 : _c.parentNode;
-      nextTick(() => {
-        renderMathJax();
-      });
+      renderMathJax();
+    });
+    onUnmounted(() => {
+      el = null;
     });
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default");

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-mathjax",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/vue3-mathjax.umd.js",
   "module": "dist/vue3-mathjax.es.js",
   "types": "types/index.d.ts",

src/App.vue

@@ -1,14 +1,39 @@
 <template>
   <math-jax>
     <div class="container">
-      <p>This is a vue component for $MathJax$</p>
+      <p>This is a vue component for $MathJax \, 3$</p>
       <p>Instead of using <strong>span</strong> and pass formula as prop</p>
       <p>But using <strong>slots</strong></p>
-      <p>$$c^2 = a ^ 2 + b ^ 2$$</p>
+      <p>{{ formula }}</p>
     </div>
   </math-jax>
 </template>
 
+<script lang="ts" setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+
+let idx = ref(0);
+let formulas = ref([
+  "$$\\alpha \\beta \\gamma \\rho \\sigma \\delta \\epsilon$$",
+  "$$c^2 = a ^ 2 + b ^ 2$$",
+  "$$e^{ \\pm i\\theta } = \\cos \\theta \\pm i\\sin \\theta$$",
+  "$$	\\int \\oint \\sum \\prod$$"
+]);
+let timer: any;
+
+let formula = computed(() => formulas.value[idx.value]);
+
+onMounted(() => {
+  timer = setInterval(() => {
+    idx.value = (idx.value + 1) % formulas.value.length;
+  }, 3000);
+});
+
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
 <style>
 .container {
   display: flex;

src/components/MathJax.vue

@@ -3,15 +3,21 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, getCurrentInstance, onUpdated, nextTick } from "vue";
+import {
+  onMounted,
+  getCurrentInstance,
+  nextTick,
+  onUpdated,
+  onUnmounted
+} from "vue";
 import { renderByMathJax, initMathJax } from "../utils/util";
 
-let el: HTMLElement;
+let el: HTMLElement | null;
 
 const renderMathJax = async () => {
-  if (el) {
-    await renderByMathJax(el);
-  }
+  if (!el) return;
+
+  await renderByMathJax(el);
 };
 
 onMounted(() => {
@@ -27,8 +33,10 @@ onMounted(() => {
 onUpdated(() => {
   el = getCurrentInstance()?.vnode?.el?.parentNode;
 
-  nextTick(() => {
-    renderMathJax();
-  });
+  renderMathJax();
+});
+
+onUnmounted(() => {
+  el = null;
 });
 </script>

src/index.ts

@@ -2,7 +2,7 @@ import MathJax from "./components/MathJax.vue";
 import {
   initMathJax,
   renderByMathJax,
-  renderByMathJaxSync,
+  renderByMathJaxSync
 } from "./utils/util";
 
 function install(Vue: any) {
@@ -14,5 +14,5 @@ export default {
   MathJax,
   initMathJax,
   renderByMathJax,
-  renderByMathJaxSync,
+  renderByMathJaxSync
 };

src/main.ts

@@ -1,7 +1,8 @@
 import { createApp } from "vue";
 
-// @ts-ignore
-import MathJax from "../dist/vue3-mathjax.es.js";
+import MathJax from "./index";
 import App from "./App.vue";
 
-createApp(App).use(MathJax).mount("#app");
+createApp(App)
+  .use(MathJax)
+  .mount("#app");

src/utils/util.ts

@@ -14,6 +14,15 @@ export function mathJax(): any {
 }
 
 export function injectMathJaxScript() {
+  // test if unloaded
+  const instance = mathJax();
+
+  if (!instance || !instance.version) {
+    mathJaxInjected = false;
+    mathJaxReady = false;
+    pendingQueue.splice(0, pendingQueue.length);
+  }
+
   if (!mathJaxInjected) {
     const mathJaxScript = document.createElement("script");
 
@@ -33,7 +42,7 @@ export function initMathJax(options = {}, callback?: () => void) {
       inlineMath: [["$", "$"]],
       displayMath: [["$$", "$$"]],
       processEnvironments: true,
-      processRefs: true,
+      processRefs: true
     },
     options: {
       skipHtmlTags: [
@@ -44,26 +53,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);
@@ -85,17 +96,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
       });
     }
 
@@ -118,20 +129,20 @@ 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
         });
       }
     }

types/src/components/MathJax.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _sfc_main: import("vue").DefineComponent<{}, {
-    el: HTMLElement;
+    el: HTMLElement | null;
     renderMathJax: () => Promise<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;

types/src/index.d.ts

@@ -3,7 +3,7 @@ declare function install(Vue: any): void;
 declare const _default: {
     install: typeof install;
     MathJax: import("vue").DefineComponent<{}, {
-        el: HTMLElement;
+        el: HTMLElement | null;
         renderMathJax: () => Promise<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;