canopycms-next 0.0.68-int.102 → 0.0.68-int.103

package/dist/context-wrapper.js

@@ -272,7 +272,7 @@ export async function createNextCanopyContext(options) {
         generateContentStaticParams,
         generateContentSitemap: boundGenerateContentSitemap,
         entryToMetadata: boundEntryToMetadata,
-        createPreviewPage: (previewOptions) => createPreviewPageFor(getCanopy, previewOptions, options.config.deployedAs),
+        createPreviewPage: (previewOptions) => createPreviewPageFor(getCanopy, previewOptions, options.config),
         handler,
         services,
     };

package/dist/preview-page.d.ts

@@ -1,6 +1,6 @@
-import type { ReactElement, ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import type { CanopyConfig } from 'canopycms';
-import type { CanopyContext } from 'canopycms/server';
+import { type CanopyContext } from 'canopycms/server';
 import type { CanopyPreviewProps } from './preview.js';
 type ReadEntry = NonNullable<Awaited<ReturnType<CanopyContext['readByUrlPath']>>>;
 /**
@@ -95,5 +95,5 @@ export interface PreviewPageProps {
  * so the route would show any branch to anyone.
  * @internal Exported for tests.
  */
-export declare function createPreviewPageFor(getCanopy: () => Promise<CanopyContext>, options: CreatePreviewPageOptions, deployedAs?: CanopyConfig['deployedAs']): (props: PreviewPageProps) => Promise<ReactElement>;
+export declare function createPreviewPageFor(getCanopy: () => Promise<CanopyContext>, options: CreatePreviewPageOptions, config?: Partial<Pick<CanopyConfig, 'deployedAs' | 'basePath'>>): (props: PreviewPageProps) => Promise<ReactElement>;
 export {};

package/dist/preview-page.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cache } from 'react';
 import { notFound } from 'next/navigation';
+import { authenticatedAssetBase, readAssetBase, setServerPreviewAssetBaseGetter, } from 'canopycms/server';
 /**
  * Pairs a view with its loader, so TypeScript checks that `load`'s result is what the view's
  * `extras` prop expects. A record of views cannot infer a distinct `X` per key, so this identity
@@ -13,6 +15,11 @@ function hasLoader(entry) {
         entry !== null &&
         Object.prototype.hasOwnProperty.call(entry, 'load'));
 }
+let previewRequestScope;
+// Created on first use, so this module loads where React has no `cache` (React 18); one instance
+// serves every request.
+const previewRequest = () => (previewRequestScope ??= cache(() => ({})))();
+const readPreviewRequestAssetBase = () => previewRequest().assetBase;
 /**
  * The page for a `[[...path]]` route mounted at `editor.previewPrefix`: it reads the entry at
  * the route's path from the `?branch=` the editor names and renders its view.
@@ -26,9 +33,9 @@ function hasLoader(entry) {
  * so the route would show any branch to anyone.
  * @internal Exported for tests.
  */
