zitejs 0.10.0-start.10 → 0.10.0-start.12

package/dist/cjs/auth/index.test.js

@@ -187,3 +187,33 @@ function redirectParamOf(href) {
         (0, vitest_1.expect)(params.get('usageToken')).toBeNull();
     });
 });
+// AUTH-03: what the platform's auth routes receive from the client, on the app's own origin.
+(0, vitest_1.describe)("the client's calls", () => {
+    const calls = () => {
+        const sent = [];
+        vitest_1.vi.stubGlobal('fetch', vitest_1.vi.fn(async (input, init) => {
+            const request = new Request(new URL(String(input instanceof Request ? input.url : input), 'https://app.zite.so'), init);
+            sent.push({
+                path: new URL(request.url).pathname,
+                method: request.method,
+                body: request.method === 'POST' ? await request.json().catch(() => null) : null,
+            });
+            return Response.json({});
+        }));
+        return sent;
+    };
+    (0, vitest_1.it)('sign in by link, sign out and edit the profile on /api/auth', async () => {
+        const sent = calls();
+        // The client takes its fetch when the module loads.
+        vitest_1.vi.resetModules();
+        const { signIn, signOut, updateProfile } = await Promise.resolve().then(() => __importStar(require('./index.js')));
+        await signIn.magicLink({ email: 'ada@x.co' });
+        await signOut();
+        await updateProfile({ firstName: 'Ada' });
+        (0, vitest_1.expect)(sent).toEqual([
+            { path: '/api/auth/sign-in/magic-link', method: 'POST', body: vitest_1.expect.objectContaining({ email: 'ada@x.co' }) },
+            { path: '/api/auth/sign-out', method: 'POST', body: vitest_1.expect.anything() },
+            { path: '/api/auth/update-user', method: 'POST', body: { firstName: 'Ada' } },
+        ]);
+    });
+});

package/dist/cjs/start/entries.js

@@ -17,15 +17,17 @@ const renderStartServerEntry = (target = "cloudflare") => target === "cloudflare
 import handler from '@tanstack/react-start/server-entry';
 import { createZiteWorker } from 'zitejs/start/worker';
 import { getRouter } from '../src/router';
+import { startInstance } from './start';
 
-export default createZiteWorker({ handler, getRouter });
+export default createZiteWorker({ handler, getRouter, startInstance });
 `
     : `// Generated by zitejs for TanStack Start apps. The platform owns this file.
 import handler, { createServerEntry } from '@tanstack/react-start/server-entry';
 import { createZiteFetch } from 'zitejs/start/server';
 import { getRouter } from '../src/router';
+import { startInstance } from './start';
 
-export default createServerEntry({ fetch: createZiteFetch({ handler, getRouter }) });
+export default createServerEntry({ fetch: createZiteFetch({ handler, getRouter, startInstance }) });
 `;
 exports.renderStartServerEntry = renderStartServerEntry;
 /** The start instance: the platform's middleware, then the app's own `src/start.ts` when it has one. */

package/dist/esm/auth/index.test.js

@@ -152,3 +152,33 @@ describe('loginWithRedirect', () => {
         expect(params.get('usageToken')).toBeNull();
     });
 });
+// AUTH-03: what the platform's auth routes receive from the client, on the app's own origin.
+describe("the client's calls", () => {
+    const calls = () => {
+        const sent = [];
+        vi.stubGlobal('fetch', vi.fn(async (input, init) => {
+            const request = new Request(new URL(String(input instanceof Request ? input.url : input), 'https://app.zite.so'), init);
+            sent.push({
+                path: new URL(request.url).pathname,
+                method: request.method,
+                body: request.method === 'POST' ? await request.json().catch(() => null) : null,
+            });
+            return Response.json({});
+        }));
+        return sent;
+    };
+    it('sign in by link, sign out and edit the profile on /api/auth', async () => {
+        const sent = calls();
+        // The client takes its fetch when the module loads.
+        vi.resetModules();
+        const { signIn, signOut, updateProfile } = await import('./index.js');
+        await signIn.magicLink({ email: 'ada@x.co' });
+        await signOut();
+        await updateProfile({ firstName: 'Ada' });
+        expect(sent).toEqual([
+            { path: '/api/auth/sign-in/magic-link', method: 'POST', body: expect.objectContaining({ email: 'ada@x.co' }) },
+            { path: '/api/auth/sign-out', method: 'POST', body: expect.anything() },
+            { path: '/api/auth/update-user', method: 'POST', body: { firstName: 'Ada' } },
+        ]);
+    });
+});

package/dist/esm/start/entries.js

@@ -12,15 +12,17 @@ export const renderStartServerEntry = (target = "cloudflare") => target === "clo
 import handler from '@tanstack/react-start/server-entry';
 import { createZiteWorker } from 'zitejs/start/worker';
 import { getRouter } from '../src/router';
+import { startInstance } from './start';
 
-export default createZiteWorker({ handler, getRouter });
+export default createZiteWorker({ handler, getRouter, startInstance });
 `
     : `// Generated by zitejs for TanStack Start apps. The platform owns this file.
 import handler, { createServerEntry } from '@tanstack/react-start/server-entry';
 import { createZiteFetch } from 'zitejs/start/server';
 import { getRouter } from '../src/router';
+import { startInstance } from './start';
 
-export default createServerEntry({ fetch: createZiteFetch({ handler, getRouter }) });
+export default createServerEntry({ fetch: createZiteFetch({ handler, getRouter, startInstance }) });
 `;
 /** The start instance: the platform's middleware, then the app's own `src/start.ts` when it has one. */
 export const renderStartInstance = (hasAppStart) => hasAppStart

