@protobase/cli 0.11.0 → 0.11.1

package/dist/build/component-names.js

@@ -17,9 +17,10 @@ const componentImports = (source) => {
 		namespaces
 	};
 };
+const fromPlugin = (options) => options !== void 0 && ts.isObjectLiteralExpression(options) && options.properties.some((property) => (ts.isPropertyAssignment(property) || ts.isShorthandPropertyAssignment(property)) && property.name.getText() === "plugin");
 /**
 * 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.
+* not run at build time. A name that is not a string literal is not seen, nor one a plugin provides.
 */
 const declaredComponents = (code, file) => {
 	if (!code.includes(layoutModule)) return [];
@@ -29,7 +30,7 @@ const declaredComponents = (code, file) => {
 	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);
+		if (ts.isCallExpression(node) && isComponent(node.expression) && node.arguments[0] && ts.isStringLiteralLike(node.arguments[0]) && !fromPlugin(node.arguments[1])) names.push(node.arguments[0].text);
 		ts.forEachChild(node, visit);
 	};
 	visit(source);

package/dist/build/plugin-build.js

@@ -0,0 +1,139 @@
+import { uiPackageDir } from "../project/admin-app.js";
+import { findPackageDirSync, readPackageJson } from "./packages/package-dir.js";
+import { sharedModules } from "../project/shared-modules.js";
+import { createRequire } from "node:module";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { build } from "vite";
+import { writeFile } from "node:fs/promises";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { inRange } from "@protobase/schema";
+//#region src/build/plugin-build.ts
+/** The module a plugin's components and action handlers are exported from, as a project's are. */
+const pluginEntryFile = "protobase.ui.tsx";
+/** What `build-plugin` writes beside the plugin's files, which the app reads first. */
+const pluginManifestFile = "plugin.json";
+const tailwindDir = path.dirname(createRequire(path.join(uiPackageDir, "package.json")).resolve("tailwindcss/package.json"));
+/**
+* What the plugin is built for, from the @protobase/ui installed for it: its plugin API, and Protobase from its version
+* on, unless the plugin's package.json names other versions in `engines.protobase`. Also that version's theme, which
+* the plugin's stylesheet draws with.
+*/
+const pluginTarget = async (pluginDir, own) => {
+	const uiDir = findPackageDirSync("@protobase/ui", pluginDir);
+	if (!uiDir) throw new Error(`@protobase/ui is not installed for ${pluginDir}; add it to the plugin's dependencies, as the version it is built for`);
+	const ui = await readPackageJson(uiDir);
+	const api = ui.protobase?.pluginApi;
+	const theme = ui.exports?.["./theme.css"];
+	if (api === void 0 || typeof theme !== "string") throw new Error(`@protobase/ui ${ui.version} loads no plugins; install a version that does`);
+	const protobase = own.engines?.protobase ?? `>=${ui.version}`;
+	const fits = inRange(ui.version ?? "", protobase);
+	if (fits === void 0) throw new Error(`engines.protobase "${protobase}" is not a range the app reads; write comparators such as >=0.12.0 <1.0.0`);
+	if (!fits) throw new Error(`engines.protobase "${protobase}" leaves out @protobase/ui ${ui.version}, which the plugin is built with`);
+	return {
+		api,
+		protobase,
+		theme: path.join(uiDir, theme)
+	};
+};
+const pluginImports = () => ({
+	name: "protobase-plugin-imports",
+	enforce: "pre",
+	resolveId(id) {
+		if (sharedModules.includes(id)) return {
+			id,
+			external: true
+		};
+		if (sharedModules.some((name) => id.startsWith(`${name}/`))) this.error(`${id} is not shared with plugins, and a copy of its own would not work with the app's; a plugin imports ${sharedModules.join(", ")} by those names alone`);
+	}
+});
+const styleCode = (pluginDir, theme) => [
+	"@layer theme, base, components, utilities;",
+	`@import ${JSON.stringify(path.join(tailwindDir, "theme.css"))} layer(theme) theme(reference);`,
+	`@reference ${JSON.stringify(theme)};`,
+	`@import ${JSON.stringify(path.join(tailwindDir, "utilities.css"))} layer(utilities) source(none);`,
+	`@source ${JSON.stringify(pluginDir)};`,
+	""
+].join("\n");
+const pluginStyles = (file, code) => ({
+	name: "protobase-plugin-styles",
+	resolveId: (id) => id === file ? id : void 0,
+	load: (id) => id === file ? code : void 0
+});
+const outputOf = (result) => {
+	if (Array.isArray(result)) return result[0];
+	if ("output" in result) return result;
+	throw new Error("The plugin build did not finish");
+};
+/** The output folder must not hold the plugin's own files, which emptying it would delete. */
+const checkOutDir = (pluginDir, outDir) => {
+	const relative = path.relative(outDir, pluginDir);
+	if (!relative.startsWith("..") && !path.isAbsolute(relative)) throw new Error(`--out ${outDir} holds the plugin's own files; build into a folder inside it or elsewhere, such as ${path.join(pluginDir, "dist")}`);
+};
+/**
+* Builds the plugin in `pluginDir` into `outDir`: its protobase.ui.tsx as an ES module (and its chunks) that imports the
+* shared modules by name, its stylesheet, and plugin.json naming both. The app loads it from the plugin.json's URL.
+*/
+const buildPlugin = async ({ pluginDir, outDir, name }) => {
+	const entry = path.join(pluginDir, pluginEntryFile);
+	if (!existsSync(entry)) throw new Error(`There is no ${pluginEntryFile} in ${pluginDir}; a plugin exports its components and action handlers from it`);
+	checkOutDir(pluginDir, outDir);
+	const own = existsSync(path.join(pluginDir, "package.json")) ? await readPackageJson(pluginDir) : {};
+	const pluginName = (name ?? own.name ?? path.basename(pluginDir)).trim();
+	if (pluginName === "") throw new Error("The plugin needs a name: give its package.json a name, or pass --name");
+	const target = await pluginTarget(pluginDir, own);
+	const styles = path.join(pluginDir, "protobase-plugin.css");
+	const nodeEnv = process.env.NODE_ENV;
+	process.env.NODE_ENV = "production";
+	const result = await build({
+		configFile: false,
+		root: pluginDir,
+		base: "./",
+		mode: "production",
+		publicDir: false,
+		logLevel: "warn",
+		plugins: [
+			pluginImports(),
+			pluginStyles(styles, styleCode(pluginDir, target.theme)),
+			react(),
+			tailwindcss()
+		],
+		build: {
+			outDir,
+			emptyOutDir: true,
+			modulePreload: false,
+			rolldownOptions: {
+				input: {
+					index: entry,
+					styles
+				},
+				preserveEntrySignatures: "strict",
+				output: {
+					entryFileNames: "assets/[name]-[hash].js",
+					chunkFileNames: "assets/[name]-[hash].js",
+					assetFileNames: "assets/[name]-[hash][extname]"
+				}
+			}
+		}
+	}).finally(() => {
+		if (nodeEnv === void 0) delete process.env.NODE_ENV;
+		else process.env.NODE_ENV = nodeEnv;
+	});
+	const output = outputOf(result).output;
+	const module = output.find((file) => file.type === "chunk" && file.isEntry && file.facadeModuleId === entry);
+	const css = output.find((file) => file.type === "asset" && file.fileName.endsWith(".css"));
+	if (!module || !css) throw new Error("The plugin build wrote no module or no stylesheet");
+	const manifest = {
+		name: pluginName,
+		...own.version && { version: own.version },
+		api: target.api,
+		protobase: target.protobase,
+		entry: module.fileName,
+		css: css.fileName
+	};
+	await writeFile(path.join(outDir, pluginManifestFile), `${JSON.stringify(manifest, null, 2)}\n`);
+	return manifest;
+};
+//#endregion
+export { buildPlugin, pluginEntryFile, pluginManifestFile };

