@protobase/cli 0.12.4 → 0.12.6

package/dist/build/plugin-build.js

@@ -3,6 +3,7 @@ import { uiPackageDir } from "../project/admin-app.js";
 import { extensionImports } from "../project/extensions.js";
 import { sharedModules } from "../project/shared-modules.js";
 import { pluginFieldTypes } from "./plugin-fields.js";
+import { layerPluginUtilities } from "./plugin-styles.js";
 import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
 import path from "node:path";
@@ -69,6 +70,13 @@ const pluginStyles = (file, code) => ({
 	resolveId: (id) => id === file ? id : void 0,
 	load: (id) => id === file ? code : void 0
 });
+const layeredStyles = () => ({
+	name: "protobase-plugin-layered-styles",
+	enforce: "post",
+	generateBundle(_, bundle) {
+		for (const file of Object.values(bundle)) if (file.type === "asset" && file.fileName.endsWith(".css")) file.source = layerPluginUtilities(String(file.source));
+	}
+});
 const outputOf = (result) => {
 	if (Array.isArray(result)) return result[0];
 	if ("output" in result) return result;
@@ -106,7 +114,8 @@ const buildPlugin = async ({ pluginDir, outDir, name, projectDir, ignore = [] })
 			...projectDir === void 0 ? [] : [extensionImports(projectDir, [{ dir: pluginDir }])],
 			pluginStyles(styles, styleCode(pluginDir, target.theme, [outDir, ...ignore])),
 			react(),
-			tailwindcss()
+			tailwindcss(),
+			layeredStyles()
 		],
 		build: {
 			outDir,

package/dist/build/plugin-styles.js

@@ -0,0 +1,70 @@
+import postcss from "postcss";
+//#region src/build/plugin-styles.ts
+/**
+* The layer, nested in `utilities`, that holds a plugin's utilities without a variant. Rules outside a nested layer win
+* over the rules inside it, so the app's own utilities win over these, whatever the order of the stylesheets.
+*/
+const pluginBaseLayer = "plugin";
+const withoutBrackets = (name) => {
+	let depth = 0;
+	let out = "";
+	for (const char of name) if (char === "[") depth += 1;
+	else if (char === "]") depth -= 1;
+	else if (depth === 0) out += char;
+	return out;
+};
+/** Whether a utility's class name has a variant, such as `md:flex`, `hover:bg-muted` or `[&>*]:p-2`. */
+const hasVariant = (name) => withoutBrackets(name).includes(":");
+const unescape = (name) => name.replace(/\\([0-9a-fA-F]{1,6}) ?|\\(.)/g, (_, hex, char) => hex ? String.fromCodePoint(parseInt(hex, 16)) : char);
+/** The class names in a selector, also those inside :is(), :where() and :not(), unescaped: `.md\:flex` is `md:flex`. */
+const classNames = (selector) => [...selector.matchAll(/\.((?:\\[0-9a-fA-F]{1,6} ?|\\.|[\w-]|[^\x00-\x7f])+)/g)].map(([, name]) => unescape(name));
+const around = (node, children) => {
+	const copy = node.clone();
+	copy.removeAll();
+	return copy.append(children.map((child) => child.clone()));
+};
+const partition = (nodes) => {
+	const parts = {
+		base: [],
+		variant: []
+	};
+	for (const node of nodes) if (node.type === "rule") {
+		const varies = (selector) => classNames(selector).some(hasVariant);
+		const base = node.selectors.filter((selector) => !varies(selector));
+		const variant = node.selectors.filter(varies);
+		if (base.length > 0) parts.base.push(variant.length === 0 ? node : node.clone({ selectors: base }));
+		if (variant.length > 0) parts.variant.push(base.length === 0 ? node : node.clone({ selectors: variant }));
+	} else if (node.type === "atrule" && [
+		"media",
+		"supports",
+		"container"
+	].includes(node.name) && node.nodes) {
+		const inner = partition(node.nodes);
+		if (inner.base.length > 0) parts.base.push(around(node, inner.base));
+		if (inner.variant.length > 0) parts.variant.push(around(node, inner.variant));
+	} else parts.variant.push(node);
+	return parts;
+};
+const isUtilities = (node) => node.type === "atrule" && node.name === "layer" && node.params.trim() === "utilities" && node.nodes !== void 0;
+/**
+* A plugin's stylesheet with its utilities without a variant moved into a layer under the app's utilities. The app
+* loads a plugin's stylesheet after its own, where a plugin's `.flex` would otherwise win over the app's `md:block` on
+* the app's own elements. A plugin's variants stay after the app's utilities, so its `hidden md:flex` still works when
+* only the app's stylesheet has `.hidden`.
+*/
+const layerPluginUtilities = (css) => {
+	const root = postcss.parse(css);
+	for (const node of root.nodes.filter(isUtilities)) {
+		const { base, variant } = partition(node.nodes);
+		const kept = variant.map((child) => child.clone());
+		node.removeAll();
+		if (base.length > 0) node.append(postcss.atRule({
+			name: "layer",
+			params: pluginBaseLayer
+		}).append(base.map((child) => child.clone())));
+		node.append(kept);
+	}
+	return root.toString();
+};
+//#endregion
+export { classNames, hasVariant, layerPluginUtilities, pluginBaseLayer };

package/dist/dev/entry.js

@@ -1,4 +1,5 @@
 import { devJobs } from "./dev-jobs.js";
+import { projectErrorReporter } from "../project/error-reporter.js";
 import { projectAdmin } from "../project/project-admin.js";
 import { loadProject, projectDb } from "./project.js";
 import { checkAuthSchema, checkChanges, checkWebhooksSchema, configExports, hasUsers } from "@protobase/server";
@@ -16,10 +17,11 @@ if (project.auth && !store.__protobaseAuthSchemaChecked) {
 }
 await checkChanges(db, resources.map((resource) => resource.toModel()), project.events);
 if (project.webhooks) await checkWebhooksSchema(db, project.webhooks);
+const reporter = await projectErrorReporter(project, process.env);
 const { admin, jobs } = projectAdmin({
 	...project,
 	authenticate: project.authenticate
-}, project.exports, db);
+}, project.exports, db, void 0, reporter);
 await devJobs(db, jobs);
 var entry_default = new Hono().route("/", admin);
 if (project.auth && !store.__protobaseNoUsersShown) {

package/dist/dev/run.js

@@ -41,7 +41,8 @@ const appDependencies = [
 	"@tanstack/react-query",
 	"@tanstack/react-table",
 	"@tanstack/react-virtual",
-	"recharts"
+	"recharts",
+	"@sentry/browser"
 ];
 const runDev = async (options, out) => {
 	loadNearestEnvFile(options.projectDir);

package/dist/main.js

@@ -10,7 +10,9 @@ import { resolveConnectionUrl } from "./db/connect.js";
 import { parseHosts } from "./dev/hosts.js";
 import { runDev } from "./dev/run.js";
 import { runDoctor } from "./doctor/run.js";
+import { projectErrorReporter } from "./project/error-reporter.js";
 import { runScaffold } from "./scaffold/run.js";
+import { reportCrashes } from "./serve/crash-reports.js";
 import { closeOnSignals } from "./serve/signals.js";
 import { serveBundle } from "./serve/serve-bundle.js";
 import { serveBundleDir } from "./serve/serve-dir.js";
@@ -110,8 +112,11 @@ program.command("serve").description("Serve a bundle written by `protobase build
 });
 program.command("worker").description("Run the jobs of a bundle from `protobase build` in a process of their own, until SIGTERM or SIGINT, as `serve` runs them beside the API").argument("<bundle>", "the bundle folder, e.g. dist, or its dist/protobase.config.js").action(async (bundle) => {
 	loadNearestEnvFile(process.cwd());
+	const project = await loadWorkerBundle(bundle);
+	const reporter = await projectErrorReporter(project, process.env);
+	if (reporter) reportCrashes(reporter);
 	const worker = await startWorker({
-		project: await loadWorkerBundle(bundle),
+		project,
 		databaseUrl: process.env.DATABASE_URL || void 0
 	});
 	closeOnSignals(worker.stop);

package/dist/package.js

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

package/dist/project/error-reporter.js

@@ -0,0 +1,9 @@
+import { errorReportingSettings, startErrorReporting } from "@protobase/server";
+//#region src/project/error-reporter.ts
+/** The project's error reporter, when its `options.errorReporting` or `PROTOBASE_SENTRY_DSN` sets a DSN. */
+const projectErrorReporter = async (project, env) => {
+	const settings = errorReportingSettings(project.options?.errorReporting, env);
+	return settings ? startErrorReporting(settings) : void 0;
+};
+//#endregion
+export { projectErrorReporter };

package/dist/project/project-admin.js

@@ -3,11 +3,13 @@ import { configExports, createAdmin, jobDefinitions } from "@protobase/server";
 /**
 * The admin API of a project over `db`, as `dev`, `serve` and `worker` build it: its config module's resources, views,
 * pages and subscriptions, and the rest of its config; served from a bundle, the plugins it carries and their field
-* types. `jobs` are the project's own and the delivery of its events.
+* types. `jobs` are the project's own and the delivery of its events. With a `reporter`, every error the API turns
+* into a 500 goes to the error tracker too, besides the project's `onUnhandledError` or the console.
 */
-const projectAdmin = (project, config, db, ui) => {
+const projectAdmin = (project, config, db, ui, reporter) => {
 	const { resources, views, pages, userMenu, bottomBars, subscriptions } = configExports(config);
 	const own = jobDefinitions(project.jobs ?? {});
+	const unhandled = project.options?.onUnhandledError ?? ((error) => console.error(error));
 	const admin = createAdmin({
 		resources,
 		views,
@@ -28,8 +30,11 @@ const projectAdmin = (project, config, db, ui) => {
 			fieldTypes: ui.fieldTypes
 		},
 		options: {
-			onUnhandledError: (error) => console.error(error),
-			...project.options
+			...project.options,
+			onUnhandledError: (error, request) => {
+				reporter?.report(error, request);
+				unhandled(error, request);
+			}
 		}
 	});
 	return {

package/dist/serve/crash-reports.js

@@ -0,0 +1,16 @@
+//#region src/serve/crash-reports.ts
+/**
+* Reports an exception or a rejection nothing handled, then ends the process as Node and Bun do without a listener:
+* the error printed, exit code 1. The report has `flushMs` to reach the error tracker.
+*/
+const reportCrashes = (reporter, target = process, flushMs = 2e3) => {
+	const crash = (error) => {
+		console.error(error);
+		reporter.report(error);
+		reporter.flush(flushMs).then(() => target.exit(1));
+	};
+	target.on("uncaughtException", crash);
+	target.on("unhandledRejection", crash);
+};
+//#endregion
+export { reportCrashes };

package/dist/serve/lifecycle.js

@@ -14,7 +14,7 @@ const listen = (server, port) => new Promise((resolve, reject) => {
 	});
 });
 const closeServer = (server) => new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));
-const startServe = async ({ project, env, createDb = (url) => createPgDb(pg, url), site, ui }) => {
+const startServe = async ({ project, env, createDb = (url) => createPgDb(pg, url), site, ui, reporter }) => {
 	if (!project.db && !env.databaseUrl) throw new Error("No database: set DATABASE_URL or export `db` from protobase.config.ts");
 	if (project.auth) await checkAuthSchema(project.auth);
 	const ownDb = project.db ? void 0 : createDb(env.databaseUrl);
@@ -23,7 +23,7 @@ const startServe = async ({ project, env, createDb = (url) => createPgDb(pg, url
 	const startJobsAndListen = async () => {
 		await checkChanges(db, resources.map((resource) => resource.toModel()), project.events);
 		if (project.webhooks) await checkWebhooksSchema(db, project.webhooks);
-		const { admin, jobs: definitions } = projectAdmin(project, project.config, db, ui);
+		const { admin, jobs: definitions } = projectAdmin(project, project.config, db, ui, reporter);
 		if (definitions.length > 0) await checkJobsSchema(db);
 		const jobs = definitions.length > 0 ? await startJobs({
 			db,

package/dist/serve/serve-bundle.js

@@ -1,6 +1,8 @@
 import { readManifest } from "../bundle/manifest.js";
+import { projectErrorReporter } from "../project/error-reporter.js";
 import { bundleUi } from "./bundle-ui.js";
 import { checkBundleVersion } from "./bundle-version.js";
+import { reportCrashes } from "./crash-reports.js";
 import { readServeEnv } from "./env.js";
 import { startServe } from "./lifecycle.js";
 import { loadBundle } from "./load-bundle.js";
@@ -12,11 +14,14 @@ const serveBundle = async (file, env, out, site) => {
 	await checkBundleVersion(file);
 	const manifest = await readManifest(path.dirname(file));
 	const project = await loadBundle(file);
+	const reporter = await projectErrorReporter(project, env);
+	if (reporter) reportCrashes(reporter);
 	const server = await startServe({
 		project,
 		env: serveEnv,
 		site,
-		ui: bundleUi(manifest)
+		ui: bundleUi(manifest),
+		...reporter && { reporter }
 	});
 	closeOnSignals(server.close);
 	out(`protobase serve listening on port ${server.port}\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "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.12.4",
-    "@protobase/query": "0.12.4",
-    "@protobase/schema": "0.12.4",
-    "@protobase/server": "0.12.4",
-    "@protobase/ui": "0.12.4",
+    "@protobase/layout": "0.12.6",
+    "@protobase/query": "0.12.6",
+    "@protobase/schema": "0.12.6",
+    "@protobase/server": "0.12.6",
+    "@protobase/ui": "0.12.6",
     "@scalar/hono-api-reference": "^0.12.10",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-react": "^6.1.2",
@@ -51,6 +51,7 @@
     "kysely": "^0.29.6",
     "lightningcss": "^1.33.0",
     "pg": "^8.23.1",
+    "postcss": "^8.5.29",
     "postgres": "^3.4.9",
     "ts-morph": "^28.0.0",
     "vite": "^8.3.3",