@dative-gpi/foundation-shared-components 1.0.193-value-data-composable → 1.0.194-dynamic-vue-app

package/composables/index.ts

@@ -5,6 +5,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
+export * from "./useDynamicVueApp";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
 export * from "./useRules";

package/composables/useDynamicVueApp.ts

@@ -0,0 +1,68 @@
+import { uuidv4 } from "@dative-gpi/bones-ui";
+import { createApp, nextTick, onBeforeUnmount, type App, type Component } from "vue";
+
+export function useDynamicVueApp<TProps extends Record<string, any>>(
+  component: Component,
+  options?: { registerPlugins?: (app: App) => void }
+) {
+  let app: App | null = null;
+  let isMounting = false;
+
+  const id = uuidv4();
+  
+
+  const mount = async (props: TProps): Promise<void> => {
+    if (isMounting) {
+      return;
+    }
+
+    isMounting = true;
+    
+    try {
+        await nextTick();
+
+        const mountPoint = document.getElementById(id);
+        if (!mountPoint) {
+            return;
+        }
+
+        unmount();
+
+        app = createApp(component, props);
+        options?.registerPlugins?.(app);
+        app.mount(mountPoint);
+    } finally {
+        isMounting = false;
+    }
+  };
+
+  const unmount = () => {
+    if (!app) {
+      return;
+    }
+    app.unmount();
+    app = null;
+  };
+
+  const sanitizeStyle = (style?: string): string => {
+    if (!style) {
+      return "";
+    }
+    return style
+      .replace(/"/g, "&quot;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  };
+
+  const getHtml = (style?: string) => {
+    const safeStyle = sanitizeStyle(style);
+    const styleAttribute = safeStyle ? ` style="${safeStyle}"` : "";
+    return `<div id="${id}"${styleAttribute}></div>`;
+  };
+
+  onBeforeUnmount(() => {
+    unmount();
+  });
+
+  return { mount, unmount, getHtml };
+}

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.193-value-data-composable",
+  "version": "1.0.194-dynamic-vue-app",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.193-value-data-composable",
-    "@dative-gpi/foundation-shared-services": "1.0.193-value-data-composable"
+    "@dative-gpi/foundation-shared-domain": "1.0.194-dynamic-vue-app",
+    "@dative-gpi/foundation-shared-services": "1.0.194-dynamic-vue-app"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "e6d7d1fd7a3bc060cebb335596f4d95a6ce91356"
+  "gitHead": "15437d51d163b21dd5eaf10397da1108571f4b1f"
 }