feat: pick up the URL variables at the start of the app

src/ui/src/components/core/root/CoreRoot.vue

@@ -18,15 +18,14 @@ import { useEvaluator } from "@/renderer/useEvaluator";
 const ssHashChangeStub = `
 def handle_hashchange(state, payload):
 	# The payload is a dictionary with the page key and all the route variables in the URL hash.
-	# For example, if the current URL is
-	# http://localhost:3000/#main/animal=duck&colour=yellow
+	# For example, if the current URL is http://localhost:3000/#main/animal=duck&colour=yellow
 	# you will get the following dictionary
 	# {
-	#	"page_key": "main",
-	#	"route_vars": {
-	#		"animal": "duck",
-	#		"colour": "yellow"
-	#	}
+	#	  "page_key": "main",
+	#	  "route_vars": {
+	#		  "animal": "duck",
+	#		  "colour": "yellow"
+	#	  }
 	# }
 
 	page_key = payload.get("page_key")
@@ -40,6 +39,23 @@ def handle_hashchange(state, payload):
 	else:
 		state["message"] = "You're not in the Duck zone.`.trim();
 
+const wfAppOpenStub = `
+def handle_app_open(state):
+	# The payload is a dictionary with the page key and all the route variables in the URL hash.
+	# For example, if the current URL is http://localhost:3000/#/animal=duck&colour=yellow
+	# you will get the following dictionary
+	# {
+	#   "page_key": "main",
+	#	  "route_vars": {
+	#		  "animal": "duck",
+	#		  "colour": "yellow"
+	#	  }
+	# }
+
+	page_key = payload.get("page_key")
+	route_vars = payload.get("route_vars")
+`.trim();
+
 const description =
 	"The root component of the application, which serves as the starting point of the component hierarchy.";
 
@@ -58,6 +74,10 @@ export default {
 			...sharedStyleFields,
 		},
 		events: {
+			"wf-app-open": {
+				desc: "Captures the first application load, capture the page key and route vars.",
+				stub: wfAppOpenStub,
+			},
 			"wf-hashchange": {
 				desc: "Capture changes to the URL hash, including page key and route vars.",
 				stub: ssHashChangeStub,
@@ -67,7 +87,15 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { computed, inject, ref, Ref, watch, onBeforeMount } from "vue";
+import {
+	computed,
+	inject,
+	ref,
+	Ref,
+	watch,
+	onBeforeMount,
+	onMounted,
+} from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const importedModulesSpecifiers: Record<string, string> = {};
@@ -107,12 +135,12 @@ watch(activePageId, (newPageId) => {
 	changePageInHash(pageKey);
 });
 
-type ParsedHash = {
+type UrlParams = {
 	pageKey?: string;
 	routeVars: Record<string, string>;
 };
 
-function getParsedHash(): ParsedHash {
+function getUrlParams(): UrlParams {
 	const docHash = document.location.hash.substring(1);
 	const hashMatchGroups = docHash.match(hashRegex)?.groups;
 	let pageKey: string;
@@ -137,8 +165,8 @@ function getParsedHash(): ParsedHash {
 	return { pageKey, routeVars };
 }
 
-function setHash(parsedHash: ParsedHash) {
-	const { pageKey, routeVars } = parsedHash;
+function setHash(urlParams: UrlParams) {
+	const { pageKey, routeVars } = urlParams;
 
 	let hash = "";
 	if (pageKey) {
@@ -162,28 +190,38 @@ function setHash(parsedHash: ParsedHash) {
 }
 
 function changePageInHash(targetPageKey: string) {
-	const parsedHash = getParsedHash();
-	parsedHash.pageKey = targetPageKey;
-	setHash(parsedHash);
+	const urlParams = getUrlParams();
+	urlParams.pageKey = targetPageKey;
+	setHash(urlParams);
 }
 
 function changeRouteVarsInHash(targetRouteVars: Record<string, string>) {
-	const parsedHash = getParsedHash();
+	const parsedHash = getUrlParams();
 	const routeVars = parsedHash?.routeVars ?? {};
 	parsedHash.routeVars = { ...routeVars, ...targetRouteVars };
 	setHash(parsedHash);
 }
 
 function handleHashChange() {
-	const parsedHash = getParsedHash();
+	const urlParams = getUrlParams();
 	const event = new CustomEvent("wf-hashchange", {
 		detail: {
-			payload: parsedHash,
+			payload: urlParams,
+		},
+	});
+	rootEl.value?.dispatchEvent(event);
+	if (!urlParams.pageKey) return;
+	wf.setActivePageFromKey(urlParams.pageKey);
+}
+
+function handleAppOpenChange() {
+	const urlParams = getUrlParams();
+	const event = new CustomEvent("wf-app-open", {
+		detail: {
+			payload: urlParams,
 		},
 	});
 	rootEl.value?.dispatchEvent(event);
-	if (!parsedHash.pageKey) return;
-	wf.setActivePageFromKey(parsedHash.pageKey);
 }
 
 async function importStylesheet(stylesheetKey: string, path: string) {
@@ -306,11 +344,16 @@ function addMailSubscriptions() {
 
 onBeforeMount(() => {
 	addMailSubscriptions();
+
 	window.addEventListener("hashchange", () => {
 		handleHashChange();
 	});
 	handleHashChange();
 });
+
+onMounted(() => {
+	handleAppOpenChange();
+});
 </script>
 
 <style scoped>

src/writer/core.py

@@ -1307,6 +1307,16 @@ def _transform_page_open(self, ev) -> str:
         payload = str(ev.payload)
         return payload
 
+    def _transform_app_open(self, ev) -> dict:
+        payload = ev.payload
+        page_key = payload.get("pageKey")
+        route_vars = dict(payload.get("routeVars"))
+        tf_payload = {
+            "page_key": page_key,
+            "route_vars": route_vars
+        }
+        return tf_payload
+
     def _transform_chatbot_message(self, ev) -> dict:
         payload = dict(ev.payload)
         return payload