zitejs 0.9.120 → 0.9.121

package/dist/esm/dev/index.js

@@ -1,6 +1,7 @@
 import { watch } from "fs";
 import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync, } from "fs";
 import { join } from "path";
+import { listSourceDirs } from "../sourceRoots.js";
 import { runSync } from "../sync/index.js";
 import { generateDbTs, generateApiTs, generateBackendWrapperTs, generateAirtableTs, findEmailIntegrationId, generateEmailSdk, } from "../sync/lib.js";
 const debounceTimers = new Map();
@@ -10,17 +11,9 @@ function debounce(key, fn, ms) {
         clearTimeout(existing);
     debounceTimers.set(key, setTimeout(fn, ms));
 }
-function findAppDirs() {
-    const appsDir = "apps";
-    if (!existsSync(appsDir))
-        return [];
-    return readdirSync(appsDir, { withFileTypes: true })
-        .filter((d) => d.isDirectory())
-        .map((d) => d.name);
-}
 function getFlowId(appDir) {
     try {
-        const configPath = join("apps", appDir, "zite.config.json");
+        const configPath = join(appDir.path, "zite.config.json");
         if (existsSync(configPath)) {
             const config = JSON.parse(readFileSync(configPath, "utf-8"));
             return config.id;
@@ -40,11 +33,11 @@ const readJsonFile = (path) => {
     }
 };
 function getEmailIntegrationId(appDir) {
-    return findEmailIntegrationId(readJsonFile(join("apps", appDir, "zite.config.json")), readJsonFile("zite.config.json"));
+    return findEmailIntegrationId(readJsonFile(join(appDir.path, "zite.config.json")), readJsonFile("zite.config.json"));
 }
 function getDeclaredEnvVarNames(appDir) {
     try {
-        const configPath = join("apps", appDir, "zite.config.json");
+        const configPath = join(appDir.path, "zite.config.json");
         if (!existsSync(configPath))
             return [];
         const config = JSON.parse(readFileSync(configPath, "utf-8"));
@@ -55,7 +48,7 @@ function getDeclaredEnvVarNames(appDir) {
     }
 }
 function regenerateAppTypedWrappers(appDir) {
-    const outDir = join("apps", appDir, ".zite");
+    const outDir = join(appDir.path, ".zite");
     mkdirSync(outDir, { recursive: true });
     // user.ts and auth.ts no longer generated — User type is fixed in zitejs/auth
     // Email integration: generate the Email client at .zite/integrations/email.ts.
@@ -70,7 +63,7 @@ function regenerateAppTypedWrappers(appDir) {
     writeFileSync(join(outDir, "backend.ts"), generateBackendWrapperTs(getDeclaredEnvVarNames(appDir)));
 }
 function regenerateAppApiTs(appDir) {
-    const apiDir = join("apps", appDir, "src", "api");
+    const apiDir = join(appDir.path, "src", "api");
     if (!existsSync(apiDir))
         return;
     // Sorted because `readdir` order is unspecified — it is whatever the
@@ -90,14 +83,14 @@ function regenerateAppApiTs(appDir) {
     }));
     const content = generateApiTs(endpointFiles);
     if (content) {
-        const outDir = join("apps", appDir, ".zite");
+        const outDir = join(appDir.path, ".zite");
         mkdirSync(outDir, { recursive: true });
         writeFileSync(join(outDir, "api.ts"), content);
-        console.log(`Updated apps/${appDir}/.zite/api.ts`);
+        console.log(`Updated ${appDir.path}/.zite/api.ts`);
     }
 }
 function regenerateAppAirtableSdk(appDir) {
-    const lockPath = join("apps", appDir, "zite.lock");
+    const lockPath = join(appDir.path, "zite.lock");
     console.log(`[airtable-sdk] Checking ${lockPath} exists: ${existsSync(lockPath)}`);
     if (!existsSync(lockPath))
         return;
@@ -118,15 +111,15 @@ function regenerateAppAirtableSdk(appDir) {
             };
             const content = generateAirtableTs(airtableLock);
             if (content) {
-                const outDir = join("apps", appDir, ".zite", "integrations");
+                const outDir = join(appDir.path, ".zite", "integrations");
                 mkdirSync(outDir, { recursive: true });
                 writeFileSync(join(outDir, "airtable.ts"), content);
-                console.log(`Updated apps/${appDir}/.zite/integrations/airtable.ts`);
+                console.log(`Updated ${appDir.path}/.zite/integrations/airtable.ts`);
             }
         }
     }
     catch (err) {
-        console.error(`[airtable-sdk] Error processing lock for ${appDir}:`, err);
+        console.error(`[airtable-sdk] Error processing lock for ${appDir.path}:`, err);
     }
 }
 export async function runGenerate() {
@@ -150,8 +143,8 @@ export async function runGenerate() {
     catch (err) {
         console.warn("DB SDK generation failed:", err instanceof Error ? err.message : err);
     }
-    // 2. Find all apps and regenerate their .zite/ files
-    const appDirs = findAppDirs();
+    // 2. Find every app and automation and regenerate their .zite/ files
+    const appDirs = listSourceDirs();
     for (const app of appDirs) {
         regenerateAppApiTs(app);
         regenerateAppTypedWrappers(app);
@@ -171,33 +164,33 @@ export async function runDev() {
         console.warn("Initial sync failed (continuing with watcher):", err instanceof Error ? err.message : err);
     }
     console.log("");
-    // 2. Find all apps and regenerate their .zite/ files
-    const appDirs = findAppDirs();
+    // 2. Find every app and automation and regenerate their .zite/ files
+    const appDirs = listSourceDirs();
     for (const app of appDirs) {
         regenerateAppApiTs(app);
         regenerateAppTypedWrappers(app);
     }
-    // 3. Watch each app's src/api/ for endpoint changes
+    // 3. Watch each dir's src/api/ for endpoint changes
     let watchingAny = false;
     for (const app of appDirs) {
-        const apiDir = join("apps", app, "src", "api");
+        const apiDir = join(app.path, "src", "api");
         if (!existsSync(apiDir))
             continue;
         watchingAny = true;
-        console.log(`Watching apps/${app}/src/api/ for endpoint changes...`);
+        console.log(`Watching ${app.path}/src/api/ for endpoint changes...`);
         watch(apiDir, { recursive: true }, (_event, filename) => {
             if (!filename)
                 return;
             if (!filename.endsWith(".ts") && !filename.endsWith(".js"))
                 return;
-            debounce(app, () => {
-                console.log(`Endpoint changed in ${app}: ${filename}`);
+            debounce(app.path, () => {
+                console.log(`Endpoint changed in ${app.path}: ${filename}`);
                 regenerateAppApiTs(app);
             }, 200);
         });
     }
     if (!watchingAny) {
-        console.log("No apps with src/api/ found.");
+        console.log("No apps or automations with src/api/ found.");
     }
     // 4. Watch zite.schema.json for schema drift
     if (existsSync("zite.schema.json")) {

package/dist/esm/sourceRoots.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The repo-root directories a project's own source lives under: `apps/` for
+ * apps and `automations/` for automations (endpoints with no frontend). The
+ * backend keeps the same list; a dir name is unique across both roots, so a
+ * bare name still identifies one dir.
+ */
+export declare const SOURCE_ROOTS: readonly ["apps", "automations"];
+export type SourceRoot = (typeof SOURCE_ROOTS)[number];
+export interface SourceDir {
+    root: SourceRoot;
+    /** The bare directory name. */
+    dir: string;
+    /** `<root>/<dir>`, relative to the repo root. */
+    path: string;
+}
+/** Every source dir under every root, in root order then name order. */
+export declare function listSourceDirs(cwd?: string): SourceDir[];
+/** The source dir with this bare name, under whichever root holds it. */
+export declare function findSourceDir(name: string, cwd?: string): SourceDir | undefined;

package/dist/esm/sourceRoots.js

@@ -0,0 +1,28 @@
+import { existsSync, readdirSync } from "fs";
+import { join } from "path";
+/**
+ * The repo-root directories a project's own source lives under: `apps/` for
+ * apps and `automations/` for automations (endpoints with no frontend). The
+ * backend keeps the same list; a dir name is unique across both roots, so a
+ * bare name still identifies one dir.
+ */
+export const SOURCE_ROOTS = ["apps", "automations"];
+/** Every source dir under every root, in root order then name order. */
+export function listSourceDirs(cwd = ".") {
+    const dirs = [];
+    for (const root of SOURCE_ROOTS) {
+        const rootPath = join(cwd, root);
+        if (!existsSync(rootPath))
+            continue;
+        for (const entry of readdirSync(rootPath, { withFileTypes: true })) {
+            if (!entry.isDirectory())
+                continue;
+            dirs.push({ root, dir: entry.name, path: join(root, entry.name) });
+        }
+    }
+    return dirs;
+}
+/** The source dir with this bare name, under whichever root holds it. */
+export function findSourceDir(name, cwd = ".") {
+    return listSourceDirs(cwd).find((d) => d.dir === name);
+}

package/dist/esm/upload/index.js

@@ -106,6 +106,25 @@ async function performUpload(data, filename) {
     if (!putRes.ok) {
         throw new FileUploadError('Upload failed');
     }
+    // Gateways that predate the storage ledger omit the token. The file is
+    // already at fileUrl, so those uploads still succeed.
+    if (session.completionToken) {
+        const completeRes = await fetch(getApiUrl() +
+            '/v1/zite/public/' +
+            flowId +
+            '/complete-upload?mode=' +
+            mode, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...authHeaders(),
+            },
+            body: JSON.stringify({ completionToken: session.completionToken }),
+        });
+        if (!completeRes.ok) {
+            throw new FileUploadError(await readErrorMessage(completeRes, 'Upload failed'));
+        }
+    }
     return session.fileUrl;
 }
 export async function uploadFile({ data, filename, }) {

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

@@ -23,7 +23,7 @@ describe('toUploadBlob', () => {
     });
 });
 describe('uploadFile', () => {
-    it('requests a session then PUTs the bytes to the presigned URL', async () => {
+    it('requests a session, PUTs the bytes, then completes the upload', async () => {
         const file = new File(['hello-world'], 'hello.txt', { type: 'text/plain' });
         fetchMock
             .mockResolvedValueOnce({
@@ -33,12 +33,14 @@ describe('uploadFile', () => {
                 presignedUrl: 'https://s3.example.com/put',
                 fileUrl: 'https://uploads.zite.com/orgid-1/zite-uploads/app_123/hello.txt',
                 contentType: 'text/plain',
+                completionToken: 'signed-token',
             }),
         })
-            .mockResolvedValueOnce({ ok: true });
+            .mockResolvedValueOnce({ ok: true })
+            .mockResolvedValueOnce({ ok: true, json: async () => ({ success: true }) });
         const result = await uploadFile({ data: file, filename: 'hello.txt' });
         expect(result.fileUrl).toContain('hello.txt');
-        expect(fetchMock).toHaveBeenCalledTimes(2);
+        expect(fetchMock).toHaveBeenCalledTimes(3);
         expect(fetchMock.mock.calls[0][0]).toBe('https://api.example.com/v1/zite/public/app_123/upload-session?mode=live');
         const sessionInit = fetchMock.mock.calls[0][1];
         expect(JSON.parse(sessionInit.body)).toEqual({
@@ -48,6 +50,31 @@ describe('uploadFile', () => {
         });
         expect(fetchMock.mock.calls[1][0]).toBe('https://s3.example.com/put');
         expect(fetchMock.mock.calls[1][1].method).toBe('PUT');
+        expect(fetchMock.mock.calls[2][0]).toBe('https://api.example.com/v1/zite/public/app_123/complete-upload?mode=live');
+        const completeInit = fetchMock.mock.calls[2][1];
+        expect(completeInit.method).toBe('POST');
+        expect(JSON.parse(completeInit.body)).toEqual({
+            completionToken: 'signed-token',
+        });
+    });
+    it('skips completion when the gateway does not issue a token', async () => {
+        fetchMock
+            .mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                presignedUrl: 'https://s3.example.com/put',
+                fileUrl: 'https://uploads.zite.com/orgid-1/zite-uploads/app_123/hello.txt',
+                contentType: 'text/plain',
+            }),
+        })
+            .mockResolvedValueOnce({ ok: true });
+        const result = await uploadFile({
+            data: new File(['hello-world'], 'hello.txt', { type: 'text/plain' }),
+            filename: 'hello.txt',
+        });
+        expect(result.fileUrl).toContain('hello.txt');
+        expect(fetchMock).toHaveBeenCalledTimes(2);
     });
     it('surfaces the plan-limit message from the session endpoint', async () => {
         fetchMock.mockResolvedValueOnce({

package/dist/esm/vite/domTagNames.d.ts

@@ -0,0 +1 @@
+export declare const domTagNames: ReadonlySet<string>;

package/dist/esm/vite/domTagNames.js

@@ -0,0 +1,254 @@
+export const domTagNames = new Set([
+    "a",
+    "abbr",
+    "acronym",
+    "address",
+    "altGlyph",
+    "altGlyphDef",
+    "altGlyphItem",
+    "animate",
+    "animateColor",
+    "animateMotion",
+    "animateTransform",
+    "annotation",
+    "annotation-xml",
+    "applet",
+    "area",
+    "article",
+    "aside",
+    "audio",
+    "b",
+    "base",
+    "basefont",
+    "bdi",
+    "bdo",
+    "bgsound",
+    "big",
+    "blink",
+    "blockquote",
+    "body",
+    "br",
+    "button",
+    "canvas",
+    "caption",
+    "center",
+    "circle",
+    "cite",
+    "clipPath",
+    "code",
+    "col",
+    "colgroup",
+    "color-profile",
+    "command",
+    "content",
+    "cursor",
+    "data",
+    "datalist",
+    "dd",
+    "defs",
+    "del",
+    "desc",
+    "details",
+    "dfn",
+    "dialog",
+    "dir",
+    "discard",
+    "div",
+    "dl",
+    "dt",
+    "ellipse",
+    "em",
+    "embed",
+    "feBlend",
+    "feColorMatrix",
+    "feComponentTransfer",
+    "feComposite",
+    "feConvolveMatrix",
+    "feDiffuseLighting",
+    "feDisplacementMap",
+    "feDistantLight",
+    "feDropShadow",
+    "feFlood",
+    "feFuncA",
+    "feFuncB",
+    "feFuncG",
+    "feFuncR",
+    "feGaussianBlur",
+    "feImage",
+    "feMerge",
+    "feMergeNode",
+    "feMorphology",
+    "feOffset",
+    "fePointLight",
+    "feSpecularLighting",
+    "feSpotLight",
+    "feTile",
+    "feTurbulence",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "filter",
+    "font",
+    "font-face",
+    "font-face-format",
+    "font-face-name",
+    "font-face-src",
+    "font-face-uri",
+    "footer",
+    "foreignObject",
+    "form",
+    "frame",
+    "frameset",
+    "g",
+    "glyph",
+    "glyphRef",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "head",
+    "header",
+    "hgroup",
+    "hkern",
+    "hr",
+    "html",
+    "i",
+    "iframe",
+    "image",
+    "img",
+    "input",
+    "ins",
+    "isindex",
+    "kbd",
+    "keygen",
+    "label",
+    "legend",
+    "li",
+    "line",
+    "linearGradient",
+    "link",
+    "listing",
+    "maction",
+    "main",
+    "map",
+    "mark",
+    "marker",
+    "marquee",
+    "mask",
+    "math",
+    "menu",
+    "menuitem",
+    "merror",
+    "meta",
+    "metadata",
+    "meter",
+    "mfrac",
+    "mi",
+    "missing-glyph",
+    "mmultiscripts",
+    "mn",
+    "mo",
+    "mover",
+    "mpadded",
+    "mpath",
+    "mphantom",
+    "mprescripts",
+    "mroot",
+    "mrow",
+    "ms",
+    "mspace",
+    "msqrt",
+    "mstyle",
+    "msub",
+    "msubsup",
+    "msup",
+    "mtable",
+    "mtd",
+    "mtext",
+    "mtr",
+    "multicol",
+    "munder",
+    "munderover",
+    "nav",
+    "nextid",
+    "nobr",
+    "noembed",
+    "noframes",
+    "noscript",
+    "object",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "param",
+    "path",
+    "pattern",
+    "picture",
+    "plaintext",
+    "polygon",
+    "polyline",
+    "pre",
+    "progress",
+    "q",
+    "radialGradient",
+    "rb",
+    "rbc",
+    "rect",
+    "rp",
+    "rt",
+    "rtc",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "search",
+    "section",
+    "select",
+    "semantics",
+    "set",
+    "shadow",
+    "slot",
+    "small",
+    "source",
+    "spacer",
+    "span",
+    "stop",
+    "strike",
+    "strong",
+    "style",
+    "sub",
+    "summary",
+    "sup",
+    "svg",
+    "switch",
+    "symbol",
+    "table",
+    "tbody",
+    "td",
+    "template",
+    "text",
+    "textPath",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "title",
+    "tr",
+    "track",
+    "tref",
+    "tspan",
+    "tt",
+    "u",
+    "ul",
+    "use",
+    "var",
+    "video",
+    "view",
+    "vkern",
+    "wbr",
+    "xmp",
+]);

package/dist/esm/vite/index.js

@@ -2,7 +2,9 @@ import { parse } from "@babel/parser";
 import MagicString from "magic-string";
 import path from "path";
 import { walk } from "estree-walker";
+import { domTagNames } from "./domTagNames.js";
 const validExtensions = new Set([".jsx", ".tsx"]);
+const fragmentNames = new Set(["Fragment", "React.Fragment"]);
 function getComponentName(elementName) {
     if (elementName.type === "JSXIdentifier") {
         return elementName.name;
@@ -14,8 +16,17 @@ function getComponentName(elementName) {
     }
     return null;
 }
-function isNativeElement(name) {
-    return /^[a-z]/.test(name) && !name.includes(".");
+function classifyElement(name) {
+    if (fragmentNames.has(name)) {
+        return null;
+    }
+    if (!/^[a-z]/.test(name) || name.includes(".")) {
+        return "component";
+    }
+    if (domTagNames.has(name) || name.includes("-")) {
+        return "dom";
+    }
+    return null;
 }
 export function ziteId() {
     const cwd = process.cwd();
@@ -40,21 +51,19 @@ export function ziteId() {
                         if (node.type === "JSXElement") {
                             const openingElement = node.openingElement;
                             const children = node.children;
-                            const elementName = openingElement.name;
-                            const isFragment = (elementName.type === "JSXMemberExpression" &&
-                                elementName.object.name === "React" &&
-                                elementName.property.name === "Fragment") ||
-                                (elementName.type === "JSXIdentifier" &&
-                                    elementName.name === "Fragment");
-                            if (isFragment) {
+                            const componentName = getComponentName(openingElement.name);
+                            if (!componentName) {
+                                return;
+                            }
+                            const kind = classifyElement(componentName);
+                            if (!kind) {
                                 return;
                             }
                             const line = openingElement.loc?.start?.line ?? 0;
                             const col = openingElement.loc?.start?.column ?? 0;
                             const dataComponentId = `${relativePath}|${line}|${col}`;
                             let attributes = ` data-zite-id="${dataComponentId}"`;
-                            const componentName = getComponentName(openingElement.name);
-                            if (componentName && !isNativeElement(componentName)) {
+                            if (kind === "component") {
                                 attributes += ` data-zite-component="${componentName}"`;
                             }
                             if (children.length === 1 &&

package/dist/esm/vite/index.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,48 @@
+import path from 'path';
+import { describe, expect, it } from 'vitest';
+import { ziteId } from './index.js';
+async function transform(code) {
+    const plugin = ziteId();
+    const handler = plugin.transform;
+    const result = await handler(code, path.join(process.cwd(), 'src/App.tsx'));
+    if (!result) {
+        throw new Error('transform returned null');
+    }
+    return result.code;
+}
+describe('ziteId', () => {
+    it('tags html and svg elements without a component name', async () => {
+        const code = await transform('const a = <div><svg><path d="M0" /></svg><p>Hello</p></div>;');
+        expect(code).toContain('<div data-zite-id="src/App.tsx|1|10">');
+        expect(code).toContain('<svg data-zite-id="src/App.tsx|1|15">');
+        expect(code).toContain('<path data-zite-id="src/App.tsx|1|20" d="M0" />');
+        expect(code).toContain('<p data-zite-id="src/App.tsx|1|41" data-zite-editable="true">');
+        expect(code).not.toContain('data-zite-component');
+    });
+    it('tags components with their name', async () => {
+        const code = await transform('const a = <><Card /><motion.div /><_Private /></>;');
+        expect(code).toContain('<Card data-zite-id="src/App.tsx|1|12" data-zite-component="Card" />');
+        expect(code).toContain('<motion.div data-zite-id="src/App.tsx|1|20" data-zite-component="motion.div" />');
+        expect(code).toContain('<_Private data-zite-id="src/App.tsx|1|34" data-zite-component="_Private" />');
+    });
+    it('tags MathML elements', async () => {
+        const code = await transform('const a = <math><mi>x</mi></math>;');
+        expect(code).toBe('const a = <math data-zite-id="src/App.tsx|1|10"><mi data-zite-id="src/App.tsx|1|16" data-zite-editable="true">x</mi></math>;');
+    });
+    it('tags custom elements', async () => {
+        const code = await transform('const a = <my-widget />;');
+        expect(code).toBe('const a = <my-widget data-zite-id="src/App.tsx|1|10" />;');
+    });
+    it('leaves non-DOM intrinsic elements untouched', async () => {
+        const source = 'const a = <group><mesh position-x={1} /><ambientLight intensity={0.5} /></group>;';
+        expect(await transform(source)).toBe(source);
+    });
+    it('tags DOM elements nested inside non-DOM intrinsics', async () => {
+        const code = await transform('const a = <group><Html><div /></Html></group>;');
+        expect(code).toBe('const a = <group><Html data-zite-id="src/App.tsx|1|17" data-zite-component="Html"><div data-zite-id="src/App.tsx|1|23" /></Html></group>;');
+    });
+    it('leaves fragments untouched', async () => {
+        const source = 'const a = <Fragment><React.Fragment key="a" /></Fragment>;';
+        expect(await transform(source)).toBe(source);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zitejs",
-  "version": "0.9.120",
+  "version": "0.9.121",
   "description": "The Zite framework — build apps on Zite Database",
   "type": "module",
   "main": "./dist/cjs/index.js",