@membranehq/react 0.3.3 → 0.5.0

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.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.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.3
+ * v0.5.0
  */
 'use client';
 

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

@@ -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/cjs/styled-system/helpers.cjs

@@ -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/cjs/styled-system/jsx/box.cjs

@@ -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/cjs/styled-system/jsx/center.cjs

@@ -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/cjs/styled-system/jsx/circle.cjs

@@ -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/cjs/styled-system/jsx/divider.cjs

@@ -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/cjs/styled-system/jsx/factory-helper.cjs

@@ -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/cjs/styled-system/jsx/factory.cjs

@@ -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/cjs/styled-system/jsx/flex.cjs

@@ -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/cjs/styled-system/jsx/is-valid-prop.cjs

@@ -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/cjs/styled-system/jsx/visually-hidden.cjs

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