@membranehq/react 0.3.3 → 0.5.0

package/dist/esm/hooks/element/element-key.mjs

@@ -0,0 +1,49 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.5.0
+ */
+'use client';
+
+import deepEqual from 'fast-deep-equal';
+
+const ELEMENT_KEY_PREFIX = "element:";
+function stringifyElementKey({ type, selector, token }) {
+  return `${ELEMENT_KEY_PREFIX}${JSON.stringify({
+    type,
+    token,
+    selector
+  })}`;
+}
+function parseElementKey(keyString) {
+  try {
+    const keyPayload = keyString.slice(ELEMENT_KEY_PREFIX.length);
+    const parsed = JSON.parse(keyPayload);
+    if (typeof parsed !== "object" || parsed === null || typeof parsed.type !== "string") {
+      throw new Error("Invalid element key structure");
+    }
+    return parsed;
+  } catch (error) {
+    throw new Error(`Failed to parse element key: ${error instanceof Error ? error.message : "Unknown error"}`);
+  }
+}
+function matchElementKey(keyString, query) {
+  try {
+    const key = parseElementKey(keyString);
+    if (query.type !== void 0 && key.type !== query.type) {
+      return false;
+    }
+    if (query.token !== void 0 && key.token !== query.token) {
+      return false;
+    }
+    if (query.selector !== void 0 && !deepEqual(key.selector, query.selector)) {
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export { ELEMENT_KEY_PREFIX, matchElementKey, parseElementKey, stringifyElementKey };

package/dist/esm/hooks/{useElement.mjs → element/useElement.mjs}

@@ -2,24 +2,24 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import useSWR from 'swr';
-import AwesomeDebouncePromise from '../_modules/awesome-debounce-promise.mjs';
-import { useIntegrationApp } from '../contexts/integration-app-context.mjs';
+import AwesomeDebouncePromise from '../../_modules/awesome-debounce-promise.mjs';
+import { useIntegrationApp } from '../../contexts/integration-app-context.mjs';
+import { stringifyElementKey } from './element-key.mjs';
 
-const elementStateCache = /* @__PURE__ */ new Map();
+const elementUpdateStateCache = /* @__PURE__ */ new Map();
 function useElement(type, selector, accessorGenerator) {
   const integrationApp = useIntegrationApp();
-  const elementKeyData = {
+  const elementKey = stringifyElementKey({
     type,
-    token: integrationApp?.token,
-    selector
-  };
-  const elementKey = JSON.stringify(elementKeyData);
-  const elementState = elementStateCache.get(elementKey) ?? {
+    selector,
+    token: integrationApp?.token
+  });
+  const elementState = elementUpdateStateCache.get(elementKey) ?? {
     updatedLocally: false,
     savingToServer: false,
     currentPutRequests: [],
@@ -44,11 +44,11 @@ function useElement(type, selector, accessorGenerator) {
       }
     }, 500)
   };
-  if (!elementStateCache.has(elementKey)) {
-    elementStateCache.set(elementKey, elementState);
+  if (!elementUpdateStateCache.has(elementKey)) {
+    elementUpdateStateCache.set(elementKey, elementState);
   }
   const accessor = integrationApp ? accessorGenerator(integrationApp) : void 0;
-  const swrKey = accessor && selector ? `element:${elementKey}` : void 0;
+  const swrKey = accessor && selector ? elementKey : void 0;
   const {
     data: item,
     mutate,
@@ -69,7 +69,7 @@ function useElement(type, selector, accessorGenerator) {
       throw new Error(
         /* FIXME: strictNullCheck temporary fix */
         // @ts-expect-error TS(2531): Object is possibly 'null'.
-        `"put method is not supported for accessor ${accessor.constructor.name}`
+        `PUT method is not supported for accessor ${accessor.constructor.name}`
       );
     }
     elementState.updatedLocally = true;

package/dist/esm/hooks/{useElements.mjs → element/useElements.mjs}

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { useState } from 'react';
 import qs from 'query-string';
 import useSWRInfinite from 'swr/infinite';
-import { useIntegrationApp } from '../contexts/integration-app-context.mjs';
+import { useIntegrationApp } from '../../contexts/integration-app-context.mjs';
 
 function useElements(route, query = {}) {
   const integrationApp = useIntegrationApp();

package/dist/esm/hooks/elements-background-sync/create-workspace-sync-source.mjs

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.5.0
+ */
+'use client';
+
+async function createWorkspaceSyncSource(client, key, handlers) {
+  const eventSource = await client.createEventSource(key);
+  const handleMessage = (event) => {
+    try {
+      const eventData = JSON.parse(event.data);
+      handlers?.onMessage?.(eventData);
+    } catch (parseError) {
+      handlers?.onError?.(new Error(String(parseError)));
+    }
+  };
+  const handleError = () => {
+    handlers?.onError?.(new Error("SSE connection failed"));
+  };
+  const handleOpen = () => {
+    handlers?.onOpen?.();
+  };
+  eventSource.addEventListener("message", handleMessage);
+  eventSource.addEventListener("error", handleError);
+  eventSource.addEventListener("open", handleOpen);
+  return () => {
+    eventSource.removeEventListener("message", handleMessage);
+    eventSource.removeEventListener("error", handleError);
+    eventSource.removeEventListener("open", handleOpen);
+    eventSource.close();
+  };
+}
+
+export { createWorkspaceSyncSource };

package/dist/esm/hooks/elements-background-sync/useElementsBackgroundSync.mjs

@@ -0,0 +1,74 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.5.0
+ */
+'use client';
+
+import { WorkspaceSyncEventType } from '@membranehq/sdk';
+import { useSWRConfig } from 'swr';
+import useSWRSubscription from 'swr/subscription';
+import { useIntegrationAppClient } from '../../contexts/integration-app-client-context.mjs';
+import { matchElementKey } from '../element/element-key.mjs';
+import { createWorkspaceSyncSource } from './create-workspace-sync-source.mjs';
+
+function useElementsBackgroundSync(handlers, customClient) {
+  const { cache, mutate } = useSWRConfig();
+  const { client: defaultClient } = useIntegrationAppClient();
+  const client = customClient || defaultClient;
+  const { data, error } = useSWRSubscription(
+    client ? ["sse/workspace", client] : void 0,
+    ([path, integrationAppClient], { next }) => {
+      let cleanup = null;
+      const setupConnection = async () => {
+        try {
+          cleanup = await createWorkspaceSyncSource(integrationAppClient, path, {
+            onMessage: (eventData) => {
+              handleSSEMessage(eventData, cache, mutate, handlers, next);
+            },
+            onError: (error2) => {
+              handlers?.onError?.(error2);
+              next(error2);
+            },
+            onOpen: () => {
+              handlers?.onOpen?.();
+            }
+          });
+        } catch (setupError) {
+          next(setupError);
+        }
+      };
+      void setupConnection();
+      return () => {
+        if (cleanup) {
+          cleanup();
+        }
+      };
+    }
+  );
+  return {
+    error,
+    data
+  };
+}
+function handleSSEMessage(eventData, cache, mutate, handlers, next) {
+  if (eventData.type === WorkspaceSyncEventType.ElementUpdate) {
+    next(null, eventData);
+    const matchingKeys = [...cache.keys()].filter((key) => {
+      matchElementKey(key, {
+        type: eventData.elementType,
+        selector: eventData.elementId
+      });
+    });
+    Promise.all(matchingKeys.map((key) => mutate(key))).then((invalidatedKeys) => {
+      handlers?.onInvalidationSuccess?.(eventData, invalidatedKeys);
+    }).catch((error) => {
+      console.error("Failed to invalidate element after SSE event:", error);
+      handlers?.onInvalidationError?.(eventData, error);
+    });
+  }
+  handlers?.onMessage?.(eventData);
+}
+
+export { useElementsBackgroundSync };

package/dist/esm/hooks/external-events/useExternalEventSubscription.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useExternalEventSubscription(id) {
   const {

package/dist/esm/hooks/external-events/useExternalEventSubscriptions.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useExternalEventSubscriptions(query) {
   const { ...rest } = useElements("external-event-subscriptions", query);

package/dist/esm/hooks/field-mappings/useFieldMapping.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useFieldMapping(selector) {
   const {

package/dist/esm/hooks/field-mappings/useFieldMappingInstance.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useFieldMappingInstance(selector) {
   const {

package/dist/esm/hooks/field-mappings/useFieldMappingInstances.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useFieldMappingInstances(query) {
   const { ...rest } = useElements("field-mapping-instances", query);

package/dist/esm/hooks/field-mappings/useFieldMappings.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useFieldMappings(query) {
   const { ...rest } = useElements("field-mappings", query);

package/dist/esm/hooks/flows/useFlow.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useFlow(selector) {
   const {

package/dist/esm/hooks/flows/useFlowInstance.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useFlowInstance(selector) {
   const {

package/dist/esm/hooks/flows/useFlowInstances.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useFlowInstances(query) {
   const { ...rest } = useElements("flow-instances", query);

package/dist/esm/hooks/flows/useFlowRun.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useFlowRun(id) {
   const {

package/dist/esm/hooks/flows/useFlowRuns.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useFlowRuns(query) {
   const { ...rest } = useElements("flow-runs", query);

package/dist/esm/hooks/flows/useFlows.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useFlows(query) {
   const { ...rest } = useElements("flows", query);

package/dist/esm/hooks/integrations/useConnection.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useConnection(id) {
   const { item: connection, ...rest } = useElement(WorkspaceElementType.Connection, id, (integrationApp) => id ? integrationApp.connection(id) : void 0);

package/dist/esm/hooks/integrations/useConnections.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useConnections(query) {
   const { ...rest } = useElements("connections", query);

package/dist/esm/hooks/integrations/useConnectorSpec.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/hooks/integrations/useIntegration.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useIntegration(idOrKey) {
   const { item: integration, ...rest } = useElement(

package/dist/esm/hooks/integrations/useIntegrations.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useIntegrations(query) {
   const { ...rest } = useElements("integrations", query);

package/dist/esm/hooks/scenarios/useScenario.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useScenario(selector) {
   const { item: scenario, ...rest } = useElement(

package/dist/esm/hooks/scenarios/useScenarios.mjs

@@ -2,11 +2,11 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
-import { useElements } from '../useElements.mjs';
+import { useElements } from '../element/useElements.mjs';
 
 function useScenarios(query) {
   const { ...rest } = useElements("scenarios", query);

package/dist/esm/hooks/screens/useScreen.mjs

@@ -2,12 +2,12 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
 import { WorkspaceElementType } from '@membranehq/sdk';
-import { useElement } from '../useElement.mjs';
+import { useElement } from '../element/useElement.mjs';
 
 function useScreen(selector) {
   const { item: screen, ...rest } = useElement(

package/dist/esm/hooks/useExportFieldsAsCode.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/hooks/useIntegrationAppSWR.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/hooks/usePromise.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 
@@ -55,6 +55,7 @@ export { useScenarios } from './hooks/scenarios/useScenarios.mjs';
 export { useDataCollectionSpec } from './hooks/data-collections/useDataCollectionSpec.mjs';
 export { useExternalEventSubscriptions } from './hooks/external-events/useExternalEventSubscriptions.mjs';
 export { useExternalEventSubscription } from './hooks/external-events/useExternalEventSubscription.mjs';
+export { useElementsBackgroundSync } from './hooks/elements-background-sync/useElementsBackgroundSync.mjs';
 export { IntegrationAvatar } from './components/Integrations/IntegrationAvatar/index.mjs';
 export { IntegrationItem } from './components/Integrations/IntegrationItem/index.mjs';
 export { IntegrationItemSkeleton } from './components/Integrations/IntegrationItemSkeleton.mjs';
@@ -115,4 +116,5 @@ export { IntegrationAppClientProvider, useIntegrationAppClient } from './context
 export { IntegrationAppConnectionProvider, useIntegrationAppConnection } from './contexts/integration-app-connection-context.mjs';
 export { IntegrationAppIntegrationProvider, useIntegrationAppIntegration } from './contexts/integration-app-integration-context.mjs';
 export { DataInput } from './components/DataInput/index.mjs';
+export { ELEMENT_KEY_PREFIX, matchElementKey, parseElementKey, stringifyElementKey } from './hooks/element/element-key.mjs';
 export { FieldDescription } from './components/DataBuilder/FieldDescription.mjs';

package/dist/esm/recipes/dropdown.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/styled-system/css/conditions.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/styled-system/css/css.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/styled-system/css/cva.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/styled-system/css/cx.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/styled-system/css/sva.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.3
+ * v0.5.0
  */
 'use client';