@wervt/nuxt 0.2.14 → 0.2.16

package/dist/module.js

@@ -1,5 +1,6 @@
 import { resolveAppName, setupDev } from "./dev.js";
-import { addImports, addPlugin, addServerHandler, addServerPlugin, addServerTemplate, createResolver, defineNuxtModule, getNuxtVersion, hasNuxtModule, installModule, useLogger } from "nuxt/kit";
+import { findShapeRoutes, shapeRoutesTypes } from "./shapes.js";
+import { addImports, addPlugin, addServerHandler, addServerPlugin, addServerTemplate, addTypeTemplate, createResolver, defineNuxtModule, getNuxtVersion, hasNuxtModule, installModule, updateTemplates, useLogger } from "nuxt/kit";
 import { existsSync } from "node:fs";
 import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
 import { builtinModules, createRequire } from "node:module";
@@ -228,6 +229,21 @@ var module_default = defineNuxtModule({
 			const app = await resolveAppName(nuxt.options.rootDir, options.app);
 			await setupDev(nuxt, app, options.dev ?? {}, { storage: useAblage });
 		}
+		addTypeTemplate({
+			filename: "types/wervt-email.d.ts",
+			getContents: () => "declare module '*.vue' {\n  import type { DefineComponent } from 'vue'\n  const component: DefineComponent<Record<string, unknown>>\n  export default component\n}\n"
+		}, { nitro: true });
+		if (nuxt.options.dev) {
+			const templates = await findEmailTemplates([join(nuxt.options.srcDir, "emails"), join(nuxt.options.rootDir, "emails")]);
+			addServerTemplate({
+				filename: "#wervt/emails",
+				getContents: () => `export const templates = {\n${templates.map(({ name, path }) => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(path)}),`).join("\n")}\n}\n`
+			});
+			for (const route of ["/_wervt/emails", "/_wervt/emails/**"]) addServerHandler({
+				route,
+				handler: resolver.resolve("./runtime/server/email-preview")
+			});
+		}
 		if (nuxt.options.dev) for (const route of ["/_wervt/login", "/_wervt/logout"]) addServerHandler({
 			route,
 			handler: resolver.resolve("./runtime/server/dev-auth")
@@ -283,6 +299,15 @@ var module_default = defineNuxtModule({
 				mode: "client"
 			});
 		}
+		const shapesDir = join(nuxt.options.serverDir, "api/shapes");
+		const shapeTypes = addTypeTemplate({
+			filename: "types/wervt-shapes.d.ts",
+			getContents: async () => shapeRoutesTypes(await findShapeRoutes(shapesDir), join(nuxt.options.buildDir, "types"), resolver.resolve("./runtime/shared/shape"))
+		});
+		if (nuxt.options.dev) nuxt.hook("builder:watch", async (event, path) => {
+			const file = relative(shapesDir, resolve(nuxt.options.srcDir, path));
+			if ((event === "add" || event === "unlink") && !file.startsWith("..")) await updateTemplates({ filter: (template) => template.filename === shapeTypes.filename });
+		});
 		nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
 		addImports([
 			{
@@ -324,6 +349,17 @@ const TOOL_EXTENSIONS = /* @__PURE__ */ new Set([
 ]);
 const TOOL_NAME_RE = /^[\w.-]{1,128}$/;
 /** The tools in `server/tools/`: `todos/add.ts` is `todos.add`, like Nitro names tasks. */
+async function findEmailTemplates(dirs) {
+	const templates = /* @__PURE__ */ new Map();
+	for (const dir of new Set(dirs)) {
+		if (!existsSync(dir)) continue;
+		for (const file of await readdir(dir)) if (extname(file) === ".vue") templates.set(file.slice(0, -4), join(dir, file));
+	}
+	return [...templates].map(([name, path]) => ({
+		name,
+		path
+	}));
+}
 async function findTools(dir) {
 	const files = await readdir(dir, { recursive: true }).catch(() => []);
 	const tools = [];

package/dist/provision.d.ts

@@ -28,6 +28,18 @@ export declare function appDatabaseUrl({ app, adminUrl, secret }: ProvisionOptio
  * only connect to the wervt database.
  */
 export declare function provisionDatabase(options: ProvisionOptions): Promise<void>;
+/** The role PgBouncer signs in with to look up app roles' password hashes (`auth_query`). */
+export declare const POOLER_ROLE = "pgbouncer";
+/**
+ * Prepares Postgres for PgBouncer in front of the app isolates: a login role for PgBouncer and
+ * `pgbouncer.get_auth()`, which hands out the SCRAM hashes of app roles (`app_*`) only, never
+ * those of the superuser or other roles. App passwords are derived, not stored anywhere
+ * PgBouncer could read them, so it has to ask Postgres.
+ */
+export declare function setupPooler({ adminUrl, password }: {
+  adminUrl: string;
+  password: string;
+}): Promise<void>;
 /** Drops the app's schema (all its data) and role. */
 export declare function dropDatabase({ app, adminUrl }: Pick<ProvisionOptions, 'app' | 'adminUrl'>): Promise<void>;
 //#endregion

package/dist/provision.js

@@ -108,6 +108,40 @@ async function claimSchema(admin, role) {
      where n.nspname = ${role} and p.proowner <> ${role}::regrole`;
 	for (const { kind, name } of objects) await admin.unsafe(`alter ${kind} ${name} owner to "${role}"`);
 }
