@elmethis/core 1.0.0-alpha.154 → 1.0.0-alpha.156

package/dist/components/code/ElmKatex.vue2.mjs

@@ -1,6 +1,8 @@
-import { defineComponent, ref, onMounted, onUpdated, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createTextVNode, toDisplayString } from "vue";
-import katex from "katex";
+import { defineComponent, ref, onServerPrefetch, onMounted, onUpdated, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementBlock, toDisplayString } from "vue";
+import { renderToString } from "katex";
 /* empty css                                                                            */
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ElmKatex",
   props: {
@@ -9,32 +11,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const targetRef = ref(null);
+    const isRendered = ref(false);
+    const html = ref(props.expression);
     const render = () => {
-      if (targetRef.value) {
+      if (!isRendered.value) {
         try {
-          katex.render(props.expression, targetRef.value, {
+          html.value = renderToString(props.expression, {
             displayMode: props.block
           });
+          isRendered.value = true;
         } catch (err) {
           console.error("KaTeX rendering error:", err);
         }
       }
     };
+    onServerPrefetch(render);
     onMounted(render);
     onUpdated(render);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(props.block ? "div" : "span"), {
         class: normalizeClass(_ctx.$style.katex),
         key: JSON.stringify(props),
-        ref_key: "targetRef",
-        ref: targetRef,
+        ref: "targetRef",
         style: normalizeStyle({
           "--margin-block": props.block ? "3rem" : void 0
         })
       }, {
         default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.expression), 1)
+          isRendered.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            innerHTML: html.value
+          }, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.expression), 1))
         ]),
         _: 1
       }, 8, ["class", "style"]);

package/dist/components/code/ElmShikiHighlighter.vue2.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onMounted, onServerPrefetch, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
-import { createHighlighter } from "shiki";
+import { getHighlighterSingleton } from "./shikiInstance.mjs";
 const _hoisted_1 = ["innerHTML"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ElmShikiHighlighter",
@@ -13,10 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const html = ref(`<pre>${props.code}</pre>`);
     const render = async () => {
       if (!isRendered.value) {
-        const highlighter = await createHighlighter({
-          langs: [props.language],
-          themes: ["vitesse-light", "vitesse-dark"]
-        });
+        const highlighter = await getHighlighterSingleton();
         html.value = highlighter.codeToHtml(props.code, {
           lang: props.language,
           themes: {

package/dist/components/code/shikiInstance.d.ts

@@ -0,0 +1,2 @@
+import { Highlighter } from 'shiki';
+export declare function getHighlighterSingleton(): Promise<Highlighter>;

package/dist/components/code/shikiInstance.mjs

@@ -0,0 +1,75 @@
+import { createHighlighter } from "shiki";
+let highlighterPromise = null;
+function getHighlighterSingleton() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      langs: [
+        "abap",
+        "bash",
+        "c",
+        "clojure",
+        "coffeescript",
+        "c++",
+        "c#",
+        "css",
+        "dart",
+        "diff",
+        "docker",
+        "elixir",
+        "elm",
+        "erlang",
+        "f#",
+        "gherkin",
+        "glsl",
+        "go",
+        "graphql",
+        "groovy",
+        "haskell",
+        "html",
+        "java",
+        "javascript",
+        "json",
+        "julia",
+        "kotlin",
+        "latex",
+        "less",
+        "lisp",
+        "lua",
+        "makefile",
+        "markdown",
+        "matlab",
+        "mermaid",
+        "nix",
+        "objective-c",
+        "ocaml",
+        "pascal",
+        "perl",
+        "php",
+        "plaintext",
+        "powershell",
+        "prolog",
+        "protobuf",
+        "python",
+        "r",
+        "ruby",
+        "rust",
+        "sass",
+        "scala",
+        "scheme",
+        "scss",
+        "shell",
+        "sql",
+        "swift",
+        "typescript",
+        "wasm",
+        "xml",
+        "yaml"
+      ],
+      themes: ["vitesse-light", "vitesse-dark"]
+    });
+  }
+  return highlighterPromise;
+}
+export {
+  getHighlighterSingleton
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/core",
-  "version": "1.0.0-alpha.154",
+  "version": "1.0.0-alpha.156",
   "publishConfig": {
     "access": "public"
   },