feat(core): add version exposure and control

- Add version.ts to expose package version
- Include version in ZenUml class and main.ts
- Update types to include version information
- Modify vite config files to inject version during build

src/core.ts

@@ -6,6 +6,7 @@ import Store, { RenderMode } from "./store/Store";
 import DiagramFrame from "./components/DiagramFrame/DiagramFrame.vue";
 // @ts-ignore
 import SeqDiagram from "./components/DiagramFrame/SeqDiagram/SeqDiagram.vue";
+import { VERSION } from "./version";
 
 import "./assets/tailwind.css";
 import "./assets/tailwind-preflight.less";
@@ -46,6 +47,8 @@ interface IZenUml {
 }
 
 export default class ZenUml implements IZenUml {
+  static readonly version = VERSION;
+
   private readonly el: Element;
   private _code: string | undefined;
   private _theme: string | undefined;

src/main.ts

@@ -8,6 +8,9 @@ const elm = document.querySelector("pre.zenuml");
 // @ts-ignore
 const zenUml = new ZenUml(elm);
 
+// Expose ZenUML version to window for easy access in developer console
+// @ts-ignore
+window.ZENUML_VERSION = ZenUml.version;
 // @ts-ignore
 window.zenUml = zenUml;
 zenUml
@@ -20,6 +23,7 @@ zenUml
   })
   .then((r) => {
     logger.debug("render resolved", r);
+    console.log("ZenUML Core Version:", ZenUml.version);
   });
 // @ts-ignore
 window.parentLogger = parentLogger;

src/version.ts

@@ -0,0 +1 @@
+export const VERSION = import.meta.env.PACKAGE_VERSION;

vite.config.js

@@ -3,6 +3,7 @@ import { defineConfig } from "vite";
 import createVuePlugin from "@vitejs/plugin-vue";
 import { execSync } from "child_process";
 import svgLoader from "vite-svg-loader";
+import { readFileSync } from "fs";
 
 process.env.VITE_APP_GIT_HASH = process.env.DOCKER
   ? ""
@@ -11,6 +12,11 @@ process.env.VITE_APP_GIT_BRANCH = process.env.DOCKER
   ? ""
   : execSync("git branch --show-current").toString().trim();
 
+// Read version from package.json
+const packageJson = JSON.parse(
+  readFileSync(resolve(__dirname, "package.json"), "utf-8"),
+);
+
 function getCypressHtmlFiles() {
   const cypressFolder = resolve(__dirname, "cy");
   const strings = execSync(`find ${cypressFolder} -name '*.html'`)
@@ -49,6 +55,9 @@ export default defineConfig(({ mode }) => ({
     }),
     svgLoader(),
   ],
+  define: {
+    "import.meta.env.PACKAGE_VERSION": JSON.stringify(packageJson.version),
+  },
   test: {
     // used by vitest: https://vitest.dev/guide/#configuring-vitest
     environment: "jsdom",

vite.config.lib.js

@@ -4,6 +4,12 @@ import { defineConfig } from "vite";
 import createVuePlugin from "@vitejs/plugin-vue";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import svgLoader from "vite-svg-loader";
+import { readFileSync } from "fs";
+
+// Read version from package.json
+const packageJson = JSON.parse(
+  readFileSync(resolve(__dirname, "package.json"), "utf-8"),
+);
 
 export default defineConfig({
   build: {
@@ -57,5 +63,7 @@ export default defineConfig({
   ],
   define: {
     "process.env.NODE_ENV": '"production"',
+    // Replace version placeholder during build
+    "import.meta.env.PACKAGE_VERSION": JSON.stringify(packageJson.version),
   },
 });