package/dist/build/ui-bundle.js

@@ -1,6 +1,7 @@
 import { adminAppDir } from "../project/admin-app.js";
 import { extensionImports, extensionStyles } from "../project/extensions.js";
 import { projectUiPlugin } from "../project/project-ui.js";
+import { sharedModulesPlugin } from "../project/shared-modules.js";
 import { build } from "vite";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
@@ -16,6 +17,7 @@ const buildUiBundle = async ({ outDir, projectDir, extensions = [] }) => {
 		publicDir: false,
 		logLevel: "warn",
 		plugins: [
+			sharedModulesPlugin(),
 			projectUiPlugin(projectDir, extensions),
 			...projectDir === void 0 ? [] : [extensionImports(projectDir, extensions)],
 			extensionStyles(extensions),

package/dist/dev/run.js

@@ -4,6 +4,7 @@ import { extensionImports, extensionStyles } from "../project/extensions.js";
 import { moduleFile } from "../module-file.js";
 import { layoutCheck } from "../build/layout-check.js";
 import { projectUiPlugin } from "../project/project-ui.js";
+import { sharedModulesPlugin } from "../project/shared-modules.js";
 import { checkDatabase } from "./check-database.js";
 import { stopDevJobs } from "./dev-jobs.js";
 import { existsSync } from "node:fs";
@@ -71,6 +72,7 @@ const runDev = async (options, out) => {
 		plugins: [
 			reloadOnProjectChange([options.projectDir, ...extensions.map((extension) => extension.dir)]),
 			stopJobsOnClose,
+			sharedModulesPlugin(),
 			projectUiPlugin(options.projectDir, extensions),
 			extensionImports(options.projectDir, extensions),
 			extensionStyles(extensions),

package/dist/main.js

@@ -3,6 +3,7 @@ import { registerAuth } from "./auth/register.js";
 import { manifestFile } from "./bundle/manifest.js";
 import { resolveExtensions } from "./project/extensions.js";
 import { buildDeployBundle } from "./build/deploy-bundle.js";
+import { buildPlugin, pluginManifestFile } from "./build/plugin-build.js";
 import { buildServeRuntime } from "./build/serve-runtime.js";
 import { resolveConnectionUrl } from "./db/connect.js";
 import { parseHosts } from "./dev/hosts.js";
@@ -76,6 +77,17 @@ program.command("build").description("Build the deploy bundle of the project in
 	const packages = manifest.nodeModules ? `, ${manifest.nodeModules}/` : "";
 	out(`built ${opts.out}: ${manifest.server}${packages}, ${manifest.public}/ and ${manifestFile} (api ${manifest.api.join(", ")})\n`);
 });
+program.command("build-plugin").description("Build a plugin the admin app loads at runtime: its protobase.ui.tsx as one ES module, its stylesheet and plugin.json").argument("[dir]", "the plugin folder, holding protobase.ui.tsx", ".").option("--out <dir>", "output folder (default: dist in the plugin folder)").option("--name <name>", "the plugin's name (default: its package.json name)").action(async (dir, opts) => {
+	const pluginDir = path.resolve(dir);
+	const outDir = path.resolve(opts.out ?? path.join(dir, "dist"));
+	const manifest = await buildPlugin({
+		pluginDir,
+		outDir,
+		...opts.name && { name: opts.name }
+	});
+	const shown = path.relative(process.cwd(), outDir);
+	out(`built ${shown.startsWith("..") ? outDir : shown || "."}: ${pluginManifestFile}, ${manifest.entry} and ${manifest.css} (${manifest.name}, plugin API ${manifest.api}, Protobase ${manifest.protobase})\n`);
+});
 program.command("build-serve").description("Bundle the serve runtime into one file for Bun: bun --no-install protobase-serve.js <bundle.js>").option("--out <file>", "output file", "dist/protobase-serve.js").option("--bun", "have Bun's bundler write the file (needs bun on PATH)", false).action(async (opts) => {
 	await buildServeRuntime({
 		outFile: path.resolve(opts.out),

package/dist/package.js

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

package/dist/project/admin-app.js

@@ -6,4 +6,4 @@ const uiPackageDir = path.resolve(path.dirname(uiEntry), "..");
 const adminAppDir = path.join(path.dirname(uiEntry), "app");
 const adminAppMain = `main${path.extname(uiEntry) === ".ts" ? ".tsx" : ".js"}`;
 //#endregion
-export { adminAppDir, adminAppMain, uiPackageDir };
+export { adminAppDir, adminAppMain, uiEntry, uiPackageDir };

package/dist/project/shared-modules.js

@@ -0,0 +1,88 @@
+import { uiEntry, uiPackageDir } from "./admin-app.js";
+import { createRequire } from "node:module";
+import path from "node:path";
+//#region src/project/shared-modules.ts
+/**
+* The modules the admin app hands to plugins: a plugin imports them by these names and runs on the app's own copies,
+* so there is one React and one @protobase/ui. Adding or removing one changes the plugin API (see `pluginApi` in
+* @protobase/ui's package.json).
+*/
+const sharedModules = [
+	"react",
+	"react/jsx-runtime",
+	"react-dom",
+	"@protobase/ui"
+];
+const facadePrefix = "\0protobase-shared:";
+const facadeId = (name) => `${facadePrefix}${name}`;
+/** The entry a production build gives a shared module, which names its file: `shared-react-jsx-runtime-<hash>.js`. */
+const entryName = (name) => `shared-${name.replace(/^@/, "").replace(/\W+/g, "-")}`;
+const commonJs = /* @__PURE__ */ new Set([
+	"react",
+	"react/jsx-runtime",
+	"react-dom"
+]);
+const isSharedModule = (name) => sharedModules.includes(name);
+const identifier = /^[A-Za-z_$][\w$]*$/;
+/**
+* The module standing for a shared one in the import map. A CommonJS package's is an ES module exporting each name the
+* package has, read with the CLI's copy of it, so a plugin's `import { useState } from 'react'` links; it imports the
+* package as the app does, so both reach the one copy. @protobase/ui's re-exports the entry the app is built from.
+*/
+const facadeCode = (name, require = createRequire(path.join(uiPackageDir, "package.json"))) => {
+	if (!commonJs.has(name)) return `export * from ${JSON.stringify(uiEntry)}\n`;
+	const names = Object.keys(require(name)).filter((key) => key !== "default" && identifier.test(key));
+	return `import m from ${JSON.stringify(name)}\nexport default m\nexport const { ${names.join(", ")} } = m\n`;
+};
+/** The import map, as the first tag of `<head>`: a plugin's bare imports of the shared modules resolve before any module loads. */
+const importMapTag = (imports) => ({
+	tag: "script",
+	attrs: { type: "importmap" },
+	children: JSON.stringify({ imports }),
+	injectTo: "head-prepend"
+});
+const moduleUrls = (base, context) => {
+	if (!context.bundle) return Object.fromEntries(sharedModules.map((name) => [name, `${base}@id/__x00__${facadeId(name).slice(1)}`]));
+	const chunks = Object.values(context.bundle).flatMap((output) => output.type === "chunk" && output.isEntry ? [output] : []);
+	return Object.fromEntries(sharedModules.map((name) => {
+		const chunk = chunks.find((candidate) => candidate.facadeModuleId === facadeId(name));
+		if (!chunk) throw new Error(`The build has no entry for the shared module ${name}`);
+		return [name, `${base}${chunk.fileName}`];
+	}));
+};
+/**
+* Shares the modules plugins import with the admin app: an entry per shared module beside index.html in a build, its
+* facade module, and the import map in index.html, for `protobase build` and `protobase dev` alike.
+*/
+const sharedModulesPlugin = () => {
+	let base = "/";
+	return {
+		name: "protobase-shared-modules",
+		config: (config, { command }) => {
+			if (command !== "build") return void 0;
+			const root = config.root ?? process.cwd();
+			return { build: { rolldownOptions: {
+				input: {
+					index: path.join(root, "index.html"),
+					...Object.fromEntries(sharedModules.map((name) => [entryName(name), facadeId(name)]))
+				},
+				preserveEntrySignatures: "exports-only"
+			} } };
+		},
+		configResolved: (config) => {
+			base = config.base;
+		},
+		resolveId: (id) => id.startsWith(facadePrefix) ? id : void 0,
+		load: (id) => {
+			if (!id.startsWith(facadePrefix)) return void 0;
+			const name = id.slice(18);
+			return isSharedModule(name) ? facadeCode(name) : void 0;
+		},
+		transformIndexHtml: {
+			order: "post",
+			handler: (_html, context) => [importMapTag(moduleUrls(base, context))]
+		}
+	};
+};
+//#endregion
+export { entryName, facadeCode, facadeId, importMapTag, sharedModules, sharedModulesPlugin };

package/dist/serve/host-modules.js

@@ -1,6 +1,6 @@
 import * as server from "@protobase/server";
-import * as postgres$1 from "postgres";
 import * as schema from "@protobase/schema";
+import * as postgres$1 from "postgres";
 import * as nodeServer from "@hono/node-server";
 import * as pg$1 from "pg";
 import * as kysely from "kysely";

package/package.json

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