package/dist/esm/start/instance.d.ts

@@ -6,6 +6,7 @@ import type { AnyFunctionMiddleware, AnyRequestMiddleware, StartInstance } from
  * adapters first, then whatever the app's own `src/start.ts` sets.
  */
 export declare function createZiteStart<const TAdapters extends ReadonlyArray<AnySerializationAdapter> = [], TDefaultSsr extends SSROption = SSROption, const TRequest extends ReadonlyArray<AnyRequestMiddleware> = [], const TFunction extends ReadonlyArray<AnyFunctionMiddleware> = []>(app?: StartInstance<TAdapters, TDefaultSsr, TRequest, TFunction>): StartInstance<readonly [import("@tanstack/react-router").SerializationAdapter<Error, {
+    stack?: string | undefined;
     code: "BAD_REQUEST" | "UNAUTHORIZED" | "FORBIDDEN" | "NOT_FOUND" | "CONFLICT" | "RATE_LIMITED" | "INTERNAL_ERROR" | "INVALID_INPUT";
     message: string;
 }, never>, ...TAdapters], TDefaultSsr, readonly [import("@tanstack/react-start").RequestMiddlewareAfterServer<{}, undefined, undefined>, ...TRequest], readonly [import("@tanstack/react-start").FunctionMiddlewareAfterClient<{}, unknown, undefined, undefined, undefined>, import("@tanstack/react-start").FunctionMiddlewareAfterServer<{}, unknown, undefined, undefined, undefined, undefined, undefined>, ...TFunction]>;

package/dist/esm/start/instance.js

@@ -5,6 +5,7 @@ import { createSerializationAdapter, redirect } from "@tanstack/react-router";
 import { toClientError, ZiteError } from "./errors.js";
 import { isSignInRequired, loginHref } from "./index.js";
 import { errorOf, preview } from "./runLog.js";
+import { currentHost } from "./host.js";
 import { getHost, inScope } from "./scope.js";
 // TanStack drops its default CSRF check once an app has a start instance.
 const csrf = createCsrfMiddleware({ filter: (ctx) => ctx.handlerType === "serverFn" });
