perf(compiler): share client function state closures

packages/compiler/src/client-codegen.ts

@@ -308,21 +308,82 @@ export function generateBrowserModule(ast: PageAst): string {
   const selectedImports = selectedBrowserImports(ast, functions);
   const imports = selectedImports.map((entry) => entry.code).join("\n");
   const importedBindings = [...new Set(selectedImports.flatMap((entry) => entry.bindings))];
+  const sharedState = state.filter((name) => safeIdentifier(name) && !RUNTIME_BINDINGS.has(name));
+  const sharedProps = ast.props
+    .map((entry) => entry.name)
+    .filter(
+      (name) =>
+        safeIdentifier(name) &&
+        !RUNTIME_BINDINGS.has(name) &&
+        !sharedState.includes(name),
+    );
+  const callableAliases = functionNames.filter(
+    (name) =>
+      safeIdentifier(name) &&
+      !RUNTIME_BINDINGS.has(name) &&
+      !sharedState.includes(name) &&
+      !sharedProps.includes(name),
+  );
+  const sharedCommit = sharedState.map((name) => `context.state.${name} = ${name};`).join(" ");
+  const sharedRestore = [
+    ...sharedState.map((name) => `${name} = context.state.${name};`),
+    ...sharedProps.map((name) => `${name} = context.props.${name};`),
+  ].join(" ");
+  const hasAuthoredCommit = callableAliases.includes("commit");
+  const hasAuthoredSetTimeout = callableAliases.includes("setTimeout");
+  const implementations = functions
+    .map((fn) => {
+      const parameters = fn.parameters.map((parameter) => parameter.name).join(", ");
+      return `${JSON.stringify(fn.name)}: ${fn.async ? "async " : ""}function(${parameters}) {
+        try { ${eraseFunctionTypes(fn.body)} } finally { __wrnexusCommit(); }
+      }`;
+    })
+    .join(",\n");
   return `// generated WRNexusJS browser module for ${ast.name}
 ${imports}
 export const __wrnexusClientFunctions = {
-${functions.map((fn) => `  ${functionEntry(ast, fn, functionNames)}`).join(",\n")}
+${functions
+  .map(
+    (fn) =>
+      `  ${JSON.stringify(fn.name)}: (context, ...args) => __wrnexusBindings(context)[${JSON.stringify(fn.name)}](...args)`,
+  )
+  .join(",\n")}
 };
 export const __wrnexusClientState = ${JSON.stringify(state)};
 export const __wrnexusOutputs = ${JSON.stringify(ast.outputs)};
 export const __wrnexusImportedBindings = { ${importedBindings.join(", ")} };
-export function bindClientScope(context) {
+function __wrnexusCreateClientFunctions(context) {
+  ${sharedState.length ? `let { ${sharedState.join(", ")} } = context.state;` : ""}
+  ${sharedProps.length ? `let { ${sharedProps.join(", ")} } = context.props;` : ""}
+  const output = context.output;
+  const server = context.server;
+  const props = context.props;
+  const refs = context.refs;
+  const __wrnexusCommit = () => { ${sharedCommit} };
+  const __wrnexusRestore = () => { ${sharedRestore} };
+  ${!hasAuthoredCommit ? "const commit = __wrnexusCommit;" : ""}
+  ${!hasAuthoredSetTimeout ? `const setTimeout = (callback, delay, ...args) => globalThis.setTimeout(() => {
+    try { return callback(...args); } finally { __wrnexusCommit(); }
+  }, delay);` : ""}
+  const implementations = {
+    ${implementations}
+  };
+  ${callableAliases.map((name) => `const ${name} = (...args) => implementations[${JSON.stringify(name)}](...args);`).join("\n  ")}
   const functions = {};
-  const scopedContext = { ...context, functions };
-  for (const [name, handler] of Object.entries(__wrnexusClientFunctions)) {
-    functions[name] = (...args) => handler(scopedContext, ...args);
+  for (const name of Object.keys(implementations)) {
+    functions[name] = (...args) => {
+      __wrnexusRestore();
+      return implementations[name](...args);
+    };
   }
   return functions;
 }
+function __wrnexusBindings(context) {
+  return context.__wrnexusBoundFunctions ||
+    (context.__wrnexusBoundFunctions = __wrnexusCreateClientFunctions(context));
+}
+export function bindClientScope(context) {
+  return __wrnexusBindings(context);
+}
 `;
 }