@tinacms/astro 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/astro",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/TinaMarkdown.astro",
   "types": "dist/index.d.ts",
@@ -57,15 +57,14 @@
       "astro": "./src/integration.ts",
       "default": "./dist/integration.js"
     },
-    "./bridge-route": {
-      "types": "./dist/bridge-route.d.ts",
-      "astro": "./src/bridge-route.ts",
-      "default": "./dist/bridge-route.js"
-    },
     "./experimental": {
       "types": "./dist/experimental.d.ts",
       "astro": "./src/experimental.ts",
       "default": "./dist/experimental.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
     }
   },
   "license": "Apache-2.0",
@@ -108,21 +107,21 @@
         "target": "node"
       },
       {
-        "name": "src/bridge-route.ts",
+        "name": "src/experimental.ts",
         "target": "node"
       },
       {
-        "name": "src/experimental.ts",
+        "name": "src/island-route.ts",
         "target": "node"
       },
       {
-        "name": "src/island-route.ts",
+        "name": "src/vite.ts",
         "target": "node"
       }
     ]
   },
   "dependencies": {
-    "@tinacms/bridge": "0.2.0"
+    "@tinacms/bridge": "0.3.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0"

package/src/TinaIsland.astro

@@ -1,32 +1,18 @@
 ---
-/**
- * Marker wrapper for an editable region. Emits the `data-tina-island`
- * attribute the bridge looks for, with the wrapper element/className taken
- * from the registry entry — so the page-side element matches the server's
- * `IslandConfig.wrapper` automatically.
- *
- * Usage:
- *
- * ```astro
- * import TinaIsland from '@tinacms/astro/TinaIsland.astro';
- * import { islands } from '../lib/islands';
- *
- * <TinaIsland name="post" wrapper={islands.post.wrapper} params={{ slug }}>
- *   <PostBody data={data} />
- * </TinaIsland>
- * ```
- *
- * `name` must match a key in the `IslandRegistry` you passed to
- * `experimental_createIslandRoute`. `params` is encoded as URL search
- * params and forwarded to the route handler.
- */
+import { adminOrigins } from './internal/admin-origin';
+
 interface Props {
   name: string;
   wrapper: { tag: string; className?: string };
   params?: Record<string, string | number>;
+  /** Mark at most one `<TinaIsland>` per page as the primary editable
+   *  region so the admin opens it on load instead of the multi-document
+   *  picker. SSR pages don't need this — the first `requestWithMetadata()`
+   *  is treated as primary automatically. */
+  primary?: boolean;
 }
 
-const { name, wrapper, params } = Astro.props;
+const { name, wrapper, params, primary } = Astro.props;
 const search = params
   ? `?${new URLSearchParams(
       Object.fromEntries(
@@ -36,7 +22,23 @@ const search = params
   : '';
 const marker = `/tina-island/${name}${search}`;
 const Tag = wrapper.tag as keyof HTMLElementTagNameMap;
+const adminOrigin = adminOrigins();
 ---
-<Tag class={wrapper.className} data-tina-island={marker}>
+<!-- In-iframe bridge bootstrap for prerendered pages (the middleware only
+     injects on SSR responses). No-op outside the admin iframe; the
+     window flag dedupes across multiple <TinaIsland> on one page. -->
+<script is:inline type="module" define:vars={{ adminOrigin }}>
+  if (window.self !== window.top && !window.__tinaBootstrap) {
+    window.__tinaBootstrap = 1;
+    const { init, refreshForms } = await import('/admin/bridge.js');
+    init(adminOrigin ? { adminOrigin } : undefined);
+    document.addEventListener('astro:page-load', refreshForms);
+  }
+</script>
+<Tag
+  class={wrapper.className}
+  data-tina-island={marker}
+  data-tina-island-primary={primary ? '' : undefined}
+>
   <slot />
 </Tag>

package/src/__tests__/IslandStub.astro

@@ -0,0 +1,8 @@
+---
+// Minimal component for island-route tests — echoes the prop it's given.
+interface Props {
+  value: unknown;
+}
+const { value } = Astro.props;
+---
+<span data-value={JSON.stringify(value)}>stub</span>

package/src/__tests__/TinaIsland.test.ts

@@ -0,0 +1,60 @@
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { beforeEach, describe, expect, it } from 'vitest';
+import TinaIsland from '../TinaIsland.astro';
+
+let container: AstroContainer;
+
+beforeEach(async () => {
+  container = await AstroContainer.create();
+});
+
+const wrapper = { tag: 'article', className: 'prose' };
+
+describe('TinaIsland', () => {
+  it('emits the data-tina-island marker with encoded params', async () => {
+    const html = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper, params: { slug: 'hello-world' } },
+      slots: { default: 'BODY' },
+    });
+    expect(html).toContain(
+      'data-tina-island="/tina-island/post?slug=hello-world"'
+    );
+    expect(html).toContain('BODY');
+    expect(html).toContain('class="prose"');
+  });
+
+  it('emits the guarded in-iframe bootstrap script', async () => {
+    const html = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper },
+      slots: { default: 'BODY' },
+    });
+    expect(html).toContain('window.__tinaBootstrap');
+    expect(html).toContain("import('/admin/bridge.js')");
+    expect(html).toContain('window.self !== window.top');
+  });
+
+  it('threads the resolved admin origin through define:vars', async () => {
+    const html = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper },
+      slots: { default: 'BODY' },
+    });
+    // `define:vars` emits the value resolved from PUBLIC_TINA_ADMIN_ORIGIN —
+    // `null` here since it's unset in the test env.
+    expect(html).toContain('adminOrigin = null');
+    expect(html).toContain('init(adminOrigin ? { adminOrigin } : undefined)');
+  });
+
+  it('marks the wrapper data-tina-island-primary only when primary is set', async () => {
+    const withoutPrimary = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper },
+      slots: { default: 'BODY' },
+    });
+    expect(withoutPrimary).not.toContain('data-tina-island-primary');
+
+    const withPrimary = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper, primary: true },
+      slots: { default: 'BODY' },
+    });
+    expect(withPrimary).toContain('data-tina-island-primary');
+  });
+});

package/src/__tests__/forms-store.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import {
+  type CollectedForm,
+  formsStore,
+  recordForm,
+  sortByPriority,
+} from '../internal/forms-store';
+
+function makeForm(overrides: Partial<CollectedForm> = {}): CollectedForm {
+  return {
+    id: 'id',
+    query: 'query Q',
+    variables: {},
+    data: {},
+    ...overrides,
+  };
+}
+
+describe('recordForm', () => {
+  it('dedupes by id within a single request scope', () => {
+    const list: CollectedForm[] = [];
+    formsStore.run(list, () => {
+      recordForm(makeForm({ id: 'a' }));
+      recordForm(makeForm({ id: 'a' }));
+      recordForm(makeForm({ id: 'b' }));
+    });
+    expect(list.map((f) => f.id)).toEqual(['a', 'b']);
+  });
+
+  it('upgrades an existing entry to primary when a later call asserts it', () => {
+    const list: CollectedForm[] = [];
+    formsStore.run(list, () => {
+      // Layout calls global with no priority first.
+      recordForm(makeForm({ id: 'global' }));
+      // Page-level loader for the same id later flags it primary.
+      recordForm(makeForm({ id: 'global', priority: 'primary' }));
+    });
+    expect(list).toHaveLength(1);
+    expect(list[0]!.priority).toBe('primary');
+  });
+
+  it('is a no-op outside a request scope', () => {
+    // Just don't throw — there's no store to read.
+    expect(() => recordForm(makeForm())).not.toThrow();
+  });
+});
+
+describe('sortByPriority', () => {
+  it('moves primaries to the front while preserving relative order', () => {
+    const forms = [
+      makeForm({ id: 'a' }),
+      makeForm({ id: 'b', priority: 'primary' }),
+      makeForm({ id: 'c' }),
+      makeForm({ id: 'd', priority: 'primary' }),
+    ];
+    expect(sortByPriority(forms).map((f) => f.id)).toEqual([
+      'b',
+      'd',
+      'a',
+      'c',
+    ]);
+  });
+
+  it('returns a new array without mutating the input', () => {
+    const forms = [makeForm({ id: 'a' }), makeForm({ id: 'b' })];
+    const sorted = sortByPriority(forms);
+    expect(sorted).not.toBe(forms);
+    expect(forms.map((f) => f.id)).toEqual(['a', 'b']);
+  });
+});

package/src/__tests__/integration.test.ts

@@ -0,0 +1,124 @@
+import { existsSync, mkdtempSync, readFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, sep } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import type { AstroIntegration } from 'astro';
+import type { Plugin as VitePlugin } from 'vite';
+import { describe, expect, it, vi } from 'vitest';
+import tina from '../integration';
+
+type Hooks = AstroIntegration['hooks'];
+type ConfigSetupArg = Parameters<NonNullable<Hooks['astro:config:setup']>>[0];
+type ConfigDoneArg = Parameters<NonNullable<Hooks['astro:config:done']>>[0];
+type BuildDoneArg = Parameters<NonNullable<Hooks['astro:build:done']>>[0];
+
+function runConfigSetup() {
+  const addMiddleware = vi.fn();
+  const updateConfig = vi.fn();
+  const logger = { warn: vi.fn(), info: vi.fn() };
+  const integration = tina();
+  (
+    integration.hooks['astro:config:setup'] as NonNullable<
+      Hooks['astro:config:setup']
+    >
+  )({ addMiddleware, updateConfig, logger } as unknown as ConfigSetupArg);
+
+  const plugins: VitePlugin[] =
+    updateConfig.mock.calls[0]?.[0]?.vite?.plugins ?? [];
+  return { integration, addMiddleware, updateConfig, logger, plugins };
+}
+
+// Drive a Vite plugin's `configureServer` and capture the request handler it
+// registers, so we can exercise it without a real dev server.
+function devHandler(plugin: VitePlugin) {
+  let handler: ((req: any, res: any, next: () => void) => void) | undefined;
+  const server = { middlewares: { use: (h: any) => (handler = h) } };
+  (plugin.configureServer as any)(server);
+  if (!handler) throw new Error('plugin registered no middleware');
+  return handler;
+}
+
+function makeRes() {
+  return {
+    statusCode: 200,
+    headers: {} as Record<string, string>,
+    body: undefined as Buffer | string | undefined,
+    setHeader(name: string, value: string) {
+      this.headers[name.toLowerCase()] = value;
+    },
+    end(chunk?: Buffer | string) {
+      this.body = chunk;
+    },
+  };
+}
+
+describe('tina() integration — astro:config:setup', () => {
+  it('wires the middleware without writing to the source tree', () => {
+    const { addMiddleware, plugins } = runConfigSetup();
+
+    expect(addMiddleware).toHaveBeenCalledWith({
+      entrypoint: '@tinacms/astro/middleware',
+      order: 'pre',
+    });
+    // A dev-only Vite plugin handles the bridge; nothing is staged on disk.
+    const plugin = plugins.find((p) => p.name === '@tinacms/astro:bridge-dev');
+    expect(plugin).toBeDefined();
+    expect(plugin?.apply).toBe('serve');
+  });
+});
+
+describe('tina() integration — bridge dev plugin', () => {
+  it('serves the bridge bundle at /admin/bridge.js', () => {
+    const { plugins } = runConfigSetup();
+    const plugin = plugins.find((p) => p.name === '@tinacms/astro:bridge-dev')!;
+    const handler = devHandler(plugin);
+
+    const res = makeRes();
+    const next = vi.fn();
+    handler({ url: '/admin/bridge.js' }, res, next);
+
+    expect(next).not.toHaveBeenCalled();
+    expect(res.headers['content-type']).toBe('text/javascript');
+    expect((res.body as Buffer).length).toBeGreaterThan(0);
+  });
+
+  it('passes other requests through', () => {
+    const { plugins } = runConfigSetup();
+    const plugin = plugins.find((p) => p.name === '@tinacms/astro:bridge-dev')!;
+    const handler = devHandler(plugin);
+
+    const res = makeRes();
+    const next = vi.fn();
+    handler({ url: '/some/page' }, res, next);
+
+    expect(next).toHaveBeenCalledOnce();
+    expect(res.body).toBeUndefined();
+  });
+});
+
+describe('tina() integration — astro:build:done', () => {
+  it('emits bridge.js into the client output dir', () => {
+    const clientDir = mkdtempSync(join(tmpdir(), 'tina-client-'));
+    const { integration } = runConfigSetup();
+    const logger = { warn: vi.fn(), info: vi.fn() };
+
+    (
+      integration.hooks['astro:config:done'] as NonNullable<
+        Hooks['astro:config:done']
+      >
+    )({
+      config: { build: { client: pathToFileURL(clientDir + sep) } },
+    } as unknown as ConfigDoneArg);
+
+    (
+      integration.hooks['astro:build:done'] as NonNullable<
+        Hooks['astro:build:done']
+      >
+    )({ logger } as unknown as BuildDoneArg);
+
+    const bridgePath = join(clientDir, 'admin', 'bridge.js');
+    expect(existsSync(bridgePath)).toBe(true);
+    expect(readFileSync(bridgePath, 'utf-8').length).toBeGreaterThan(0);
+    expect(logger.warn).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/island-route.test.ts

@@ -0,0 +1,119 @@
+import { PREVIEW_CONTENT_TYPE, PRIME_HEADER } from '@tinacms/bridge/preview';
+import type { APIContext } from 'astro';
+import { describe, expect, it } from 'vitest';
+import { requestWithMetadata } from '../data';
+import { experimental_createIslandRoute } from '../island-route';
+import IslandStub from './IslandStub.astro';
+
+const route = experimental_createIslandRoute({
+  post: {
+    fetch: () =>
+      requestWithMetadata(
+        Promise.resolve({
+          data: { post: { title: 'Hi' } },
+          query: 'query Post',
+          variables: { relativePath: 'hello.md' },
+        }),
+        { priority: 'primary' }
+      ),
+    component: IslandStub,
+    wrapper: { tag: 'article', className: 'prose' },
+    propsFromData: (data) => ({ value: data }),
+  },
+  global: {
+    fetch: () =>
+      requestWithMetadata(
+        Promise.resolve({
+          data: { config: { theme: 'dark' } },
+          query: 'query Global',
+          variables: {},
+        })
+      ),
+    component: IslandStub,
+    wrapper: { tag: 'header' },
+    propsFromData: (data) => ({ value: data }),
+  },
+});
+
+function call(
+  headers: Record<string, string>,
+  name = 'post'
+): Promise<Response> {
+  const url = new URL(`http://localhost/tina-island/${name}`);
+  const request = new Request(url, {
+    method: 'POST',
+    headers: { 'content-type': PREVIEW_CONTENT_TYPE, ...headers },
+    body: '{}',
+  });
+  return Promise.resolve(
+    route({ params: { name }, request, url } as unknown as APIContext)
+  ) as Promise<Response>;
+}
+
+describe('experimental_createIslandRoute', () => {
+  it('renders the wrapped island region', async () => {
+    const res = await call({});
+    expect(res.status).toBe(200);
+    const html = await res.text();
+    expect(html).toContain(
+      '<article class="prose" data-tina-island="/tina-island/post">'
+    );
+    expect(html).toContain('stub');
+    expect(html).not.toContain('data-tina-form=');
+  });
+
+  it('prepends the collected form payloads on a primed request', async () => {
+    const res = await call({ [PRIME_HEADER]: '1' });
+    expect(res.status).toBe(200);
+    const html = await res.text();
+    expect(html).toContain('data-tina-form=');
+    // The payload carries the query/variables the loader used.
+    expect(html).toContain('query Post');
+    expect(html).toContain('hello.md');
+    // The region HTML still follows the payload divs.
+    expect(html).toContain('data-tina-island="/tina-island/post"');
+  });
+
+  it('emits `data-tina-primary` only on payloads that set `priority: "primary"`', async () => {
+    // The `post` loader passes `{ priority: 'primary' }`; the `global`
+    // loader does not. Each island route call renders its own forms
+    // independently, so a positional marker (`i === 0`) would tag the
+    // first form of *every* island — on a page that primes
+    // `[page, global-header, global-footer]` the bridge would see three
+    // competing primaries and the first in DOM order (usually a layout
+    // global) would win the retry loop.
+    const postHtml = await (await call({ [PRIME_HEADER]: '1' }, 'post')).text();
+    expect(postHtml).toContain('data-tina-form=');
+    expect(postHtml).toContain('data-tina-primary');
+
+    const globalHtml = await (
+      await call({ [PRIME_HEADER]: '1' }, 'global')
+    ).text();
+    expect(globalHtml).toContain('data-tina-form=');
+    expect(globalHtml).not.toContain('data-tina-primary');
+  });
+
+  it('rejects non-preview requests', async () => {
+    const url = new URL('http://localhost/tina-island/post');
+    const res = (await route({
+      params: { name: 'post' },
+      request: new Request(url, { method: 'POST' }),
+      url,
+    } as unknown as APIContext)) as Response;
+    expect(res.status).toBe(404);
+  });
+
+  it('404s an unknown island', async () => {
+    const url = new URL('http://localhost/tina-island/nope');
+    const res = (await route({
+      params: { name: 'nope' },
+      request: new Request(url, {
+        method: 'POST',
+        headers: { 'content-type': PREVIEW_CONTENT_TYPE },
+        body: '{}',
+      }),
+      url,
+    } as unknown as APIContext)) as Response;
+    expect(res.status).toBe(404);
+  });
+});

