@btst/stack 3.0.0-rc.2 → 3.0.0-rc.3

package/dist/packages/stack/src/plugins/media/client/hooks/use-media.cjs

@@ -2,60 +2,207 @@
 'use strict';
 
 const reactQuery = require('@tanstack/react-query');
+const React = require('react');
 const context = require('@btst/stack/context');
+const constants = require('../constants.cjs');
 const upload = require('../upload.cjs');
+const assetUrl = require('../../asset-url.cjs');
 const mediaResource = require('./media-resource.cjs');
 
+function useMediaEndpointPartition() {
+  const { api, plugins } = context.useStack();
+  const pluginApi = plugins?.[constants.MEDIA_PLUGIN_ID]?.api;
+  const baseURL = pluginApi?.baseURL ?? api?.baseURL ?? "";
+  const basePath = pluginApi?.basePath ?? api?.basePath ?? "";
+  return React.useMemo(() => ({ baseURL, basePath }), [baseURL, basePath]);
+}
+function useMediaApiBaseURL() {
+  return useMediaEndpointPartition().baseURL;
+}
+function useIdentityPartition() {
+  const { identity, isPending, error } = context.useIdentity();
+  const sourceGeneration = context.useIdentitySourceGeneration();
+  if (isPending) return `pending:${sourceGeneration}`;
+  if (error) return `error:${sourceGeneration}`;
+  return identity ?? void 0;
+}
+function isUnresolvedIdentityPartition(partition) {
+  return typeof partition === "string";
+}
+function sameIdentityPartition(queryKey, partition) {
+  const scope = queryKey[3];
+  const hasIdentity = scope !== void 0 && Object.hasOwn(scope, "identity");
+  if (partition === void 0) return !hasIdentity;
+  return hasIdentity && reactQuery.hashKey([scope.identity]) === reactQuery.hashKey([partition]);
+}
+function sameEndpointPartition(queryKey, partition) {
+  const scope = queryKey[3];
+  return reactQuery.hashKey([scope?.endpoint]) === reactQuery.hashKey([partition]);
+}
+function samePartition(left, right) {
+  return reactQuery.hashKey([left]) === reactQuery.hashKey([right]);
+}
+function sameListScope(left, right) {
+  return samePartition(left.identity, right.identity) && reactQuery.hashKey([left.endpoint]) === reactQuery.hashKey([right.endpoint]);
+}
+function useCurrentMediaListRefresh(resource) {
+  const { queryClient: stackQueryClient } = context.useStack();
+  const queryClient = reactQuery.useQueryClient(stackQueryClient);
+  const endpointPartition = useMediaEndpointPartition();
+  const identityPartition = useIdentityPartition();
+  const currentScope = React.useMemo(
+    () => ({ identity: identityPartition, endpoint: endpointPartition }),
+    [identityPartition, endpointPartition]
+  );
+  const latestScope = React.useRef(currentScope);
+  const mounted = React.useRef(true);
+  React.useLayoutEffect(() => {
+    latestScope.current = currentScope;
+  }, [currentScope]);
+  React.useLayoutEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const removeScope = (scope) => queryClient.removeQueries({
+    queryKey: [resource, "list"],
+    predicate: ({ queryKey }) => sameIdentityPartition(queryKey, scope.identity) && sameEndpointPartition(queryKey, scope.endpoint)
+  });
+  const refreshAfterSuccess = async (startedAs) => {
+    const current = latestScope.current;
+    if (!mounted.current || !sameListScope(startedAs, current)) {
+      removeScope(startedAs);
+      return;
+    }
+    await queryClient.invalidateQueries({
+      queryKey: [resource, "list"],
+      predicate: ({ queryKey }) => sameIdentityPartition(queryKey, current.identity) && sameEndpointPartition(queryKey, current.endpoint),
+      // The current tab can temporarily unmount its list. Refresh only this
+      // identity's inactive variants; never refetch a previous account's key
+      // with the current request headers.
+      refetchType: "all"
+    });
+  };
+  return {
+    // Event handlers retain the hook result from the committed render. Reading
+    // that closure prevents an abandoned concurrent render from changing which
+    // identity and endpoint own a newly-started mutation.
+    currentScope: () => currentScope,
+    refreshAfterSuccess
+  };
+}
+function withCurrentListRefresh(mutation, listRefresh, mapResult = (data2) => data2, data = mutation.data) {
+  const mutateAsync = async (variables, options) => {
+    const startedAs = listRefresh.currentScope();
+    const result = await mutation.mutateAsync(variables, {
+      ...options,
+      onSuccess: options?.onSuccess ? (data2, ...args) => options.onSuccess?.(mapResult(data2), ...args) : void 0,
+      onSettled: options?.onSettled ? (data2, ...args) => options.onSettled?.(
+        data2 === void 0 ? void 0 : mapResult(data2),
+        ...args
+      ) : void 0
+    });
+    await listRefresh.refreshAfterSuccess(startedAs);
+    return mapResult(result);
+  };
+  const mutate = (variables, options) => {
+    void mutateAsync(variables, options).catch(() => {
+    });
+  };
+  return {
+    ...mutation,
+    data,
+    mutate,
+    mutateAsync
+  };
+}
 function useAssets(params = {}) {
-  return mediaResource.media.mediaAssets.list.useInfinite([params]);
+  const identityPartition = useIdentityPartition();
+  const endpointPartition = useMediaEndpointPartition();
+  const result = mediaResource.media.mediaAssets.list.useInfinite(
+    [params, identityPartition, endpointPartition],
+    {
+      enabled: !isUnresolvedIdentityPartition(identityPartition)
+    }
+  );
+  return result;
 }
 function useFolders(parentId) {
-  return mediaResource.media.mediaFolders.list.use([parentId]);
+  const identityPartition = useIdentityPartition();
+  const endpointPartition = useMediaEndpointPartition();
+  return mediaResource.media.mediaFolders.list.use(
+    [parentId, identityPartition, endpointPartition],
+    {
+      enabled: !isUnresolvedIdentityPartition(identityPartition)
+    }
+  );
 }
 function useUploadAsset() {
-  const {
-    headers,
-    uploadMode = "direct",
-    imageCompression
-  } = context.usePluginOverrides("media");
-  const { api } = context.useStack();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: async ({
-      file,
-      folderId
-    }) => upload.uploadAsset(
-      {
-        apiBaseURL: api?.baseURL ?? "",
-        apiBasePath: api?.basePath ?? "",
-        headers,
-        uploadMode,
-        imageCompression
-      },
-      { file, folderId }
-    ),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ["mediaAssets", "list"],
-        // Browse unmounts while the Upload tab is active, and resource
-        // queries intentionally disable refetch-on-mount. Refresh inactive
-        // list variants so the uploaded asset is present when Browse remounts.
-        refetchType: "all"
-      });
-    }
-  });
+  const { imageCompression } = context.usePluginOverrides(constants.MEDIA_PLUGIN_ID);
+  const { api, plugins, queryClient: stackQueryClient } = context.useStack();
+  const queryClient = reactQuery.useQueryClient(stackQueryClient);
+  const pluginRuntime = plugins?.[constants.MEDIA_PLUGIN_ID];
+  const pluginApi = pluginRuntime?.api ?? api;
+  const providerConfig = pluginRuntime?.config;
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  return reactQuery.useMutation(
+    {
+      onMutate: () => listRefresh.currentScope(),
+      mutationFn: async ({
+        file,
+        folderId
+      }) => upload.uploadAsset(
+        upload.createMediaUploadConfig(
+          {
+            api: {
+              baseURL: pluginApi?.baseURL ?? "",
+              basePath: pluginApi?.basePath ?? "",
+              browserHeaders: pluginRuntime?.api.browserHeaders,
+              credentials: pluginRuntime?.api.credentials
+            },
+            config: providerConfig
+          },
+          { imageCompression }
+        ),
+        { file, folderId }
+      ),
+      onSuccess: async (_asset, _variables, startedAs) => {
+        await listRefresh.refreshAfterSuccess(startedAs);
+      }
+    },
+    queryClient
+  );
 }
 function useRegisterAsset() {
-  return mediaResource.media.mediaAssets.create.use();
+  const mutation = mediaResource.media.mediaAssets.create.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  const apiBaseURL = useMediaApiBaseURL();
+  const data = React.useMemo(
+    () => mutation.data === void 0 ? void 0 : assetUrl.resolveMediaAsset(mutation.data, apiBaseURL),
+    [mutation.data, apiBaseURL]
+  );
+  return withCurrentListRefresh(
+    mutation,
+    listRefresh,
+    (asset) => assetUrl.resolveMediaAsset(asset, apiBaseURL),
+    data
+  );
 }
 function useDeleteAsset() {
-  return mediaResource.media.mediaAssets.delete.use();
+  const mutation = mediaResource.media.mediaAssets.delete.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  return withCurrentListRefresh(mutation, listRefresh);
 }
 function useCreateFolder() {
-  return mediaResource.media.mediaFolders.create.use();
+  const mutation = mediaResource.media.mediaFolders.create.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaFolders");
+  return withCurrentListRefresh(mutation, listRefresh);
 }
 function useDeleteFolder() {
-  return mediaResource.media.mediaFolders.delete.use();
+  const mutation = mediaResource.media.mediaFolders.delete.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaFolders");
+  return withCurrentListRefresh(mutation, listRefresh);
 }
 function filenameFromUrl(url) {
   try {
@@ -67,7 +214,9 @@ function filenameFromUrl(url) {
 }
 function useRegisterAssetForm(options = {}) {
   const t = context.useTranslate();
-  return mediaResource.media.mediaAssets.useForm({
+  const apiBaseURL = useMediaApiBaseURL();
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  const form = mediaResource.media.mediaAssets.useForm({
     action: "create",
     defaults: { url: "" },
     toCreateVars: (values) => ({
@@ -76,13 +225,25 @@ function useRegisterAssetForm(options = {}) {
       folderId: options.folderId
     }),
     successMessage: t("media.toasts.registerSuccess", "Asset added"),
-    errorMessage: (error) => error.message || t("media.toasts.registerError", "Failed to add asset"),
-    onSuccess: options.onSuccess
+    errorMessage: (error) => error.message || t("media.toasts.registerError", "Failed to add asset")
   });
+  return {
+    ...form,
+    submit: async (values) => {
+      const startedAs = listRefresh.currentScope();
+      const submittedAsset = await form.submit(values);
+      if (submittedAsset === void 0) return void 0;
+      const asset = assetUrl.resolveMediaAsset(submittedAsset, apiBaseURL);
+      await listRefresh.refreshAfterSuccess(startedAs);
+      await options.onSuccess?.(asset);
+      return asset;
+    }
+  };
 }
 function useCreateFolderForm(options = {}) {
   const t = context.useTranslate();
-  return mediaResource.media.mediaFolders.useForm({
+  const listRefresh = useCurrentMediaListRefresh("mediaFolders");
+  const form = mediaResource.media.mediaFolders.useForm({
     action: "create",
     defaults: { name: "" },
     toCreateVars: (values) => ({
@@ -90,9 +251,19 @@ function useCreateFolderForm(options = {}) {
       parentId: options.parentId
     }),
     successMessage: t("media.toasts.folderCreateSuccess", "Folder created"),
-    errorMessage: (error) => error.message || t("media.toasts.folderCreateError", "Failed to create folder"),
-    onSuccess: options.onSuccess
+    errorMessage: (error) => error.message || t("media.toasts.folderCreateError", "Failed to create folder")
   });
+  return {
+    ...form,
+    submit: async (values) => {
+      const startedAs = listRefresh.currentScope();
+      const folder = await form.submit(values);
+      if (folder === void 0) return void 0;
+      await listRefresh.refreshAfterSuccess(startedAs);
+      await options.onSuccess?.(folder);
+      return folder;
+    }
+  };
 }
 
 exports.useAssets = useAssets;

package/dist/packages/stack/src/plugins/media/client/hooks/use-media.mjs

@@ -1,59 +1,206 @@
 "use client";
-import { useQueryClient, useMutation } from '@tanstack/react-query';
-import { usePluginOverrides, useStack, useTranslate } from '@btst/stack/context';
-import { uploadAsset } from '../upload.mjs';
+import { useQueryClient, useMutation, hashKey } from '@tanstack/react-query';
+import { useMemo, useRef, useLayoutEffect } from 'react';
+import { usePluginOverrides, useStack, useTranslate, useIdentity, useIdentitySourceGeneration } from '@btst/stack/context';
+import { MEDIA_PLUGIN_ID } from '../constants.mjs';
+import { uploadAsset, createMediaUploadConfig } from '../upload.mjs';
+import { resolveMediaAsset } from '../../asset-url.mjs';
 import { media } from './media-resource.mjs';
 
+function useMediaEndpointPartition() {
+  const { api, plugins } = useStack();
+  const pluginApi = plugins?.[MEDIA_PLUGIN_ID]?.api;
+  const baseURL = pluginApi?.baseURL ?? api?.baseURL ?? "";
+  const basePath = pluginApi?.basePath ?? api?.basePath ?? "";
+  return useMemo(() => ({ baseURL, basePath }), [baseURL, basePath]);
+}
+function useMediaApiBaseURL() {
+  return useMediaEndpointPartition().baseURL;
+}
+function useIdentityPartition() {
+  const { identity, isPending, error } = useIdentity();
+  const sourceGeneration = useIdentitySourceGeneration();
+  if (isPending) return `pending:${sourceGeneration}`;
+  if (error) return `error:${sourceGeneration}`;
+  return identity ?? void 0;
+}
+function isUnresolvedIdentityPartition(partition) {
+  return typeof partition === "string";
+}
+function sameIdentityPartition(queryKey, partition) {
+  const scope = queryKey[3];
+  const hasIdentity = scope !== void 0 && Object.hasOwn(scope, "identity");
+  if (partition === void 0) return !hasIdentity;
+  return hasIdentity && hashKey([scope.identity]) === hashKey([partition]);
+}
+function sameEndpointPartition(queryKey, partition) {
+  const scope = queryKey[3];
+  return hashKey([scope?.endpoint]) === hashKey([partition]);
+}
+function samePartition(left, right) {
+  return hashKey([left]) === hashKey([right]);
+}
+function sameListScope(left, right) {
+  return samePartition(left.identity, right.identity) && hashKey([left.endpoint]) === hashKey([right.endpoint]);
+}
+function useCurrentMediaListRefresh(resource) {
+  const { queryClient: stackQueryClient } = useStack();
+  const queryClient = useQueryClient(stackQueryClient);
+  const endpointPartition = useMediaEndpointPartition();
+  const identityPartition = useIdentityPartition();
+  const currentScope = useMemo(
+    () => ({ identity: identityPartition, endpoint: endpointPartition }),
+    [identityPartition, endpointPartition]
+  );
+  const latestScope = useRef(currentScope);
+  const mounted = useRef(true);
+  useLayoutEffect(() => {
+    latestScope.current = currentScope;
+  }, [currentScope]);
+  useLayoutEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const removeScope = (scope) => queryClient.removeQueries({
+    queryKey: [resource, "list"],
+    predicate: ({ queryKey }) => sameIdentityPartition(queryKey, scope.identity) && sameEndpointPartition(queryKey, scope.endpoint)
+  });
+  const refreshAfterSuccess = async (startedAs) => {
+    const current = latestScope.current;
+    if (!mounted.current || !sameListScope(startedAs, current)) {
+      removeScope(startedAs);
+      return;
+    }
+    await queryClient.invalidateQueries({
+      queryKey: [resource, "list"],
+      predicate: ({ queryKey }) => sameIdentityPartition(queryKey, current.identity) && sameEndpointPartition(queryKey, current.endpoint),
+      // The current tab can temporarily unmount its list. Refresh only this
+      // identity's inactive variants; never refetch a previous account's key
+      // with the current request headers.
+      refetchType: "all"
+    });
+  };
+  return {
+    // Event handlers retain the hook result from the committed render. Reading
+    // that closure prevents an abandoned concurrent render from changing which
+    // identity and endpoint own a newly-started mutation.
+    currentScope: () => currentScope,
+    refreshAfterSuccess
+  };
+}
+function withCurrentListRefresh(mutation, listRefresh, mapResult = (data2) => data2, data = mutation.data) {
+  const mutateAsync = async (variables, options) => {
+    const startedAs = listRefresh.currentScope();
+    const result = await mutation.mutateAsync(variables, {
+      ...options,
+      onSuccess: options?.onSuccess ? (data2, ...args) => options.onSuccess?.(mapResult(data2), ...args) : void 0,
+      onSettled: options?.onSettled ? (data2, ...args) => options.onSettled?.(
+        data2 === void 0 ? void 0 : mapResult(data2),
+        ...args
+      ) : void 0
+    });
+    await listRefresh.refreshAfterSuccess(startedAs);
+    return mapResult(result);
+  };
+  const mutate = (variables, options) => {
+    void mutateAsync(variables, options).catch(() => {
+    });
+  };
+  return {
+    ...mutation,
+    data,
+    mutate,
+    mutateAsync
+  };
+}
 function useAssets(params = {}) {
-  return media.mediaAssets.list.useInfinite([params]);
+  const identityPartition = useIdentityPartition();
+  const endpointPartition = useMediaEndpointPartition();
+  const result = media.mediaAssets.list.useInfinite(
+    [params, identityPartition, endpointPartition],
+    {
+      enabled: !isUnresolvedIdentityPartition(identityPartition)
+    }
+  );
+  return result;
 }
 function useFolders(parentId) {
-  return media.mediaFolders.list.use([parentId]);
+  const identityPartition = useIdentityPartition();
+  const endpointPartition = useMediaEndpointPartition();
+  return media.mediaFolders.list.use(
+    [parentId, identityPartition, endpointPartition],
+    {
+      enabled: !isUnresolvedIdentityPartition(identityPartition)
+    }
+  );
 }
 function useUploadAsset() {
-  const {
-    headers,
-    uploadMode = "direct",
-    imageCompression
-  } = usePluginOverrides("media");
-  const { api } = useStack();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      file,
-      folderId
-    }) => uploadAsset(
-      {
-        apiBaseURL: api?.baseURL ?? "",
-        apiBasePath: api?.basePath ?? "",
-        headers,
-        uploadMode,
-        imageCompression
-      },
-      { file, folderId }
-    ),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ["mediaAssets", "list"],
-        // Browse unmounts while the Upload tab is active, and resource
-        // queries intentionally disable refetch-on-mount. Refresh inactive
-        // list variants so the uploaded asset is present when Browse remounts.
-        refetchType: "all"
-      });
-    }
-  });
+  const { imageCompression } = usePluginOverrides(MEDIA_PLUGIN_ID);
+  const { api, plugins, queryClient: stackQueryClient } = useStack();
+  const queryClient = useQueryClient(stackQueryClient);
+  const pluginRuntime = plugins?.[MEDIA_PLUGIN_ID];
+  const pluginApi = pluginRuntime?.api ?? api;
+  const providerConfig = pluginRuntime?.config;
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  return useMutation(
+    {
+      onMutate: () => listRefresh.currentScope(),
+      mutationFn: async ({
+        file,
+        folderId
+      }) => uploadAsset(
+        createMediaUploadConfig(
+          {
+            api: {
+              baseURL: pluginApi?.baseURL ?? "",
+              basePath: pluginApi?.basePath ?? "",
+              browserHeaders: pluginRuntime?.api.browserHeaders,
+              credentials: pluginRuntime?.api.credentials
+            },
+            config: providerConfig
+          },
+          { imageCompression }
+        ),
+        { file, folderId }
+      ),
+      onSuccess: async (_asset, _variables, startedAs) => {
+        await listRefresh.refreshAfterSuccess(startedAs);
+      }
+    },
+    queryClient
+  );
 }
 function useRegisterAsset() {
-  return media.mediaAssets.create.use();
+  const mutation = media.mediaAssets.create.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  const apiBaseURL = useMediaApiBaseURL();
+  const data = useMemo(
+    () => mutation.data === void 0 ? void 0 : resolveMediaAsset(mutation.data, apiBaseURL),
+    [mutation.data, apiBaseURL]
+  );
+  return withCurrentListRefresh(
+    mutation,
+    listRefresh,
+    (asset) => resolveMediaAsset(asset, apiBaseURL),
+    data
+  );
 }
 function useDeleteAsset() {
-  return media.mediaAssets.delete.use();
+  const mutation = media.mediaAssets.delete.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  return withCurrentListRefresh(mutation, listRefresh);
 }
 function useCreateFolder() {
-  return media.mediaFolders.create.use();
+  const mutation = media.mediaFolders.create.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaFolders");
+  return withCurrentListRefresh(mutation, listRefresh);
 }
 function useDeleteFolder() {
-  return media.mediaFolders.delete.use();
+  const mutation = media.mediaFolders.delete.use();
+  const listRefresh = useCurrentMediaListRefresh("mediaFolders");
+  return withCurrentListRefresh(mutation, listRefresh);
 }
 function filenameFromUrl(url) {
   try {
@@ -65,7 +212,9 @@ function filenameFromUrl(url) {
 }
 function useRegisterAssetForm(options = {}) {
   const t = useTranslate();
-  return media.mediaAssets.useForm({
+  const apiBaseURL = useMediaApiBaseURL();
+  const listRefresh = useCurrentMediaListRefresh("mediaAssets");
+  const form = media.mediaAssets.useForm({
     action: "create",
     defaults: { url: "" },
     toCreateVars: (values) => ({
@@ -74,13 +223,25 @@ function useRegisterAssetForm(options = {}) {
       folderId: options.folderId
     }),
     successMessage: t("media.toasts.registerSuccess", "Asset added"),
-    errorMessage: (error) => error.message || t("media.toasts.registerError", "Failed to add asset"),
-    onSuccess: options.onSuccess
+    errorMessage: (error) => error.message || t("media.toasts.registerError", "Failed to add asset")
   });
+  return {
+    ...form,
+    submit: async (values) => {
+      const startedAs = listRefresh.currentScope();
+      const submittedAsset = await form.submit(values);
+      if (submittedAsset === void 0) return void 0;
+      const asset = resolveMediaAsset(submittedAsset, apiBaseURL);
+      await listRefresh.refreshAfterSuccess(startedAs);
+      await options.onSuccess?.(asset);
+      return asset;
+    }
+  };
 }
 function useCreateFolderForm(options = {}) {
   const t = useTranslate();
-  return media.mediaFolders.useForm({
+  const listRefresh = useCurrentMediaListRefresh("mediaFolders");
+  const form = media.mediaFolders.useForm({
     action: "create",
     defaults: { name: "" },
     toCreateVars: (values) => ({
@@ -88,9 +249,19 @@ function useCreateFolderForm(options = {}) {
       parentId: options.parentId
     }),
     successMessage: t("media.toasts.folderCreateSuccess", "Folder created"),
-    errorMessage: (error) => error.message || t("media.toasts.folderCreateError", "Failed to create folder"),
-    onSuccess: options.onSuccess
+    errorMessage: (error) => error.message || t("media.toasts.folderCreateError", "Failed to create folder")
   });
+  return {
+    ...form,
+    submit: async (values) => {
+      const startedAs = listRefresh.currentScope();
+      const folder = await form.submit(values);
+      if (folder === void 0) return void 0;
+      await listRefresh.refreshAfterSuccess(startedAs);
+      await options.onSuccess?.(folder);
+      return folder;
+    }
+  };
 }
 
 export { useAssets, useCreateFolder, useCreateFolderForm, useDeleteAsset, useDeleteFolder, useFolders, useRegisterAsset, useRegisterAssetForm, useUploadAsset };