@407dev/cms-astro 0.1.0

package/src/runtime/store.ts

@@ -0,0 +1,130 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+import fs from 'node:fs';
+import path from 'node:path';
+import type { ContentBundle } from '../types';
+
+const globalWithCms = globalThis as typeof globalThis & {
+  __CMS_DRAFT_STORAGE__?: AsyncLocalStorage<ContentBundle>;
+  __CMS_ACTIVE_DRAFT_BUNDLE__?: ContentBundle | null;
+  __CMS_BUILD_BUNDLE__?: ContentBundle | null;
+};
+
+const draftStorage: AsyncLocalStorage<ContentBundle> =
+  (typeof globalThis !== 'undefined' && globalWithCms.__CMS_DRAFT_STORAGE__) ||
+  (() => {
+    const storage = new AsyncLocalStorage<ContentBundle>();
+    if (typeof globalThis !== 'undefined') {
+      globalWithCms.__CMS_DRAFT_STORAGE__ = storage;
+    }
+    return storage;
+  })();
+
+let buildBundle: ContentBundle | null = null;
+let activeDraftBundle: ContentBundle | null = null;
+
+export function setActiveDraftBundle(bundle: ContentBundle | null): void {
+  activeDraftBundle = bundle;
+  if (typeof globalThis !== 'undefined') {
+    globalWithCms.__CMS_ACTIVE_DRAFT_BUNDLE__ = bundle;
+  }
+}
+
+export function setBuildBundle(bundle: ContentBundle | null): void {
+  buildBundle = bundle;
+  if (typeof globalThis !== 'undefined') {
+    globalWithCms.__CMS_BUILD_BUNDLE__ = bundle;
+  }
+}
+
+export function getBuildBundle(): ContentBundle | null {
+  return (
+    buildBundle || (typeof globalThis !== 'undefined' && globalWithCms.__CMS_BUILD_BUNDLE__) || null
+  );
+}
+
+export function getActiveBundle(): ContentBundle | null {
+  const draft = draftStorage.getStore();
+  if (draft) return draft;
+
+  const fallbackDraft =
+    activeDraftBundle ||
+    (typeof globalThis !== 'undefined' && globalWithCms.__CMS_ACTIVE_DRAFT_BUNDLE__) ||
+    null;
+  if (fallbackDraft) return fallbackDraft;
+
+  const existingBuild =
+    buildBundle ||
+    (typeof globalThis !== 'undefined' && globalWithCms.__CMS_BUILD_BUNDLE__) ||
+    null;
+  if (existingBuild) return existingBuild;
+
+  try {
+    const cmsDir = path.resolve(process.cwd(), '.cms');
+    const bundleFile = path.join(cmsDir, 'bundle.json');
+    if (fs.existsSync(bundleFile)) {
+      const parsed = JSON.parse(fs.readFileSync(bundleFile, 'utf-8'));
+      setBuildBundle(parsed);
+      return parsed;
+    }
+  } catch {
+    // Ignore if file read fails
+  }
+
+  return null;
+}
+
+export function isDraftMode(): boolean {
+  return (
+    draftStorage.getStore() !== undefined ||
+    activeDraftBundle !== null ||
+    Boolean(typeof globalThis !== 'undefined' && globalWithCms.__CMS_ACTIVE_DRAFT_BUNDLE__)
+  );
+}
+
+export function runWithDraftBundle<T>(bundle: ContentBundle, fn: () => T): T {
+  return draftStorage.run(bundle, fn);
+}
+
+const missingFieldWarnings = new Set<string>();
+
+export function recordMissingField(key: string): void {
+  missingFieldWarnings.add(key);
+}
+
+export function getMissingFieldWarnings(): string[] {
+  return Array.from(missingFieldWarnings);
+}
+
+export function clearMissingFieldWarnings(): void {
+  missingFieldWarnings.clear();
+}
+
+export function updateBundleFieldValue(key: string, value: unknown): void {
+  const existing = getActiveBundle();
+  if (existing) {
+    if (!existing.fields) existing.fields = {};
+    existing.fields[key] = value;
+    setBuildBundle(existing);
+    setActiveDraftBundle(existing);
+  }
+
+  try {
+    const cmsDir = path.resolve(process.cwd(), '.cms');
+    const bundleFile = path.join(cmsDir, 'bundle.json');
+    if (fs.existsSync(bundleFile)) {
+      const diskBundle = JSON.parse(fs.readFileSync(bundleFile, 'utf-8'));
+      if (!diskBundle.fields) diskBundle.fields = {};
+      diskBundle.fields[key] = value;
+      fs.writeFileSync(bundleFile, JSON.stringify(diskBundle, null, 2), 'utf-8');
+      if (!existing) {
+        setBuildBundle(diskBundle);
+        setActiveDraftBundle(diskBundle);
+      }
+    } else if (existing) {
+      if (!fs.existsSync(cmsDir)) fs.mkdirSync(cmsDir, { recursive: true });
+      fs.writeFileSync(bundleFile, JSON.stringify(existing, null, 2), 'utf-8');
+    }
+  } catch {
+    // Ignore file write errors
+  }
+}

