fix(studio): render complete interactive gallery previews

packages/compiler/src/client-codegen.ts

@@ -520,20 +520,30 @@ export function generateBrowserModule(ast: PageAst): string {
       [...sharedState, ...sharedProps].filter((name) => identifierReferenced(source, name)),
     );
   }
-  const sharedCommit = `const values = { ${sharedState.map((name) => `${JSON.stringify(name)}: ${name}`).join(", ")} };
-    const pending = {};
-    for (const name of Object.keys(values)) {
-      if (!Object.is(values[name], committed[name])) { pending[name] = values[name]; committed[name] = values[name]; }
+  const usedCommitNames = new Set([...sharedState, ...sharedProps, ...functionNames]);
+  const commitName = (base: string) => {
+    let name = base;
+    while (usedCommitNames.has(name)) name += "_";
+    usedCommitNames.add(name);
+    return name;
+  };
+  const commitValues = commitName("__v"),
+    commitPending = commitName("__p"),
+    commitSnapshot = commitName("__c");
+  const sharedCommit = `const ${commitValues} = { ${sharedState.map((name) => `${JSON.stringify(name)}: ${name}`).join(", ")} };
+    const ${commitPending} = {};
+    for (const name of Object.keys(${commitValues})) {
+      if (!Object.is(${commitValues}[name], ${commitSnapshot}[name])) { ${commitPending}[name] = ${commitValues}[name]; ${commitSnapshot}[name] = ${commitValues}[name]; }
     }
-    if (Object.keys(pending).length === 0) return;
-    const apply = () => { for (const name of Object.keys(pending)) context.state[name] = pending[name]; };
+    if (Object.keys(${commitPending}).length === 0) return;
+    const apply = () => { for (const name of Object.keys(${commitPending})) context.state[name] = ${commitPending}[name]; };
     if (typeof context.batch === "function") context.batch(apply); else apply();`;
   const restores = [...sharedState, ...sharedProps]
     .map(
       (name) =>
         `${JSON.stringify(name)}:()=>{${
           sharedState.includes(name)
-            ? `${name} = context.state.${name}; committed.${name} = ${name};`
+            ? `${name} = context.state.${name}; ${commitSnapshot}.${name} = ${name};`
             : `${name} = context.props.${name};`
         }}`,
     )
@@ -588,7 +598,7 @@ function __wrnexusCreateClientFunctions(context) {
   const props = context.props;
   const refs = context.refs;
   ${apiBindings(ast)}
-  const committed = { ${sharedState.map((name) => `${JSON.stringify(name)}: ${name}`).join(", ")} };
+  const ${commitSnapshot} = { ${sharedState.map((name) => `${JSON.stringify(name)}: ${name}`).join(", ")} };
   const __wrnexusCommit = () => { ${sharedCommit} };
   const __wrnexusRestores = { ${restores} };
   const __wrnexusRestoreKeys = ${JSON.stringify(restoreKeys)};