+/** The role PgBouncer signs in with to look up app roles' password hashes (`auth_query`). */
+const POOLER_ROLE = "pgbouncer";
+/**
+* Prepares Postgres for PgBouncer in front of the app isolates: a login role for PgBouncer and
+* `pgbouncer.get_auth()`, which hands out the SCRAM hashes of app roles (`app_*`) only, never
+* those of the superuser or other roles. App passwords are derived, not stored anywhere
+* PgBouncer could read them, so it has to ask Postgres.
+*/
+async function setupPooler({ adminUrl, password }) {
+	const database = new URL(adminUrl).pathname.slice(1);
+	const admin = postgres(adminUrl, {
+		max: 1,
+		onnotice: () => {}
+	});
+	try {
+		const [row] = await admin`select exists(select 1 from pg_roles where rolname = ${POOLER_ROLE})`;
+		await admin.unsafe(`${row?.exists ? "alter" : "create"} role "${POOLER_ROLE}" login password '${password.replaceAll("'", "''")}'`);
+		await admin.unsafe(`grant connect on database "${database}" to "${POOLER_ROLE}"`);
+		await admin.unsafe(`create schema if not exists "${POOLER_ROLE}"`);
+		await admin.unsafe(`revoke all on schema "${POOLER_ROLE}" from public`);
+		await admin.unsafe(`grant usage on schema "${POOLER_ROLE}" to "${POOLER_ROLE}"`);
+		await admin.unsafe(`
+      create or replace function "${POOLER_ROLE}".get_auth(p_usename text)
+      returns table(usename name, passwd text)
+      language sql security definer set search_path = pg_catalog as $$
+        select usename, passwd from pg_shadow
+         where usename = p_usename and usename like 'app_%' and not usesuper
+      $$`);
+		await admin.unsafe(`revoke all on function "${POOLER_ROLE}".get_auth(text) from public`);
+		await admin.unsafe(`grant execute on function "${POOLER_ROLE}".get_auth(text) to "${POOLER_ROLE}"`);
+	} finally {
+		await admin.end();
+	}
+}
 /** Drops the app's schema (all its data) and role. */
 async function dropDatabase({ app, adminUrl }) {
 	const role = dbRole(app);
@@ -129,4 +163,4 @@ async function dropDatabase({ app, adminUrl }) {
 	}
 }
 //#endregion
-export { StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, provisionDatabase, storageCredentials };
+export { POOLER_ROLE, StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, provisionDatabase, setupPooler, storageCredentials };

package/dist/runtime/app/useShape.d.ts

@@ -1,26 +1,34 @@
 import { Row } from "@electric-sql/client";
+import { Ref, ShallowRef } from "vue";
 //#region src/runtime/app/useShape.d.ts
+declare global {
+  /**
+   * Shape routes and their rows, generated from `server/api/shapes/` (`.nuxt/types/wervt-shapes.d.ts`).
+   */
+  interface WervtShapeRoutes {}
+}
 export interface UseShapeOptions {
   /** Payload key. Defaults to the path. */
   key?: string;
   /** Keep the shape live on the client. Defaults to true. */
   live?: boolean;
 }
+type ShapeResult<T> = Promise<ShapeRefs<T>> & ShapeRefs<T>;
+interface ShapeRefs<T> {
+  data: ShallowRef<T[]>;
+  error: Ref<unknown>;
+  isLive: Ref<boolean>;
+}
 /**
  * Live rows of an Electric shape served by one of the app's shape routes
  * (see `proxyShape`). The snapshot is loaded during SSR and sent in the payload;
  * the client resumes the stream from the snapshot's offset, so rows are not
- * fetched twice.
+ * fetched twice. Timestamps arrive as Dates, like Drizzle reads them.
+ *
+ * The row type comes from the route when it passes a Drizzle table to `proxyShape`.
  *
- * @example const { data: todos } = await useShape<Todo>('/api/shapes/todos')
+ * @example const { data: todos } = await useShape('/api/shapes/todos')
  */
-export declare function useShape<T extends Row<unknown>>(path: string, options?: UseShapeOptions): Promise<{
-  data: import("vue").ShallowRef<T[], T[]>;
-  error: import("vue").Ref<unknown, unknown>;
-  isLive: import("vue").Ref<boolean, boolean>;
-}> & {
-  data: import("vue").ShallowRef<T[], T[]>;
-  error: import("vue").Ref<unknown, unknown>;
-  isLive: import("vue").Ref<boolean, boolean>;
-};
+export declare function useShape<P extends keyof WervtShapeRoutes>(path: P, options?: UseShapeOptions): ShapeResult<WervtShapeRoutes[P]>;
+export declare function useShape<T extends Row<unknown>>(path: string, options?: UseShapeOptions): ShapeResult<T>;
 //#endregion

