@gxp-dev/tools 2.0.63 → 2.0.64

package/runtime/dev-tools/index.js

@@ -1,6 +1,6 @@
 // GxP Dev Tools Components
-export { default as DevToolsModal } from './DevToolsModal.vue';
-export { default as StoreInspector } from './StoreInspector.vue';
-export { default as LayoutSwitcher } from './LayoutSwitcher.vue';
-export { default as SocketSimulator } from './SocketSimulator.vue';
-export { default as MockDataEditor } from './MockDataEditor.vue';
+export { default as DevToolsModal } from "./DevToolsModal.vue"
+export { default as StoreInspector } from "./StoreInspector.vue"
+export { default as LayoutSwitcher } from "./LayoutSwitcher.vue"
+export { default as SocketSimulator } from "./SocketSimulator.vue"
+export { default as MockDataEditor } from "./MockDataEditor.vue"

package/runtime/fallback-layouts/PrivateLayout.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script setup>
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 defineProps({
 	usrLang: { type: String, default: "" },
 	portalSettings: { type: Object, default: () => ({}) },
 	portalLanguage: { type: Object, default: () => ({}) },
 	portalNavigation: { type: Array, default: () => [] },
 	portalAssets: { type: Object, default: () => ({}) },
-});
+})
 </script>

package/runtime/fallback-layouts/PublicLayout.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script setup>
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 defineProps({
 	usrLang: { type: String, default: "" },
 	portalSettings: { type: Object, default: () => ({}) },
 	portalLanguage: { type: Object, default: () => ({}) },
 	portalNavigation: { type: Array, default: () => [] },
 	portalAssets: { type: Object, default: () => ({}) },
-});
+})
 </script>

package/runtime/fallback-layouts/SystemLayout.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script setup>
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 defineProps({
 	usrLang: { type: String, default: "" },
 	portalSettings: { type: Object, default: () => ({}) },
 	portalLanguage: { type: Object, default: () => ({}) },
 	portalNavigation: { type: Array, default: () => [] },
 	portalAssets: { type: Object, default: () => ({}) },
-});
+})
 </script>

package/runtime/gxpStringsPlugin.js

@@ -28,7 +28,7 @@
  * 4. Fall back to the original if no value found
  */
 