@@ -50,16 +51,24 @@ const runCapture = createMiddleware({ type: "function" }).server(async ({ next,
 });
 /**
  * Every error a server function or a page's loader sends the browser arrives as a ZiteError, with its code and the
- * message classic would show. Anything else on it, a stack or an SDK's request, stays on the server.
+ * message classic would show. Anything else on it, an SDK's request, stays on the server; its stack goes only to the
+ * editor's preview, for "Fix it for me".
  */
 const ziteErrorAdapter = createSerializationAdapter({
     key: "zite-error",
     test: (value) => value instanceof Error,
     toSerializable: (error) => {
         const { code, message } = toClientError(error);
-        return { code, message };
+        // `currentHost`, not `getHost`: this adapter ships to the browser, which mustn't bundle the request scope.
+        const stack = currentHost()?.mode === "preview" ? error.stack : undefined;
+        return { code, message, ...(stack && { stack }) };
+    },
+    fromSerializable: ({ code, message, stack }) => {
+        const error = new ZiteError(code, message);
+        if (stack)
+            error.stack = stack;
+        return error;
     },
-    fromSerializable: ({ code, message }) => new ZiteError(code, message),
 });
 /**
  * The start instance every Start app builds with: the platform's middleware and

package/dist/esm/start/quiet.d.ts

@@ -0,0 +1,2 @@
+/** Runs `fn` with this request's console dropped; the isolate's other requests log as before. */
+export declare const withoutConsole: <T>(fn: () => T) => T;

package/dist/esm/start/quiet.js

@@ -0,0 +1,27 @@
+// Server-only. A trigger registration's console stays out of the platform's
+// logs, as classic's does: the provider can answer it with the signing secret.
+import { AsyncLocalStorage } from "node:async_hooks";
+const LEVELS = ["debug", "dir", "error", "info", "log", "table", "trace", "warn"];
+// Keyed on globalThis so two copies of zitejs in one bundle wrap console once.
+const stores = globalThis;
+const QUIET_KEY = Symbol.for("zitejs:quiet-console");
+const quietStorage = () => {
+    const held = stores[QUIET_KEY];
+    if (held)
+        return held;
+    const storage = new AsyncLocalStorage();
+    stores[QUIET_KEY] = storage;
+    const methods = console;
+    for (const level of LEVELS) {
+        const original = methods[level];
+        if (typeof original !== "function")
+            continue;
+        methods[level] = (...args) => {
+            if (!storage.getStore())
+                original.apply(console, args);
+        };
+    }
+    return storage;
+};
+/** Runs `fn` with this request's console dropped; the isolate's other requests log as before. */
+export const withoutConsole = (fn) => quietStorage().run(true, fn);

package/dist/esm/start/router.d.ts

@@ -11,6 +11,11 @@ type Dehydrated = {
     user: User | null;
 };
 type ZiteRouterOptions<TRouteTree extends AnyRoute> = Omit<RouterConstructorOptions<TRouteTree, "never", false, RouterHistory, Dehydrated>, "context" | "dehydrate" | "hydrate">;
+/**
+ * @internal Tells the editor's preview the page crashed, as classic's runtime reports an emptied #root: a Start page
+ * has none, and an error a route's boundary catches is the crash. Being signed out isn't one.
+ */
+export declare const reportCrash: (error: unknown) => void;
 /**
  * The router for `src/router.tsx`. The signed-in user is in `context.user`: on the server from the platform, in the
  * browser from the page it rendered, so no request asks for it again. `context.queryClient` is new for each request

package/dist/esm/start/router.js

@@ -9,12 +9,21 @@ import { currentHost } from "./host.js";
 export const QUERY_STALE_TIME_MS = 30_000;
 const ziteWindow = () => (typeof window === "undefined" ? undefined : window);
 const box = { maxWidth: 480, margin: "15vh auto", padding: 24, fontFamily: "system-ui, sans-serif", textAlign: "center" };
+/**
+ * @internal Tells the editor's preview the page crashed, as classic's runtime reports an emptied #root: a Start page
+ * has none, and an error a route's boundary catches is the crash. Being signed out isn't one.
+ */
+export const reportCrash = (error) => {
+    if (!isSignInError(error))
+        ziteWindow()?._ziteOnCrash?.(error);
+};
 // As classic's crash screen: the message, "Fix it for me" in the editor, and a reload. The server renders from the
 // app's own error and the browser from the one that crossed, already mapped, so both show the same text.
 function ZiteErrorComponent({ error }) {
     const router = useRouter();
     const [allowAiFix, setAllowAiFix] = useState(false);
     useEffect(() => setAllowAiFix(ziteWindow()?.__ziteAllowAiFix === true), []);
+    useEffect(() => markReady("error"), []);
     const message = typeof window === "undefined" ? toClientError(error).message : error instanceof Error ? error.message : String(error);
     const reload = () => {
         const onReload = ziteWindow()?._ziteOnReload;
@@ -27,6 +36,20 @@ function ZiteErrorComponent({ error }) {
         !isSignInError(error) &&
         h("button", { type: "button", onClick: () => ziteWindow()?._ziteOnFixError?.(error) }, "Fix it for me"), h("button", { type: "button", onClick: reload }, "Try again"));
 }
+/**
+ * `<html data-zite-ready>`: what the platform's screenshots wait for. `1` once
+ * the page has rendered with nothing loading, `error` when the error screen did.
+ */
+const markReady = (state) => {
+    if (typeof document !== "undefined")
+        document.documentElement.dataset.ziteReady = state;
+};
+const watchReady = (router) => () => {
+    const { status, isLoading, matches } = router.state;
+    if (status !== "idle" || isLoading || matches.some((match) => match.status === "pending"))
+        return;
+    markReady(matches.some((match) => match.status === "error") ? "error" : "1");
+};
 function ZiteNotFound() {
     return h("div", { style: box }, h("p", { style: { fontWeight: 600 } }, "Page not found"), h(Link, { to: "/" }, "Go home"));
 }
@@ -67,6 +90,12 @@ export function createZiteRouter(options) {
         defaultPendingComponent: ZitePending,
         ...options,
         ...(claim && { rewrite: keepPreviewClaim(claim, options.rewrite) }),
+        // Whichever screen shows it: a route may have its own.
+        defaultOnCatch: (error, info) => {
+            markReady("error");
+            reportCrash(error);
+            options.defaultOnCatch?.(error, info);
+        },
         context,
         dehydrate: () => ({ user: context.user }),
         hydrate: (dehydrated) => {
@@ -74,6 +103,9 @@ export function createZiteRouter(options) {
         },
     });
     setupRouterSsrQueryIntegration({ router, queryClient });
+    const mark = watchReady(router);
+    router.subscribe("onResolved", mark);
+    router.subscribe("onRendered", mark);
     const host = currentHost();
     if (host)
         host.router = router;

package/dist/esm/start/server.d.ts

@@ -35,6 +35,10 @@ export type ZiteServerOptions = {
     };
     getRouter: () => unknown;
     platform?: PlatformBinding;
+    /** The app's start instance, which a test run of a server function runs under. Entries before 0.10.0-start.11 don't pass it. */
+    startInstance?: {
+        getOptions: () => unknown;
+    };
 };
 type HostedContext = WorkerContext & {
     props?: Partial<HostProps>;

package/dist/esm/start/server.js

@@ -1,3 +1,7 @@
+// For the generated server entry only. Apps never import this.
+import { requestHandler } from "@tanstack/react-start/server";
+import { createSsrRpc } from "@tanstack/react-start/ssr-rpc";
+import { runWithStartContext } from "@tanstack/start-storage-context";
 import { asZiteError, isZiteErrorCode, ZiteError, ZITE_ERROR_STATUS } from "./errors.js";
 import { describeApp } from "./describe.js";
 import { runRegistration } from "./registration.js";
@@ -5,6 +9,7 @@ import { isAuthHookName, loadAuthHooks } from "./authHooks.js";
 import { errorOf, preview } from "./runLog.js";
 import { DATA_INTEGRATION_ID, dataContextOf, runDataCall } from "./data/index.js";
 import { airtableSettingsOf, runAirtableCall } from "./airtable/index.js";
+import { withoutConsole } from "./quiet.js";
 import { getHost, requireScope, runInScope, runWithHost } from "./scope.js";
 import { ZITEJS_VERSION } from "./version.js";
 import { loadWorkflows, loggedInput, runWorkflow } from "./workflowRun.js";
@@ -91,7 +96,7 @@ const watchOutboundFetches = () => {
     };
 };
 const decodeUser = (value) => JSON.parse(new TextDecoder().decode(Uint8Array.from(atob(value.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0))));
-const INVOKE_KINDS = new Set(["webhook", "describe", "workflow", "register", "warm", "authHook"]);
+const INVOKE_KINDS = new Set(["webhook", "describe", "workflow", "register", "warm", "authHook", "function"]);
 // What a request without props may ask for: neither runs app code on anyone's behalf.
 const UNHOSTED_INVOKE_KINDS = new Set(["warm", "describe"]);
 /** What the host dispatched this request with. Headers are ignored: props are the only thing it alone can set. */
@@ -206,6 +211,38 @@ async function invokeWorkflow(request, host, workflows) {
     });
     return Response.json(result, { status: result.ok ? 200 : 500 });
 }