package/src/siteFiles.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest';
+import {
+  type SitemapRouteItem,
+  renderRedirectsFile,
+  renderRobotsTxt,
+  renderSitemapXml,
+} from './siteFiles';
+import type { CmsRedirect, CmsSiteConfig } from './types';
+
+describe('siteFiles generators', () => {
+  it('renders _redirects file correctly', () => {
+    const redirects: CmsRedirect[] = [
+      { from_path: '/old', to_path: '/new', status_code: 301, enabled: true },
+      { from_path: '/temp', to_path: '/target', status_code: 302, enabled: true },
+      { from_path: '/disabled', to_path: '/never', status_code: 301, enabled: false },
+    ];
+
+    const result = renderRedirectsFile(redirects);
+    expect(result).toBe('/old /new 301\n/temp /target 302\n');
+  });
+
+  it('renders robots.txt file with sitemap directive', () => {
+    const config: CmsSiteConfig = {
+      site_id: 'site-1',
+      redirects: [],
+      robots: {
+        rules: [
+          { user_agent: '*', allow: ['/'], disallow: ['/admin', '/private'] },
+          { user_agent: 'Googlebot', allow: ['/'] },
+        ],
+      },
+      default_seo: {},
+      sitemap: {},
+    };
+
+    const result = renderRobotsTxt(config, { siteUrl: 'https://example.com' });
+    expect(result).toContain('User-agent: *');
+    expect(result).toContain('Allow: /');
+    expect(result).toContain('Disallow: /admin');
+    expect(result).toContain('Disallow: /private');
+    expect(result).toContain('User-agent: Googlebot');
+    expect(result).toContain('Sitemap: https://example.com/sitemap.xml');
+  });
+
+  it('renders sitemap.xml excluding 404 and noindex routes', () => {
+    const routes: SitemapRouteItem[] = [
+      {
+        id: 'r1',
+        path: '/',
+        title: 'Home',
+        published_at: '2026-08-20T12:00:00Z',
+      },
+      {
+        id: 'r2',
+        path: '/about',
+        title: 'About',
+        published_at: '2026-08-21T12:00:00Z',
+      },
+      {
+        id: 'r3',
+        path: '/404',
+        title: 'Not Found',
+        published_at: '2026-08-21T12:00:00Z',
+      },
+      {
+        id: 'r4',
+        path: '/secret',
+        title: 'Secret Page',
+        seo: { noindex: true },
+        published_at: '2026-08-21T12:00:00Z',
+      },
+    ];
+
+    const config: CmsSiteConfig = {
+      site_id: 'site-1',
+      redirects: [],
+      robots: {},
+      default_seo: {},
+      sitemap: {},
+      not_found_path: '/404',
+    };
+
+    const result = renderSitemapXml(routes, {
+      siteUrl: 'https://example.com',
+      siteConfig: config,
+    });
+
+    expect(result).toContain('<loc>https://example.com/</loc>');
+    expect(result).toContain('<loc>https://example.com/about</loc>');
+    expect(result).not.toContain('<loc>https://example.com/404</loc>');
+    expect(result).not.toContain('<loc>https://example.com/secret</loc>');
+  });
+});

