@protobase/cli 0.4.1 → 0.5.0

package/dist/build/config-bundle.js

@@ -1,4 +1,5 @@
 import { hostModuleIds } from "../serve/host-module-ids.js";
+import { extensionImports } from "../project/extensions.js";
 import { bundleEntryCode } from "./entry-code.js";
 import { layoutCheck } from "./layout-check.js";
 import { findPackageDir, packageName } from "./packages/package-dir.js";
@@ -51,19 +52,21 @@ const servedImports = (native) => {
 		}
 	};
 };
-const buildConfigBundle = async ({ projectDir, outFile, bun }) => {
+const buildConfigBundle = async ({ projectDir, outFile, bun, extensions = [] }) => {
 	const file = path.join(projectDir, "protobase-bundle-entry.js");
 	const native = /* @__PURE__ */ new Map();
+	const plugins = [
+		layoutCheck(),
+		extensionImports(projectDir, extensions),
+		servedImports(native),
+		entry(file, bundleEntryCode(projectDir, extensions))
+	];
 	await viteBundle({
 		root: projectDir,
 		entry: file,
 		outFile,
 		bun,
-		plugins: [
-			layoutCheck(),
-			servedImports(native),
-			entry(file, bundleEntryCode(projectDir))
-		]
+		plugins
 	});
 	return [...native.values()];
 };

package/dist/build/deploy-bundle.js

@@ -3,6 +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 { existsSync } from "node:fs";
 import path from "node:path";
 import { readFile, rm, writeFile } from "node:fs/promises";
@@ -17,17 +18,20 @@ const removeOwnNodeModules = async (outDir) => {
 		force: true
 	});
 };
