@calimero-network/mero-react 9.0.0 → 9.1.1

package/README.md

@@ -208,6 +208,41 @@ const { contexts, loading, error, refetch } = useContexts(applicationId);
 // contexts: Array<{ contextId: string; applicationId: string }>
 ```
 
+### Blob hooks
+
+`useBlobInfo` / `useBlobUrl` / `useUploadBlob` read and write the node's blob
+store. The reads take an optional `contextId`, and it is what picks the mode:
+
+- **without `contextId`** — local-only. The node answers from its own blob
+  store immediately, or 404s.
+- **with `contextId`** — network discovery. The node probes that context's
+  peers (availability nodes first) for a holder.
+
+Discovery is slow: core bounds the search by a **~30s deadline**, and for
+`useBlobUrl` the byte transfer is on top of that. `loading` is real UI state on
+these hooks, not decoration.
+
+```tsx
+// Presence and size, no download — ask this before pulling something large.
+const { info, notFound, loading, error } = useBlobInfo(blobId, { contextId });
+// info: { blobId, size, hash?, mimeType?, source?: 'local' | 'peer' } | null
+
+// Bytes as an object URL, revoked for you on unmount and on id/context change.
+const { url } = useBlobUrl(blobId, { contextId, type: 'image/png' });
+return url ? <img src={url} /> : null;
+
+// Upload. Pass contextId to announce the blob so the context's peers can
+// discover it later.
+const { uploadBlob, loading, error } = useUploadBlob();
+const result = await uploadBlob({ data: bytes, contextId });
+```
+
+A null/undefined `blobId` fetches nothing, like the other `string | null` read
+hooks. `hash` and `mimeType` are genuinely optional — a peer probe carries only
+presence and size, so a discovery-sourced hit has neither; read `info.source`
+to tell a local answer from a peer one. `notFound` marks the node's legitimate
+"no holder" 404 apart from a transport failure; `error` is set for both.
+
 ### Storage helpers
 
 Persist/read node URL, application ID, context ID, and context identity in localStorage.
@@ -360,11 +395,13 @@ useDetachContextFromGroup
 useNamespaces, useNamespace, useNamespaceGroups, useNamespaceIdentity
 useNamespacesForApplication, useCreateNamespace, useDeleteNamespace
 useJoinNamespace, useCreateNamespaceInvitation, useCreateGroupInNamespace
+useBlobInfo, useBlobUrl, useUploadBlob
 
 // Types (mero-react)
 MeroContextValue, MeroProviderConfig, MeroProviderProps
 CustomConnectionConfig, AppContext, ExecutionResult
 ApplicationContextRecord, ContextDiscoveryOptions, ContextDiscoveryState
+BlobHookOptions, UseBlobUrlOptions
 
 // Storage (mero-react)
 localStorageTokenStorage

package/dist/index.cjs

@@ -1546,11 +1546,13 @@ function useAsyncResource(fetcher, initialValue, deps) {
       if (mountedRef.current && seq === reqRef.current) setLoading(false);
     }
   }, deps);
-  react.useEffect(() => {
+  const prevDeps = react.useRef(deps);
+  if (deps.length !== prevDeps.current.length || deps.some((d, i) => !Object.is(d, prevDeps.current[i]))) {
+    prevDeps.current = deps;
     reqRef.current += 1;
     setData(initialRef.current);
     setError(null);
-  }, deps);
+  }
   react.useEffect(() => {
     void refetch();
   }, [refetch]);
@@ -2223,6 +2225,13 @@ function useMemberMetadata(groupId, identity) {
   const [metadata, setMetadata] = react.useState(null);
   const [loading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(null);
+  const prevKey = react.useRef(null);
+  const key = `${groupId ?? ""}:${identity ?? ""}`;
+  if (prevKey.current !== null && prevKey.current !== key) {
+    setMetadata(null);
+    setError(null);
+  }
+  prevKey.current = key;
   const run = react.useCallback(
     async (signal) => {
       if (!mero || !groupId || !identity) {
@@ -2730,6 +2739,80 @@ function useMyAuthoredMigration(contextId) {
     refresh
   };
 }
+function isBlobNotFound(error) {
+  return !!error && error.status === 404;
+}
+function useBlobInfo(blobId, options) {
+  const { mero } = useMero();
+  const contextId = options?.contextId;
+  const { data, loading, error, refetch } = useAsyncResource(
+    mero && blobId ? () => mero.admin.getBlobInfo(blobId, contextId ? { contextId } : void 0) : null,
+    null,
+    [mero, blobId, contextId]
+  );
+  return { info: data, notFound: isBlobNotFound(error), loading, error, refetch };
+}
+function useBlobUrl(blobId, options) {
+  const { mero } = useMero();
+  const contextId = options?.contextId;
+  const type = options?.type;
+  const mountedRef = useMountedRef();
+  const [url, setUrl] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const reqRef = react.useRef(0);
+  const urlRef = react.useRef(null);
+  const revoke = react.useCallback(() => {
+    if (urlRef.current) {
+      URL.revokeObjectURL(urlRef.current);
+      urlRef.current = null;
+    }
+  }, []);
+  const refetch = react.useCallback(async () => {
+    const seq = ++reqRef.current;
+    if (!mero || !blobId) return;
+    if (mountedRef.current) {
+      setLoading(true);
+      setError(null);
+    }
+    try {
+      const bytes = await mero.admin.getBlob(blobId, contextId ? { contextId } : void 0);
+      if (!mountedRef.current || seq !== reqRef.current) return;
+      revoke();
+      const objectUrl = URL.createObjectURL(new Blob([bytes], type ? { type } : void 0));
+      urlRef.current = objectUrl;
+      setUrl(objectUrl);
+    } catch (err) {
+      if (mountedRef.current && seq === reqRef.current) setError(toError(err));
+    } finally {
+      if (mountedRef.current && seq === reqRef.current) setLoading(false);
+    }
+  }, [mero, blobId, contextId, type, revoke, mountedRef]);
+  react.useEffect(() => {
+    reqRef.current += 1;
+    revoke();
+    setUrl(null);
+    setError(null);
+    setLoading(false);
+  }, [mero, blobId, contextId, type, revoke]);
+  react.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+  react.useEffect(() => revoke, [revoke]);
+  return { url, notFound: isBlobNotFound(error), loading, error, refetch };
+}
+function useUploadBlob() {
+  const { mero } = useMero();
+  const { loading, error, run } = useAsyncMutation();
+  const uploadBlob = react.useCallback(
+    async (request) => {
+      if (!mero) return null;
+      return run(() => mero.admin.uploadBlob(request));
+    },
+    [mero, run]
+  );
+  return { uploadBlob, loading, error };
+}
 function MigrationPendingBanner({
   contextId,
   className,
@@ -2895,6 +2978,8 @@ exports.themeToCssVars = themeToCssVars;
 exports.useAddGroupMembers = useAddGroupMembers;
 exports.useAppVersion = useAppVersion;
 exports.useApplicationContexts = useApplicationContexts;
+exports.useBlobInfo = useBlobInfo;
+exports.useBlobUrl = useBlobUrl;
 exports.useContextDiscovery = useContextDiscovery;
 exports.useContextGroup = useContextGroup;
 exports.useContexts = useContexts;
@@ -2950,6 +3035,7 @@ exports.useSubscription = useSubscription;
 exports.useSyncGroup = useSyncGroup;
 exports.useUpdateMemberRole = useUpdateMemberRole;
 exports.useUpgradeGroup = useUpgradeGroup;
+exports.useUploadBlob = useUploadBlob;
 Object.keys(meroJs).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,