@407dev/cms-astro 0.1.0 → 0.2.0

package/src/index.test.ts

@@ -1,4 +1,6 @@
-import { describe, expect, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
   cms,
   cmsAstro,
@@ -12,6 +14,12 @@ import {
 } from './index';
 
 describe('cms-astro package entrypoint', () => {
+  afterEach(() => {
+    const cmsDir = path.resolve(process.cwd(), '.cms');
+    if (fs.existsSync(cmsDir)) {
+      fs.rmSync(cmsDir, { recursive: true, force: true });
+    }
+  });
   it('exports all expected SDK utilities and functions', () => {
     expect(typeof createCmsClient).toBe('function');
     expect(typeof cmsAstro).toBe('function');
@@ -33,6 +41,25 @@ describe('cms-astro package entrypoint', () => {
     process.env.CMS_CONTENT_URL = 'https://content.example.com';
     process.env.CMS_PREVIEW_SECRET = 'secret_env_456';
 
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          bundleVersion: 1,
+          site_id: 'site_env_123',
+          fields: {},
+          collections: {},
+          entries: {},
+          routes: [],
+          settings: {},
+          redirects: [],
+        }),
+        {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        },
+      ),
+    );
+
     try {
       const integration = cmsAstro();
       expect(integration.name).toBe('@407dev/cms-astro');
@@ -68,9 +95,98 @@ describe('cms-astro package entrypoint', () => {
       expect(define['import.meta.env.CMS_PREVIEW_SECRET']).toBeUndefined();
       expect(warningLogged).toBe(true);
     } finally {
+      fetchSpy.mockRestore();
       process.env.CMS_SITE_ID = originalSiteId;
       process.env.CMS_CONTENT_URL = originalContentUrl;
       process.env.CMS_PREVIEW_SECRET = originalPreviewSecret;
     }
   });
+
+  const buildSetupArgs = () => ({
+    updateConfig: () => {},
+    command: 'build' as const,
+    injectScript: () => {},
+    addMiddleware: () => {},
+    addDevToolbarApp: () => {},
+    logger: { warn: () => {}, error: () => {}, info: () => {} },
+  });
+
+  it('rethrows bundle fetch failures with URL and status on build', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response('Boom', {
+        status: 500,
+        statusText: 'Internal Server Error',
+      }),
+    );
+    try {
+      const integration = cmsAstro({
+        siteId: 'site-build-fail',
+        contentUrl: 'https://content.example.com',
+      });
+      const setupHook = integration.hooks['astro:config:setup'] as (args: unknown) => Promise<void>;
+
+      await expect(setupHook(buildSetupArgs())).rejects.toThrow(
+        /Failed to fetch bundle from https:\/\/content\.example\.com\/content\/site-build-fail\/bundle.*500/,
+      );
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
+  it('wraps unreachable bundle fetches with the URL on build', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('ECONNREFUSED'));
+    try {
+      const integration = cmsAstro({
+        siteId: 'site-build-unreachable',
+        contentUrl: 'https://content.example.com',
+      });
+      const setupHook = integration.hooks['astro:config:setup'] as (args: unknown) => Promise<void>;
+
+      await expect(setupHook(buildSetupArgs())).rejects.toThrow(
+        /Failed to fetch CMS bundle from https:\/\/content\.example\.com\/content\/site-build-unreachable\/bundle \(unreachable\).*ECONNREFUSED/,
+      );
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
+  it('tolerates a 404 bundle (never published) on build', async () => {
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockResolvedValue(new Response('Not Found', { status: 404, statusText: 'Not Found' }));
+    try {
+      const integration = cmsAstro({
+        siteId: 'site-never-published',
+        contentUrl: 'https://content.example.com',
+      });
+      const setupHook = integration.hooks['astro:config:setup'] as (args: unknown) => Promise<void>;
+
+      await expect(setupHook(buildSetupArgs())).resolves.toBeUndefined();
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
+  it('fails gracefully on bundle fetch failure in dev mode', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('Network error'));
+    try {
+      const integration = cmsAstro({
+        siteId: 'site-dev-fail',
+        contentUrl: 'https://content.example.com',
+      });
+      const setupHook = integration.hooks['astro:config:setup'] as (args: unknown) => Promise<void>;
+      const fakeSetupArgs = {
+        updateConfig: () => {},
+        command: 'dev' as const,
+        injectScript: () => {},
+        addMiddleware: () => {},
+        addDevToolbarApp: () => {},
+        logger: { warn: () => {}, error: () => {}, info: () => {} },
+      };
+
+      await expect(setupHook(fakeSetupArgs)).resolves.not.toThrow();
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
 });

package/src/integration.ts

@@ -8,7 +8,7 @@ import { buildBridgeScript } from './preview/bridge-script';
 import { markBundleReady } from './runtime/bundle';
 import { clearMissingFieldWarnings, getMissingFieldWarnings } from './runtime/store';
 import { CMS_TOOLBAR_ICON } from './toolbar/icon';
-import type { CmsAstroOptions } from './types';
+import type { CmsAstroOptions, ContentBundle } from './types';
 
 function deriveRouteFromComponent(componentPath: string): string {
   let route = componentPath
@@ -133,6 +133,7 @@ export function cmsAstro(options: CmsAstroOptions = {}): AstroIntegration {
         // Fetch bundle once on setup/build and write to .cms/bundle.json
         const activeClient = getClient();
         if (activeClient) {
+          let bundle: ContentBundle | undefined;
           try {
             // Dev serves draft content; self-mint a preview token from the shared secret
             // since the content-worker's draft endpoint still requires one (token rules unchanged).
@@ -141,22 +142,43 @@ export function cmsAstro(options: CmsAstroOptions = {}): AstroIntegration {
                 ? await mintDevPreviewToken(activeClient.siteId, effectivePreviewSecret)
                 : null;
 
-            const bundle = await activeClient.getBundle(
+            bundle = await activeClient.getBundle(
               devPreviewToken ? { previewToken: devPreviewToken } : undefined,
             );
+          } catch (err) {
+            if (command === 'build') {
+              const status = (err as { status?: number })?.status;
+              // 404 = nothing published yet; the first build/preview-twin build must still succeed.
+              if (status === 404) {
+                logger.warn(
+                  'CMS bundle not found (no published version yet); building without it.',
+                );
+              } else if (status !== undefined) {
+                throw err;
+              } else {
+                const url = `${activeClient.contentUrl.replace(/\/+$/, '')}/content/${activeClient.siteId}/bundle`;
+                const message = err instanceof Error ? err.message : String(err);
+                throw new Error(
+                  `Failed to fetch CMS bundle from ${url} (unreachable): ${message}`,
+                  {
+                    cause: err,
+                  },
+                );
+              }
+            }
+            // Fail gracefully if fetch fails in dev
+          }
+
+          if (bundle) {
             markBundleReady(bundle);
 
             const cmsDir = path.resolve(process.cwd(), '.cms');
-            if (!fs.existsSync(cmsDir)) {
-              fs.mkdirSync(cmsDir, { recursive: true });
-            }
+            fs.mkdirSync(cmsDir, { recursive: true });
             fs.writeFileSync(
               path.join(cmsDir, 'bundle.json'),
               JSON.stringify(bundle, null, 2),
               'utf-8',
             );
-          } catch {
-            // Fail gracefully if fetch fails
           }
         }
       },

package/src/middleware/preview.test.ts

@@ -104,29 +104,61 @@ describe('createPreviewMiddleware', () => {
     expect(html).toContain('<h1>Hello</h1>');
   });
 
-  it('returns 404 when bundle fetch returns 401/403 (e.g. wrong site or invalid token)', async () => {
+  it('returns 404 when bundle fetch returns 401/403/404 (e.g. wrong site or invalid token)', async () => {
+    for (const status of [401, 403, 404]) {
+      const failingClient: CmsClient = {
+        ...mockClient,
+        async getBundle() {
+          const error = new Error(`CMS Client: Failed to fetch bundle (status ${status})`);
+          (error as unknown as { status: number }).status = status;
+          throw error;
+        },
+      };
+
+      const middleware = createPreviewMiddleware({ client: failingClient });
+      const context = {
+        request: new Request('http://localhost:4321/?preview_token=invalid-token'),
+        url: new URL('http://localhost:4321/?preview_token=invalid-token'),
+      };
+      const next = vi.fn();
+
+      const res = await middleware(context, next);
+      expect(res.status).toBe(404);
+      expect(await res.text()).toBe('Preview token is not valid for this site');
+      expect(res.headers.get('Cache-Control')).toBe('private, no-store');
+      expect(res.headers.get('X-Robots-Tag')).toBe('noindex, nofollow');
+      expect(next).not.toHaveBeenCalled();
+    }
+  });
+
+  it('returns 502 and console.errors when bundle fetch fails with other errors (e.g. 500 or network error)', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
     const failingClient: CmsClient = {
       ...mockClient,
       async getBundle() {
-        const error = new Error('CMS Client: Failed to fetch bundle (status 401): Unauthorized');
-        (error as unknown as { status: number }).status = 401;
+        const error = new Error('Upstream content-worker down');
+        (error as unknown as { status: number }).status = 500;
         throw error;
       },
     };
 
     const middleware = createPreviewMiddleware({ client: failingClient });
     const context = {
-      request: new Request('http://localhost:4321/?preview_token=invalid-or-wrong-site-token'),
-      url: new URL('http://localhost:4321/?preview_token=invalid-or-wrong-site-token'),
+      request: new Request('http://localhost:4321/?preview_token=valid-token'),
+      url: new URL('http://localhost:4321/?preview_token=valid-token'),
     };
     const next = vi.fn();
 
     const res = await middleware(context, next);
-    expect(res.status).toBe(404);
-    expect(await res.text()).toBe('Preview token is not valid for this site');
+    expect(res.status).toBe(502);
+    expect(await res.text()).toBe('Failed to load preview content');
     expect(res.headers.get('Cache-Control')).toBe('private, no-store');
     expect(res.headers.get('X-Robots-Tag')).toBe('noindex, nofollow');
+    expect(consoleErrorSpy).toHaveBeenCalled();
     expect(next).not.toHaveBeenCalled();
+
+    consoleErrorSpy.mockRestore();
   });
 
   it('resolves singleton client via getClient() if not passed directly in options', async () => {

package/src/middleware/preview.ts

@@ -111,9 +111,21 @@ export function createPreviewMiddleware(options: PreviewMiddlewareOptions = {})
     let draftBundle: ContentBundle;
     try {
       draftBundle = await client.getBundle({ previewToken });
-    } catch (_err) {
-      return new Response('Preview token is not valid for this site', {
-        status: 404,
+    } catch (err) {
+      const status = (err as { status?: number })?.status;
+      if (status === 401 || status === 403 || status === 404) {
+        return new Response('Preview token is not valid for this site', {
+          status: 404,
+          headers: {
+            'Cache-Control': 'private, no-store',
+            'X-Robots-Tag': 'noindex, nofollow',
+          },
+        });
+      }
+
+      console.error(err);
+      return new Response('Failed to load preview content', {
+        status: 502,
         headers: {
           'Cache-Control': 'private, no-store',
           'X-Robots-Tag': 'noindex, nofollow',
@@ -167,7 +179,9 @@ export function createPreviewMiddleware(options: PreviewMiddlewareOptions = {})
 
         if (isHtml) {
           const html = await response.text();
-          const bridgeScript = buildBridgeScript({ editorOrigins: options.editorOrigins });
+          const bridgeScript = buildBridgeScript({
+            editorOrigins: options.editorOrigins,
+          });
           const scriptTag = `<script>${bridgeScript}</script>`;
           const modifiedHtml = html.includes('</body>')
             ? html.replace('</body>', `${scriptTag}</body>`)

package/src/preview/bridge-script.test.ts

@@ -27,6 +27,7 @@ describe('bridge-script protocol parity', () => {
     expect(script).toContain("type: 'ready'");
     expect(script).toContain("type: 'field-click'");
     expect(script).toContain("type: 'group-click'");
+    expect(script).toContain("type: 'collection-click'");
     expect(script).toContain("type: 'rects-update'");
     expect(script).toContain("type: 'rendered-fields'");
 
@@ -204,6 +205,84 @@ describe('bridge-script protocol parity', () => {
     expect(customEvent.detail.key).toBe('home.hero.heading');
   });
 
+  it('emits collection-click with or without slug when clicking collection in edit mode', () => {
+    document.body.innerHTML = `
+      <ul id="collection-list" data-cms-collection="blog">
+        <li id="item-1" data-cms-collection="blog" data-cms-entry="post-1">
+          <span id="title-1" data-cms-entry-field="title">Post 1</span>
+          <span id="gap-1">Unmarked item text</span>
+        </li>
+      </ul>
+    `;
+    document.documentElement.setAttribute('data-cms-edit-mode', 'true');
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript({ editorOrigins: ['http://localhost:5173'] });
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const messages: unknown[] = [];
+    const mockParent = {
+      postMessage: (msg: unknown) => messages.push(msg),
+    };
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          source: 'cms-editor',
+          v: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+          type: 'hello',
+          protocolVersion: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+        },
+        origin: 'http://localhost:5173',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    // 1. Clicking on the wrapper ul (without slug) emits collection-click with slug undefined
+    const ul = document.getElementById('collection-list');
+    ul?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+    const ulClickMsg = messages.find(
+      (m) => (m as { type?: string }).type === 'collection-click' && !(m as { slug?: string }).slug,
+    ) as { type: string; collection: string; slug?: string; rect: unknown } | undefined;
+    expect(ulClickMsg).toBeDefined();
+    expect(ulClickMsg?.collection).toBe('blog');
+    expect(ulClickMsg?.slug).toBeUndefined();
+
+    // 2. Clicking on an item (with slug) emits collection-click with slug
+    const gap = document.getElementById('gap-1');
+    gap?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+    const itemClickMsg = messages.find(
+      (m) =>
+        (m as { type?: string }).type === 'collection-click' &&
+        (m as { slug?: string }).slug === 'post-1',
+    ) as { type: string; collection: string; slug?: string; rect: unknown } | undefined;
+    expect(itemClickMsg).toBeDefined();
+    expect(itemClickMsg?.collection).toBe('blog');
+    expect(itemClickMsg?.slug).toBe('post-1');
+
+    // 3. Clicking on a field inside the item emits field-click, NOT collection-click
+    const title = document.getElementById('title-1');
+    title?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+    const fieldClickMsg = messages.find((m) => (m as { type?: string }).type === 'field-click') as
+      | { type: string; key: string; entryRef?: { collection: string; slug: string; path: string } }
+      | undefined;
+    expect(fieldClickMsg).toBeDefined();
+    expect(fieldClickMsg?.key).toBe('title');
+    expect(fieldClickMsg?.entryRef).toEqual({
+      collection: 'blog',
+      slug: 'post-1',
+      path: 'title',
+    });
+
+    document.documentElement.removeAttribute('data-cms-edit-mode');
+  });
+
   it('skips textContent replacement when patching structured non-image object values', () => {
     document.body.innerHTML = `
       <div data-cms-field="home.videoFeed.videos">
@@ -326,9 +405,9 @@ describe('bridge-script protocol parity', () => {
     expect(injectedStyle?.textContent).not.toContain('astro-dev-toolbar');
   });
 
-  it('includes comments capability and handles comment-mode messages', () => {
+  it('includes comments and collection-click capabilities and handles comment-mode messages', () => {
     const script = buildBridgeScript();
-    expect(script).toContain("capabilities: ['comments']");
+    expect(script).toContain("capabilities: ['comments', 'collection-click']");
     expect(script).toContain("data.type === 'comment-mode'");
     expect(script).toContain("data.type === 'watch-anchors'");
     expect(script).toContain("data.type === 'scroll-to-anchor'");

package/src/preview/bridge-script.ts

@@ -97,6 +97,13 @@ export function buildBridgeScript(options: BridgeScriptOptions = {}): string {
       'html[data-cms-edit-mode] [data-cms-group]:hover {',
       '  outline: 2px solid ${chromeTokens.success} !important;',
       '  outline-offset: 3px !important;',
+      '}',
+      'html[data-cms-edit-mode] [data-cms-collection] {',
+      '  cursor: pointer !important;',
+      '}',
+      'html[data-cms-edit-mode] [data-cms-collection]:hover {',
+      '  outline: 2px dashed ${chromeTokens.warning} !important;',
+      '  outline-offset: 4px !important;',
       '}'
     ].filter(Boolean).join('\\n');
 
@@ -589,6 +596,28 @@ export function buildBridgeScript(options: BridgeScriptOptions = {}): string {
           rect: gRect
         });
       }
+      return;
+    }
+
+    var collectionEl = target.closest('[data-cms-collection]');
+    if (collectionEl) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var collKey = collectionEl.getAttribute('data-cms-collection') || '';
+      var entryEl = target.closest('[data-cms-entry]');
+      var slug = collectionEl.getAttribute('data-cms-entry') || (entryEl ? entryEl.getAttribute('data-cms-entry') : null) || undefined;
+      var cRect = getElementRect(collectionEl);
+
+      postToEditor({
+        source: 'cms-preview',
+        v: PROTOCOL_VERSION,
+        type: 'collection-click',
+        collection: collKey,
+        slug: slug,
+        rect: cRect
+      });
+      return;
     }
   }, true);
 
@@ -608,7 +637,7 @@ export function buildBridgeScript(options: BridgeScriptOptions = {}): string {
         v: PROTOCOL_VERSION,
         type: 'ready',
         protocolVersion: PROTOCOL_VERSION,
-        capabilities: ['comments']
+        capabilities: ['comments', 'collection-click']
       });
 
       scanRenderedFields();