@membranehq/react 0.3.2 → 0.4.0

package/dist/cjs/hooks/{useElement.cjs → element/useElement.cjs}

@@ -2,26 +2,26 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var useSWR = require('swr');
-var awesomeDebouncePromise = require('../_modules/awesome-debounce-promise.cjs');
-var integrationAppContext = require('../contexts/integration-app-context.cjs');
+var awesomeDebouncePromise = require('../../_modules/awesome-debounce-promise.cjs');
+var integrationAppContext = require('../../contexts/integration-app-context.cjs');
+var elementKey = require('./element-key.cjs');
 
-const elementStateCache = /* @__PURE__ */ new Map();
+const elementUpdateStateCache = /* @__PURE__ */ new Map();
 function useElement(type, selector, accessorGenerator) {
   const integrationApp = integrationAppContext.useIntegrationApp();
-  const elementKeyData = {
+  const elementKey$1 = 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$1) ?? {
     updatedLocally: false,
     savingToServer: false,
     currentPutRequests: [],
@@ -46,11 +46,11 @@ function useElement(type, selector, accessorGenerator) {
       }
     }, 500)
   };
-  if (!elementStateCache.has(elementKey)) {
-    elementStateCache.set(elementKey, elementState);
+  if (!elementUpdateStateCache.has(elementKey$1)) {
+    elementUpdateStateCache.set(elementKey$1, elementState);
   }
   const accessor = integrationApp ? accessorGenerator(integrationApp) : void 0;
-  const swrKey = accessor && selector ? `element:${elementKey}` : void 0;
+  const swrKey = accessor && selector ? elementKey$1 : void 0;
   const {
     data: item,
     mutate,
@@ -71,7 +71,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/cjs/hooks/{useElements.cjs → element/useElements.cjs}

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
@@ -11,7 +11,7 @@
 var React = require('react');
 var qs = require('query-string');
 var useSWRInfinite = require('swr/infinite');
-var integrationAppContext = require('../contexts/integration-app-context.cjs');
+var integrationAppContext = require('../../contexts/integration-app-context.cjs');
 
 function useElements(route, query = {}) {
   const integrationApp = integrationAppContext.useIntegrationApp();

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

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.4.0
+ */
+'use client';
+
+'use strict';
+
+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();
+  };
+}
+
+exports.createWorkspaceSyncSource = createWorkspaceSyncSource;

package/dist/cjs/hooks/elements-background-sync/useElementsBackgroundSync.cjs

@@ -0,0 +1,76 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.4.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var useSWR = require('swr');
+var useSWRSubscription = require('swr/subscription');
+var integrationAppClientContext = require('../../contexts/integration-app-client-context.cjs');
+var elementKey = require('../element/element-key.cjs');
+var createWorkspaceSyncSource = require('./create-workspace-sync-source.cjs');
+
+function useElementsBackgroundSync(handlers, customClient) {
+  const { cache, mutate } = useSWR.useSWRConfig();
+  const { client: defaultClient } = integrationAppClientContext.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.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 === sdk.WorkspaceSyncEventType.ElementUpdate) {
+    next(null, eventData);
+    const matchingKeys = [...cache.keys()].filter((key) => {
+      elementKey.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);
+}
+
+exports.useElementsBackgroundSync = useElementsBackgroundSync;

package/dist/cjs/hooks/external-events/useExternalEventSubscription.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useExternalEventSubscription(id) {
   const {

package/dist/cjs/hooks/external-events/useExternalEventSubscriptions.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useExternalEventSubscriptions(query) {
   const { ...rest } = useElements.useElements("external-event-subscriptions", query);

package/dist/cjs/hooks/field-mappings/useFieldMapping.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useFieldMapping(selector) {
   const {

package/dist/cjs/hooks/field-mappings/useFieldMappingInstance.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useFieldMappingInstance(selector) {
   const {

package/dist/cjs/hooks/field-mappings/useFieldMappingInstances.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useFieldMappingInstances(query) {
   const { ...rest } = useElements.useElements("field-mapping-instances", query);

package/dist/cjs/hooks/field-mappings/useFieldMappings.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useFieldMappings(query) {
   const { ...rest } = useElements.useElements("field-mappings", query);

package/dist/cjs/hooks/flows/useFlow.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useFlow(selector) {
   const {

package/dist/cjs/hooks/flows/useFlowInstance.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useFlowInstance(selector) {
   const {

package/dist/cjs/hooks/flows/useFlowInstances.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useFlowInstances(query) {
   const { ...rest } = useElements.useElements("flow-instances", query);

package/dist/cjs/hooks/flows/useFlowRun.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useFlowRun(id) {
   const {

package/dist/cjs/hooks/flows/useFlowRuns.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useFlowRuns(query) {
   const { ...rest } = useElements.useElements("flow-runs", query);

package/dist/cjs/hooks/flows/useFlows.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useFlows(query) {
   const { ...rest } = useElements.useElements("flows", query);

package/dist/cjs/hooks/integrations/useConnection.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useConnection(id) {
   const { item: connection, ...rest } = useElement.useElement(sdk.WorkspaceElementType.Connection, id, (integrationApp) => id ? integrationApp.connection(id) : void 0);

package/dist/cjs/hooks/integrations/useConnections.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useConnections(query) {
   const { ...rest } = useElements.useElements("connections", query);

package/dist/cjs/hooks/integrations/useConnectorSpec.cjs

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

package/dist/cjs/hooks/integrations/useIntegration.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useIntegration(idOrKey) {
   const { item: integration, ...rest } = useElement.useElement(

package/dist/cjs/hooks/integrations/useIntegrations.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useIntegrations(query) {
   const { ...rest } = useElements.useElements("integrations", query);

package/dist/cjs/hooks/scenarios/useScenario.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useScenario(selector) {
   const { item: scenario, ...rest } = useElement.useElement(

package/dist/cjs/hooks/scenarios/useScenarios.cjs

@@ -2,13 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
-var useElements = require('../useElements.cjs');
+var useElements = require('../element/useElements.cjs');
 
 function useScenarios(query) {
   const { ...rest } = useElements.useElements("scenarios", query);

package/dist/cjs/hooks/screens/useScreen.cjs

@@ -2,14 +2,14 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@membranehq/sdk');
-var useElement = require('../useElement.cjs');
+var useElement = require('../element/useElement.cjs');
 
 function useScreen(selector) {
   const { item: screen, ...rest } = useElement.useElement(

package/dist/cjs/hooks/useExportFieldsAsCode.cjs

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

package/dist/cjs/hooks/useIntegrationAppSWR.cjs

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

package/dist/cjs/hooks/usePromise.cjs

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

package/dist/cjs/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.2
+ * v0.4.0
  */
 'use client';
 
@@ -57,6 +57,7 @@ var useScenarios = require('./hooks/scenarios/useScenarios.cjs');
 var useDataCollectionSpec = require('./hooks/data-collections/useDataCollectionSpec.cjs');
 var useExternalEventSubscriptions = require('./hooks/external-events/useExternalEventSubscriptions.cjs');
 var useExternalEventSubscription = require('./hooks/external-events/useExternalEventSubscription.cjs');
+var useElementsBackgroundSync = require('./hooks/elements-background-sync/useElementsBackgroundSync.cjs');
 var index$1 = require('./components/Integrations/IntegrationAvatar/index.cjs');
 var index$2 = require('./components/Integrations/IntegrationItem/index.cjs');
 var IntegrationItemSkeleton = require('./components/Integrations/IntegrationItemSkeleton.cjs');
@@ -117,6 +118,7 @@ var integrationAppClientContext = require('./contexts/integration-app-client-con
 var integrationAppConnectionContext = require('./contexts/integration-app-connection-context.cjs');
 var integrationAppIntegrationContext = require('./contexts/integration-app-integration-context.cjs');
 var index$g = require('./components/DataInput/index.cjs');
+var elementKey = require('./hooks/element/element-key.cjs');
 var FieldDescription = require('./components/DataBuilder/FieldDescription.cjs');
 
 
@@ -170,6 +172,7 @@ exports.useScenarios = useScenarios.useScenarios;
 exports.useDataCollectionSpec = useDataCollectionSpec.useDataCollectionSpec;
 exports.useExternalEventSubscriptions = useExternalEventSubscriptions.useExternalEventSubscriptions;
 exports.useExternalEventSubscription = useExternalEventSubscription.useExternalEventSubscription;
+exports.useElementsBackgroundSync = useElementsBackgroundSync.useElementsBackgroundSync;
 exports.IntegrationAvatar = index$1.IntegrationAvatar;
 exports.IntegrationItem = index$2.IntegrationItem;
 exports.IntegrationItemSkeleton = IntegrationItemSkeleton.IntegrationItemSkeleton;
@@ -273,6 +276,10 @@ exports.useIntegrationAppConnection = integrationAppConnectionContext.useIntegra
 exports.IntegrationAppIntegrationProvider = integrationAppIntegrationContext.IntegrationAppIntegrationProvider;
 exports.useIntegrationAppIntegration = integrationAppIntegrationContext.useIntegrationAppIntegration;
 exports.DataInput = index$g.DataInput;
+exports.ELEMENT_KEY_PREFIX = elementKey.ELEMENT_KEY_PREFIX;
+exports.matchElementKey = elementKey.matchElementKey;
+exports.parseElementKey = elementKey.parseElementKey;
+exports.stringifyElementKey = elementKey.stringifyElementKey;
 exports.FieldDescription = FieldDescription.FieldDescription;
 Object.keys(sdk).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

package/dist/cjs/recipes/dropdown.cjs

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

package/dist/cjs/styled-system/css/conditions.cjs

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

package/dist/cjs/styled-system/css/css.cjs

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

package/dist/cjs/styled-system/css/cva.cjs

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

package/dist/cjs/styled-system/css/cx.cjs

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