chore(ui): use Vue.js readonly for core - WF-51

docs/framework/frontend-scripts.mdx

@@ -94,7 +94,7 @@ You can access Framework's front-end core via `globalThis.core`, unlocking all s
 
 ```js
 export function alertHueRotationValue() {
-    const state = globalThis.core.getUserState();
+    const state = globalThis.core.userState.value.
     console.log("State is", state);
 }
 ```

src/ui/src/builder/BuilderEditor.vue

@@ -163,9 +163,6 @@ const theme: Ref<string> = ref(
 );
 
 const isLogActive: Ref<boolean> = ref(ssbm.getLogEntryCount() > 0);
-const sessionTimestamp: ComputedRef<number> = computed(() =>
-	wf.getSessionTimestamp(),
-);
 
 type StatusMessage = {
 	ok: boolean | "processing";
@@ -211,7 +208,7 @@ onMounted(() => {
 	wf.addMailSubscription("logEntry", handleLogEntry);
 	const targetEl = editorContainer.value;
 	editor = monaco.editor.create(targetEl, {
-		value: wf.getRunCode(),
+		value: wf.runCode.value,
 		language: "python",
 		theme: theme.value,
 	});
@@ -226,12 +223,9 @@ onUnmounted(() => {
 	window.removeEventListener("resize", updateDimensions.bind(this));
 });
 
-watch(
-	() => wf.getRunCode(),
-	(newRunCode) => {
-		editor.getModel().setValue(newRunCode);
-	},
-);
+watch(wf.runCode, (newRunCode) => {
+	editor.getModel().setValue(newRunCode);
+});
 
 watch(
 	() => ssbm.getMode(),
@@ -243,7 +237,7 @@ watch(
 	},
 );
 
-watch(sessionTimestamp, () => {
+watch(wf.sessionTimestamp, () => {
 	enableEditor();
 });
 

src/ui/src/builder/BuilderSettingsHandlers.vue

@@ -199,7 +199,7 @@ const recognisedEvents: ComputedRef<WriterComponentDefinition["events"]> =
 		return recEvents;
 	});
 
-const userFunctions = computed(() => wf.getUserFunctions());
+const userFunctions = wf.userFunctions;
 
 const pageKeys = computed(() => {
 	const pages = wf.getComponents("root");

src/ui/src/builder/BuilderStateExplorerTreeBranch.vue

@@ -69,7 +69,7 @@ const areChildrenVisible: Ref<boolean> = ref(
 );
 
 function getStateValue(accessors: string[]) {
-	let state = wf.getUserState();
+	let state = wf.userState.value;
 	accessors.forEach((accessor) => {
 		state = state[accessor];
 	});

src/ui/src/builder/BuilderTemplateInput.vue

@@ -166,7 +166,7 @@ const showAutocomplete = () => {
 	const keyword = full.at(-1);
 	const path = full.slice(0, -1);
 
-	const allOptions = Object.entries(_get(ss.getUserState(), path) ?? {}).map(
+	const allOptions = Object.entries(_get(ss.userState.value, path) ?? {}).map(
 		([key, val]) => ({
 			text: key,
 			type: typeToString(val),

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

@@ -105,7 +105,7 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const { isComponentVisible } = useEvaluator(wf);
 
 const displayedPageId = computed(() => {
-	const activePageId = wf.getActivePageId();
+	const activePageId = wf.activePageId.value;
 	const activePageExists = Boolean(wf.getComponentById(activePageId));
 	if (activePageExists && wf.isChildOf("root", activePageId))
 		return activePageId;

src/ui/src/components/workflows/WorkflowsRoot.vue

@@ -38,7 +38,7 @@ const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
 const rootEl: Ref<HTMLElement> = ref(null);
 
 const displayedWorkflowId = computed(() => {
-	const activePageId = wf.getActivePageId();
+	const activePageId = wf.activePageId.value;
 	const activePageExists = Boolean(wf.getComponentById(activePageId));
 	if (activePageExists && wf.isChildOf("workflows_root", activePageId))
 		return activePageId;

src/ui/src/core/index.ts

@@ -25,6 +25,12 @@ const KEEP_ALIVE_DELAY_MS = 60000;
 export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
+	/**
+	 * Whether Writer Framework is running as builder or runner.
+	 * The mode is enforced in the backend and used in the frontend for presentation purposes only.
+	 *
+	 * @returns
+	 */
 	const mode: Ref<"run" | "edit"> = ref(null);
 	const featureFlags = shallowRef<string[]>([]);
 	const runCode: Ref<string> = ref(null);
@@ -42,20 +48,6 @@ export function generateCore() {
 	const mailSubscriptions: { mailType: string; fn: Function }[] = [];
 	const activePageId: Ref<Component["id"]> = ref(null);
 
-	function getFrontendMessageMap() {
-		return frontendMessageMap.value;
-	}
-
-	/**
-	 * Whether Writer Framework is running as builder or runner.
-	 * The mode is enforced in the backend and used in the frontend for presentation purposes only.
-	 *
-	 * @returns
-	 */
-	function getMode() {
-		return mode.value;
-	}
-
 	/**
 	 * Initialise the core.
 	 * @returns
@@ -103,7 +95,7 @@ export function generateCore() {
 		sessionTimestamp.value = new Date().getTime();
 		featureFlags.value = initData.featureFlags;
 		loadAbstractTemplates(initData.abstractTemplates);
-    
+
 		// Only returned for edit (Builder) mode
 
 		userFunctions.value = initData.userFunctions;
@@ -127,10 +119,6 @@ export function generateCore() {
 		);
 	}
 
-	function getSessionTimestamp() {
-		return sessionTimestamp.value;
-	}
-
 	function sendKeepAliveMessage() {
 		setTimeout(() => {
 			sendFrontendMessage("keepAlive", {}, sendKeepAliveMessage);
@@ -381,10 +369,6 @@ export function generateCore() {
 		sendFrontendMessage("stateEnquiry", {}, callback, true);
 	}
 
-	function getRunCode() {
-		return runCode.value;
-	}
-
 	function setupMessageFollowUp(trackingId: number) {
 		const INITIAL_FOLLOWUP_MS = 150;
 		const SUBSEQUENT_FOLLOWUPS_MS = 150;
@@ -489,10 +473,6 @@ export function generateCore() {
 		});
 	}
 
-	function getUserFunctions() {
-		return userFunctions.value;
-	}
-
 	function getComponentById(componentId: Component["id"]): Component {
 		return components.value[componentId];
 	}
@@ -562,28 +542,20 @@ export function generateCore() {
 		activePageId.value = componentId;
 	}
 
-	function getActivePageId(): Component["id"] {
-		return activePageId.value;
-	}
-
 	function getContainableTypes(componentId: Component["id"]) {
 		return typeHierarchy.getContainableTypes(components.value, componentId);
 	}
 
-	function getUserState() {
-		return userState.value;
-	}
-
 	const core = {
 		webSocket,
 		syncHealth,
-		getFrontendMessageMap,
-		getMode,
-		getUserFunctions,
+		frontendMessageMap: readonly(frontendMessageMap),
+		mode: readonly(mode),
+		userFunctions: readonly(userFunctions),
 		addMailSubscription,
 		init,
 		forwardEvent,
-		getRunCode,
+		runCode: readonly(runCode),
 		sendCodeSaveRequest,
 		sendCodeUpdate,
 		sendComponentUpdate,
@@ -592,13 +564,13 @@ export function generateCore() {
 		getComponentById,
 		getComponents,
 		setActivePageId,
-		getActivePageId,
+		activePageId: readonly(activePageId),
 		setActivePageFromKey,
 		getComponentDefinition,
 		getSupportedComponentTypes,
 		getContainableTypes,
-		getSessionTimestamp,
-		getUserState,
+		sessionTimestamp: readonly(sessionTimestamp),
+		userState: readonly(userState),
 		isChildOf,
 		featureFlags: readonly(featureFlags),
 	};

src/ui/src/main.ts

@@ -36,7 +36,7 @@ globalThis.core = wf;
 
 async function load() {
 	await wf.init();
-	const mode = wf.getMode();
+	const mode = wf.mode.value;
 	const ssbm = mode == "edit" ? generateBuilderManager() : undefined;
 
 	if (ssbm) {

src/ui/src/renderer/ComponentRenderer.vue

@@ -69,10 +69,7 @@ const rootStyle = computed(() => {
 	};
 });
 
-const isMessagePending = computed(() => {
-	const frontendMessageMap = wf.getFrontendMessageMap();
-	return frontendMessageMap.size > 0;
-});
+const isMessagePending = computed(() => wf.frontendMessageMap.value.size > 0);
 
 watch(
 	() => coreRootFields.appName?.value,
@@ -83,7 +80,7 @@ watch(
 );
 
 function updateTitle(appName: string) {
-	const mode = wf.getMode();
+	const mode = wf.mode.value;
 	let title: string;
 	if (appName && mode == "edit") {
 		title = `${appName} | Writer Framework | Builder`;

src/ui/src/renderer/useEvaluator.ts

@@ -58,7 +58,7 @@ export function useEvaluator(wf: Core) {
 			? getContextData(instancePath)
 			: undefined;
 		let contextRef = contextData;
-		let stateRef = wf.getUserState();
+		let stateRef = wf.userState.value;
 		const accessors = parseExpression(expr, instancePath);
 
 		for (let i = 0; i < accessors.length; i++) {