package/src/__tests__/middleware.test.ts

@@ -0,0 +1,102 @@
+import type { APIContext, MiddlewareNext } from 'astro';
+import { describe, expect, it, vi } from 'vitest';
+import { requestWithMetadata } from '../data';
+import { onRequest } from '../middleware';
+
+function makeContext(
+  overrides: Partial<APIContext> & { request?: unknown }
+): APIContext {
+  return {
+    locals: {},
+    request: new Request('https://example.com/'),
+    isPrerendered: false,
+    ...overrides,
+  } as unknown as APIContext;
+}
+
+const passThrough: MiddlewareNext = () =>
+  Promise.resolve(
+    new Response('<html><head></head><body>ok</body></html>', {
+      headers: { 'content-type': 'text/html' },
+    })
+  );
+
+describe('onRequest', () => {
+  it('short-circuits prerendered routes without touching request headers', async () => {
+    // A synthetic build-time Request whose header access would emit Astro's
+    // `Astro.request.headers` warning — modeled here as a throw.
+    const request = {
+      url: 'https://example.com/',
+      headers: {
+        get() {
+          throw new Error(
+            'request headers must not be read while prerendering'
+          );
+        },
+      },
+    };
+    const context = makeContext({ isPrerendered: true, request });
+    const next = vi.fn(passThrough);
+
+    const response = await onRequest(context, next);
+
+    expect(next).toHaveBeenCalledOnce();
+    expect((context.locals as { tinaEdit?: boolean }).tinaEdit).toBe(false);
+    expect(await response.text()).toContain('ok');
+  });
+
+  it('resolves edit mode for non-prerendered requests', async () => {
+    const context = makeContext({ isPrerendered: false });
+    const next = vi.fn(passThrough);
+
+    await onRequest(context, next);
+
+    expect(next).toHaveBeenCalledOnce();
+    // Plain request — no iframe Sec-Fetch-Dest, no cookie — so not editing.
+    expect((context.locals as { tinaEdit?: boolean }).tinaEdit).toBe(false);
+  });
+
+  it('splices `priority: "primary"` form payloads before secondaries', async () => {
+    // Edit-mode request — iframe destination plus the edit cookie.
+    const request = new Request('https://example.com/', {
+      headers: {
+        'sec-fetch-dest': 'iframe',
+        cookie: '__tina_edit=1',
+      },
+    });
+    const context = makeContext({ isPrerendered: false, request });
+
+    // The page calls global first (layout order) but the page-level loader
+    // marks its own document primary — the primary should land first in
+    // the rendered HTML regardless of call order.
+    const next: MiddlewareNext = async () => {
+      await requestWithMetadata(
+        Promise.resolve({
+          data: {},
+          query: 'query Global',
+          variables: {},
+        })
+      );
+      await requestWithMetadata(
+        Promise.resolve({
+          data: {},
+          query: 'query Page',
+          variables: { slug: 'home' },
+        }),
+        { priority: 'primary' }
+      );
+      return new Response('<html><head></head><body>ok</body></html>', {
+        headers: { 'content-type': 'text/html' },
+      });
+    };
+
+    const response = await onRequest(context, next);
+    const html = await response.text();
+
+    const pageIdx = html.indexOf('query Page');
+    const globalIdx = html.indexOf('query Global');
+    expect(pageIdx).toBeGreaterThan(-1);
+    expect(globalIdx).toBeGreaterThan(-1);
+    expect(pageIdx).toBeLessThan(globalIdx);
+  });
+});