-const buildDeployBundle = async ({ projectDir, outDir, bun }) => {
+const buildDeployBundle = async ({ projectDir, outDir, bun, extensions = [] }) => {
 	await removeOwnNodeModules(outDir);
+	if (extensions.some((extension) => extension.ui)) await checkUiMerge(projectDir, extensions);
 	const native = await buildConfigBundle({
 		projectDir,
 		outFile: path.join(outDir, bundleLayout.server),
-		bun
+		bun,
+		extensions
 	});
 	const packages = native.length > 0 ? await copyPackages(native, path.join(outDir, bundleNodeModules)) : [];
 	await buildUiBundle({
 		outDir: path.join(outDir, bundleLayout.public),
-		projectDir
+		projectDir,
+		extensions
 	});
 	const manifest = {
 		version: 2,

package/dist/build/entry-code.js

@@ -4,7 +4,7 @@ import path from "node:path";
 //#region src/build/entry-code.ts
 const conventionModule = moduleFile("../project/convention", import.meta.url);
 const uiDirs = (configDir) => readdirSync(configDir, { withFileTypes: true }).filter((entry) => entry.isDirectory() && existsSync(path.join(configDir, entry.name, "ui.ts"))).map((entry) => entry.name).sort();
-const bundleEntryCode = (projectDir) => {
+const bundleEntryCode = (projectDir, extensions = []) => {
 	const custom = path.join(projectDir, "protobase.config.ts");
 	const configDir = path.join(projectDir, "config");
 	const index = path.join(configDir, "index.ts");
@@ -16,7 +16,8 @@ const bundleEntryCode = (projectDir) => {
 		const dirs = uiDirs(configDir);
 		lines.push(`import { conventionConfig } from ${JSON.stringify(conventionModule)}`, `import * as index from ${JSON.stringify(index)}`, ...dirs.map((dir, i) => `import * as ui${i} from ${JSON.stringify(path.join(configDir, dir, "ui.ts"))}`), `const convention = conventionConfig(index, [${dirs.map((dir, i) => `[${JSON.stringify(dir)}, ui${i}]`).join(", ")}])`);
 	} else lines.push("const convention = undefined");
-	lines.push("export default { ...project, config: project.config ?? convention }");
+	const configs = extensions.flatMap((extension) => extension.config ? [extension.config] : []);
+	lines.push(`import { mergeConfig } from '@protobase/server'`, ...configs.map((file, i) => `import * as extension${i} from ${JSON.stringify(file)}`), "const named = (config, file) => ({ ...config, name: config.name ?? file })", `export default mergeConfig(${[...configs.map((file, i) => `named(extension${i}.default ?? {}, ${JSON.stringify(file)})`), `named({ ...project, config: project.config ?? convention }, ${JSON.stringify(hasCustom ? "protobase.config.ts" : "config/index.ts")})`].join(", ")})`);
 	return `${lines.join("\n")}\n`;
 };
 //#endregion

package/dist/build/ui-bundle.js

@@ -1,10 +1,11 @@
 import { adminAppDir } from "../project/admin-app.js";
+import { extensionImports, extensionStyles } from "../project/extensions.js";
 import { projectUiPlugin } from "../project/project-ui.js";
 import { build } from "vite";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 //#region src/build/ui-bundle.ts
-const buildUiBundle = async ({ outDir, projectDir }) => {
+const buildUiBundle = async ({ outDir, projectDir, extensions = [] }) => {
 	const nodeEnv = process.env.NODE_ENV;
 	process.env.NODE_ENV = "production";
 	await build({
@@ -15,7 +16,9 @@ const buildUiBundle = async ({ outDir, projectDir }) => {
 		publicDir: false,
 		logLevel: "warn",
 		plugins: [
-			projectUiPlugin(projectDir),
+			projectUiPlugin(projectDir, extensions),
+			...projectDir === void 0 ? [] : [extensionImports(projectDir, extensions)],
+			extensionStyles(extensions),
 			react(),
 			tailwindcss()
 		],

package/dist/build/ui-check.js

@@ -0,0 +1,30 @@
+import { extensionImports } from "../project/extensions.js";
+import { viteBundle } from "./vite-bundle.js";
+import { mergedUiFile, projectUiPlugin } from "../project/project-ui.js";
+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 scratch = await mkdtemp(path.join(tmpdir(), "protobase-ui-check-"));
+	const outFile = path.join(scratch, "ui-check.js");
+	try {
+		const plugins = [projectUiPlugin(projectDir, extensions), extensionImports(projectDir, extensions)];
+		await viteBundle({
+			root: projectDir,
+			entry: mergedUiFile(projectDir),
+			outFile,
+			plugins,
+			logLevel: "error"
+		});
+		await import(pathToFileURL(outFile).href);
+	} finally {
+		await rm(scratch, {
+			recursive: true,
+			force: true
+		});
+	}
+};
+//#endregion
+export { checkUiMerge };

package/dist/build/vite-bundle.js

@@ -4,12 +4,12 @@ import { mkdtemp, rm } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { build } from "vite";
 //#region src/build/vite-bundle.ts
-const viteBuild = async ({ root, entry, outFile, plugins }) => {
+const viteBuild = async ({ root, entry, outFile, plugins, logLevel = "warn" }) => {
 	await build({
 		configFile: false,
 		root,
 		publicDir: false,
-		logLevel: "warn",
+		logLevel,
 		plugins,
 		oxc: { jsx: { development: false } },
 		ssr: {

package/dist/dev/entry.js

@@ -3,7 +3,7 @@ import { Hono } from "hono";
 import { configExports, createAdmin, hasUsers } from "@protobase/server";
 //#region src/dev/entry.ts
 const projectDir = process.env.PROTOBASE_PROJECT;
-const project = await loadProject(projectDir);
+const project = await loadProject(projectDir, JSON.parse(process.env.PROTOBASE_EXTENSIONS ?? "[]"));
 const db = projectDb(project, projectDir);
 const { resources, views, pages, userMenu } = configExports(project.exports);
 if (!project.authenticate) throw new Error("No authenticator: export `authenticate` (and `auth`) from protobase.config.ts; see https://docs.protobase.net/reference/auth/");

package/dist/dev/project.js

@@ -3,6 +3,7 @@ import { sharedDb } from "./create-db.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { readdir } from "node:fs/promises";
+import { mergeConfig } from "@protobase/server";
 //#region src/dev/project.ts
 const load = (file) => import(
 	/* @vite-ignore */
@@ -21,12 +22,23 @@ const conventionExports = async (projectDir) => {
 	}
 	return conventionConfig(indexExports, uiModules);
 };
-const loadProject = async (projectDir) => {
+const named = (config, file) => ({
+	...config,
+	name: config.name ?? file
+});
+const loadProject = async (projectDir, extensions = []) => {
 	const file = path.join(projectDir, "protobase.config.ts");
 	const custom = existsSync(file) ? (await load(file)).default ?? {} : {};
-	return {
+	const extended = [];
+	for (const extension of extensions) if (extension.config) extended.push(named((await load(extension.config)).default ?? {}, extension.config));
+	const own = named({
 		...custom,
-		exports: custom.config ?? await conventionExports(projectDir)
+		config: custom.config ?? await conventionExports(projectDir)
+	}, existsSync(file) ? "protobase.config.ts" : "config/index.ts");
+	const project = mergeConfig(...extended, own);
+	return {
+		...project,
+		exports: project.config ?? {}
 	};
 };
 const projectDb = (project, projectDir) => {

package/dist/dev/run.js

@@ -1,6 +1,7 @@
+import { adminAppDir, adminAppMain, uiPackageDir } from "../project/admin-app.js";
+import { extensionImports, extensionStyles } from "../project/extensions.js";
 import { moduleFile } from "../module-file.js";
 import { layoutCheck } from "../build/layout-check.js";
-import { adminAppDir, adminAppMain, uiPackageDir } from "../project/admin-app.js";
 import { projectUiPlugin } from "../project/project-ui.js";
 import { loadNearestEnvFile } from "./env.js";
 import { checkDatabase } from "./check-database.js";
@@ -16,10 +17,10 @@ const requireAppFiles = (appDir) => {
 	const missing = ["index.html", adminAppMain].filter((file) => !existsSync(path.join(appDir, file)));
 	if (missing.length > 0) throw new Error(`The admin app is missing ${missing.join(", ")} in ${appDir}; \`protobase dev\` serves the app from there`);
 };
-const reloadOnProjectChange = (projectDir) => ({
+const reloadOnProjectChange = (dirs) => ({
 	name: "protobase-project-reload",
 	handleHotUpdate: ({ file, server }) => {
-		if (file.startsWith(`${projectDir}${path.sep}`) && !file.includes(`${path.sep}node_modules${path.sep}`)) server.environments.ssr.moduleGraph.invalidateAll();
+		if (dirs.some((dir) => file.startsWith(`${dir}${path.sep}`)) && !file.includes(`${path.sep}node_modules${path.sep}`)) server.environments.ssr.moduleGraph.invalidateAll();
 	}
 });
 const appDependencies = [
@@ -42,7 +43,9 @@ const runDev = async (options, out) => {
 	const appDir = options.appDir ?? adminAppDir;
 	requireAppFiles(appDir);
 	await checkDatabase(url, options.projectDir);
+	const extensions = options.extensions ?? [];
 	process.env.PROTOBASE_PROJECT = options.projectDir;
+	process.env.PROTOBASE_EXTENSIONS = JSON.stringify(extensions);
 	process.env.PROTOBASE_DATABASE_URL = url;
 	const server = await createServer({
 		root: appDir,
@@ -56,12 +59,15 @@ const runDev = async (options, out) => {
 			fs: { allow: [
 				searchForWorkspaceRoot(options.projectDir),
 				uiPackageDir,
-				options.projectDir
+				options.projectDir,
+				...extensions.map((extension) => extension.dir)
 			] }
 		},
 		plugins: [
-			reloadOnProjectChange(options.projectDir),
-			projectUiPlugin(options.projectDir),
+			reloadOnProjectChange([options.projectDir, ...extensions.map((extension) => extension.dir)]),
+			projectUiPlugin(options.projectDir, extensions),
+			extensionImports(options.projectDir, extensions),
+			extensionStyles(extensions),
 			layoutCheck(),
 			react(),
 			tailwindcss(),

package/dist/main.js

@@ -1,4 +1,5 @@
 import { manifestFile } from "./bundle/manifest.js";
+import { resolveExtensions } from "./project/extensions.js";
 import { buildDeployBundle } from "./build/deploy-bundle.js";
 import { buildServeRuntime } from "./build/serve-runtime.js";
 import { resolveConnectionUrl } from "./db/connect.js";
@@ -46,8 +47,9 @@ program.command("doctor").description("Check a config folder against the databas
 	}, out);
 	if (errors > 0) process.exitCode = 1;
 });
-program.command("dev").description("Serve the admin app and API for the project in the current directory").option("--port <port>", "port for the app and API", "5173").option("--env <variable>", "environment variable holding the database URL", "DATABASE_URL").option("--allowed-hosts <hosts>", "extra Host headers to accept, comma separated; a leading dot matches subdomains (.trycloudflare.com)").option("--cache-dir <dir>", "Vite's dependency cache, so parallel dev servers do not share one").action(async (opts) => {
+program.command("dev").description("Serve the admin app and API for the project in the current directory").option("--port <port>", "port for the app and API", "5173").option("--env <variable>", "environment variable holding the database URL", "DATABASE_URL").option("--allowed-hosts <hosts>", "extra Host headers to accept, comma separated; a leading dot matches subdomains (.trycloudflare.com)").option("--cache-dir <dir>", "Vite's dependency cache, so parallel dev servers do not share one").option("--extend <dir>", "merge the protobase.config.ts and protobase.ui.tsx in this folder before the project's, repeatable", collect, []).action(async (opts) => {
 	const server = await runDev({
+		extensions: resolveExtensions(opts.extend),
 		port: Number(opts.port),
 		envVar: opts.env,
 		projectDir: process.cwd(),
@@ -57,11 +59,13 @@ program.command("dev").description("Serve the admin app and API for the project
 	process.once("SIGINT", () => void server.close().then(() => process.exit(0)));
 	process.once("SIGTERM", () => void server.close().then(() => process.exit(0)));
 });
-program.command("build").description("Build the deploy bundle of the project in the current directory: its config module, admin UI and manifest").option("--out <dir>", "output folder", "dist").option("--bun", "have Bun's bundler write the config module, for a bundle only Bun serves (needs bun on PATH)", false).action(async (opts) => {
+program.command("build").description("Build the deploy bundle of the project in the current directory: its config module, admin UI and manifest").option("--out <dir>", "output folder", "dist").option("--bun", "have Bun's bundler write the config module, for a bundle only Bun serves (needs bun on PATH)", false).option("--extend <dir>", "merge the protobase.config.ts and protobase.ui.tsx in this folder before the project's, repeatable", collect, []).action(async (opts) => {
+	const extensions = resolveExtensions(opts.extend);
 	const manifest = await buildDeployBundle({
 		projectDir: process.cwd(),
 		outDir: path.resolve(opts.out),
-		bun: opts.bun
+		bun: opts.bun,
+		extensions
 	});
 	const packages = manifest.nodeModules ? `, ${manifest.nodeModules}/` : "";
 	out(`built ${opts.out}: ${manifest.server}${packages}, ${manifest.public}/ and ${manifestFile} (api ${manifest.api.join(", ")})\n`);

package/dist/package.js

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

package/dist/project/extensions.js

@@ -0,0 +1,46 @@
+import { adminAppDir } from "./admin-app.js";
+import { existsSync, realpathSync } from "node:fs";
+import path from "node:path";
+//#region src/project/extensions.ts
+const extensionConfigFile = "protobase.config.ts";
+const extensionUiFile = "protobase.ui.tsx";
+const resolveExtensions = (dirs) => dirs.map((given) => {
+	const resolved = path.resolve(given);
+	if (!existsSync(resolved)) throw new Error(`--extend ${given}: there is no folder ${resolved}`);
+	const dir = realpathSync(resolved);
+	const config = path.join(dir, extensionConfigFile);
+	const ui = path.join(dir, extensionUiFile);
+	const extension = {
+		dir,
+		...existsSync(config) && { config },
+		...existsSync(ui) && { ui }
+	};
+	if (!extension.config && !extension.ui) throw new Error(`--extend ${given}: ${dir} has neither ${extensionConfigFile} nor ${extensionUiFile}`);
+	return extension;
+});
+const shared = /^(@protobase\/[^/]+|react|react-dom)(\/.*)?$/;
+const inside = (file, dir) => file === dir || file.startsWith(`${dir}${path.sep}`);
+const extensionImports = (projectDir, extensions) => ({
+	name: "protobase-extension-imports",
+	enforce: "pre",
+	async resolveId(id, importer, options) {
+		if (!importer || !shared.test(id)) return void 0;
+		const from = importer.replace(/^\0/, "").replace(/\?.*$/, "");
+		if (!extensions.some((extension) => inside(from, extension.dir))) return void 0;
+		return this.resolve(id, path.join(projectDir, extensionConfigFile), {
+			...options,
+			skipSelf: true
+		});
+	}
+});
+const appStyles = path.join(path.dirname(adminAppDir), "styles.css");
+const extensionStyles = (extensions) => ({
+	name: "protobase-extension-styles",
+	enforce: "pre",
+	transform: (code, id) => {
+		if (extensions.length === 0 || id.replace(/\?.*$/, "") !== appStyles) return void 0;
+		return `${code}\n${extensions.map((extension) => `@source ${JSON.stringify(extension.dir)};`).join("\n")}\n`;
+	}
+});
+//#endregion
+export { extensionConfigFile, extensionImports, extensionStyles, extensionUiFile, resolveExtensions };

package/dist/project/project-ui.js

@@ -4,14 +4,35 @@ import path from "node:path";
 const projectUiId = "virtual:protobase-project-ui";
 const empty = `\0${projectUiId}`;
 const projectUiFile = (projectDir) => path.join(projectDir, "protobase.ui.tsx");
-const projectUiPlugin = (projectDir) => ({
-	name: "protobase-project-ui",
-	resolveId: (id) => {
-		if (id !== "virtual:protobase-project-ui") return void 0;
-		const file = projectDir === void 0 ? void 0 : projectUiFile(projectDir);
-		return file && existsSync(file) ? file : empty;
-	},
-	load: (id) => id === empty ? "export default {}\n" : void 0
-});
+const mergedUiFile = (projectDir) => path.join(projectDir, "protobase-ui-entry.js");
+const mergedUiCode = (projectDir, extensions) => {
+	const files = extensions.flatMap((extension) => extension.ui ? [extension.ui] : []);
+	const own = projectUiFile(projectDir);
+	const hasOwn = existsSync(own);
+	return [
+		`import { mergeUi } 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(", ")})`,
+		""
+	].join("\n");
+};
+const projectUiPlugin = (projectDir, extensions = []) => {
+	const merged = projectDir !== void 0 && extensions.some((extension) => extension.ui) ? `\0${mergedUiFile(projectDir)}` : void 0;
+	return {
+		name: "protobase-project-ui",
+		resolveId: (id) => {
+			if (merged && (id === "virtual:protobase-project-ui" || id === mergedUiFile(projectDir))) return merged;
+			if (id !== "virtual:protobase-project-ui") return void 0;
+			const file = projectDir === void 0 ? void 0 : projectUiFile(projectDir);
+			return file && existsSync(file) ? file : empty;
+		},
+		load: (id) => {
+			if (id === empty) return "export default {}\n";
+			if (id === merged) return mergedUiCode(projectDir, extensions);
+		}
+	};
+};
 //#endregion
-export { projectUiFile, projectUiId, projectUiPlugin };
+export { mergedUiCode, mergedUiFile, projectUiFile, projectUiId, projectUiPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.4.1",
+  "version": "0.5.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.4.1",
-    "@protobase/query": "0.4.1",
-    "@protobase/schema": "0.4.1",
-    "@protobase/server": "0.4.1",
-    "@protobase/ui": "0.4.1",
+    "@protobase/layout": "0.5.0",
+    "@protobase/query": "0.5.0",
+    "@protobase/schema": "0.5.0",
+    "@protobase/server": "0.5.0",
+    "@protobase/ui": "0.5.0",
     "@scalar/hono-api-reference": "^0.12.10",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-react": "^6.1.2",