@1upvision/sdk 0.1.0 → 0.1.2

package/dist/worker-runtime.js

@@ -8683,6 +8683,8 @@
     renderExtension: () => renderExtension,
     useExtensionContext: () => useExtensionContext,
     useExtensionStorage: () => useExtensionStorage,
+    useMutation: () => useMutation,
+    useQuery: () => useQuery,
     useVisionState: () => useVisionState
   });
 
@@ -8706,6 +8708,9 @@
       }
       return handler(...args);
     }
+    update(handlerId, fn) {
+      this.handlers.set(handlerId, fn);
+    }
     remove(handlerId) {
       this.handlers.delete(handlerId);
     }
@@ -8721,29 +8726,67 @@
   function nextId() {
     return `node_${++nodeCounter}`;
   }
-  function sanitizeProps(props) {
+  function cleanupHandlers(instance) {
+    for (const [key, value] of Object.entries(instance.props)) {
+      if (key.startsWith("__handler_")) {
+        callbackRegistry.remove(value);
+      }
+    }
+    for (const child of instance.children) {
+      cleanupHandlers(child);
+    }
+  }
+  function sanitizeProps(props, existingProps) {
     const sanitized = {};
     for (const [key, value] of Object.entries(props)) {
       if (key === "children") continue;
       if (typeof value === "function") {
-        const handlerId = callbackRegistry.register(value);
-        sanitized[`__handler_${key}`] = handlerId;
+        const handlerKey = `__handler_${key}`;
+        const existingHandlerId = existingProps?.[handlerKey];
+        if (existingHandlerId) {
+          callbackRegistry.update(existingHandlerId, value);
+          sanitized[handlerKey] = existingHandlerId;
+        } else {
+          const handlerId = callbackRegistry.register(value);
+          sanitized[handlerKey] = handlerId;
+        }
       } else {
         sanitized[key] = value;
       }
     }
     return sanitized;
   }
-  function deepSanitize(value) {
+  function isPlainSerializable(value) {
+    if (value === null || value === void 0) return true;
+    const t = typeof value;
+    if (t === "string" || t === "number" || t === "boolean") return true;
+    if (t === "function" || t === "symbol") return false;
+    if (t !== "object") return false;
+    if (Array.isArray(value)) return true;
+    if ("$$typeof" in value) return false;
+    if (typeof value.nodeType === "number")
+      return false;
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+  }
+  var MAX_SANITIZE_DEPTH = 10;
+  function deepSanitize(value, seen = /* @__PURE__ */ new WeakSet(), depth = 0) {
+    if (depth > MAX_SANITIZE_DEPTH) return void 0;
     if (value === null || value === void 0) return value;
     const t = typeof value;
     if (t === "string" || t === "number" || t === "boolean") return value;
     if (t === "function" || t === "symbol") return void 0;
-    if (Array.isArray(value)) return value.map(deepSanitize);
     if (t === "object") {
+      const obj = value;
+      if (seen.has(obj)) return void 0;
+      seen.add(obj);
+      if (!isPlainSerializable(value)) return void 0;
+      if (Array.isArray(value)) {
+        return value.map((v) => deepSanitize(v, seen, depth + 1));
+      }
       const out = {};
       for (const [k, v] of Object.entries(value)) {
-        const sanitized = deepSanitize(v);
+        const sanitized = deepSanitize(v, seen, depth + 1);
         if (sanitized !== void 0) {
           out[k] = sanitized;
         }
@@ -8763,6 +8806,13 @@
   var DefaultEventPriority = 32;
   function createHostConfig(onCommit) {
     let currentUpdatePriority = 0;
+    let prevTreeCompareJson = null;
+    function treeToCompareJson(tree) {
+      return JSON.stringify(tree, (key, value) => {
+        if (key.startsWith("__handler_")) return "__handler__";
+        return value;
+      });
+    }
     return {
       // -----------------------------------------------------------------------
       // Feature flags
@@ -8864,6 +8914,7 @@
         parent.children.push(child);
       },
       removeChild(parent, child) {
+        cleanupHandlers(child);
         child.parent = null;
         const idx = parent.children.indexOf(child);
         if (idx !== -1) parent.children.splice(idx, 1);
@@ -8882,6 +8933,7 @@
         container.children.push(child);
       },
       removeChildFromContainer(container, child) {
+        cleanupHandlers(child);
         child.parent = null;
         const idx = container.children.indexOf(child);
         if (idx !== -1) container.children.splice(idx, 1);
@@ -8897,17 +8949,20 @@
       },
       // -----------------------------------------------------------------------
       // Updates
+      //
+      // NOTE: react-reconciler@0.32.0 (React 19) removed prepareUpdate and
+      // the updatePayload parameter from commitUpdate. The reconciler now
+      // calls commitUpdate directly with (instance, type, oldProps, newProps,
+      // internalHandle) — no updatePayload.
       // -----------------------------------------------------------------------
-      prepareUpdate(_instance, _type, _oldProps, newProps) {
-        return newProps;
-      },
-      commitUpdate(instance, _updatePayload, _type, _oldProps, newProps) {
-        for (const [key, value] of Object.entries(instance.props)) {
-          if (key.startsWith("__handler_")) {
+      commitUpdate(instance, _type, _oldProps, newProps) {
+        const oldInstanceProps = instance.props;
+        instance.props = sanitizeProps(newProps, oldInstanceProps);
+        for (const [key, value] of Object.entries(oldInstanceProps)) {
+          if (key.startsWith("__handler_") && !(key in instance.props)) {
             callbackRegistry.remove(value);
           }
         }
-        instance.props = sanitizeProps(newProps);
       },
       commitTextUpdate(textInstance, _oldText, newText) {
         textInstance.props = { content: newText };
@@ -8925,6 +8980,9 @@
       },
       resetAfterCommit(container) {
         const tree = serializeTree(container.children);
+        const compareJson = treeToCompareJson(tree);
+        if (compareJson === prevTreeCompareJson) return;
+        prevTreeCompareJson = compareJson;
         onCommit(tree);
       },
       // -----------------------------------------------------------------------
@@ -8946,6 +9004,9 @@
       // Container operations
       // -----------------------------------------------------------------------
       clearContainer(container) {
+        for (const child of container.children) {
+          cleanupHandlers(child);
+        }
         container.children = [];
       },
       preparePortalMount() {
@@ -8995,26 +9056,28 @@
 
   // src/renderer/render.ts
   var bridgeInstance = null;
+  var reconcilerInstance = null;
+  var rootInstance = null;
   function setBridge(bridge2) {
     bridgeInstance = bridge2;
   }
-  function renderExtension(element) {
-    if (!bridgeInstance) {
-      throw new Error(
-        "Vision SDK: Bridge not initialized. Ensure worker-entry has run before calling render."
-      );
+  function ensureRoot() {
+    if (reconcilerInstance && rootInstance) {
+      return {
+        reconciler: reconcilerInstance,
+        root: rootInstance
+      };
     }
-    const bridge2 = bridgeInstance;
     const onCommit = (tree) => {
-      bridge2.notify("ui.render", { tree });
+      bridgeInstance?.notify("ui.render", { tree });
     };
     const hostConfig = createHostConfig(onCommit);
     const reconciler = (0, import_react_reconciler.default)(hostConfig);
     const container = { children: [] };
     const root = reconciler.createContainer(
       container,
-      0,
-      // ConcurrentRoot tag
+      1,
+      // ConcurrentRoot (0 = LegacyRoot/sync, 1 = ConcurrentRoot/async)
       null,
       // hydrationCallbacks
       false,
@@ -9028,8 +9091,19 @@
       null
       // transitionCallbacks
     );
+    reconcilerInstance = reconciler;
+    rootInstance = root;
+    return { reconciler, root };
+  }
+  function renderExtension(element) {
+    if (!bridgeInstance) {
+      throw new Error(
+        "Vision SDK: Bridge not initialized. Ensure worker-entry has run before calling render."
+      );
+    }
+    const { reconciler, root } = ensureRoot();
     reconciler.updateContainer(element, root, null, () => {
-      bridge2.notify("ui.ready");
+      bridgeInstance?.notify("ui.ready");
     });
     const clearInit = globalThis.__visionClearInitTimeout;
     if (typeof clearInit === "function") {
@@ -9157,27 +9231,139 @@
     );
   }
 
+  // src/hooks/useQuery.ts
+  var import_react14 = __toESM(require_react(), 1);
+  function useQuery(name, args) {
+    const [data, setData] = (0, import_react14.useState)(void 0);
+    const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+    const [error, setError] = (0, import_react14.useState)(null);
+    const argsJson = JSON.stringify(args);
+    const mountedRef = (0, import_react14.useRef)(true);
+    const bridge2 = globalThis.__visionBridge;
+    const fetchData = (0, import_react14.useCallback)(() => {
+      if (!bridge2) return;
+      setIsLoading(true);
+      setError(null);
+      const parsedArgs = argsJson ? JSON.parse(argsJson) : void 0;
+      bridge2.request("server.query", { name, args: parsedArgs }).then((result) => {
+        if (mountedRef.current) {
+          setData(result);
+          setIsLoading(false);
+        }
+      }).catch((err) => {
+        if (mountedRef.current) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setIsLoading(false);
+        }
+      });
+    }, [bridge2, name, argsJson]);
+    (0, import_react14.useEffect)(() => {
+      mountedRef.current = true;
+      fetchData();
+      return () => {
+        mountedRef.current = false;
+      };
+    }, [fetchData]);
+    (0, import_react14.useEffect)(() => {
+      const handler = (detail) => {
+        const payload = detail;
+        if (!payload?.queryNames || payload.queryNames.includes(name)) {
+          fetchData();
+        }
+      };
+      globalThis.__visionQueryInvalidate = handler;
+      return () => {
+        if (globalThis.__visionQueryInvalidate === handler) {
+          delete globalThis.__visionQueryInvalidate;
+        }
+      };
+    }, [fetchData, name]);
+    return { data, isLoading, error, refetch: fetchData };
+  }
+
+  // src/hooks/useMutation.ts
+  var import_react15 = __toESM(require_react(), 1);
+  function useMutation(name) {
+    const [data, setData] = (0, import_react15.useState)(void 0);
+    const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
+    const [error, setError] = (0, import_react15.useState)(null);
+    const bridge2 = globalThis.__visionBridge;
+    const mutateAsync = (0, import_react15.useCallback)(
+      async (args) => {
+        if (!bridge2) {
+          throw new Error("Vision bridge not available");
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+          const result = await bridge2.request("server.mutation", {
+            name,
+            args
+          });
+          setData(result);
+          setIsLoading(false);
+          const invalidate = globalThis.__visionQueryInvalidate;
+          if (invalidate) {
+            invalidate({});
+          }
+          return result;
+        } catch (err) {
+          const error2 = err instanceof Error ? err : new Error(String(err));
+          setError(error2);
+          setIsLoading(false);
+          throw error2;
+        }
+      },
+      [bridge2, name]
+    );
+    const mutate = (0, import_react15.useCallback)(
+      (args) => {
+        mutateAsync(args).catch(() => {
+        });
+      },
+      [mutateAsync]
+    );
+    return { mutate, mutateAsync, data, isLoading, error };
+  }
+
   // src/bridge/worker-bridge.ts
+  var isIframe = typeof window !== "undefined" && window.parent && window.parent !== window;
   var WorkerBridge = class {
     requestHandlers = /* @__PURE__ */ new Map();
     notificationHandlers = /* @__PURE__ */ new Map();
     pendingRequests = /* @__PURE__ */ new Map();
     requestCounter = 0;
+    messageListener = null;
     constructor() {
-      self.addEventListener("message", (event) => {
-        this.handleMessage(event.data);
-      });
+      this.messageListener = (event) => {
+        if (isIframe && event.source !== window.parent) return;
+        const data = event.data;
+        if (!data || typeof data !== "object" || data.jsonrpc !== "2.0") return;
+        this.handleMessage(data);
+      };
+      if (isIframe) {
+        window.addEventListener("message", this.messageListener);
+      } else {
+        self.addEventListener("message", this.messageListener);
+      }
+    }
+    send(message) {
+      if (isIframe) {
+        window.parent.postMessage(message, "*");
+      } else {
+        self.postMessage(message);
+      }
     }
     notify(method, params) {
       const message = { jsonrpc: "2.0", method, params };
-      self.postMessage(message);
+      this.send(message);
     }
     request(method, params) {
       const id = `req_${++this.requestCounter}`;
       const message = { jsonrpc: "2.0", id, method, params };
       return new Promise((resolve, reject) => {
         this.pendingRequests.set(id, { resolve, reject });
-        self.postMessage(message);
+        this.send(message);
       });
     }
     onRequest(method, handler) {
@@ -9213,14 +9399,14 @@
                 id: message.id,
                 result
               };
-              self.postMessage(response);
+              this.send(response);
             }).catch((error) => {
               const response = {
                 jsonrpc: "2.0",
                 id: message.id,
                 error: { code: -32e3, message: String(error) }
               };
-              self.postMessage(response);
+              this.send(response);
             });
           }
         } else {
@@ -9232,6 +9418,14 @@
       }
     }
     destroy() {
+      if (this.messageListener) {
+        if (isIframe) {
+          window.removeEventListener("message", this.messageListener);
+        } else {
+          self.removeEventListener("message", this.messageListener);
+        }
+        this.messageListener = null;
+      }
       this.pendingRequests.clear();
       this.requestHandlers.clear();
       this.notificationHandlers.clear();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1upvision/sdk",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vision SDK for building extensions on the 1up.vision platform",
   "type": "module",
   "exports": {
@@ -23,7 +23,7 @@
   ],
   "dependencies": {
     "react-reconciler": "^0.32.0",
-    "@1upvision/protocol": "0.1.0"
+    "@1upvision/protocol": "0.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"