package/dist/runtime/app/useShape.js

@@ -1,15 +1,8 @@
+import { shapeParser } from "../shared/shape.js";
 import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
 import { getCurrentScope, onScopeDispose, ref, shallowRef } from "vue";
 import { onNuxtReady, useAsyncData, useRequestEvent, useRequestFetch } from "#app";
 //#region src/runtime/app/useShape.ts
-/**
-* Live rows of an Electric shape served by one of the app's shape routes
-* (see `proxyShape`). The snapshot is loaded during SSR and sent in the payload;
-* the client resumes the stream from the snapshot's offset, so rows are not
-* fetched twice.
-*
-* @example const { data: todos } = await useShape<Todo>('/api/shapes/todos')
-*/
 function useShape(path, options = {}) {
 	const fetchClient = import.meta.server ? inProcessFetch() : void 0;
 	const asyncData = useAsyncData(options.key ?? `wervt-shape:${path}`, () => loadSnapshot(path, fetchClient));
@@ -40,6 +33,7 @@ function useShape(path, options = {}) {
 				url: absolute(path),
 				offset: snapshot?.offset,
 				handle: snapshot?.handle,
+				parser: shapeParser,
 				signal: controller.signal,
 				onError: (e) => {
 					error.value = e;
@@ -64,6 +58,7 @@ async function loadSnapshot(path, fetchClient) {
 		url: absolute(path),
 		subscribe: false,
 		fetchClient,
+		parser: shapeParser,
 		onError: (e) => fail(e)
 	});
 	await new Promise((resolve, reject) => {

package/dist/runtime/email/components.d.ts

@@ -0,0 +1,191 @@
+import { InjectionKey, PropType } from "vue";
+//#region src/runtime/email/components.d.ts
+/** The template's subject, handed to renderEmail() while rendering. */
+export declare const SUBJECT_KEY: InjectionKey<(subject: string) => void>;
+export declare const emailTheme: {
+  page: string;
+  card: string;
+  border: string;
+  rule: string;
+  text: string;
+  highlighted: string;
+  muted: string;
+  dimmed: string;
+  accent: string;
+  accentSoft: string;
+  accentBorder: string;
+  band: string;
+  bandText: string;
+  bandDimmed: string;
+  button: string;
+  buttonText: string;
+  codeBackground: string;
+  radius: string;
+  font: string;
+  mono: string;
+  /** Where the logo images live. PNG, because Gmail and Outlook don't show SVG. */
+  assets: string;
+  site: string;
+  docs: string;
+};
+/**
+ * The whole email: document, preheader, header with the logo, body and footer. Put it at the
+ * root of every template.
+ *
+ * ```vue
+ * <WervtEmail subject="Your code" app="kontor"> … </WervtEmail>
+ * ```
+ */
+export declare const WervtEmail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The email's subject line. */
+  subject: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** The app that sends the mail, shown in the header and the footer. */
+  app: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** The preview line inboxes show after the subject. */
+  preview: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Replaces the footer's "Sent by <app> via wervt" line. */
+  footer: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Why the recipient got this mail, shown small in the footer. */
+  reason: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The email's subject line. */
+  subject: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** The app that sends the mail, shown in the header and the footer. */
+  app: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** The preview line inboxes show after the subject. */
+  preview: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Replaces the footer's "Sent by <app> via wervt" line. */
+  footer: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Why the recipient got this mail, shown small in the footer. */
+  reason: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  app: string;
+  preview: string;
+  footer: string;
+  reason: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailHeading: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** A short label above the heading, in the landing page's mono eyebrow style. */
+  eyebrow: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** A short label above the heading, in the landing page's mono eyebrow style. */
+  eyebrow: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  eyebrow: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailText: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Secondary text: hints, "ignore this if …". */
+export declare const EmailMuted: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A call to action. Bulletproof: a table cell carries the background, so Outlook shows it too. */
+export declare const EmailButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** `primary` is the landing page's blue; `neutral` the dashboard's black. */
+  color: {
+    type: PropType<'primary' | 'neutral'>;
+    default: string;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** `primary` is the landing page's blue; `neutral` the dashboard's black. */
+  color: {
+    type: PropType<'primary' | 'neutral'>;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  color: "neutral" | "primary";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A one-time code, large and spaced so it reads (and copies) easily. */
+export declare const EmailCode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  code: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** A small line under the code, e.g. when it expires. */
+  caption: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  code: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** A small line under the code, e.g. when it expires. */
+  caption: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  caption: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailDivider: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion