@protobase/cli 0.9.0 → 0.11.0

package/dist/build/component-names.js

@@ -0,0 +1,48 @@
+import { ts } from "ts-morph";
+//#region src/build/component-names.ts
+const layoutModule = "@protobase/layout";
+const componentImports = (source) => {
+	const named = /* @__PURE__ */ new Set();
+	const namespaces = /* @__PURE__ */ new Set();
+	for (const statement of source.statements) {
+		if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== layoutModule) continue;
+		const bindings = statement.importClause?.namedBindings;
+		if (bindings && ts.isNamespaceImport(bindings)) namespaces.add(bindings.name.text);
+		if (bindings && ts.isNamedImports(bindings)) {
+			for (const element of bindings.elements) if ((element.propertyName ?? element.name).text === "component") named.add(element.name.text);
+		}
+	}
+	return {
+		named,
+		namespaces
+	};
+};
+/**
+* The names a module declares with `component('Name')` from @protobase/layout, read from its source: the config does
+* not run at build time. A name that is not a string literal is not seen.
+*/
+const declaredComponents = (code, file) => {
+	if (!code.includes(layoutModule)) return [];
+	const source = ts.createSourceFile(file, code, ts.ScriptTarget.Latest, true, /\.[jt]sx$/.test(file) ? ts.ScriptKind.TSX : ts.ScriptKind.TS);
+	const { named, namespaces } = componentImports(source);
+	if (named.size === 0 && namespaces.size === 0) return [];
+	const isComponent = (callee) => ts.isIdentifier(callee) && named.has(callee.text) || ts.isPropertyAccessExpression(callee) && callee.name.text === "component" && ts.isIdentifier(callee.expression) && namespaces.has(callee.expression.text);
+	const names = [];
+	const visit = (node) => {
+		if (ts.isCallExpression(node) && isComponent(node.expression) && node.arguments[0] && ts.isStringLiteralLike(node.arguments[0])) names.push(node.arguments[0].text);
+		ts.forEachChild(node, visit);
+	};
+	visit(source);
+	return names;
+};
+/** Adds the components every bundled module declares to `into`, for the check that the project's UI exports each. */
+const collectComponents = (into) => ({
+	name: "protobase-component-names",
+	enforce: "pre",
+	transform(code, id) {
+		if (!/\.[cm]?[jt]sx?$/.test(id.replace(/\?.*$/, ""))) return void 0;
+		for (const name of declaredComponents(code, id)) into.add(name);
+	}
+});
+//#endregion
+export { collectComponents, declaredComponents };

package/dist/build/config-bundle.js

@@ -1,5 +1,6 @@
 import { hostModuleIds } from "../serve/host-module-ids.js";
 import { extensionImports } from "../project/extensions.js";
+import { collectComponents } from "./component-names.js";
 import { bundleEntryCode } from "./entry-code.js";
 import { layoutCheck } from "./layout-check.js";
 import { findPackageDir, packageName } from "./packages/package-dir.js";
@@ -52,11 +53,12 @@ const servedImports = (native) => {
 		}
 	};
 };