-export function createPreviewPageFor(getCanopy, options, deployedAs = 'server') {
+export function createPreviewPageFor(getCanopy, options, config = {}) {
     return async function CanopyPreviewPage({ params, searchParams }) {
-        if (deployedAs === 'static')
+        if (config.deployedAs === 'static')
             notFound();
         const [{ path = [] }, query] = await Promise.all([params, searchParams]);
         const branch = query.branch;
@@ -48,9 +55,14 @@ export function createPreviewPageFor(getCanopy, options, deployedAs = 'server')
             : undefined;
         if (!viewEntry)
             notFound();
+        // From here the response is a preview, so its `/assets/t/` URLs go behind the signed-in route:
+        // server components (a `load`, `extras`) through the getter, the view through its prop.
+        const previewAssetBase = readAssetBase(authenticatedAssetBase(config.basePath));
+        previewRequest().assetBase = previewAssetBase;
+        setServerPreviewAssetBaseGetter(readPreviewRequestAssetBase);
         if (!hasLoader(viewEntry)) {
             const View = viewEntry;
-            return _jsx(View, { initialData: result.data, editorOrigin: options.editorOrigin });
+            return (_jsx(View, { initialData: result.data, editorOrigin: options.editorOrigin, previewAssetBase: previewAssetBase }));
         }
         const { meta } = result;
         const entry = {
@@ -65,6 +77,6 @@ export function createPreviewPageFor(getCanopy, options, deployedAs = 'server')
         // The record erases `view` to `extras?: never`, so it cannot check `load`'s result against the
         // view; `previewView` does, where a pair is written.
         const View = viewEntry.view;
-        return _jsx(View, { initialData: result.data, editorOrigin: options.editorOrigin, extras: extras });
+        return (_jsx(View, { initialData: result.data, editorOrigin: options.editorOrigin, extras: extras, previewAssetBase: previewAssetBase }));
     };
 }

package/dist/preview-route.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What `createPreviewPage` hands a view beside `CanopyPreviewProps`. Kept out of that public type,
+ * so adopter view code never sees it; `withCanopyPreview` consumes it and passes nothing on.
+ */
+export interface PreviewRouteProps {
+    /** The signed-in asset route, which `usePreviewAssetBaseGate` sets before the view renders. */
+    previewAssetBase?: string;
+}

package/dist/preview-route.js

@@ -0,0 +1 @@
+export {};

package/dist/preview.d.ts

@@ -16,7 +16,9 @@ export interface CanopyPreviewProps<T, X = undefined> {
 }
 /**
  * Wraps a view so it renders the editor's live draft of `initialData`, through `useCanopyPreview`;
- * outside an editor frame it renders `initialData` unchanged.
+ * outside an editor frame it renders `initialData` unchanged. On `createPreviewPage`'s route the
+ * view is not server-rendered: it renders right after hydration, with images behind the signed-in
+ * asset route.
  *
  * Call it in your own `'use client'` module and pass the result to `createPreviewPage`'s `views`,
  * or render it on a public page. The wrapping lives in your module, not in `createPreviewPage`,

package/dist/preview.js

@@ -1,9 +1,11 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCanopyPreview } from 'canopycms/preview';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCanopyPreview, usePreviewAssetBaseGate } from 'canopycms/preview';
 /**
  * Wraps a view so it renders the editor's live draft of `initialData`, through `useCanopyPreview`;
- * outside an editor frame it renders `initialData` unchanged.
+ * outside an editor frame it renders `initialData` unchanged. On `createPreviewPage`'s route the
+ * view is not server-rendered: it renders right after hydration, with images behind the signed-in
+ * asset route.
  *
  * Call it in your own `'use client'` module and pass the result to `createPreviewPage`'s `views`,
  * or render it on a public page. The wrapping lives in your module, not in `createPreviewPage`,
@@ -15,10 +17,15 @@ import { useCanopyPreview } from 'canopycms/preview';
  * which JSX accepts on every supported TypeScript, where `ReactNode` needs `JSX.ElementType`.
  */
 export function withCanopyPreview(View) {
-    return function CanopyPreview({ initialData, editorOrigin, extras }) {
+    return function CanopyPreview(props) {
+        const { initialData, editorOrigin, extras } = props;
+        const { previewAssetBase } = props;
         const preview = useCanopyPreview({ initialData, editorOrigin });
+        // On `createPreviewPage`'s route the view renders only once the gate has set the asset
+        // prefix; see `usePreviewAssetBaseGate`.
+        const open = usePreviewAssetBaseGate(previewAssetBase);
         // `extras` is a prop of its own, never spread into the hook's result, so it cannot shadow
         // `data` or `fieldProps`.
-        return _jsx(View, { ...preview, extras: extras });
+        return open ? _jsx(View, { ...preview, extras: extras }) : _jsx(_Fragment, {});
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopycms-next",
-  "version": "0.0.68-int.102",
+  "version": "0.0.68-int.103",
   "description": "Next.js adapter for CanopyCMS",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,7 @@
   "peerDependencies": {
     "next": "^13.5.7 || ^14.2.25 || ^15.5.21 || >=16.0.0 <16.2.0 || >=16.3.0 <17.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "canopycms": "0.0.68-int.102"
+    "canopycms": "0.0.68-int.103"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",
@@ -53,7 +53,7 @@
     "react": "^18.3.1",
     "typescript": "^5.6.3",
     "vitest": "^4.1.0",
-    "canopycms": "0.0.68-int.102"
+    "canopycms": "0.0.68-int.103"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/add-js-extensions.mjs dist && esbuild src/config.ts --bundle --platform=node --packages=external --external:next --format=cjs --outfile=dist/config.cjs && esbuild src/config.ts --bundle --platform=node --packages=external --external:next --format=esm --outfile=dist/config.mjs",