package/src/siteFiles.ts

@@ -0,0 +1,111 @@
+import type { CmsRedirect, CmsSiteConfig } from './types';
+
+/**
+ * Renders Cloudflare Pages _redirects file content from redirect definitions.
+ */
+export function renderRedirectsFile(redirects: CmsRedirect[] = []): string {
+  const lines = redirects
+    .filter((r) => r.enabled !== false && r.from_path && r.to_path)
+    .map((r) => `${r.from_path} ${r.to_path} ${r.status_code || 301}`);
+
+  return lines.length > 0 ? `${lines.join('\n')}\n` : '';
+}
+
+export interface RenderRobotsOptions {
+  siteUrl?: string;
+}
+
+/**
+ * Renders robots.txt content from site settings.
+ */
+export function renderRobotsTxt(
+  config?: CmsSiteConfig | null,
+  options?: RenderRobotsOptions,
+): string {
+  if (config?.robots?.raw) {
+    return `${config.robots.raw.trim()}\n`;
+  }
+
+  const lines: string[] = [];
+  const rules = config?.robots?.rules || [{ user_agent: '*', allow: ['/'] }];
+
+  for (const rule of rules) {
+    lines.push(`User-agent: ${rule.user_agent || '*'}`);
+    if (rule.allow && rule.allow.length > 0) {
+      for (const path of rule.allow) {
+        lines.push(`Allow: ${path}`);
+      }
+    }
+    if (rule.disallow && rule.disallow.length > 0) {
+      for (const path of rule.disallow) {
+        lines.push(`Disallow: ${path}`);
+      }
+    }
+    lines.push('');
+  }
+
+  const siteUrl = options?.siteUrl ? options.siteUrl.replace(/\/+$/, '') : '';
+  if (siteUrl && config?.robots?.sitemap !== false) {
+    lines.push(`Sitemap: ${siteUrl}/sitemap.xml`);
+  }
+
+  return `${lines.join('\n').trim()}\n`;
+}
+
+export interface RenderSitemapOptions {
+  siteUrl: string;
+  siteConfig?: CmsSiteConfig | null;
+}
+
+export interface SitemapRouteItem {
+  id?: string;
+  path?: string;
+  pattern?: string;
+  published_at?: string;
+  updated_at?: string;
+  seo?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Renders sitemap.xml content from routes and site config.
+ * Excludes noindex routes and the 404 route.
+ */
+export function renderSitemapXml(
+  routes: SitemapRouteItem[],
+  options: RenderSitemapOptions,
+): string {
+  const siteUrl = options.siteUrl.replace(/\/+$/, '');
+  const config = options.siteConfig;
+  const excludes = new Set(config?.sitemap?.exclude || []);
+
+  if (config?.not_found_path) {
+    excludes.add(config.not_found_path);
+  }
+
+  const filtered = routes.filter((r) => {
+    if ((r.path && excludes.has(r.path)) || (r.id && excludes.has(r.id))) {
+      return false;
+    }
+    if ('seo' in r && r.seo && typeof r.seo === 'object') {
+      const seoObj = r.seo as { noindex?: boolean };
+      if (seoObj.noindex) {
+        return false;
+      }
+    }
+    return true;
+  });
+
+  const urlEntries = filtered.map((r) => {
+    const rawPath = r.path || '/';
+    const normPath = rawPath.startsWith('/') ? rawPath : `/${rawPath}`;
+    const loc = `${siteUrl}${normPath}`;
+    const dateStr =
+      ('published_at' in r && r.published_at) || r.updated_at || new Date().toISOString();
+    const lastmod = dateStr.split('T')[0];
+
+    return `  <url>\n    <loc>${loc}</loc>\n    <lastmod>${lastmod}</lastmod>\n  </url>`;
+  });
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urlEntries.join('\n')}\n</urlset>\n`;
+}

package/src/toolbar/app.test.ts

@@ -0,0 +1,191 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import toolbarApp from './app';
+
+type InitParams = Parameters<NonNullable<typeof toolbarApp.init>>;
+type ToolbarAppType = InitParams[1];
+type ToolbarServerType = InitParams[2];
+
+interface WindowWithCmsFields {
+  __CMS_FIELDS__?: Array<{
+    key: string;
+    kind?: string;
+    group?: string;
+  }>;
+}
+
+describe('Astro Dev Toolbar App', () => {
+  let canvas: HTMLDivElement;
+  let mockApp: ToolbarAppType;
+  let mockServer: ToolbarServerType;
+
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    canvas = document.createElement('div');
+    document.body.appendChild(canvas);
+
+    mockApp = {
+      toggleNotification: vi.fn(),
+    } as unknown as ToolbarAppType;
+
+    mockServer = {
+      on: vi.fn(),
+    } as unknown as ToolbarServerType;
+
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockImplementation((url: string) => {
+        if (url.includes('/_cms/dev/status')) {
+          return Promise.resolve({
+            ok: true,
+            status: 200,
+            json: async () => ({
+              status: 'ok',
+              siteId: '00000000-0000-0000-0000-000000000002',
+              apiUrl: 'http://localhost:8787',
+              manifest: { fresh: true, localHash: 'abc', pushedHash: 'abc' },
+              verifier: { available: true, errors: [], warnings: [] },
+              editorOrigins: ['http://localhost:5173'],
+            }),
+          });
+        }
+        if (url.includes('/_cms/dev/bundle')) {
+          return Promise.resolve({
+            ok: true,
+            status: 200,
+            json: async () => ({
+              bundle: {
+                fields: {
+                  'home.hero.heading': 'Hero Heading',
+                  'home.hero.subheading': 'Hero Subheading',
+                  'home.hero.image': 'hero.png',
+                  'contact.heading': 'Contact Us',
+                  'contact.intro': 'Send us a message',
+                  'contact.emailLabel': 'Email Address',
+                  'contact.messageLabel': 'Your Message',
+                  'contact.submitLabel': 'Submit',
+                },
+              },
+              fields: [
+                { key: 'home.hero.heading', type: 'text' },
+                { key: 'home.hero.subheading', type: 'text' },
+                { key: 'home.hero.image', type: 'image' },
+                { key: 'contact.heading', type: 'text' },
+                { key: 'contact.intro', type: 'text' },
+                { key: 'contact.emailLabel', type: 'text' },
+                { key: 'contact.messageLabel', type: 'text' },
+                { key: 'contact.submitLabel', type: 'text' },
+              ],
+            }),
+          });
+        }
+        return Promise.reject(new Error(`Unknown url: ${url}`));
+      }),
+    );
+  });
+
+  it('injects toolbar styles and mounts window and container with proper scrolling styles', () => {
+    toolbarApp.init?.(canvas as unknown as ShadowRoot, mockApp, mockServer);
+
+    const style = canvas.querySelector('style');
+    expect(style).not.toBeNull();
+    const css = style?.textContent || '';
+
+    // Verify container scroll rules
+    expect(css).toContain('overflow-y: auto');
+    expect(css).toContain('overflow-x: hidden');
+    expect(css).toContain('overscroll-behavior: contain');
+    expect(css).toContain('scrollbar-gutter: stable');
+    expect(css).toContain('flex: 1 1 auto');
+    expect(css).toContain('min-height: 0');
+
+    // Verify children do not shrink and cut off
+    expect(css).toContain('.toolbar-container > * {\n        flex-shrink: 0;\n      }');
+    expect(css).toContain('flex-shrink: 0');
+
+    // Verify window element and container are created
+    const windowEl = canvas.querySelector('astro-dev-toolbar-window');
+    expect(windowEl).not.toBeNull();
+    const container = windowEl?.querySelector('.toolbar-container') as HTMLElement;
+    expect(container).not.toBeNull();
+    expect(container.style.overflowY).toBe('auto');
+    expect(container.style.minHeight).toBe('0');
+    expect(container.style.flex).toBe('1 1 auto');
+  });
+
+  it('renders all fields across multiple groups without cutting any off', async () => {
+    (window as unknown as WindowWithCmsFields).__CMS_FIELDS__ = [
+      { key: 'home.hero.heading', kind: 'text', group: 'Hero' },
+      { key: 'home.hero.subheading', kind: 'text', group: 'Hero' },
+      { key: 'home.hero.image', kind: 'image', group: 'Hero' },
+      { key: 'contact.heading', kind: 'text', group: 'ContactForm' },
+      { key: 'contact.intro', kind: 'text', group: 'ContactForm' },
+      { key: 'contact.emailLabel', kind: 'text', group: 'ContactForm' },
+      { key: 'contact.messageLabel', kind: 'text', group: 'ContactForm' },
+      { key: 'contact.submitLabel', kind: 'text', group: 'ContactForm' },
+    ];
+
+    toolbarApp.init?.(canvas as unknown as ShadowRoot, mockApp, mockServer);
+
+    // Wait for fetch promises to resolve
+    await new Promise((r) => setTimeout(r, 50));
+
+    const container = canvas.querySelector('.toolbar-container') as HTMLElement;
+    const groupCards = container.querySelectorAll('.group-card');
+    // Hero and ContactForm (all bundle fields matched, so no orphan card)
+    expect(groupCards.length).toBe(2);
+
+    // Group 1: Hero (3 fields)
+    const heroCard = groupCards[0];
+    const heroHeader = heroCard.querySelector('.group-header');
+    expect(heroHeader?.textContent).toBe('Hero');
+    const heroRows = heroCard.querySelectorAll('.field-row');
+    expect(heroRows.length).toBe(3);
+    expect(heroRows[0].getAttribute('data-field-key')).toBe('home.hero.heading');
+    expect(heroRows[1].getAttribute('data-field-key')).toBe('home.hero.subheading');
+    expect(heroRows[2].getAttribute('data-field-key')).toBe('home.hero.image');
+
+    // Group 2: ContactForm (5 fields - none cut off)
+    const contactCard = groupCards[1];
+    const contactHeader = contactCard.querySelector('.group-header');
+    expect(contactHeader?.textContent).toBe('ContactForm');
+    const contactRows = contactCard.querySelectorAll('.field-row');
+    expect(contactRows.length).toBe(5);
+    expect(contactRows[0].getAttribute('data-field-key')).toBe('contact.heading');
+    expect(contactRows[1].getAttribute('data-field-key')).toBe('contact.intro');
+    expect(contactRows[2].getAttribute('data-field-key')).toBe('contact.emailLabel');
+    expect(contactRows[3].getAttribute('data-field-key')).toBe('contact.messageLabel');
+    expect(contactRows[4].getAttribute('data-field-key')).toBe('contact.submitLabel');
+  });
+
+  it('updates dynamically on cms:fields-updated event with all fields in group preserved', async () => {
+    (window as unknown as WindowWithCmsFields).__CMS_FIELDS__ = [];
+
+    toolbarApp.init?.(canvas as unknown as ShadowRoot, mockApp, mockServer);
+    await new Promise((r) => setTimeout(r, 50));
+
+    const container = canvas.querySelector('.toolbar-container') as HTMLElement;
+    expect(container.textContent).toContain('No CMS fields detected');
+
+    // Simulate bridge-script scanning 4 fields in group
+    document.dispatchEvent(
+      new CustomEvent('cms:fields-updated', {
+        detail: [
+          { key: 'section.f1', kind: 'text', group: 'Section' },
+          { key: 'section.f2', kind: 'text', group: 'Section' },
+          { key: 'section.f3', kind: 'text', group: 'Section' },
+          { key: 'section.f4', kind: 'text', group: 'Section' },
+        ],
+      }),
+    );
+
+    const groupCards = container.querySelectorAll('.group-card');
+    // First card is the Section rendered group; second card is the unrendered/orphaned bundle fields
+    expect(groupCards.length).toBe(2);
+    const sectionCard = groupCards[0];
+    const header = sectionCard.querySelector('.group-header');
+    expect(header?.textContent).toBe('Section');
+    const rows = sectionCard.querySelectorAll('.field-row');
+    expect(rows.length).toBe(4);
+  });
+});