fix: force re-mount component only when owner changes or reset

src/client/Preview.tsx

@@ -55,6 +55,7 @@ import {
 SelectValue,
 } from "@/client/components/Select";
 import { mockUsers } from "@/owner";
+import { checkerModule } from "./snippets";
 
 export const Preview: FC = () => {
 const $wasmState = useStore((state) => state.wasmState);
@@ -107,6 +108,7 @@ export const Preview: FC = () => {
 const rawOutput = await window.go_preview?.(
 {
 "main.tf": debouncedCode,
+"checker/main.tf": checkerModule,
 },
 $owner,
 $form,
@@ -529,24 +531,28 @@ const Log: FC<LogProps> = ({ log }) => {
 type FormProps = { parameters: ParameterWithSource[] };
 
 const Form: FC<FormProps> = ({ parameters }) => {
-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={window.crypto.randomUUID()} parameter={p} />);
+const $force = useStore((state) => state._force);
+
+const getParameterHash = (p: ParameterWithSource) =>
+`${$force}:${p.name}:${p.form_type}`;
+
+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} />)
+);
 };
 
 type FormElementProps = { parameter: ParameterWithSource };
 const FormElement: FC<FormElementProps> = ({ parameter }) => {
 const $form = useStore((state) => state.form);
 const $setForm = useStore((state) => state.setFormState);
 
-const value = useMemo(
-() =>
-$form[parameter.name] ??
-undefined,
-[$form, parameter],
-);
+const value = useMemo(() => {
+return $form[parameter.name];
+}, [$form, parameter.name]);
 
 const onValueChange = (value: string) => {
 $setForm(parameter.name, value);

src/client/snippets.ts

@@ -11,7 +11,7 @@ export const textInput = `data "coder_parameter" "project-name" {
  display_name = "An input"
  name = "an-input"
  description = "What is the name of your project?"
- order = 1
+ order = 4
 
  form_type = "input"
  type = "string"
@@ -94,3 +94,38 @@ export const switchInput = `data "coder_parameter" "switch" {
  defalt = true
  order = 1
 }`
+
+export const checkerModule = `
+variable "solutions" {
+ type = map(list(string))
+}
+variable "guess" {
+ type = list(string)
+}
+locals {
+# [for connection, solution in local.solutions : connection if (length(setintersection(solution, jsondecode(data.coder_parameter.rows["yellow"].value))) == 4)]
+ diff = [for connection, solution in var.solutions : {
+ connection = connection
+ distance = 4 - length(setintersection(solution, var.guess))
+ }]
+ solved = [for diff in local.diff : diff.connection if diff.distance == 0]
+ one_away = [for diff in local.diff : diff.connection if diff.distance == 1]
+ description = length(local.one_away) == 1 && length(var.guess) == 4 ? "One away..." : (
+ length(local.solved) == 1 ? "Solved!" : (
+ "Select 4 words that share a common connection."
+ )
+ )
+}
+output "out" {
+ value = local.one_away
+}
+output "title" {
+ value = length(local.solved) == 1 ? "\${local.solved[0]}" : "??"
+}
+output "description" {
+ value = local.description
+}
+output "solved" {
+ value = length(local.solved) == 1 ? true : false
+}
+`;

src/client/store.tsx

@@ -5,7 +5,7 @@ import { create } from "zustand";
 import { defaultCode } from "./snippets";
 import { mockUsers } from "@/owner";
 
-type FormState = Record<string, string>;
+export type FormState = Record<string, string>;
 
 type WasmState = "loaded" | "loading" | "error";
 
@@ -19,6 +19,7 @@ const defaultErrorsState: ErrorsState = {
 };
 
 type State = {
+_force: number;
 code: string;
 editor: editor.IStandaloneCodeEditor | null;
 parameters: ParameterWithSource[];
@@ -38,6 +39,7 @@ type State = {
 };
 
 export const useStore = create<State>()((set) => ({
+_force: 0,
 code: window.CODE ?? defaultCode,
 editor: null,
 parameters: [],
@@ -72,7 +74,18 @@ export const useStore = create<State>()((set) => ({
 
 return { form };
 }),
-resetForm: () => set(() => ({ form: {} })),
+resetForm: () =>
+set((state) => ({
+form: {},
+_force: state._force + 1,
+})),
 setEditor: (editor) => set(() => ({ editor })),
-setWorkspaceOwner: (owner) => set(() => ({ owner })),
+setWorkspaceOwner: (owner) =>
+set((state) => ({
+...state,
+owner,
+_force: state._force + 1,
+form: {},
+parameters: [...state.parameters],
+})),
 }));