@protobase/cli 0.10.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/package.js

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.10.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.10.0",
-    "@protobase/query": "0.10.0",
-    "@protobase/schema": "0.10.0",
-    "@protobase/server": "0.10.0",
-    "@protobase/ui": "0.10.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",