-const buildConfigBundle = async ({ projectDir, outFile, bun, extensions = [] }) => {
+const buildConfigBundle = async ({ projectDir, outFile, bun, extensions = [], components = /* @__PURE__ */ new Set() }) => {
 	const file = path.join(projectDir, "protobase-bundle-entry.js");
 	const native = /* @__PURE__ */ new Map();
 	const plugins = [
 		layoutCheck(),
+		collectComponents(components),
 		extensionImports(projectDir, extensions),
 		servedImports(native),
 		entry(file, bundleEntryCode(projectDir, extensions))

package/dist/build/deploy-bundle.js

@@ -3,7 +3,7 @@ import { buildConfigBundle } from "./config-bundle.js";
 import { protobaseVersion } from "../version/version.js";
 import { copyPackages } from "./packages/copy-packages.js";
 import { buildUiBundle } from "./ui-bundle.js";
-import { checkUiMerge } from "./ui-check.js";
+import { checkUi } from "./ui-check.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { readFile, rm, writeFile } from "node:fs/promises";
@@ -20,13 +20,15 @@ const removeOwnNodeModules = async (outDir) => {
 };
 const buildDeployBundle = async ({ projectDir, outDir, bun, extensions = [] }) => {
 	await removeOwnNodeModules(outDir);
-	if (extensions.some((extension) => extension.ui)) await checkUiMerge(projectDir, extensions);
+	const components = /* @__PURE__ */ new Set();
 	const native = await buildConfigBundle({
 		projectDir,
 		outFile: path.join(outDir, bundleLayout.server),
 		bun,
-		extensions
+		extensions,
+		components
 	});
+	await checkUi(projectDir, extensions, components);
 	const packages = native.length > 0 ? await copyPackages(native, path.join(outDir, bundleNodeModules)) : [];
 	await buildUiBundle({
 		outDir: path.join(outDir, bundleLayout.public),

package/dist/build/ui-check.js

@@ -1,24 +1,42 @@
 import { extensionImports } from "../project/extensions.js";
 import { viteBundle } from "./vite-bundle.js";
-import { mergedUiFile, projectUiPlugin } from "../project/project-ui.js";
+import { projectUiFile, projectUiId, projectUiPlugin } from "../project/project-ui.js";
+import { existsSync } from "node:fs";
 import path from "node:path";
 import { mkdtemp, rm } from "node:fs/promises";
 import { pathToFileURL } from "node:url";
 import { tmpdir } from "node:os";
 //#region src/build/ui-check.ts
-const checkUiMerge = async (projectDir, extensions) => {
+const checkFile = (projectDir) => path.join(projectDir, "protobase-ui-check.js");
+const checkCode = [
+	`import * as ui from '${projectUiId}'`,
+	`import { mergeUi, uiFromModule } from '@protobase/ui'`,
+	"export default Object.keys(mergeUi(uiFromModule(ui)).components ?? {})",
+	""
+].join("\n");
+const checkEntry = (file) => ({
+	name: "protobase-ui-check",
+	resolveId: (id) => id === file ? `\0${file}` : void 0,
+	load: (id) => id === `\0${file}` ? checkCode : void 0
+});
+const registeredComponents = async (projectDir, extensions) => {
+	if (!existsSync(projectUiFile(projectDir)) && !extensions.some((extension) => extension.ui)) return [];
 	const scratch = await mkdtemp(path.join(tmpdir(), "protobase-ui-check-"));
-	const outFile = path.join(scratch, "ui-check.js");
+	const outFile = path.join(scratch, "ui-check.mjs");
 	try {
-		const plugins = [projectUiPlugin(projectDir, extensions), extensionImports(projectDir, extensions)];
+		const plugins = [
+			checkEntry(checkFile(projectDir)),
+			projectUiPlugin(projectDir, extensions),
+			extensionImports(projectDir, extensions)
+		];
 		await viteBundle({
 			root: projectDir,
-			entry: mergedUiFile(projectDir),
+			entry: checkFile(projectDir),
 			outFile,
 			plugins,
 			logLevel: "error"
 		});
-		await import(pathToFileURL(outFile).href);
+		return (await import(pathToFileURL(outFile).href)).default;
 	} finally {
 		await rm(scratch, {
 			recursive: true,
@@ -26,5 +44,17 @@ const checkUiMerge = async (projectDir, extensions) => {
 		});
 	}
 };
+/**
+* Fails the build, instead of the app in the browser, when two UI configs define the same component or action
+* handler, or when the config declares a component with `component('Name')` that protobase.ui.tsx does not export.
+* It loads only browser code, which needs no secrets; nothing is rendered.
+*/
+const checkUi = async (projectDir, extensions, declared) => {
+	if (declared.size === 0 && !extensions.some((extension) => extension.ui)) return;
+	const registered = new Set(await registeredComponents(projectDir, extensions));
+	const missing = [...declared].filter((name) => !registered.has(name)).sort();
+	if (missing.length === 0) return;
+	throw new Error(`The config declares ${missing.map((name) => `component('${name}')`).join(", ")}, but protobase.ui.tsx exports no component by ${missing.length === 1 ? "that name" : "those names"}. Export each from its own file and re-export it, such as: export { ${missing[0]} } from './ui/${missing[0]}'`);
+};
 //#endregion
-export { checkUiMerge };
+export { checkUi };

package/dist/dev/run.js

@@ -79,7 +79,7 @@ const runDev = async (options, out) => {
 			tailwindcss(),
 			devServer({
 				entry,
-				exclude: [/^(?!\/api(\/|\?|$)).*/],
+				exclude: [/^(?!\/api(\/|\?|$)|\/\.well-known\/webauthn(\?|$)).*/],
 				injectClientScript: false
 			})
 		]

package/dist/infer/names.js

@@ -3,6 +3,11 @@ const words = (name) => name.split(/[^A-Za-z0-9]+/).filter(Boolean);
 const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 const lowerFirst = (word) => word.charAt(0).toLowerCase() + word.slice(1);
 const identifier = (name) => /^[0-9]/.test(name) ? `c${name}` : name;
+const snakeName = (name) => {
+	const parts = words(name.replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/([A-Z])([A-Z][a-z])/g, "$1_$2"));
+	if (parts.length === 0) throw new Error(`Cannot derive a field name from "${name}"`);
+	return identifier(parts.map((part) => part.toLowerCase()).join("_"));
+};
 const camelCase = (name) => {
 	const parts = words(name);
 	if (parts.length === 0) throw new Error(`Cannot derive a field name from "${name}"`);
@@ -25,4 +30,4 @@ const humanizeSingular = (name) => {
 	return [...parts.slice(0, -1), singular(parts.at(-1).toLowerCase())].join(" ").replace(/^./, (c) => c.toUpperCase());
 };
 //#endregion
-export { camelCase, humanize, humanizeSingular, singular };
+export { camelCase, humanize, humanizeSingular, singular, snakeName };

package/dist/infer/proposal.js

@@ -3,7 +3,7 @@ import { checkEnumValues } from "./check-values.js";
 import { columnDefault } from "./defaults.js";
 import { inferKind } from "./type-map.js";
 import { defaultColumn } from "./default-column.js";
-import { camelCase } from "./names.js";
+import { snakeName } from "./names.js";
 import { isTenantColumn } from "./tenant.js";
 //#region src/infer/proposal.ts
 const columnIndexing = (table, column) => {
@@ -41,7 +41,7 @@ const defaultsOf = (table, column, kind) => {
 const proposeField = (table, column, context) => {
 	const kind = inferKind(column, checkEnumValues(table.checks, column.name));
 	const relation = relationOf(table, column.name, context);
-	const name = camelCase(column.name);
+	const name = snakeName(column.name);
 	const defaults = defaultsOf(table, column, kind);
 	return {
 		name,

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "0.9.0";
+var version = "0.11.0";
 //#endregion
 export { version };

package/dist/project/project-admin.js

@@ -5,13 +5,14 @@ import { configExports, createAdmin, jobDefinitions } from "@protobase/server";
 * pages and subscriptions, and the rest of its config. `jobs` are the project's own and the delivery of its events.
 */
 const projectAdmin = (project, config, db) => {
-	const { resources, views, pages, userMenu, subscriptions } = configExports(config);
+	const { resources, views, pages, userMenu, bottomBars, subscriptions } = configExports(config);
 	const own = jobDefinitions(project.jobs ?? {});
 	const admin = createAdmin({
 		resources,
 		views,
 		pages,
 		...userMenu && { userMenu },
+		bottomBars,
 		db,
 		authenticate: project.authenticate,
 		...project.auth && { auth: project.auth },

package/dist/project/project-ui.js

@@ -10,11 +10,11 @@ const mergedUiCode = (projectDir, extensions) => {
 	const own = projectUiFile(projectDir);
 	const hasOwn = existsSync(own);
 	return [
-		`import { mergeUi } from '@protobase/ui'`,
+		`import { mergeUi, uiFromModule } from '@protobase/ui'`,
 		...files.map((file, i) => `import * as extension${i} from ${JSON.stringify(file)}`),
 		...hasOwn ? [`import * as project from ${JSON.stringify(own)}`] : [],
 		"const named = (ui, file) => ({ ...ui, name: ui.name ?? file })",
-		`export default mergeUi(${[...files.map((file, i) => `named(extension${i}.default ?? {}, ${JSON.stringify(file)})`), ...hasOwn ? [`named(project.default ?? {}, "protobase.ui.tsx")`] : []].join(", ")})`,
+		`export default mergeUi(${[...files.map((file, i) => `named(uiFromModule(extension${i}), ${JSON.stringify(file)})`), ...hasOwn ? [`named(uiFromModule(project), "protobase.ui.tsx")`] : []].join(", ")})`,
 		""
 	].join("\n");
 };

package/dist/scaffold/data-file.js

@@ -1,4 +1,5 @@
 import { tableKey } from "../db/model.js";
+import { camelCase } from "../infer/names.js";
 import { parseSource } from "./project.js";
 import { fieldsObject, resourceChain } from "./existing-config.js";
 import { renderField } from "../infer/render-field.js";
@@ -19,7 +20,7 @@ const renderDataFile = (plan) => {
 	return [
 		`import { f, resource } from '@protobase/schema'`,
 		"",
-		`${docComment(plan)}export const ${plan.name} = resource('${plan.name}')`,
+		`${docComment(plan)}export const ${camelCase(plan.name)} = resource('${plan.name}')`,
 		`  .table('${tableKey(plan.table)}')`,
 		`  .fields({`,
 		properties,

package/dist/scaffold/existing-config.js

@@ -1,5 +1,5 @@
 import { defaultColumn } from "../infer/default-column.js";
-import { camelCase } from "../infer/names.js";
+import { camelCase, snakeName } from "../infer/names.js";
 import { parseSource } from "./project.js";
 import path from "node:path";
 import { readFile, readdir } from "node:fs/promises";
@@ -65,9 +65,11 @@ const parseResource = (text, dir) => {
 	const tableCall = methodCalls(chainTop, "table")[0];
 	const table = tableCall && stringArg(tableCall);
 	const fields = fieldsObject(chainTop);
-	if (!name || !table || !fields) return void 0;
+	const identifier = root.getFirstAncestorByKind(SyntaxKind.VariableDeclaration)?.getName();
+	if (!name || !table || !fields || !identifier) return void 0;
 	return {
 		name,
+		identifier,
 		table,
 		dir,
 		text,
@@ -77,7 +79,7 @@ const parseResource = (text, dir) => {
 		})
 	};
 };
-const findField = (resource, column) => resource.fields.find((field) => field.ignored ? field.column.toLowerCase() === column.toLowerCase() || field.name === camelCase(column) : field.column === column);
+const findField = (resource, column) => resource.fields.find((field) => field.ignored ? field.column.toLowerCase() === column.toLowerCase() || field.name === snakeName(column) || field.name === camelCase(column) : field.column === column);
 const readExistingResources = async (configDir) => {
 	const entries = await readdir(configDir, { withFileTypes: true }).catch((error) => {
 		if (error.code === "ENOENT") return [];

package/dist/scaffold/plan.js

@@ -1,5 +1,6 @@
 import { tableKey } from "../db/model.js";
 import { keyColumns } from "../db/keys.js";
+import { camelCase } from "../infer/names.js";
 import { findField } from "./existing-config.js";
 import { proposeField } from "../infer/proposal.js";
 import { addFieldsToDataFile, renderDataFile } from "./data-file.js";
@@ -49,19 +50,20 @@ const planScaffold = async (input) => {
 	const drift = [];
 	const warnings = [];
 	const registrations = [];
-	const writeUi = async (dir, resource, table, current, decisions) => {
+	const writeUi = async (dir, resource, identifier, table, current, decisions) => {
 		if (ui.length === 0) return;
 		const file = path.join(configDir, dir, "ui.ts");
 		const before = await input.readText(file);
 		const target = {
 			resource,
+			identifier,
 			tableName: table.name,
 			fields: uiFields(table, current, decisions)
 		};
 		changes.push(...change(file, before, before === void 0 ? renderUiFile(target, ui) : addUiSections(before, target, ui)));
 		if (before === void 0) registrations.push({
 			from: `./${dir}/ui`,
-			names: [viewName(resource)]
+			names: [viewName(identifier)]
 		});
 	};
 	for (const table of targets) {
@@ -75,7 +77,7 @@ const planScaffold = async (input) => {
 			const file = path.join(configDir, current.dir, "data.ts");
 			changes.push(...change(file, current.text, addFieldsToDataFile(current.text, decisions)));
 			drift.push(...detectDrift(current, table, context(table)));
-			await writeUi(current.dir, current.name, table, current, decisions);
+			await writeUi(current.dir, current.name, current.identifier, table, current, decisions);
 			continue;
 		}
 		const name = names.get(key);
@@ -93,9 +95,9 @@ const planScaffold = async (input) => {
 		});
 		registrations.push({
 			from: `./${name}/data`,
-			names: [name]
+			names: [camelCase(name)]
 		});
-		await writeUi(name, name, table, void 0, decisions);
+		await writeUi(name, name, camelCase(name), table, void 0, decisions);
 	}
 	const indexFile = path.join(configDir, "index.ts");
 	const indexBefore = await input.readText(indexFile);
@@ -114,12 +116,12 @@ const registerExisting = async (input, planned) => {
 		const data = `./${resource.dir}/data`;
 		if (!known.has(data)) registrations.push({
 			from: data,
-			names: [resource.name]
+			names: [resource.identifier]
 		});
 		const ui = `./${resource.dir}/ui`;
 		if (await input.readText(path.join(input.configDir, resource.dir, "ui.ts")) !== void 0 && !known.has(ui)) registrations.push({
 			from: ui,
-			names: [viewName(resource.name)]
+			names: [viewName(resource.identifier)]
 		});
 	}
 	return registrations;

package/dist/scaffold/resource-names.js

@@ -1,15 +1,15 @@
 import { tableKey } from "../db/model.js";
-import { camelCase } from "../infer/names.js";
+import { snakeName } from "../infer/names.js";
 //#region src/scaffold/resource-names.ts
 const assignNames = (tables, existing) => {
 	const names = new Map(existing.map((resource) => [resource.table, resource.name]));
 	const taken = new Set(names.values());
 	const fresh = tables.filter((table) => !names.has(tableKey(table)));
 	const counts = /* @__PURE__ */ new Map();
-	for (const table of tables) counts.set(camelCase(table.name), (counts.get(camelCase(table.name)) ?? 0) + 1);
+	for (const table of tables) counts.set(snakeName(table.name), (counts.get(snakeName(table.name)) ?? 0) + 1);
 	for (const table of fresh) {
-		const plain = camelCase(table.name);
-		const name = counts.get(plain) === 1 && !taken.has(plain) ? plain : camelCase(`${table.schema}_${table.name}`);
+		const plain = snakeName(table.name);
+		const name = counts.get(plain) === 1 && !taken.has(plain) ? plain : snakeName(`${table.schema}_${table.name}`);
 		names.set(tableKey(table), name);
 		taken.add(name);
 	}

package/dist/scaffold/ui-file.js

@@ -3,7 +3,7 @@ import { parseSource } from "./project.js";
 import { methodCalls } from "./existing-config.js";
 import { Node, SyntaxKind } from "ts-morph";
 //#region src/scaffold/ui-file.ts
-const auditField = /^(created|updated)(At|On)$/;
+const auditField = /^(created|updated)(At|On|_at|_on)$/;
 const longText = /^(notes?|description|body|comment|comments)$/;
 const listSize = 5;
 const listColumns = (fields) => {
@@ -13,7 +13,7 @@ const listColumns = (fields) => {
 	const picked = [...scalars.slice(0, listSize), ...scalars.length < 3 ? relations : []].slice(0, listSize);
 	return (picked.length > 0 ? picked : fields.filter((f) => f.role === "key")).map((f) => f.name);
 };
-const viewName = (resource) => `${resource}View`;
+const viewName = (identifier) => `${identifier}View`;
 const sectionText = {
 	names: (t) => `.names({ singular: '${humanizeSingular(t.tableName)}', plural: '${humanize(t.tableName)}' })`,
 	list: (t) => `.list((r) => ({ columns: [${listColumns(t.fields).map((n) => `r.${n}`).join(", ")}] }))`
@@ -21,9 +21,9 @@ const sectionText = {
 const lines = (sections, target) => sections.map((s) => `  ${sectionText[s](target)}`);
 const renderUiFile = (target, sections) => [
 	`import { view } from '@protobase/schema'`,
-	`import type { ${target.resource} } from './data'`,
+	`import type { ${target.identifier} } from './data'`,
 	"",
-	`export const ${viewName(target.resource)} = view<typeof ${target.resource}>('${target.resource}')`,
+	`export const ${viewName(target.identifier)} = view<typeof ${target.identifier}>('${target.resource}')`,
 	...lines(sections, target),
 	""
 ].join("\n");

package/dist/serve/app.js

@@ -1,6 +1,6 @@
 import { isApiPath } from "../bundle/manifest.js";
 import { serveStaticSite } from "./static-site.js";
-import { jobsDrainApp } from "@protobase/server";
+import { jobsDrainApp, webauthnPath } from "@protobase/server";
 import { Hono } from "hono";
 import { logger } from "hono/logger";
 //#region src/serve/app.ts
@@ -8,7 +8,7 @@ const createServeApp = ({ admin, requestLog, site, jobs, drainToken }) => {
 	const app = new Hono();
 	if (requestLog) app.use(logger());
 	app.get("/health", (c) => c.json({ status: "ok" }));
-	if (site) app.use("*", (c, next) => isApiPath(site.api, c.req.path) ? next() : serveStaticSite(site, c.req.raw));
+	if (site) app.use("*", (c, next) => isApiPath(site.api, c.req.path) || c.req.path === webauthnPath ? next() : serveStaticSite(site, c.req.raw));
 	if (jobs && drainToken) app.route("/", jobsDrainApp({
 		runtime: jobs,
 		token: drainToken

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "The protobase command: scaffold, doctor, dev, build and serve a Protobase project.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,11 +34,11 @@
   "dependencies": {
     "@hono/node-server": "^2.1.3",
     "@hono/vite-dev-server": "^0.26.1",
-    "@protobase/layout": "0.9.0",
-    "@protobase/query": "0.9.0",
-    "@protobase/schema": "0.9.0",
-    "@protobase/server": "0.9.0",
-    "@protobase/ui": "0.9.0",
+    "@protobase/layout": "0.11.0",
+    "@protobase/query": "0.11.0",
+    "@protobase/schema": "0.11.0",
+    "@protobase/server": "0.11.0",
+    "@protobase/ui": "0.11.0",
     "@scalar/hono-api-reference": "^0.12.10",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-react": "^6.1.2",