-import { watch } from "vue";
+import { watch } from "vue"
 
 /**
  * Create the GxP Strings Plugin
@@ -36,7 +36,7 @@ import { watch } from "vue";
  * @returns {Object} Vue plugin
  */
 export function createGxpStringsPlugin(store, options = {}) {
-	const devServerBaseUrl = (options.devServerBaseUrl || "").replace(/\/+$/, "");
+	const devServerBaseUrl = (options.devServerBaseUrl || "").replace(/\/+$/, "")
 
 	return {
 		install(app) {
@@ -44,95 +44,103 @@ export function createGxpStringsPlugin(store, options = {}) {
 			app.directive("gxp-string", {
 				// Called when the element is mounted
 				mounted(el, binding) {
-					const key = binding.value || el.getAttribute("gxp-string");
-					if (!key) return;
+					const key = binding.value || el.getAttribute("gxp-string")
+					if (!key) return
 
 					// Store the original text content as default
-					const defaultValue = el.textContent || "";
-					el._gxpStringDefault = defaultValue;
-					el._gxpStringKey = key;
+					const defaultValue = el.textContent || ""
+					el._gxpStringDefault = defaultValue
+					el._gxpStringKey = key
 
 					// Initial update
-					updateElementText(el, key, defaultValue, store);
+					updateElementText(el, key, defaultValue, store)
 
 					// Watch for changes in the appropriate store based on attributes
 					// Using deep: true to catch when entire object is replaced (async manifest load)
 					if (store) {
-						const watchSource = getWatchSource(el, key, store);
+						const watchSource = getWatchSource(el, key, store)
 						if (watchSource) {
-							el._gxpUnwatch = watch(watchSource, () => {
-								updateElementText(el, key, defaultValue, store);
-							}, { deep: true });
+							el._gxpUnwatch = watch(
+								watchSource,
+								() => {
+									updateElementText(el, key, defaultValue, store)
+								},
+								{ deep: true },
+							)
 						}
 					}
 				},
 
 				// Called when binding value changes
 				updated(el, binding) {
-					const key = binding.value || el.getAttribute("gxp-string");
-					if (!key) return;
+					const key = binding.value || el.getAttribute("gxp-string")
+					if (!key) return
 
-					const defaultValue = el._gxpStringDefault || el.textContent || "";
-					updateElementText(el, key, defaultValue, store);
+					const defaultValue = el._gxpStringDefault || el.textContent || ""
+					updateElementText(el, key, defaultValue, store)
 				},
 
 				// Cleanup when element is unmounted
 				unmounted(el) {
 					if (el._gxpUnwatch) {
-						el._gxpUnwatch();
+						el._gxpUnwatch()
 					}
-					delete el._gxpStringDefault;
-					delete el._gxpStringKey;
-					delete el._gxpUnwatch;
+					delete el._gxpStringDefault
+					delete el._gxpStringKey
+					delete el._gxpUnwatch
 				},
-			});
+			})
 
 			// Register the v-gxp-src directive for replacing src attributes
 			app.directive("gxp-src", {
 				// Called when the element is mounted
 				mounted(el, binding) {
-					const key = binding.value || el.getAttribute("gxp-src");
-					if (!key) return;
+					const key = binding.value || el.getAttribute("gxp-src")
+					if (!key) return
 
 					// Store the original src as default
-					const defaultSrc = el.getAttribute("src") || "";
-					el._gxpSrcDefault = defaultSrc;
-					el._gxpSrcKey = key;
+					const defaultSrc = el.getAttribute("src") || ""
+					el._gxpSrcDefault = defaultSrc
+					el._gxpSrcKey = key
 
 					// Initial update
-					updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl);
+					updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl)
 
 					// Watch for changes in the appropriate store based on attributes
 					// Using deep: true to catch when entire object is replaced (async manifest load)
 					if (store) {
-						const watchSource = getSrcWatchSource(el, key, store);
+						const watchSource = getSrcWatchSource(el, key, store)
 						if (watchSource) {
-							el._gxpSrcUnwatch = watch(watchSource, () => {
-								updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl);
-							}, { deep: true });
+							el._gxpSrcUnwatch = watch(
+								watchSource,
+								() => {
+									updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl)
+								},
+								{ deep: true },
+							)
 						}
 					}
 				},
 
 				// Called when binding value changes
 				updated(el, binding) {
-					const key = binding.value || el.getAttribute("gxp-src");
-					if (!key) return;
+					const key = binding.value || el.getAttribute("gxp-src")
+					if (!key) return
 
-					const defaultSrc = el._gxpSrcDefault || el.getAttribute("src") || "";
-					updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl);
+					const defaultSrc = el._gxpSrcDefault || el.getAttribute("src") || ""
+					updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl)
 				},
 
 				// Cleanup when element is unmounted
 				unmounted(el) {
 					if (el._gxpSrcUnwatch) {
-						el._gxpSrcUnwatch();
+						el._gxpSrcUnwatch()
 					}
-					delete el._gxpSrcDefault;
-					delete el._gxpSrcKey;
-					delete el._gxpSrcUnwatch;
+					delete el._gxpSrcDefault
+					delete el._gxpSrcKey
+					delete el._gxpSrcUnwatch
 				},
-			});
+			})
 
 			// Also handle raw gxp-string and gxp-src attributes (without v- prefix)
 			// This runs after mount to catch all elements with the attribute
@@ -140,40 +148,40 @@ export function createGxpStringsPlugin(store, options = {}) {
 			app.mixin({
 				mounted() {
 					this.$nextTick(() => {
-						processGxpStringAttributes(this.$el, store);
-						processGxpSrcAttributes(this.$el, store, devServerBaseUrl);
-					});
+						processGxpStringAttributes(this.$el, store)
+						processGxpSrcAttributes(this.$el, store, devServerBaseUrl)
+					})
 
 					// Watch for manifest loading to re-process attributes
 					if (store && store.manifestLoaded !== undefined) {
-						const rootEl = this.$el;
+						const rootEl = this.$el
 						this._gxpManifestUnwatch = watch(
 							() => store.manifestLoaded,
 							(loaded) => {
 								if (loaded) {
 									this.$nextTick(() => {
-										reprocessGxpStringAttributes(rootEl, store);
-										reprocessGxpSrcAttributes(rootEl, store, devServerBaseUrl);
-									});
+										reprocessGxpStringAttributes(rootEl, store)
+										reprocessGxpSrcAttributes(rootEl, store, devServerBaseUrl)
+									})
 								}
-							}
-						);
+							},
+						)
 					}
 				},
 				updated() {
 					this.$nextTick(() => {
-						processGxpStringAttributes(this.$el, store);
-						processGxpSrcAttributes(this.$el, store, devServerBaseUrl);
-					});
+						processGxpStringAttributes(this.$el, store)
+						processGxpSrcAttributes(this.$el, store, devServerBaseUrl)
+					})
 				},
 				unmounted() {
 					if (this._gxpManifestUnwatch) {
-						this._gxpManifestUnwatch();
+						this._gxpManifestUnwatch()
 					}
 				},
