feat(custom-widgets): improve authoring workbench (#6689)

* feat(custom-widgets): improve authoring workbench

* fix(custom-widgets): address review and CI

* refactor(custom-widgets): satisfy architecture checks

* fix(custom-widgets): isolate workbench typing updates

* fix(custom-widgets): harden workbench state

packages/custom-widgets/src/runtime/custom-jsx-renderer.tsx

@@ -1,11 +1,12 @@
 import type { ComponentType, ErrorInfo, ReactNode } from "react";
-import { Component, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { Component, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Alert, Box, Stack, Text } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { renderSafeJsx } from "../jsx/interpreter";
 import { CustomJsxInputsProvider } from "../jsx/runtime-components";
 import type { WidgetInputType, WidgetInputValue } from "../jsx/runtime-components";
+import { sameInputRecord, sameStringArray, sameTypeRecord } from "./input-state-utils";
 import type { CustomJsxRequestCapability } from "./types";
 
 const EMPTY_RECORD: Record<string, never> = {};
@@ -24,6 +25,7 @@ const permissions = new Set(["view", "modify", "full"]);
 export interface CustomJsxRendererMessages {
   noTemplate: string;
   templateWarnings(count: number): string;
+  bindingTypeConflict(name: string, firstType: WidgetInputType, secondType: WidgetInputType): string;
 }
 
 export interface CustomJsxRendererProps {
@@ -115,7 +117,18 @@ export function CustomJsxRenderer(props: CustomJsxRendererProps) {
       </Alert>
     );
 
-  return <CustomJsxRendererSession key={props.template} {...props} />;
+  return <CustomJsxRendererSession {...props} />;
+}
+
+interface InputRegistration {
+  name: string;
+  type: WidgetInputType;
+  initialValue: WidgetInputValue;
+}
+
+interface InputState {
+  values: Record<string, WidgetInputValue>;
+  types: Record<string, WidgetInputType>;
 }
 
 function CustomJsxRendererSession({
@@ -130,38 +143,79 @@ function CustomJsxRendererSession({
   const inputScopeId = useId();
   const [parseErrors, setParseErrors] = useState<string[]>([]);
   const [bindingErrors, setBindingErrors] = useState<string[]>([]);
-  const [inputs, setInputs] = useState<Record<string, WidgetInputValue>>({});
-  const [inputTypes, setInputTypes] = useState<Record<string, WidgetInputType>>({});
-  const registerInput = useCallback((name: string, type: WidgetInputType, initialValue: WidgetInputValue) => {
-    setInputTypes((current) => {
-      const existing = current[name];
-      if (existing === type) return current;
-      if (existing && existing !== type) {
-        setBindingErrors((errors) => {
-          const message = `BINDING_TYPE_CONFLICT: '${name}' is bound as both ${existing} and ${type}`;
-          return errors.includes(message) ? errors : [...errors.slice(0, 4), message];
-        });
-        return current;
-      }
-      return { ...current, [name]: type };
-    });
-    setInputs((current) => (Object.hasOwn(current, name) ? current : { ...current, [name]: initialValue }));
+  const [inputState, setInputState] = useState<InputState>({ values: {}, types: {} });
+  const { values: inputs, types: inputTypes } = inputState;
+  const registrations = useRef(new Map<symbol, InputRegistration>());
+  const registrationVersion = useRef(0);
+  const mounted = useRef(true);
+  const bindingTypeConflict = messages.bindingTypeConflict;
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
   }, []);
-  const setInputValue = useCallback(
-    (name: string, type: WidgetInputType, value: WidgetInputValue) => {
-      const existing = inputTypes[name];
-      if (existing && existing !== type) {
-        setBindingErrors((errors) => {
-          const message = `BINDING_TYPE_CONFLICT: '${name}' is bound as both ${existing} and ${type}`;
-          return errors.includes(message) ? errors : [...errors.slice(0, 4), message];
-        });
-        return;
+  const reconcileInputs = useCallback(() => {
+    if (!mounted.current) return;
+    const active = new Map<string, InputRegistration>();
+    const conflicts: string[] = [];
+    for (const registration of registrations.current.values()) {
+      const existing = active.get(registration.name);
+      if (!existing) {
+        active.set(registration.name, registration);
+        continue;
       }
-      setInputTypes((current) => (current[name] === type ? current : { ...current, [name]: type }));
-      setInputs((current) => (Object.is(current[name], value) ? current : { ...current, [name]: value }));
+      if (existing.type === registration.type) continue;
+      const message = bindingTypeConflict(registration.name, existing.type, registration.type);
+      if (!conflicts.includes(message) && conflicts.length < 5) conflicts.push(message);
+    }
+    setBindingErrors((current) => (sameStringArray(current, conflicts) ? current : conflicts));
+    setInputState((current) => {
+      const nextTypes: Record<string, WidgetInputType> = {};
+      for (const [name, registration] of active) nextTypes[name] = registration.type;
+      const nextValues: Record<string, WidgetInputValue> = {};
+      for (const [name, registration] of active) {
+        if (current.types[name] === registration.type && Object.hasOwn(current.values, name)) {
+          const previousValue = current.values[name];
+          if (previousValue !== undefined) {
+            nextValues[name] = previousValue;
+            continue;
+          }
+        }
+        nextValues[name] = registration.initialValue;
+      }
+      if (sameTypeRecord(current.types, nextTypes) && sameInputRecord(current.values, nextValues)) return current;
+      return { values: nextValues, types: nextTypes };
+    });
+  }, [bindingTypeConflict]);
+  const registerInput = useCallback(
+    (name: string, type: WidgetInputType, initialValue: WidgetInputValue) => {
+      const id = Symbol(name);
+      registrations.current.set(id, { name, type, initialValue });
+      registrationVersion.current += 1;
+      reconcileInputs();
+      return () => {
+        registrations.current.delete(id);
+        registrationVersion.current += 1;
+        const version = registrationVersion.current;
+        queueMicrotask(() => {
+          if (registrationVersion.current === version) reconcileInputs();
+        });
+      };
     },
-    [inputTypes],
+    [reconcileInputs],
   );
+  const setInputValue = useCallback((name: string, type: WidgetInputType, value: WidgetInputValue) => {
+    setInputState((current) => {
+      const existing = current.types[name];
+      if (existing && existing !== type) return current;
+      if (existing === type && Object.is(current.values[name], value)) return current;
+      return {
+        values: { ...current.values, [name]: value },
+        types: existing === type ? current.types : { ...current.types, [name]: type },
+      };
+    });
+  }, []);
   const rendered = useMemo(() => {
     try {
       const bindings = { ...createBindings(data), status, options, inputs };

packages/custom-widgets/src/runtime/input-state-utils.ts

@@ -0,0 +1,19 @@
+import type { WidgetInputType, WidgetInputValue } from "../jsx/runtime-components";
+
+export function sameStringArray(left: string[], right: string[]) {
+  return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+
+export function sameTypeRecord(left: Record<string, WidgetInputType>, right: Record<string, WidgetInputType>) {
+  const leftEntries = Object.entries(left);
+  const rightEntries = Object.entries(right);
+  return leftEntries.length === rightEntries.length && leftEntries.every(([name, type]) => right[name] === type);
+}
+
+export function sameInputRecord(left: Record<string, WidgetInputValue>, right: Record<string, WidgetInputValue>) {
+  const leftEntries = Object.entries(left);
+  const rightEntries = Object.entries(right);
+  return (
+    leftEntries.length === rightEntries.length && leftEntries.every(([name, value]) => Object.is(right[name], value))
+  );
+}

packages/custom-widgets/src/runtime/sub-fetch.tsx

@@ -40,7 +40,8 @@ export const MAX_REFRESH_INTERVAL_SECONDS = 2_147_483;
 export const MAX_REFRESH_INTERVAL_MS = MAX_REFRESH_INTERVAL_SECONDS * 1_000;
 
 export function SubFetch(props: SubFetchProps) {
-  const { itemId, previewSessionId, queriesDisabled, port, messages, setQueryState } = useCustomWidgetRuntime();
+  const { itemId, previewSessionId, queryCacheKey, queriesDisabled, port, messages, setQueryState } =
+    useCustomWidgetRuntime();
   const [manualRun, setManualRun] = useState(false);
   const params = useMemo(() => normalizeParams(props.params), [props.params]);
   const paramsKey = useMemo(() => JSON.stringify(params), [params]);
@@ -56,7 +57,7 @@ export function SubFetch(props: SubFetchProps) {
   const scope = itemId ? "item" : "preview";
   const scopeId = itemId ?? previewSessionId;
   const query = useQuery({
-    queryKey: ["custom-widget", scope, scopeId, props.requestId, paramsKey],
+    queryKey: ["custom-widget", scope, scopeId, props.requestId, paramsKey, queryCacheKey],
     queryFn: ({ signal }) =>
       port.query({ itemId, previewSessionId, requestId: props.requestId ?? "", params: params ?? {} }, signal),
     enabled,

packages/custom-widgets/src/runtime/types.ts

@@ -79,6 +79,7 @@ export interface CustomWidgetRuntimeMessages {
 export interface CustomWidgetRuntimeValue {
   itemId?: string;
   definitionId?: string;
+  queryCacheKey?: string;
   previewSessionId?: string;
   previewLiveActions?: boolean;
   queriesDisabled?: boolean;