+// The host sends `{ input }`, an editor's test run of a server function. It runs
+// as a call from a page would on the server: its own middleware decides access
+// for the user the host dispatched with, validates the input and records the run.
+async function invokeFunction(request, options) {
+    if (request.method !== "POST" || new URL(request.url).pathname !== INVOKE_PATH)
+        return new Response("Not found", { status: 404 });
+    const id = getHost()?.invoke?.name ?? "";
+    if (!builtFunctionIds().includes(id)) {
+        return Response.json({ ok: false, error: { code: "NOT_FOUND", message: `No server function ${id}` } }, { status: 404 });
+    }
+    const input = (await request.json().catch(() => ({})))?.input;
+    const startContext = {
+        request,
+        getRouter: options.getRouter,
+        startOptions: (await options.startInstance?.getOptions()) ?? {},
+        executedRequestMiddlewares: new Set(),
+        contextAfterGlobalMiddlewares: {},
+        handlerType: "serverFn",
+    };
+    // In TanStack's request event too, which the function's own status setting reads.
+    return requestHandler(async () => {
+        try {
+            const answer = (await runWithStartContext(startContext, () => createSsrRpc(id)({ data: input, context: {} })));
+            if (answer.error !== undefined)
+                throw answer.error;
+            return Response.json({ ok: true, output: answer.result ?? null });
+        }
+        catch (error) {
+            return Response.json({ ok: false, error: errorOf(error) }, { status: 500 });
+        }
+    })(request, undefined);
+}
 // The host sends `{ op, input }`: `subscribe` with the platform's notification
 // URL and secret, or `unsubscribe` with what `subscribe` returned.
 async function invokeRegistration(request, host, workflows) {
@@ -283,11 +320,13 @@ export function createZiteHandlers(options) {
         }
         let response = await runWithHost(host, async () => host.invoke?.kind === "workflow"
             ? invokeWorkflow(request, host, await loadedWorkflows())
-            : host.invoke?.kind === "register"
-                ? invokeRegistration(request, host, await loadedWorkflows())
-                : host.invoke?.kind === "authHook"
-                    ? invokeAuthHook(request, host)
-                    : options.handler.fetch(request));
+            : host.invoke?.kind === "function"
+                ? invokeFunction(request, options)
+                : host.invoke?.kind === "register"
+                    ? withoutConsole(async () => invokeRegistration(request, host, await loadedWorkflows()))
+                    : host.invoke?.kind === "authHook"
+                        ? invokeAuthHook(request, host)
+                        : options.handler.fetch(request));
         const status = response.status === 500 ? pageStatus(host) : undefined;
         if (status)
             response = new Response(response.body, { status, headers: response.headers });

package/dist/esm/start/types.d.ts

@@ -120,7 +120,7 @@ export type PlatformBinding = {
 /** A demo is the published build serving a read-only visitor: as live, but every write is refused. */
 export type HostMode = "live" | "preview" | "demo" | "validate";
 export type HostInvoke = {
-    kind: "webhook" | "describe" | "workflow" | "register" | "warm" | "authHook";
+    kind: "webhook" | "describe" | "workflow" | "register" | "warm" | "authHook" | "function";
     name: string;
 };
 /** The per-request props the host dispatches with. Only the host can set them. */

package/dist/esm/start/version.d.ts

@@ -1 +1 @@
-export declare const ZITEJS_VERSION = "0.10.0-start.10";
+export declare const ZITEJS_VERSION = "0.10.0-start.12";

package/dist/esm/start/version.js

@@ -1,2 +1,2 @@
 // Written by scripts/write-version.mjs from package.json.
-export const ZITEJS_VERSION = "0.10.0-start.10";
+export const ZITEJS_VERSION = "0.10.0-start.12";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zitejs",
-  "version": "0.10.0-start.10",
+  "version": "0.10.0-start.12",
   "description": "The Zite framework — build apps on Zite Database",
   "type": "module",
   "sideEffects": false,