-			});
+			})
 		},
-	};
+	}
 }
 
 /**
@@ -191,28 +199,31 @@ function getWatchSource(el, key, store) {
 		return () => ({
 			value: store.triggerState?.[key],
 			obj: store.triggerState,
-			loaded: store.manifestLoaded
-		});
-	} else if (el.hasAttribute("gxp-settings") && store.pluginVars !== undefined) {
+			loaded: store.manifestLoaded,
+		})
+	} else if (
+		el.hasAttribute("gxp-settings") &&
+		store.pluginVars !== undefined
+	) {
 		return () => ({
 			value: store.pluginVars?.[key],
 			obj: store.pluginVars,
-			loaded: store.manifestLoaded
-		});
+			loaded: store.manifestLoaded,
+		})
 	} else if (el.hasAttribute("gxp-assets") && store.assetList !== undefined) {
 		return () => ({
 			value: store.assetList?.[key],
 			obj: store.assetList,
-			loaded: store.manifestLoaded
-		});
+			loaded: store.manifestLoaded,
+		})
 	} else if (store.stringsList !== undefined) {
 		return () => ({
 			value: store.stringsList?.[key],
 			obj: store.stringsList,
-			loaded: store.manifestLoaded
-		});
+			loaded: store.manifestLoaded,
+		})
 	}
-	return null;
+	return null
 }
 
 /**
@@ -224,16 +235,16 @@ function getSrcWatchSource(el, key, store) {
 		return () => ({
 			value: store.triggerState?.[key],
 			obj: store.triggerState,
-			loaded: store.manifestLoaded
-		});
+			loaded: store.manifestLoaded,
+		})
 	} else if (store.assetList !== undefined) {
 		return () => ({
 			value: store.assetList?.[key],
 			obj: store.assetList,
-			loaded: store.manifestLoaded
-		});
+			loaded: store.manifestLoaded,
+		})
 	}
-	return null;
+	return null
 }
 
 /**
@@ -241,24 +252,24 @@ function getSrcWatchSource(el, key, store) {
  */
 function updateElementText(el, key, defaultValue, store) {
 	if (!store) {
-		return;
+		return
 	}
 
-	let translatedValue;
+	let translatedValue
 	if (el.hasAttribute("gxp-state")) {
-		translatedValue = store.getState?.(key);
+		translatedValue = store.getState?.(key)
 	} else if (el.hasAttribute("gxp-settings")) {
-		translatedValue = store.getSetting?.(key);
+		translatedValue = store.getSetting?.(key)
 	} else if (el.hasAttribute("gxp-assets")) {
-		translatedValue = store.getAsset?.(key);
+		translatedValue = store.getAsset?.(key)
 	} else {
-		translatedValue = store.getString?.(key);
+		translatedValue = store.getString?.(key)
 	}
 
 	if (translatedValue && translatedValue !== defaultValue) {
-		el.textContent = translatedValue;
+		el.textContent = translatedValue
 	} else {
-		el.textContent = defaultValue;
+		el.textContent = defaultValue
 	}
 }
 
@@ -268,12 +279,12 @@ function updateElementText(el, key, defaultValue, store) {
  * Store-returned values are never prefixed — they are already absolute.
  */
 function resolveDefaultSrc(defaultSrc, devServerBaseUrl) {
-	if (!devServerBaseUrl || !defaultSrc) return defaultSrc;
+	if (!devServerBaseUrl || !defaultSrc) return defaultSrc
 	// Only prefix relative paths, not already-absolute URLs
 	if (defaultSrc.startsWith("/") && !defaultSrc.startsWith("//")) {
-		return devServerBaseUrl + defaultSrc;
+		return devServerBaseUrl + defaultSrc
 	}
-	return defaultSrc;
+	return defaultSrc
 }
 
 /**
@@ -282,20 +293,20 @@ function resolveDefaultSrc(defaultSrc, devServerBaseUrl) {
  */
 function updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl) {
 	if (!store) {
-		return;
+		return
 	}
 
-	let srcUrl;
+	let srcUrl
 	if (el.hasAttribute("gxp-state")) {
-		srcUrl = store.getState?.(key);
+		srcUrl = store.getState?.(key)
 	} else {
-		srcUrl = store.getAsset?.(key);
+		srcUrl = store.getAsset?.(key)
 	}
 
 	if (srcUrl && srcUrl !== defaultSrc) {
-		el.setAttribute("src", srcUrl);
+		el.setAttribute("src", srcUrl)
 	} else if (defaultSrc) {
-		el.setAttribute("src", resolveDefaultSrc(defaultSrc, devServerBaseUrl));
+		el.setAttribute("src", resolveDefaultSrc(defaultSrc, devServerBaseUrl))
 	}
 }
 
