@elmethis/vue 0.2.0 → 0.2.1

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 (3) hide show
  1. package/dist/components/code/ElmMermaid.vue2.mjs +56 -20
  2. package/dist/components/code/ElmMermaid.vue3.mjs +4 -4
  3. package/package.json +8 -8
package/dist/components/code/ElmMermaid.vue2.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, useCssModule, ref, useTemplateRef, watch, onMounted, createElementBlock, openBlock, normalizeClass } from "vue";
1
+ import { defineComponent, ref, useTemplateRef, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass } from "vue";
2
2
  const _sfc_main = /* @__PURE__ */ defineComponent({
3
3
  __name: "ElmMermaid",
4
4
  props: {
@@ -6,40 +6,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
6
6
  },
7
7
  setup(__props) {
8
8
  const props = __props;
9
- const classes = useCssModule();
10
9
  const isRendered = ref(false);
11
10
  const elementRef = useTemplateRef("svgRef");
11
+ const componentId = `mermaid-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
12
+ let renderCount = 0;
13
+ const globalMermaidCache = {
14
+ instance: null,
15
+ svgCache: /* @__PURE__ */ new Map()
16
+ // Cache rendered SVGs by code hash
17
+ };
18
+ const getCacheKey = (code) => {
19
+ let hash = 0;
20
+ for (let i = 0; i < code.length; i++) {
21
+ const char = code.charCodeAt(i);
22
+ hash = (hash << 5) - hash + char;
23
+ hash = hash & hash;
24
+ }
25
+ return `mermaid-${hash}`;
26
+ };
12
27
  const renderMermaid = async () => {
13
28
  if (!elementRef.value) return;
14
29
  isRendered.value = false;
15
- const { default: mermaid } = await import("mermaid");
16
30
  try {
17
- mermaid.initialize({
18
- startOnLoad: false,
19
- theme: "base",
20
- themeVariables: {
21
- mainBkg: "#fbfcff",
22
- lineColor: "#606875",
23
- primaryColor: "#6c7483",
24
- secondaryColor: "#e9dec5",
25
- tertiaryColor: "#f5f6f8",
26
- tertiaryBorderColor: "#e2d4b2",
27
- tertiaryTextColor: "#b69545",
28
- // Sequence Diagram
29
- signalColor: "#949ba7"
30
- // default: textColor
31
- }
32
- });
33
- const { svg } = await mermaid.render(classes.mermaid, props.code);
31
+ const cacheKey = getCacheKey(props.code);
32
+ if (globalMermaidCache.svgCache.has(cacheKey)) {
33
+ console.log("Using cached SVG for:", cacheKey);
34
+ elementRef.value.innerHTML = globalMermaidCache.svgCache.get(cacheKey);
35
+ isRendered.value = true;
36
+ return;
37
+ }
38
+ if (!globalMermaidCache.instance) {
39
+ console.log("Initializing mermaid for the first time");
40
+ const { default: mermaid } = await import("mermaid");
41
+ mermaid.initialize({
42
+ startOnLoad: false,
43
+ theme: "base",
44
+ themeVariables: {
45
+ mainBkg: "#fbfcff",
46
+ lineColor: "#606875",
47
+ primaryColor: "#6c7483",
48
+ secondaryColor: "#e9dec5",
49
+ tertiaryColor: "#f5f6f8",
50
+ tertiaryBorderColor: "#e2d4b2",
51
+ tertiaryTextColor: "#b69545",
52
+ signalColor: "#949ba7"
53
+ }
54
+ });
55
+ globalMermaidCache.instance = mermaid;
56
+ }
57
+ const renderId = `${componentId}-${renderCount++}`;
58
+ const { svg } = await globalMermaidCache.instance.render(
59
+ renderId,
60
+ props.code
61
+ );
62
+ globalMermaidCache.svgCache.set(cacheKey, svg);
63
+ console.log("Cached new SVG for:", cacheKey);
34
64
  elementRef.value.innerHTML = svg;
35
65
  isRendered.value = true;
36
66
  } catch (error) {
37
67
  console.error("Mermaid render error:", error);
38
68
  elementRef.value.innerHTML = `<pre>${props.code}</pre>`;
69
+ isRendered.value = true;
39
70
  }
40
71
  };
41
72
  watch(() => props.code, renderMermaid);
42
73
  onMounted(renderMermaid);
74
+ onUnmounted(() => {
75
+ if (elementRef.value) {
76
+ elementRef.value.innerHTML = "";
77
+ }
78
+ });
43
79
  return (_ctx, _cache) => {
44
80
  return openBlock(), createElementBlock("div", {
45
81
  ref: "svgRef",
package/dist/components/code/ElmMermaid.vue3.mjs CHANGED
@@ -3,16 +3,16 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- elementStyle.appendChild(document.createTextNode("._mermaid_1r2yy_1{display:block}._mermaid_1r2yy_1::-moz-selection{color:#cccfd5;background-color:#494f59}._mermaid_1r2yy_1::selection{color:#cccfd5;background-color:#494f59}._raw_1r2yy_9{opacity:0}._rendered_1r2yy_13{opacity:1}"));
6
+ elementStyle.appendChild(document.createTextNode("._mermaid_36rwq_1{display:block}._mermaid_36rwq_1::-moz-selection{color:#cccfd5;background-color:#494f59}._mermaid_36rwq_1::selection{color:#cccfd5;background-color:#494f59}._raw_36rwq_9{opacity:0}._rendered_36rwq_13{opacity:1;transition:opacity .2s ease-in-out}"));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
10
10
  console.error("vite-plugin-css-injected-by-js", e);
11
11
  }
12
12
  })();
13
- const mermaid = "_mermaid_1r2yy_1";
14
- const raw = "_raw_1r2yy_9";
15
- const rendered = "_rendered_1r2yy_13";
13
+ const mermaid = "_mermaid_36rwq_1";
14
+ const raw = "_raw_36rwq_9";
15
+ const rendered = "_rendered_36rwq_13";
16
16
  const style0 = {
17
17
  mermaid,
18
18
  raw,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elmethis/vue",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -26,7 +26,7 @@
26
26
  "@mdi/js": "^7.4.47",
27
27
  "@vueuse/core": "^14.1.0",
28
28
  "katex": "^0.16.27",
29
- "lodash-es": "^4.17.21",
29
+ "lodash-es": "^4.17.22",
30
30
  "marked": "^17.0.1",
31
31
  "mermaid": "^11.12.2",
32
32
  "nanoid": "^5.1.6",
@@ -35,23 +35,23 @@
35
35
  },
36
36
  "devDependencies": {
37
37
  "@ag-ui/core": "^0.0.42",
38
- "@notionhq/client": "^5.4.0",
39
- "@storybook/vue3-vite": "10.1.6",
38
+ "@notionhq/client": "^5.6.0",
39
+ "@storybook/vue3-vite": "10.1.10",
40
40
  "@types/json-schema": "^7.0.15",
41
41
  "@types/katex": "^0.16.7",
42
42
  "@types/lodash-es": "^4.17.12",
43
43
  "@types/prismjs": "^1.26.5",
44
- "@vitejs/plugin-vue": "^6.0.2",
44
+ "@vitejs/plugin-vue": "^6.0.3",
45
45
  "csstype": "^3.2.3",
46
46
  "jarkup-ts": "^0.6.0",
47
47
  "openapi-types": "^12.1.3",
48
48
  "postcss": "^8.5.6",
49
49
  "postcss-preset-env": "^10.5.0",
50
- "sass": "^1.95.1",
51
- "vite": "^7.2.7",
50
+ "sass": "^1.97.1",
51
+ "vite": "^7.3.0",
52
52
  "vite-plugin-css-injected-by-js": "^3.5.2",
53
53
  "vite-plugin-dts": "^4.5.4",
54
- "vue-tsc": "^3.1.8"
54
+ "vue-tsc": "^3.2.1"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "vue": "^3.4.0"