@trypattern/sdk 0.1.9 → 0.1.10

package/dist/server/pages.js

@@ -0,0 +1,301 @@
+import { imageSources, mediaPath, transformsOn } from "../media.js";
+import { readTitle } from "./settings.js";
+import { readRow, readRows } from "./tables.js";
+const SEGMENT = /^(:[A-Za-z_]\w*|[\w.~-]+)$/;
+const OG_WIDTH = 1200;
+const OG_HEIGHT = 630;
+const SITEMAP_LIMIT = 1000;
+const DATA_ID = 'pattern-data';
+function segmentsOf(pattern) {
+    if (!pattern.startsWith('/')) {
+        throw new Error(`A page path starts with /: "${pattern}"`);
+    }
+    const segments = pattern.split('/').filter((segment) => segment !== '');
+    const wrong = segments.find((segment) => !SEGMENT.test(segment));
+    if (wrong !== undefined) {
+        throw new Error(`"${pattern}" is not a page path: use words and :params, like /items/:itemId`);
+    }
+    return segments;
+}
+export function definePages(tables, pages) {
+    return {
+        tables,
+        routes: Object.entries(pages).map(([pattern, definition]) => {
+            const page = definition;
+            return {
+                pattern,
+                segments: segmentsOf(pattern),
+                ...(typeof page === 'function' ? { head: page } : page)
+            };
+        })
+    };
+}
+export function matchPage(pages, path) {
+    const parts = path
+        .split('/')
+        .filter((part) => part !== '')
+        .map((part) => {
+        try {
+            return decodeURIComponent(part);
+        }
+        catch {
+            return part;
+        }
+    });
+    for (const route of pages.routes) {
+        if (route.segments.length !== parts.length)
+            continue;
+        const params = {};
+        const matches = route.segments.every((segment, index) => {
+            const part = parts[index] ?? '';
+            if (segment.startsWith(':')) {
+                params[segment.slice(1)] = part;
+                return true;
+            }
+            return segment === part;
+        });
+        if (matches)
+            return { route, params };
+    }
+    return undefined;
+}
+function readableTable(pages, name) {
+    const table = pages.tables[name];
+    if (table === undefined)
+        throw new Error(`There is no table "${name}"`);
+    if (table.access.read !== 'anyone') {
+        throw new Error(`Pages are public, so they read only tables anyone may read; "${name}" has read: '${table.access.read}'`);
+    }
+    return table;
+}
+function requestFor(c, pages, params) {
+    const url = new URL(c.req.url);
+    const read = new Map();
+    return {
+        url,
+        params,
+        rows: (name) => {
+            const table = readableTable(pages, name);
+            const found = read.get(name) ?? readRows(c.env.DB, table);
+            read.set(name, found);
+            return found;
+        },
+        row: (name, id) => readRow(c.env.DB, readableTable(pages, name), id),
+        photoUrl: (image) => `${url.origin}${mediaPath(image.key)}`
+    };
+}
+function escapeHtml(text) {
+    return text
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+}
+function scriptJson(value) {
+    return JSON.stringify(value)
+        .replaceAll('<', '\\u003c')
+        .replaceAll('
', '\\u2028')
+        .replaceAll('
', '\\u2029');
+}
+function meta(attribute, key, content) {
+    return `<meta ${attribute}="${key}" content="${escapeHtml(content)}">`;
+}
+function openGraphImage(url, image) {
+    if (!transformsOn(url.hostname)) {
+        return {
+            src: `${url.origin}${mediaPath(image.key)}`,
+            width: image.width,
+            height: image.height
+        };
+    }
+    const options = `width=${OG_WIDTH},height=${OG_HEIGHT},quality=82,format=jpeg,fit=cover`;
+    return {
+        src: `${url.origin}/cdn-cgi/image/${options}${mediaPath(image.key)}`,
+        width: OG_WIDTH,
+        height: OG_HEIGHT
+    };
+}
+function heroPreload(url, hero) {
+    const sources = imageSources(hero.image, {
+        aspect: hero.aspect,
+        transforms: transformsOn(url.hostname)
+    });
+    const attributes = [
+        'rel="preload"',
+        'as="image"',
+        'fetchpriority="high"',
+        `href="${escapeHtml(sources.src)}"`,
+        ...(sources.srcSet === undefined
+            ? []
+            : [
+                `imagesrcset="${escapeHtml(sources.srcSet)}"`,
+                `imagesizes="${escapeHtml(hero.sizes)}"`
+            ])
+    ];
+    return `<link ${attributes.join(' ')}>`;
+}
+function dataOf(pages, head) {
+    return Object.fromEntries(Object.entries(head.data ?? {}).flatMap(([name, rows]) => {
+        if (rows === undefined)
+            return [];
+        readableTable(pages, name);
+        return [[name, rows]];
+    }));
+}
+function headTags(pages, url, siteName, head) {
+    const canonical = `${url.origin}${url.pathname}`;
+    const image = head.image ?? head.hero?.image;
+    const og = image === undefined || image === null
+        ? undefined
+        : openGraphImage(url, image);
+    const jsonLd = head.jsonLd === undefined
+        ? []
+        : Array.isArray(head.jsonLd)
+            ? head.jsonLd
+            : [head.jsonLd];
+    return [
+        ...(head.description === undefined
+            ? []
+            : [
+                meta('name', 'description', head.description),
+                meta('property', 'og:description', head.description)
+            ]),
+        `<link rel="canonical" href="${escapeHtml(canonical)}">`,
+        meta('property', 'og:type', 'website'),
+        meta('property', 'og:title', head.title),
+        meta('property', 'og:url', canonical),
+        ...(siteName === '' ? [] : [meta('property', 'og:site_name', siteName)]),
+        ...(og === undefined || image === undefined || image === null
+            ? [meta('name', 'twitter:card', 'summary')]
+            : [
+                meta('property', 'og:image', og.src),
+                meta('property', 'og:image:width', String(og.width)),
+                meta('property', 'og:image:height', String(og.height)),
+                meta('property', 'og:image:alt', image.alt),
+                meta('name', 'twitter:card', 'summary_large_image')
+            ]),
+        ...(head.hero === undefined || head.hero === null
+            ? []
+            : [heroPreload(url, head.hero)]),
+        ...jsonLd.map((item) => `<script type="application/ld+json">${scriptJson(item)}</script>`),
+        `<script type="application/json" id="${DATA_ID}">${scriptJson(dataOf(pages, head))}</script>`
+    ].join('\n    ');
+}
+const TITLE = /<title>[\s\S]*?<\/title>/;
+const DESCRIPTION = /\s*<meta\s+name="description"[^>]*>/gi;
+function rewrite(shell, title, tags) {
+    const titleTag = `<title>${escapeHtml(title)}</title>`;
+    const titled = TITLE.test(shell)
+        ? shell.replace(TITLE, titleTag)
+        : shell.replace('</head>', `  ${titleTag}\n  </head>`);
+    return titled
+        .replace(DESCRIPTION, '')
+        .replace('</head>', `  ${tags}\n  </head>`);
+}
+async function shellOf(c) {
+    const assets = c.env.ASSETS;
+    if (assets === undefined)
+        return undefined;
+    const response = await assets.fetch(new URL('/', c.req.url).href);
+    return response.ok ? response.text() : undefined;
+}
+const HTML = { 'content-type': 'text/html; charset=utf-8' };
+export function wantsHtml(c) {
+    return (c.req.method === 'GET' &&
+        (c.req.header('sec-fetch-dest') === 'document' ||
+            (c.req.header('accept') ?? '').includes('text/html')));
+}
+export async function renderPage(c, pages, route, params) {
+    const shell = await shellOf(c);
+    if (shell === undefined) {
+        return c.text('Pages need the built index.html: add "binding": "ASSETS" under "assets" in wrangler.jsonc', 500);
+    }
+    const request = requestFor(c, pages, params);
+    let head;
+    let tags = '';
+    try {
+        head = await route.head(request);
+        if (head !== null) {
+            tags = headTags(pages, request.url, await readTitle(c.env.DB), head);
+        }
+    }
+    catch (error) {
+        if (import.meta.env.DEV)
+            throw error;
+        console.error(`Page ${route.pattern} failed:`, error);
+        return new Response(shell, { headers: HTML });
+    }
+    if (head === null) {
+        const missing = rewrite(shell, 'Not found', `${meta('name', 'robots', 'noindex')}\n    <script type="application/json" id="${DATA_ID}">{}</script>`);
+        return new Response(missing, { status: 404, headers: HTML });
+    }
+    return new Response(rewrite(shell, head.title, tags), { headers: HTML });
+}
+function fill(route, params) {
+    const parts = route.segments.map((segment) => segment.startsWith(':') ? params[segment.slice(1)] : segment);
+    if (parts.some((part) => part === undefined || part === ''))
+        return undefined;
+    return `/${parts.map((part) => encodeURIComponent(part ?? '')).join('/')}`;
+}
+async function sitemapEntries(c, pages) {
+    const entries = [];
+    for (const route of pages.routes) {
+        const isStatic = route.segments.every((segment) => !segment.startsWith(':'));
+        const listed = isStatic
+            ? [{}]
+            : route.paths === undefined
+                ? []
+                : await route.paths(requestFor(c, pages, {}));
+        for (const params of listed) {
+            const path = fill(route, params);
+            if (path !== undefined)
+                entries.push({ path, route, params });
+        }
+    }
+    return entries.slice(0, SITEMAP_LIMIT);
+}
+export async function sitemap(c, pages) {
+    const origin = new URL(c.req.url).origin;
+    const urls = [];
+    for (const { path, route, params } of await sitemapEntries(c, pages)) {
+        const request = requestFor(c, pages, params);
+        const head = await (async () => route.head(request))().catch(() => null);
+        if (head === null)
+            continue;
+        const image = head.image ?? head.hero?.image;
+        urls.push([
+            '  <url>',
+            `    <loc>${escapeHtml(`${origin}${path}`)}</loc>`,
+            ...(image === undefined || image === null
+                ? []
+                : [
+                    '    <image:image>',
+                    `      <image:loc>${escapeHtml(request.photoUrl(image))}</image:loc>`,
+                    `      <image:caption>${escapeHtml(image.alt)}</image:caption>`,
+                    '    </image:image>'
+                ]),
+            '  </url>'
+        ].join('\n'));
+    }
+    const xml = [
+        '<?xml version="1.0" encoding="UTF-8"?>',
+        '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">',
+        ...urls,
+        '</urlset>',
+        ''
+    ].join('\n');
+    return new Response(xml, {
+        headers: { 'content-type': 'application/xml; charset=utf-8' }
+    });
+}
+export function robots(c) {
+    const origin = new URL(c.req.url).origin;
+    return new Response([
+        'User-agent: *',
+        'Allow: /',
+        'Disallow: /api/',
+        `Sitemap: ${origin}/sitemap.xml`,
+        ''
+    ].join('\n'), { headers: { 'content-type': 'text/plain; charset=utf-8' } });
+}

package/dist/server/tables.d.ts

@@ -1,4 +1,5 @@
 import type { SQLiteTableWithColumns } from 'drizzle-orm/sqlite-core';
+import type { D1Database } from '@cloudflare/workers-types';
 import type { ServerEnv } from './env.ts';
 import type { Seed, Table, Tables } from '../table.ts';
 type SqlTable = SQLiteTableWithColumns<{
@@ -10,6 +11,8 @@ type SqlTable = SQLiteTableWithColumns<{
 export declare function sqlTable(table: Table): SqlTable;
 export declare function sqlTables<Group extends Tables>(tables: Group): Record<keyof Group, SqlTable>;
 export declare function seedSql<Group extends Tables>(tables: Group, seed: Seed<Group>): string;
+export declare function readRows(d1: D1Database, table: Table): Promise<readonly Record<string, unknown>[]>;
+export declare function readRow(d1: D1Database, table: Table, id: string): Promise<Record<string, unknown> | undefined>;
 export declare function serveTables<Group extends Tables>(tables: Group): import("hono/hono-base").HonoBase<ServerEnv, {
     "/:table": {
         $get: {

package/dist/server/tables.js

@@ -99,6 +99,29 @@ export function seedSql(tables, seed) {
     });
     return [...users, ...rowsSql].join('\n');
 }
+function selection(table, target) {
+    return Object.fromEntries([
+        'id',
+        'createdAt',
+        ...(table.owned ? ['ownerId'] : []),
+        ...Object.keys(table.columns)
+    ].map((key) => [key, column(target, key)]));
+}
+export async function readRows(d1, table) {
+    const target = sqlTable(table);
+    return drizzle(d1)
+        .select(selection(table, target))
+        .from(target)
+        .orderBy(asc(column(target, 'createdAt')), asc(column(target, 'id')));
+}
+export async function readRow(d1, table, id) {
+    const target = sqlTable(table);
+    return drizzle(d1)
+        .select(selection(table, target))
+        .from(target)
+        .where(eq(column(target, 'id'), id))
+        .get();
+}
 const REFUSAL_STATUSES = {
     signedOut: { status: 401, error: 'Signed out' },
     forbidden: { status: 403, error: 'forbidden' },
@@ -120,14 +143,6 @@ export function serveTables(tables) {
         table.name,
         { table, target: sqlTable(table) }
     ]));
-    function selection(table, target) {
-        return Object.fromEntries([
-            'id',
-            'createdAt',
-            ...(table.owned ? ['ownerId'] : []),
-            ...Object.keys(table.columns)
-        ].map((key) => [key, column(target, key)]));
-    }
     function publicSelection(table, target) {
         return Object.fromEntries(['id', ...table.public].map((key) => [key, column(target, key)]));
     }

package/dist/start.js

@@ -14,6 +14,7 @@ import { AppProvider } from "./hooks/appContext.js";
 import { routeObjects } from "./routes.js";
 import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, widths } from "./theme/tokens.stylex.js";
 const TEST_SEED = 'patternSeed';
+const INLINE_DATA_ID = 'pattern-data';
 const TEST_ADMINS = 'patternAdmins';
 const TEST_WORLD = 'patternWorld';
 function testSeed() {
@@ -26,6 +27,22 @@ function testAdmins() {
         ? admins.filter((email) => typeof email === 'string')
         : [];
 }
+function readInlineData() {
+    const text = document.getElementById(INLINE_DATA_ID)?.textContent ?? '';
+    if (text === '')
+        return undefined;
+    try {
+        const parsed = JSON.parse(text);
+        return typeof parsed === 'object' &&
+            parsed !== null &&
+            !Array.isArray(parsed)
+            ? parsed
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 export function startApp(App, { theme = [], icons = {}, onInteraction } = {}) {
     setAppIcons(icons);
     document.body.className = stylex.props(base.body, theme).className ?? '';
@@ -48,7 +65,8 @@ export function startApp(App, { theme = [], icons = {}, onInteraction } = {}) {
         }),
         cache: Cache.local(),
         gate,
-        clock: inMemory ? manualClock() : realClock()
+        clock: inMemory ? manualClock() : realClock(),
+        inline: inMemory ? undefined : readInlineData()
     });
     if (hot)
         exposeToDevTools(app, gate, hot, world);
@@ -81,12 +99,19 @@ function followAppearance(app) {
 }
 function followTitle(app) {
     const store = app.stores.app;
+    let renderedPath = document.getElementById(INLINE_DATA_ID) === null
+        ? undefined
+        : location.pathname;
     const apply = () => {
+        if (location.pathname === renderedPath)
+            return;
+        renderedPath = undefined;
         const { title } = store.currentState;
         if (title !== '')
             document.title = title;
     };
     store.subscribe(apply);
+    app.router.subscribe(apply);
     apply();
 }
 function exposeToDevTools(app, gate, hot, world) {

package/dist/table.d.ts

@@ -137,6 +137,7 @@ type CheckedTable<Definition> = {
 export declare function defineTables<const Definitions extends Record<string, DraftTable> = Record<never, never>>(definitions: {
     [Key in keyof Definitions]: CheckedTable<Definitions[Key]>;
 }): TablesOf<Definitions>;
+export declare function patternTable<const Name extends string, const Definition extends TableDefinition>(name: Name, definition: Definition): TableOf<Name, Definition>;
 export declare function ownerIdOf(email: string): string;
 export declare function seededRows(seed: Seed<Tables>, name: string): readonly Row<Table>[];
 export declare function snakeCase(name: string): string;

package/dist/table.js

@@ -2,6 +2,7 @@ import { z } from 'zod';
 const NAME = /^[a-z][a-zA-Z0-9]*$/;
 const RESERVED = ['id', 'createdAt', 'ownerId'];
 const RESERVED_TABLES = ['users', 'sessions', 'session'];
+const SDK_TABLES = ['media'];
 const SEEDED_AT = Date.UTC(2000, 0, 1);
 function problemIn(name, definition) {
     const { access, columns } = definition;
@@ -28,7 +29,7 @@ function problemIn(name, definition) {
     }
     return undefined;
 }
-function table(name, definition) {
+function table(name, definition, isPatterns = false) {
     const { columns } = definition;
     for (const key of [name, ...Object.keys(columns)]) {
         if (!NAME.test(key)) {
@@ -38,6 +39,9 @@ function table(name, definition) {
     if (RESERVED_TABLES.includes(name)) {
         throw new Error(`A table can't be called "${name}": Pattern keeps its own ${name} for sign-in`);
     }
+    if (!isPatterns && SDK_TABLES.includes(name)) {
+        throw new Error(`A table can't be called "${name}": Pattern has its own ${name} table. Add it with import { ${name} } from '@trypattern/sdk/schema'`);
+    }
     const reserved = RESERVED.find((key) => key in columns);
     if (reserved !== undefined) {
         throw new Error(`Table "${name}" can't have a "${reserved}" column: Pattern adds it`);
@@ -75,6 +79,9 @@ function table(name, definition) {
 export function defineTables(definitions) {
     return Object.fromEntries(Object.entries(definitions).map(([name, definition]) => [name, table(name, definition)]));
 }
+export function patternTable(name, definition) {
+    return table(name, definition, true);
+}
 export function ownerIdOf(email) {
     return `user-${email.toLowerCase()}`;
 }

package/dist/tables.d.ts

@@ -64,10 +64,11 @@ type TableDeps<T extends Table> = {
     publicView?: {
         load: () => Promise<void>;
     };
+    inline?: unknown;
 };
 export declare class TableStore<T extends Table> extends EntityStore<Row<T>> {
     #private;
-    constructor(table: T, { api, cache, viewer, publicView }: TableDeps<T>);
+    constructor(table: T, { api, cache, viewer, publicView, inline }: TableDeps<T>);
     get mayRead(): boolean;
     load(): Promise<void>;
     create(fields: Fields<T>): Promise<WriteOutcome>;

package/dist/tables.js

@@ -172,14 +172,23 @@ export class PublicTableStore extends StoreBase {
         }
     }
 }
+function inlineRows(table, inline) {
+    if (inline === undefined || table.access.read !== 'anyone')
+        return undefined;
+    const parsed = z.array(table.row).safeParse(inline);
+    return parsed.success
+        ? parsed.data
+        : undefined;
+}
 export class TableStore extends EntityStore {
     #table;
     #viewer;
     #publicView;
-    constructor(table, { api, cache, viewer, publicView }) {
+    constructor(table, { api, cache, viewer, publicView, inline }) {
         super({
             api,
             writes: table.writes,
+            initial: inlineRows(table, inline),
             cache: cache.scope(() => `${viewer()?.userId ?? 'anon'}:${table.name}`, z.array(table.row))
         });
         this.#table = table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "files": [
     "dist",