package/src/__tests__/vite.test.ts

@@ -0,0 +1,67 @@
+import type { ViteDevServer } from 'vite';
+import { describe, expect, it, vi } from 'vitest';
+import { tinaAdminDevRedirect } from '../vite';
+
+type Handler = (req: any, res: any, next: () => void) => void;
+
+function registerHandler(): Handler {
+  const plugin = tinaAdminDevRedirect();
+  let handler: Handler | undefined;
+  const server = {
+    middlewares: { use: (h: Handler) => (handler = h) },
+  } as unknown as ViteDevServer;
+  (plugin.configureServer as any)(server);
+  if (!handler) throw new Error('plugin did not register a middleware');
+  return handler;
+}
+
+function makeRes() {
+  return {
+    statusCode: 200,
+    headers: {} as Record<string, string>,
+    ended: false,
+    setHeader(name: string, value: string) {
+      this.headers[name] = value;
+    },
+    end() {
+      this.ended = true;
+    },
+  };
+}
+
+describe('tinaAdminDevRedirect', () => {
+  it('only applies to the dev server', () => {
+    expect(tinaAdminDevRedirect().apply).toBe('serve');
+  });
+
+  it.each(['/admin', '/admin/', '/admin?foo=bar'])(
+    'redirects %s to /admin/index.html',
+    (url) => {
+      const handler = registerHandler();
+      const res = makeRes();
+      const next = vi.fn();
+
+      handler({ url }, res, next);
+
+      expect(res.statusCode).toBe(302);
+      expect(res.headers.Location).toBe('/admin/index.html');
+      expect(res.ended).toBe(true);
+      expect(next).not.toHaveBeenCalled();
+    }
+  );
+
+  it.each(['/admin/index.html', '/admin/foo', '/admins', '/'])(
+    'passes %s through untouched',
+    (url) => {
+      const handler = registerHandler();
+      const res = makeRes();
+      const next = vi.fn();
+
+      handler({ url }, res, next);
+
+      expect(next).toHaveBeenCalledOnce();
+      expect(res.ended).toBe(false);
+      expect(res.statusCode).toBe(200);
+    }
+  );
+});