@@ -304,36 +315,40 @@ function updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl) {
  * This handles elements that use the raw attribute without the v- directive
  */
 function processGxpStringAttributes(rootEl, store) {
-	if (!rootEl || !store) return;
+	if (!rootEl || !store) return
 
 	// Handle case where rootEl is a text node or comment
-	if (!rootEl.querySelectorAll) return;
+	if (!rootEl.querySelectorAll) return
 
-	const elements = rootEl.querySelectorAll("[gxp-string]");
+	const elements = rootEl.querySelectorAll("[gxp-string]")
 
 	elements.forEach((el) => {
-		const key = el.getAttribute("gxp-string");
-		if (!key) return;
+		const key = el.getAttribute("gxp-string")
+		if (!key) return
 
 		// Store default value only on first processing
 		if (!el._gxpStringDefault) {
-			el._gxpStringDefault = el.textContent || "";
+			el._gxpStringDefault = el.textContent || ""
 		}
-		el._gxpStringKey = key;
+		el._gxpStringKey = key
 
 		// Update text
-		updateElementText(el, key, el._gxpStringDefault, store);
+		updateElementText(el, key, el._gxpStringDefault, store)
 
 		// Set up watcher for this element (if not already watching)
 		if (!el._gxpUnwatch) {
-			const watchSource = getWatchSource(el, key, store);
+			const watchSource = getWatchSource(el, key, store)
 			if (watchSource) {
-				el._gxpUnwatch = watch(watchSource, () => {
-					updateElementText(el, key, el._gxpStringDefault, store);
-				}, { deep: true });
+				el._gxpUnwatch = watch(
+					watchSource,
+					() => {
+						updateElementText(el, key, el._gxpStringDefault, store)
+					},
+					{ deep: true },
+				)
 			}
 		}
-	});
+	})
 }
 
 /**
@@ -341,18 +356,18 @@ function processGxpStringAttributes(rootEl, store) {
  * This is called when manifest loads to update elements that were already processed
  */
 function reprocessGxpStringAttributes(rootEl, store) {
-	if (!rootEl || !store) return;
-	if (!rootEl.querySelectorAll) return;
+	if (!rootEl || !store) return
+	if (!rootEl.querySelectorAll) return
 
-	const elements = rootEl.querySelectorAll("[gxp-string]");
+	const elements = rootEl.querySelectorAll("[gxp-string]")
 
 	elements.forEach((el) => {
-		const key = el.getAttribute("gxp-string");
-		if (!key) return;
+		const key = el.getAttribute("gxp-string")
+		if (!key) return
 
-		const defaultValue = el._gxpStringDefault || el.textContent || "";
-		updateElementText(el, key, defaultValue, store);
-	});
+		const defaultValue = el._gxpStringDefault || el.textContent || ""
+		updateElementText(el, key, defaultValue, store)
+	})
 }
 
 /**
@@ -360,36 +375,46 @@ function reprocessGxpStringAttributes(rootEl, store) {
  * This handles elements that use the raw attribute without the v- directive
  */
 function processGxpSrcAttributes(rootEl, store, devServerBaseUrl) {
-	if (!rootEl || !store) return;
+	if (!rootEl || !store) return
 
 	// Handle case where rootEl is a text node or comment
-	if (!rootEl.querySelectorAll) return;
+	if (!rootEl.querySelectorAll) return
 
-	const elements = rootEl.querySelectorAll("[gxp-src]");
+	const elements = rootEl.querySelectorAll("[gxp-src]")
 
 	elements.forEach((el) => {
-		const key = el.getAttribute("gxp-src");
-		if (!key) return;
+		const key = el.getAttribute("gxp-src")
+		if (!key) return
 
 		// Store default value only on first processing
 		if (!el._gxpSrcDefault) {
-			el._gxpSrcDefault = el.getAttribute("src") || "";
+			el._gxpSrcDefault = el.getAttribute("src") || ""
 		}
-		el._gxpSrcKey = key;
+		el._gxpSrcKey = key
 
 		// Update src
-		updateElementSrc(el, key, el._gxpSrcDefault, store, devServerBaseUrl);
+		updateElementSrc(el, key, el._gxpSrcDefault, store, devServerBaseUrl)
 
 		// Set up watcher for this element (if not already watching)
 		if (!el._gxpSrcUnwatch) {
-			const watchSource = getSrcWatchSource(el, key, store);
+			const watchSource = getSrcWatchSource(el, key, store)
 			if (watchSource) {
-				el._gxpSrcUnwatch = watch(watchSource, () => {
-					updateElementSrc(el, key, el._gxpSrcDefault, store, devServerBaseUrl);
-				}, { deep: true });
+				el._gxpSrcUnwatch = watch(
+					watchSource,
+					() => {
+						updateElementSrc(
+							el,
+							key,
+							el._gxpSrcDefault,
+							store,
+							devServerBaseUrl,
+						)
+					},
+					{ deep: true },
+				)
 			}
 		}
-	});
+	})
 }
 
 /**
@@ -397,18 +422,18 @@ function processGxpSrcAttributes(rootEl, store, devServerBaseUrl) {
  * This is called when manifest loads to update elements that were already processed
  */
 function reprocessGxpSrcAttributes(rootEl, store, devServerBaseUrl) {
-	if (!rootEl || !store) return;
-	if (!rootEl.querySelectorAll) return;
+	if (!rootEl || !store) return
+	if (!rootEl.querySelectorAll) return
 
-	const elements = rootEl.querySelectorAll("[gxp-src]");
+	const elements = rootEl.querySelectorAll("[gxp-src]")
 
 	elements.forEach((el) => {
-		const key = el.getAttribute("gxp-src");
-		if (!key) return;
+		const key = el.getAttribute("gxp-src")
+		if (!key) return
 
-		const defaultSrc = el._gxpSrcDefault || el.getAttribute("src") || "";
-		updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl);
-	});
+		const defaultSrc = el._gxpSrcDefault || el.getAttribute("src") || ""
+		updateElementSrc(el, key, defaultSrc, store, devServerBaseUrl)
+	})
 }
 
 /**
@@ -416,7 +441,7 @@ function reprocessGxpSrcAttributes(rootEl, store, devServerBaseUrl) {
  * Can be called manually if needed
  */
 export function processGxpStrings(rootElement, store) {
-	processGxpStringAttributes(rootElement, store);
+	processGxpStringAttributes(rootElement, store)
 }
 
 /**
@@ -424,21 +449,21 @@ export function processGxpStrings(rootElement, store) {
  * Can be called manually if needed
  */
 export function processGxpSrcs(rootElement, store, devServerBaseUrl) {
-	processGxpSrcAttributes(rootElement, store, devServerBaseUrl);
+	processGxpSrcAttributes(rootElement, store, devServerBaseUrl)
 }
 
 /**
  * Get the string key from an element if it has gxp-string attribute
  */
 export function getGxpStringKey(element) {
-	return element?.getAttribute?.("gxp-string") || null;
+	return element?.getAttribute?.("gxp-string") || null
 }
 
 /**
  * Check if an element has a gxp-string attribute
  */
 export function hasGxpString(element) {
-	return element?.hasAttribute?.("gxp-string") || false;
+	return element?.hasAttribute?.("gxp-string") || false
 }
 
-export default createGxpStringsPlugin;
+export default createGxpStringsPlugin

package/runtime/index.html

@@ -1,22 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>GxP Plugin Builder</title>
+		<script type="module">
+			import * as Vue from "/node_modules/vue/dist/vue.esm-bundler.js"
+			window.Vue = Vue
+			import * as Pinia from "/node_modules/pinia/dist/pinia.esm-browser.js"
+			window.Pinia = Pinia
+		</script>
+	</head>
 
-<head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GxP Plugin Builder</title>
-    <script type="module">
-        import * as Vue from '/node_modules/vue/dist/vue.esm-bundler.js';
-        window.Vue = Vue;
-        import * as Pinia from '/node_modules/pinia/dist/pinia.esm-browser.js';
-        window.Pinia = Pinia;
-    </script>
-</head>
-
-<body>
-    <div id="app"></div>
-    <script type="module" src="/@gx-runtime/main.js"></script>
-</body>
-
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/@gx-runtime/main.js"></script>
+	</body>
 </html>