fix: use Plurimath as asset

Plurimath opal cannot be minified, esbuilded and bundled without causing unexpected exceptions
So copy js in public folder and import plurimath from here

Author: sharevb

components.d.ts

@@ -147,14 +147,24 @@ declare module '@vue/runtime-core' {
     IcalParser: typeof import('./src/tools/ical-parser/ical-parser.vue')['default']
     IcoConverter: typeof import('./src/tools/ico-converter/ico-converter.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
@@ -242,20 +252,30 @@ declare module '@vue/runtime-core' {
     NanoMemo: typeof import('./src/tools/nano-memo/nano-memo.vue')['default']
     'NanoMemo.content': typeof import('./src/tools/nano-memo/nano-memo.content.md')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NginxFormatter: typeof import('./src/tools/nginx-formatter/nginx-formatter.vue')['default']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']

package.json

@@ -47,7 +47,6 @@
     "@it-tools/oggen": "^1.3.0",
     "@kenjiuno/decompressrtf": "^0.1.4",
     "@kenjiuno/msgreader": "^1.22.0",
-    "@plurimath/plurimath": "^0.2.0",
     "@regexper/render": "^1.0.0",
     "@sindresorhus/slugify": "^2.2.1",
     "@tabler/icons-vue": "^3.20.0",

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+import "./plurimath-opal.js";
+Opal.require("plurimath");
+window.Plurimath = class Plurimath {
+    constructor(data, format) {
+        this.data = Opal.Plurimath.Math.$parse(data, format);
+    }
+    toAsciimath() {
+        return this.data.$to_asciimath();
+    }
+    toLatex() {
+        return this.data.$to_latex();
+    }
+    toMathml() {
+        return this.data.$to_mathml();
+    }
+    toHtml() {
+        return this.data.$to_html();
+    }
+    toOmml() {
+        return this.data.$to_omml();
+    }
+    toDisplay(lang) {
+        return this.data.$to_display(lang);
+    }
+}

public/plurimath/index.js

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import Plurimath from '@plurimath/plurimath';
+import { useScriptTag } from '@vueuse/core';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
 
+const { load: loadPlurimath } = useScriptTag('/plurimath/index.js', undefined, { type: 'module', manual: true });
+
 const formats = [
   { value: 'asciimath', label: 'AsciiMath' },
   { value: 'latex', label: 'Latex' },
@@ -17,12 +19,13 @@ const target = computedAsync(async () => {
   const sourceValue = source.value;
   const sourceFormatValue = sourceFormat.value;
   const targetFormatValue = targetFormat.value;
-  if (sourceValue === '') {
+  if (!sourceValue) {
     return '';
   }
   if (sourceFormatValue === targetFormatValue) {
     return sourceValue;
   }
+  await loadPlurimath();
   return new Promise<string>((resolve, _reject) => {
     try {
       const formula = new Plurimath(sourceValue, sourceFormatValue);
@@ -80,6 +83,6 @@ const target = computedAsync(async () => {
       :options="formats"
       placeholder="Source format"
     />
-    <textarea-copyable v-if="target !== ''" :value="target" :language="targetFormat" />
+    <textarea-copyable v-if="target" :value="target" :language="targetFormat" word-wrap />
   </div>
 </template>

public/plurimath/plurimath-opal.js

@@ -0,0 +1,15 @@
+class Plurimath {
+    constructor(data: string, format: string);
+    toAsciimath(): string;
+    toLatex(): string;
+    toMathml(): string;
+    toHtml(): string;
+    toOmml(): string;
+    toDisplay(lang: string): string;
+}
+
+declare global {
+    interface Window {
+        Plurimath: Plurimath
+    }
+  }