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

package/dist/packages/stack/src/plugins/media/client/plugin.cjs

@@ -1,94 +1,154 @@
 'use strict';
 
 const client = require('@btst/stack/plugins/client');
+const client$1 = require('@btst/stack/client');
 const yar = require('@btst/yar');
-const libraryPage = require('./components/pages/library-page.cjs');
+const React = require('react');
 const plugins_media_queryKeys = require('../../../../../../plugins/media/query-keys.cjs');
+const constants = require('./constants.cjs');
 
-const mediaClientPlugin = (config) => client.defineClientPlugin({
-  name: "media",
-  routes: () => yar.defineRoutes(
-    {
-      library: yar.defineRoute("/media", {
-        page: libraryPage.LibraryPageComponent,
-        loader: createMediaLibraryLoader(config),
-        meta: createMediaLibraryMeta(config)
-      })
-    },
-    { pages: config.pageComponents }
-  )
-});
+const LibraryPageComponent = React.lazy(
+  () => import('./components/pages/library-page.cjs').then((module) => ({
+    default: module.LibraryPageComponent
+  }))
+);
+function resolveMediaClientConfig(config, runtime) {
+  return {
+    uploadMode: config.uploadMode,
+    identityPartition: config.identityPartition,
+    hooks: config.hooks,
+    pageComponents: config.pageComponents,
+    apiBaseURL: runtime.api.baseURL,
+    apiBasePath: runtime.api.basePath,
+    siteBaseURL: runtime.site.baseURL,
+    siteBasePath: runtime.site.basePath,
+    queryClient: runtime.queryClient,
+    ...runtime.api.headers ? { headers: runtime.api.headers } : {},
+    ...runtime.api.credentials ? { credentials: runtime.api.credentials } : {}
+  };
+}
+function createMediaApiClient(config) {
+  return client.createApiClient({
+    baseURL: config.apiBaseURL,
+    basePath: config.apiBasePath,
+    headers: config.headers,
+    credentials: config.credentials
+  });
+}
+function createLoadErrorReporter(hooks, context) {
+  let reported = false;
+  return async (error) => {
+    if (reported || !hooks?.onErrorLoad) return;
+    reported = true;
+    try {
+      await hooks.onErrorLoad(
+        error instanceof Error ? error : new Error(String(error)),
+        context
+      );
+    } catch {
+    }
+  };
+}
 function createMediaLibraryLoader(config) {
   return async () => {
-    if (typeof window === "undefined") {
-      const { queryClient, apiBasePath, apiBaseURL, hooks, headers } = config;
-      const context = {
-        path: "/media",
-        isSSR: true,
-        apiBaseURL,
-        apiBasePath,
-        headers
-      };
-      try {
-        if (hooks?.beforeLoadLibrary) {
-          await hooks.beforeLoadLibrary(context);
-        }
-        const client$1 = client.createApiClient({
-          baseURL: apiBaseURL,
-          basePath: apiBasePath
-        });
-        const queries = plugins_media_queryKeys.createMediaQueryKeys(client$1, headers);
+    if (typeof window !== "undefined") return;
+    const {
+      queryClient,
+      apiBasePath,
+      apiBaseURL,
+      hooks,
+      headers,
+      identityPartition
+    } = config;
+    const context = {
+      path: "/media",
+      isSSR: true,
+      apiBaseURL,
+      apiBasePath,
+      headers
+    };
+    const reportError = createLoadErrorReporter(hooks, context);
+    const queries = plugins_media_queryKeys.createMediaQueryKeys(createMediaApiClient(config));
+    const endpointPartition = { baseURL: apiBaseURL, basePath: apiBasePath };
+    const assetQuery = queries.mediaAssets.list(
+      { limit: 40 },
+      identityPartition,
+      endpointPartition
+    );
+    const folderQuery = queries.mediaFolders.list(
+      void 0,
+      identityPartition,
+      endpointPartition
+    );
+    try {
+      await hooks?.beforeLoadLibrary?.(context);
+      await queryClient.prefetchInfiniteQuery({
+        ...assetQuery,
+        initialPageParam: 0
+      });
+      await queryClient.prefetchQuery(folderQuery);
+      await hooks?.afterLoadLibrary?.(context);
+      const queryError = queryClient.getQueryState(assetQuery.queryKey)?.error ?? queryClient.getQueryState(folderQuery.queryKey)?.error;
+      if (queryError) await reportError(queryError);
+    } catch (error) {
+      if (client.isConnectionError(error)) {
+        console.warn(
+          "[btst/media] route.loader() failed \u2014 no server running at build time. For an explicitly public static library, use the explicit stack.raw.media.prefetchForRoute() server helper instead."
+        );
+      } else {
+        const sanitizedError = client.createSanitizedSSRLoaderError();
         await queryClient.prefetchInfiniteQuery({
-          ...queries.mediaAssets.list({ limit: 40 }),
-          initialPageParam: 0
+          queryKey: assetQuery.queryKey,
+          queryFn: () => {
+            throw sanitizedError;
+          },
+          initialPageParam: 0,
+          retry: false
         });
-        await queryClient.prefetchQuery(queries.mediaFolders.list(null));
-        if (hooks?.afterLoadLibrary) {
-          await hooks.afterLoadLibrary(context);
-        }
-        const queryState = queryClient.getQueryState(
-          queries.mediaAssets.list({ limit: 40 }).queryKey
-        );
-        if (queryState?.error && hooks?.onLoadError) {
-          const error = queryState.error instanceof Error ? queryState.error : new Error(String(queryState.error));
-          await hooks.onLoadError(error, context);
-        }
-      } catch (error) {
-        if (client.isConnectionError(error)) {
-          console.warn(
-            "[btst/media] route.loader() failed \u2014 no server running at build time. The media library does not support SSG."
-          );
-        }
-        if (hooks?.onLoadError) {
-          await hooks.onLoadError(error, context);
-        }
       }
+      await reportError(error);
     }
   };
 }
 function createMediaLibraryMeta(config) {
   return () => {
-    const { siteBaseURL, siteBasePath } = config;
-    const fullUrl = `${siteBaseURL}${siteBasePath}/media`;
+    const sitePath = client$1.normalizePath([config.siteBasePath, "/media"].join("/"));
+    const fullUrl = `${config.siteBaseURL}${sitePath}`;
     const title = "Media Library";
     return [
       { title },
       { name: "title", content: title },
       { name: "description", content: "Manage your media assets" },
       { name: "robots", content: "noindex, nofollow" },
-      // Open Graph
       { property: "og:type", content: "website" },
       { property: "og:title", content: title },
-      {
-        property: "og:description",
-        content: "Manage your media assets"
-      },
+      { property: "og:description", content: "Manage your media assets" },
       { property: "og:url", content: fullUrl },
-      // Twitter
       { name: "twitter:card", content: "summary" },
       { name: "twitter:title", content: title }
     ];
   };
 }
+function createResolvedMediaPlugin(config) {
+  return {
+    routes: () => yar.defineRoutes(
+      {
+        library: yar.defineRoute("/media", {
+          page: LibraryPageComponent,
+          loader: createMediaLibraryLoader(config),
+          meta: createMediaLibraryMeta(config)
+        })
+      },
+      { pages: config.pageComponents }
+    )
+  };
+}
+const mediaClientPlugin = (config = {}) => client.defineClientPlugin()({
+  id: constants.MEDIA_PLUGIN_ID,
+  providerConfig: {
+    ...config.uploadMode ? { uploadMode: config.uploadMode } : {}
+  },
+  resolve: (runtime) => createResolvedMediaPlugin(resolveMediaClientConfig(config, runtime))
+});
 
 exports.mediaClientPlugin = mediaClientPlugin;

package/dist/packages/stack/src/plugins/media/client/plugin.mjs

@@ -1,92 +1,152 @@
-import { defineClientPlugin, createApiClient, isConnectionError } from '@btst/stack/plugins/client';
+import { defineClientPlugin, isConnectionError, createSanitizedSSRLoaderError, createApiClient } from '@btst/stack/plugins/client';
+import { normalizePath } from '@btst/stack/client';
 import { defineRoutes, defineRoute } from '@btst/yar';
-import { LibraryPageComponent } from './components/pages/library-page.mjs';
+import { lazy } from 'react';
 import { createMediaQueryKeys } from '../../../../../../plugins/media/query-keys.mjs';
+import { MEDIA_PLUGIN_ID } from './constants.mjs';
 
-const mediaClientPlugin = (config) => defineClientPlugin({
-  name: "media",
-  routes: () => defineRoutes(
-    {
-      library: defineRoute("/media", {
-        page: LibraryPageComponent,
-        loader: createMediaLibraryLoader(config),
-        meta: createMediaLibraryMeta(config)
-      })
-    },
-    { pages: config.pageComponents }
-  )
-});
+const LibraryPageComponent = lazy(
+  () => import('./components/pages/library-page.mjs').then((module) => ({
+    default: module.LibraryPageComponent
+  }))
+);
+function resolveMediaClientConfig(config, runtime) {
+  return {
+    uploadMode: config.uploadMode,
+    identityPartition: config.identityPartition,
+    hooks: config.hooks,
+    pageComponents: config.pageComponents,
+    apiBaseURL: runtime.api.baseURL,
+    apiBasePath: runtime.api.basePath,
+    siteBaseURL: runtime.site.baseURL,
+    siteBasePath: runtime.site.basePath,
+    queryClient: runtime.queryClient,
+    ...runtime.api.headers ? { headers: runtime.api.headers } : {},
+    ...runtime.api.credentials ? { credentials: runtime.api.credentials } : {}
+  };
+}
+function createMediaApiClient(config) {
+  return createApiClient({
+    baseURL: config.apiBaseURL,
+    basePath: config.apiBasePath,
+    headers: config.headers,
+    credentials: config.credentials
+  });
+}
+function createLoadErrorReporter(hooks, context) {
+  let reported = false;
+  return async (error) => {
+    if (reported || !hooks?.onErrorLoad) return;
+    reported = true;
+    try {
+      await hooks.onErrorLoad(
+        error instanceof Error ? error : new Error(String(error)),
+        context
+      );
+    } catch {
+    }
+  };
+}
 function createMediaLibraryLoader(config) {
   return async () => {
-    if (typeof window === "undefined") {
-      const { queryClient, apiBasePath, apiBaseURL, hooks, headers } = config;
-      const context = {
-        path: "/media",
-        isSSR: true,
-        apiBaseURL,
-        apiBasePath,
-        headers
-      };
-      try {
-        if (hooks?.beforeLoadLibrary) {
-          await hooks.beforeLoadLibrary(context);
-        }
-        const client = createApiClient({
-          baseURL: apiBaseURL,
-          basePath: apiBasePath
-        });
-        const queries = createMediaQueryKeys(client, headers);
+    if (typeof window !== "undefined") return;
+    const {
+      queryClient,
+      apiBasePath,
+      apiBaseURL,
+      hooks,
+      headers,
+      identityPartition
+    } = config;
+    const context = {
+      path: "/media",
+      isSSR: true,
+      apiBaseURL,
+      apiBasePath,
+      headers
+    };
+    const reportError = createLoadErrorReporter(hooks, context);
+    const queries = createMediaQueryKeys(createMediaApiClient(config));
+    const endpointPartition = { baseURL: apiBaseURL, basePath: apiBasePath };
+    const assetQuery = queries.mediaAssets.list(
+      { limit: 40 },
+      identityPartition,
+      endpointPartition
+    );
+    const folderQuery = queries.mediaFolders.list(
+      void 0,
+      identityPartition,
+      endpointPartition
+    );
+    try {
+      await hooks?.beforeLoadLibrary?.(context);
+      await queryClient.prefetchInfiniteQuery({
+        ...assetQuery,
+        initialPageParam: 0
+      });
+      await queryClient.prefetchQuery(folderQuery);
+      await hooks?.afterLoadLibrary?.(context);
+      const queryError = queryClient.getQueryState(assetQuery.queryKey)?.error ?? queryClient.getQueryState(folderQuery.queryKey)?.error;
+      if (queryError) await reportError(queryError);
+    } catch (error) {
+      if (isConnectionError(error)) {
+        console.warn(
+          "[btst/media] route.loader() failed \u2014 no server running at build time. For an explicitly public static library, use the explicit stack.raw.media.prefetchForRoute() server helper instead."
+        );
+      } else {
+        const sanitizedError = createSanitizedSSRLoaderError();
         await queryClient.prefetchInfiniteQuery({
-          ...queries.mediaAssets.list({ limit: 40 }),
-          initialPageParam: 0
+          queryKey: assetQuery.queryKey,
+          queryFn: () => {
+            throw sanitizedError;
+          },
+          initialPageParam: 0,
+          retry: false
         });
-        await queryClient.prefetchQuery(queries.mediaFolders.list(null));
-        if (hooks?.afterLoadLibrary) {
-          await hooks.afterLoadLibrary(context);
-        }
-        const queryState = queryClient.getQueryState(
-          queries.mediaAssets.list({ limit: 40 }).queryKey
-        );
-        if (queryState?.error && hooks?.onLoadError) {
-          const error = queryState.error instanceof Error ? queryState.error : new Error(String(queryState.error));
-          await hooks.onLoadError(error, context);
-        }
-      } catch (error) {
-        if (isConnectionError(error)) {
-          console.warn(
-            "[btst/media] route.loader() failed \u2014 no server running at build time. The media library does not support SSG."
-          );
-        }
-        if (hooks?.onLoadError) {
-          await hooks.onLoadError(error, context);
-        }
       }
+      await reportError(error);
     }
   };
 }
 function createMediaLibraryMeta(config) {
   return () => {
-    const { siteBaseURL, siteBasePath } = config;
-    const fullUrl = `${siteBaseURL}${siteBasePath}/media`;
+    const sitePath = normalizePath([config.siteBasePath, "/media"].join("/"));
+    const fullUrl = `${config.siteBaseURL}${sitePath}`;
     const title = "Media Library";
     return [
       { title },
       { name: "title", content: title },
       { name: "description", content: "Manage your media assets" },
       { name: "robots", content: "noindex, nofollow" },
-      // Open Graph
       { property: "og:type", content: "website" },
       { property: "og:title", content: title },
-      {
-        property: "og:description",
-        content: "Manage your media assets"
-      },
+      { property: "og:description", content: "Manage your media assets" },
       { property: "og:url", content: fullUrl },
-      // Twitter
       { name: "twitter:card", content: "summary" },
       { name: "twitter:title", content: title }
     ];
   };
 }
+function createResolvedMediaPlugin(config) {
+  return {
+    routes: () => defineRoutes(
+      {
+        library: defineRoute("/media", {
+          page: LibraryPageComponent,
+          loader: createMediaLibraryLoader(config),
+          meta: createMediaLibraryMeta(config)
+        })
+      },
+      { pages: config.pageComponents }
+    )
+  };
+}
+const mediaClientPlugin = (config = {}) => defineClientPlugin()({
+  id: MEDIA_PLUGIN_ID,
+  providerConfig: {
+    ...config.uploadMode ? { uploadMode: config.uploadMode } : {}
+  },
+  resolve: (runtime) => createResolvedMediaPlugin(resolveMediaClientConfig(config, runtime))
+});
 
 export { mediaClientPlugin };

package/dist/packages/stack/src/plugins/media/client/upload.cjs

@@ -1,6 +1,8 @@
 "use client";
 'use strict';
 
+const client = require('@btst/stack/client');
+const assetUrl = require('../asset-url.cjs');
 const imageCompression = require('./utils/image-compression.cjs');
 
 const DEFAULT_IMAGE_COMPRESSION = {
@@ -8,11 +10,25 @@ const DEFAULT_IMAGE_COMPRESSION = {
   maxHeight: 2048,
   quality: 0.85
 };
+function createMediaUploadConfig(runtime, overrides = {}) {
+  return {
+    apiBaseURL: runtime.api.baseURL,
+    apiBasePath: runtime.api.basePath,
+    headers: runtime.api.browserHeaders,
+    credentials: runtime.api.credentials,
+    uploadMode: runtime.config?.uploadMode ?? "direct",
+    ...overrides
+  };
+}
+function createMediaApiURL(apiBaseURL, apiBasePath, path) {
+  return `${apiBaseURL}${client.normalizePath([apiBasePath, path].join("/"))}`;
+}
 async function uploadAsset(config, input) {
   const {
     apiBaseURL,
     apiBasePath,
     headers,
+    credentials,
     uploadMode = "direct",
     imageCompression: imageCompression$1
   } = config;
@@ -21,37 +37,44 @@ async function uploadAsset(config, input) {
     file,
     imageCompression$1 ?? DEFAULT_IMAGE_COMPRESSION
   );
-  const base = `${apiBaseURL}${apiBasePath}`;
   const headersObj = new Headers(headers);
   if (uploadMode === "direct") {
     const formData = new FormData();
     formData.append("file", processedFile);
     if (folderId) formData.append("folderId", folderId);
-    const res = await fetch(`${base}/media/upload`, {
-      method: "POST",
-      headers: headersObj,
-      body: formData
-    });
+    const res = await fetch(
+      createMediaApiURL(apiBaseURL, apiBasePath, "/media/upload"),
+      {
+        method: "POST",
+        headers: headersObj,
+        credentials,
+        body: formData
+      }
+    );
     if (!res.ok) {
       const err = await res.json().catch(() => ({ message: res.statusText }));
       throw new Error(err.message ?? "Upload failed");
     }
-    return res.json();
+    return assetUrl.resolveMediaAsset(await res.json(), apiBaseURL);
   }
   if (uploadMode === "s3") {
-    const tokenRes = await fetch(`${base}/media/upload/token`, {
-      method: "POST",
-      headers: {
-        ...Object.fromEntries(headersObj.entries()),
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        filename: processedFile.name,
-        mimeType: processedFile.type,
-        size: processedFile.size,
-        folderId
-      })
-    });
+    const tokenRes = await fetch(
+      createMediaApiURL(apiBaseURL, apiBasePath, "/media/upload/token"),
+      {
+        method: "POST",
+        headers: {
+          ...Object.fromEntries(headersObj.entries()),
+          "Content-Type": "application/json"
+        },
+        credentials,
+        body: JSON.stringify({
+          filename: processedFile.name,
+          mimeType: processedFile.type,
+          size: processedFile.size,
+          folderId
+        })
+      }
+    );
     if (!tokenRes.ok) {
       const err = await tokenRes.json().catch(() => ({ message: tokenRes.statusText }));
       throw new Error(err.message ?? "Failed to get upload token");
@@ -63,59 +86,105 @@ async function uploadAsset(config, input) {
       body: processedFile
     });
     if (!putRes.ok) throw new Error("Failed to upload to S3");
-    const assetRes = await fetch(`${base}/media/assets`, {
-      method: "POST",
-      headers: {
-        ...Object.fromEntries(headersObj.entries()),
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        filename: processedFile.name,
-        originalName: file.name,
-        mimeType: processedFile.type,
-        size: processedFile.size,
-        url: token.payload.publicUrl,
-        folderId
-      })
-    });
+    const assetRes = await fetch(
+      createMediaApiURL(apiBaseURL, apiBasePath, "/media/assets"),
+      {
+        method: "POST",
+        headers: {
+          ...Object.fromEntries(headersObj.entries()),
+          "Content-Type": "application/json"
+        },
+        credentials,
+        body: JSON.stringify({
+          filename: processedFile.name,
+          originalName: file.name,
+          mimeType: processedFile.type,
+          size: processedFile.size,
+          url: token.payload.publicUrl,
+          folderId
+        })
+      }
+    );
     if (!assetRes.ok) {
       const err = await assetRes.json().catch(() => ({ message: assetRes.statusText }));
       throw new Error(err.message ?? "Failed to register asset");
     }
-    return assetRes.json();
+    return assetUrl.resolveMediaAsset(
+      await assetRes.json(),
+      apiBaseURL
+    );
   }
   if (uploadMode === "vercel-blob") {
-    const { upload } = await import('@vercel/blob/client');
-    const blob = await upload(processedFile.name, processedFile, {
-      access: "public",
-      handleUploadUrl: `${base}/media/upload/vercel-blob`,
-      clientPayload: JSON.stringify({
-        mimeType: processedFile.type,
-        size: processedFile.size
-      })
+    const handleUploadUrl = createMediaApiURL(
+      apiBaseURL,
+      apiBasePath,
+      "/media/upload/vercel-blob"
+    );
+    const clientPayload = JSON.stringify({
+      mimeType: processedFile.type,
+      size: processedFile.size,
+      ...folderId ? { folderId } : {}
     });
-    const assetRes = await fetch(`${base}/media/assets`, {
+    const tokenRes = await fetch(handleUploadUrl, {
       method: "POST",
       headers: {
         ...Object.fromEntries(headersObj.entries()),
         "Content-Type": "application/json"
       },
+      credentials,
       body: JSON.stringify({
-        filename: processedFile.name,
-        originalName: file.name,
-        mimeType: processedFile.type,
-        size: processedFile.size,
-        url: blob.url,
-        folderId
+        type: "blob.generate-client-token",
+        payload: {
+          pathname: processedFile.name,
+          callbackUrl: handleUploadUrl,
+          clientPayload,
+          multipart: false
+        }
       })
     });
+    if (!tokenRes.ok) {
+      const err = await tokenRes.json().catch(() => ({ message: tokenRes.statusText }));
+      throw new Error(err.message ?? "Failed to get Vercel Blob upload token");
+    }
+    const { clientToken } = await tokenRes.json();
+    if (!clientToken) {
+      throw new Error("Failed to get Vercel Blob upload token");
+    }
+    const { put } = await import('@vercel/blob/client');
+    const blob = await put(processedFile.name, processedFile, {
+      access: "public",
+      token: clientToken
+    });
+    const assetRes = await fetch(
+      createMediaApiURL(apiBaseURL, apiBasePath, "/media/assets"),
+      {
+        method: "POST",
+        headers: {
+          ...Object.fromEntries(headersObj.entries()),
+          "Content-Type": "application/json"
+        },
+        credentials,
+        body: JSON.stringify({
+          filename: processedFile.name,
+          originalName: file.name,
+          mimeType: processedFile.type,
+          size: processedFile.size,
+          url: blob.url,
+          folderId
+        })
+      }
+    );
     if (!assetRes.ok) {
       const err = await assetRes.json().catch(() => ({ message: assetRes.statusText }));
       throw new Error(err.message ?? "Failed to register asset");
     }
-    return assetRes.json();
+    return assetUrl.resolveMediaAsset(
+      await assetRes.json(),
+      apiBaseURL
+    );
   }
   throw new Error(`Unknown uploadMode: ${uploadMode}`);
 }
 
+exports.createMediaUploadConfig = createMediaUploadConfig;
 exports.uploadAsset = uploadAsset;