chore: move parameters out of zustand

Author: brettkolodny

src/client/App.tsx

@@ -29,8 +29,9 @@ import {
 	type WasmLoadState,
 } from "@/utils/wasm";
 import { defaultCode } from "@/client/snippets";
-import type { PreviewOutput } from "@/gen/types";
+import type { ParameterWithSource, PreviewOutput } from "@/gen/types";
 import { useDebouncedValue } from "./hooks/debounce";
+import isEqual from "lodash/isEqual";
 
 /**
  * Load the shared code if present.
@@ -67,6 +68,7 @@ export const App = () => {
 		Record<string, string>
 	>({});
 	const [output, setOutput] = useState<PreviewOutput | null>(null);
+	const [parameters, setParameters] = useState<ParameterWithSource[]>([]);
 
 	const onDownloadOutput = () => {
 		const blob = new Blob([JSON.stringify(output, null, 2)], {
@@ -102,6 +104,23 @@ export const App = () => {
 		}
 	}, []);
 
+	useEffect(() => {
+		setParameters((curr) => {
+			const newParameters = output?.output?.parameters ?? [];
+
+			return newParameters.map((p) => {
+				const existing = curr.find((currP) => {
+					const currentParameterOmitValue = { ...currP, value: undefined };
+					const existingParameterOmitValue = { ...p, value: undefined };
+
+					return isEqual(currentParameterOmitValue, existingParameterOmitValue);
+				});
+
+				return existing ?? p;
+			});
+		});
+	}, [output]);
+
 	useEffect(() => {
 		getDynamicParametersOutput(debouncedCode, parameterValues)
 			.catch((e) => {
@@ -171,6 +190,9 @@ export const App = () => {
 					isDebouncing={isDebouncing}
 					onDownloadOutput={onDownloadOutput}
 					output={output}
+					parameterValues={parameterValues}
+					setParameterValues={setParameterValues}
+					parameters={parameters}
 				/>
 			</ResizablePanelGroup>
 		</main>

src/client/Preview.tsx

@@ -42,6 +42,7 @@ import {
 	XIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import React from "react";
 import { type FC, type PropsWithChildren, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
 
@@ -50,22 +51,26 @@ type PreviewProps = {
 	isDebouncing: boolean;
 	onDownloadOutput: () => void;
 	output: PreviewOutput | null;
+	parameterValues: Record<string, string>;
+	setParameterValues: React.Dispatch<
+		React.SetStateAction<Record<string, string>>
+	>;
+	parameters: ParameterWithSource[];
 };
 
 export const Preview: FC<PreviewProps> = ({
 	wasmLoadState,
 	isDebouncing,
 	output,
+	parameterValues,
+	setParameterValues,
+	parameters,
 }) => {
 	const $errors = useStore((state) => state.errors);
-	const $resetForm = useStore((state) => state.resetForm);
 	const [params] = useSearchParams();
-	const isDebug = useMemo(() => params.has("debug"), [params]);
+	const isDebug = params.has("debug");
 	const [tab, setTab] = useState(() => "preview");
 
-	const parameters = output?.output?.parameters ?? [];
-	console.info(parameters);
-
 	const onDownloadOutput = () => {
 		const blob = new Blob([JSON.stringify(output, null, 2)], {
 			type: "application/json",
@@ -238,11 +243,19 @@ export const Preview: FC<PreviewProps> = ({
 							</div>
 						) : (
 							<div className="flex h-full w-full flex-col items-center justify-start gap-5 overflow-x-clip overflow-y-scroll rounded-xl border p-6">
-								<Form parameters={parameters} />
+								<Form
+									parameters={parameters}
+									parameterValues={parameterValues}
+									setParameterValues={setParameterValues}
+								/>
 							</div>
 						)}
 						<div className="flex w-full justify-between gap-3">
-							<Button variant="outline" onClick={$resetForm} className="w-fit">
+							<Button
+								variant="outline"
+								onClick={() => setParameterValues({})}
+								className="w-fit"
+							>
 								Reset form
 							</Button>
 							<ViewOutput parameters={parameters} />
@@ -518,50 +531,71 @@ const Log: FC<LogProps> = ({ log }) => {
 	);
 };
 
-type FormProps = { parameters: ParameterWithSource[] };
-
-const Form: FC<FormProps> = ({ parameters }) => {
-	const $force = useStore((state) => state._force);
-
-	const getParameterHash = (p: ParameterWithSource) =>
-		`${$force}:${p.name}:${p.form_type}`;
+type FormProps = {
+	parameters: ParameterWithSource[];
+	parameterValues: Record<string, string>;
+	setParameterValues: React.Dispatch<
+		React.SetStateAction<Record<string, string>>
+	>;
+};
 
+const Form: FC<FormProps> = ({
+	parameters,
+	parameterValues,
+	setParameterValues,
+}) => {
 	return (
 		parameters
 			.sort((a, b) => a.order - b.order)
 			// Since the form is sourced from constantly changing terraform, we are not sure
 			// if the parameters are the "same" as the previous render.
-			.map((p) => <FormElement key={getParameterHash(p)} parameter={p} />)
+			.map((p) => {
+				return (
+					<FormElement
+						key={p.name}
+						parameter={p}
+						value={parameterValues[p.name]}
+						setParameterValues={setParameterValues}
+					/>
+				);
+			})
 	);
 };
 
-type FormElementProps = { parameter: ParameterWithSource };
-const FormElement: FC<FormElementProps> = ({ parameter }) => {
-	const $form = useStore((state) => state.form);
-	const $setForm = useStore((state) => state.setFormState);
-
-	const value = useMemo(() => {
-		const defaultValue =
-			parameter.default_value.value !== "??"
-				? parameter.default_value.value
-				: undefined;
-		return $form[parameter.name] ?? defaultValue;
-	}, [$form, parameter.name, parameter.default_value]);
+type FormElementProps = {
+	parameter: ParameterWithSource;
+	value: string | undefined;
+	setParameterValues: React.Dispatch<
+		React.SetStateAction<Record<string, string>>
+	>;
+};
+const FormElement: FC<FormElementProps> = React.memo(({
+	parameter,
+	value,
+	setParameterValues,
+}) => {
+	const defaultValue =
+		parameter.default_value.value !== "??"
+			? parameter.default_value.value
+			: undefined;
 
 	const onValueChange = (value: string) => {
-		$setForm(parameter.name, value);
+		setParameterValues((curr) => {
+			return { ...curr, [parameter.name]: value };
+		});
 	};
 
 	return (
 		<DynamicParameter
 			parameter={parameter}
-			value={value}
+			value={value ?? defaultValue}
 			autofill={false}
 			onChange={onValueChange}
 			disabled={parameter.styling.disabled}
 		/>
 	);
-};
+});
+FormElement.displayName = "FormElement";
 
 const UserSelect: FC = () => {
 	const $setWorkspaceOwner = useStore((state) => state.setWorkspaceOwner);

src/client/store.tsx

@@ -5,8 +5,6 @@ import { create } from "zustand";
 import { defaultCode } from "./snippets";
 import { mockUsers } from "@/owner";
 
-export type FormState = Record<string, string>;
-
 type ErrorsState = {
 	diagnostics: Diagnostic[];
 	show: boolean;
@@ -19,23 +17,19 @@ const defaultErrorsState: ErrorsState = {
 type State = {
 	_force: number;
 	editor: editor.IStandaloneCodeEditor | null;
-	form: FormState;
 	owner: WorkspaceOwner;
 	errors: ErrorsState;
 	setError: (diagnostics: Diagnostic[]) => void;
 	toggleShowError: (open?: boolean) => void;
-	setFormState: (key: string, value: string) => void;
 	setEditor: (editor: editor.IStandaloneCodeEditor) => void;
 	setWorkspaceOwner: (owner: WorkspaceOwner) => void;
-	resetForm: () => void;
 };
 
 export const useStore = create<State>()((set) => ({
 	_force: 0,
 	code: window.CODE ?? defaultCode,
 	editor: null,
 	owner: mockUsers.admin,
-	form: {},
 	errors: defaultErrorsState,
 	setError: (data) =>
 		set((state) => {
@@ -54,18 +48,6 @@ export const useStore = create<State>()((set) => ({
 				},
 			};
 		}),
-	setFormState: (key, value) =>
-		set((state) => {
-			const form = { ...state.form };
-			form[key] = value;
-
-			return { form };
-		}),
-	resetForm: () =>
-		set((state) => ({
-			form: {},
-			_force: state._force + 1,
-		})),
 	setEditor: (editor) => set(() => ({ editor })),
 	setWorkspaceOwner: (owner) =>
 		set((state) => ({

tsconfig.app.json

@@ -29,7 +29,8 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": false
+    "noUncheckedSideEffectImports": false,
+    "noUncheckedIndexedAccess": true
   },
   "include": [
     "src"