@tinacms/astro 0.0.1 → 0.3.0

package/src/__tests__/fixtures/mdx-jsx-flow.json

@@ -0,0 +1,40 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "h1",
+      "children": [
+        {
+          "type": "text",
+          "text": "hello"
+        }
+      ]
+    },
+    {
+      "type": "mdxJsxFlowElement",
+      "name": "someFeature",
+      "children": [
+        {
+          "type": "text",
+          "text": ""
+        }
+      ],
+      "props": {
+        "children": {
+          "type": "root",
+          "children": [
+            {
+              "type": "p",
+              "children": [
+                {
+                  "type": "text",
+                  "text": "Testing this thing"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ]
+}

package/src/__tests__/fixtures/mdx-jsx-text.json

@@ -0,0 +1,53 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "h1",
+      "children": [
+        {
+          "type": "text",
+          "text": "hello "
+        },
+        {
+          "type": "mdxJsxTextElement",
+          "name": "someFeature",
+          "children": [
+            {
+              "type": "text",
+              "text": ""
+            }
+          ],
+          "props": {
+            "_value": "abc"
+          }
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "When not separated by whitespace"
+        },
+        {
+          "type": "mdxJsxTextElement",
+          "name": "someFeature",
+          "children": [
+            {
+              "type": "text",
+              "text": ""
+            }
+          ],
+          "props": {
+            "_value": "123"
+          }
+        },
+        {
+          "type": "text",
+          "text": "it still works"
+        }
+      ]
+    }
+  ]
+}

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__/sanitize.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+import { sanitizeHref, sanitizeImageSrc } from '../sanitize';
+
+describe('sanitizeHref', () => {
+  it('blocks javascript: scheme', () => {
+    expect(sanitizeHref('javascript:alert(1)')).toBe('#');
+    expect(sanitizeHref('JavaScript:alert(1)')).toBe('#');
+    expect(sanitizeHref('  javascript:alert(1)  ')).toBe('#');
+  });
+
+  it('blocks data: and vbscript: schemes', () => {
+    expect(sanitizeHref('data:text/html,<script>alert(1)</script>')).toBe('#');
+    expect(sanitizeHref('vbscript:msgbox(1)')).toBe('#');
+  });
+
+  it('blocks protocol-relative URLs', () => {
+    expect(sanitizeHref('//evil.com/path')).toBe('#');
+  });
+
+  it('allows http(s) URLs', () => {
+    expect(sanitizeHref('https://tina.io')).toBe('https://tina.io');
+    expect(sanitizeHref('http://tina.io/x')).toBe('http://tina.io/x');
+  });
+
+  it('allows mailto:', () => {
+    expect(sanitizeHref('mailto:hi@tina.io')).toBe('mailto:hi@tina.io');
+  });
+
+  it('allows relative, root-relative, and fragment paths', () => {
+    expect(sanitizeHref('/about')).toBe('/about');
+    expect(sanitizeHref('./relative')).toBe('./relative');
+    expect(sanitizeHref('../up')).toBe('../up');
+    expect(sanitizeHref('#section')).toBe('#section');
+  });
+
+  it('returns fallback for non-strings, empty, or invalid', () => {
+    expect(sanitizeHref(null)).toBe('#');
+    expect(sanitizeHref(undefined)).toBe('#');
+    expect(sanitizeHref('')).toBe('#');
+    expect(sanitizeHref('   ')).toBe('#');
+    expect(sanitizeHref(42)).toBe('#');
+    expect(sanitizeHref('not a url')).toBe('#');
+  });
+
+  it('honours a custom fallback', () => {
+    expect(sanitizeHref('javascript:alert(1)', '/safe')).toBe('/safe');
+  });
+});
+
+describe('sanitizeImageSrc', () => {
+  it('allows http(s) URLs', () => {
+    expect(sanitizeImageSrc('https://cdn.tina.io/x.png')).toBe(
+      'https://cdn.tina.io/x.png'
+    );
+  });
+
+  it('allows relative paths', () => {
+    expect(sanitizeImageSrc('/uploads/x.png')).toBe('/uploads/x.png');
+    expect(sanitizeImageSrc('./local.png')).toBe('./local.png');
+    expect(sanitizeImageSrc('../up.png')).toBe('../up.png');
+  });
+
+  it('blocks protocol-relative and dangerous schemes', () => {
+    expect(sanitizeImageSrc('//evil.com/x.png')).toBe('');
+    expect(sanitizeImageSrc('javascript:alert(1)')).toBe('');
+    expect(sanitizeImageSrc('data:image/png;base64,xxx')).toBe('');
+  });
+
+  it('returns empty for non-strings, empty, or invalid', () => {
+    expect(sanitizeImageSrc(null)).toBe('');
+    expect(sanitizeImageSrc(undefined)).toBe('');
+    expect(sanitizeImageSrc('')).toBe('');
+    expect(sanitizeImageSrc(42)).toBe('');
+  });
+});

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);
+    }
+  );
+});

package/src/bridge.ts

@@ -0,0 +1,7 @@
+/**
+ * Re-exports of `@tinacms/bridge` so Astro projects can pull the bridge from
+ * `@tinacms/astro/bridge` instead of installing it separately. The bridge
+ * package stays publishable on its own for non-Astro frontends (Hugo, plain
+ * HTML, Eleventy).
+ */
+export * from '@tinacms/bridge';