@tollwyn/baukasten 0.0.2 → 1.2.3

package/dist/stubs.js

@@ -0,0 +1,287 @@
+import { APP_BRIDGE_URL, COMPLIANCE_TOPICS, POLARIS_URL, SHOPIFY_API_VERSION, SHOPIFY_AUTH_PATH, SHOPIFY_WEBHOOK_PATH } from './shopify/constants.js';
+/** The alias of src/lib in the product: written out in an import here, svelte-package would resolve it. */
+const LIB = '$lib';
+const PAGES = [
+    {
+        route: 'account',
+        pages: 'account',
+        server: ['load', 'actions'],
+        component: 'AccountPage',
+        props: ['data', 'form']
+    },
+    {
+        route: 'confirm-email',
+        pages: 'confirmEmail',
+        server: ['load', 'actions'],
+        component: 'ConfirmEmailPage',
+        props: ['data', 'form']
+    },
+    {
+        route: 'forgot-password',
+        pages: 'forgotPassword',
+        server: ['actions'],
+        component: 'ForgotPasswordPage',
+        props: ['form']
+    },
+    { route: 'imprint', pages: 'imprint', server: ['load'], component: 'LegalPage', props: ['data'] },
+    {
+        route: 'login',
+        pages: 'login',
+        server: ['load', 'actions'],
+        component: 'LoginPage',
+        props: ['data', 'form']
+    },
+    {
+        route: 'logout',
+        pages: 'logout',
+        server: ['load', 'actions'],
+        component: 'LogoutPage',
+        props: ['data']
+    },
+    { route: 'privacy', pages: 'privacy', server: ['load'], component: 'LegalPage', props: ['data'] },
+    {
+        route: 'reset-password',
+        pages: 'resetPassword',
+        server: ['load', 'actions'],
+        component: 'ResetPasswordPage',
+        props: ['data', 'form']
+    },
+    {
+        route: 'signup',
+        pages: 'signup',
+        server: ['load', 'actions'],
+        component: 'SignupPage',
+        props: ['data', 'form']
+    },
+    { route: 'terms', pages: 'terms', server: ['load'], component: 'LegalPage', props: ['data'] },
+    {
+        route: 'verify-email',
+        pages: 'verifyEmail',
+        server: ['load', 'actions'],
+        component: 'VerifyEmailPage',
+        props: ['data', 'form']
+    }
+];
+function serverPart(page) {
+    return `import { kit } from '${LIB}/server/baukasten';
+
+export const { ${page.server.join(', ')} } = kit.pages.${page.pages};
+`;
+}
+function component(page) {
+    return `<script lang="ts">
+	import { ${page.component} } from '@tollwyn/baukasten/ui';
+	import type { PageProps } from './$types';
+
+	let { ${page.props.join(', ')} }: PageProps = $props();
+</script>
+
+<${page.component} ${page.props.map((prop) => `{${prop}}`).join(' ')} />
+`;
+}
+/** The stubs by their path in the product, with exactly their content. */
+export const STUBS = {
+    'server.js': `import { start } from '@tollwyn/baukasten/server';
+
+await start(() => import('./build/handler.js'));
+`,
+    'src/app.html': `<!doctype html>
+<html lang="%baukasten.lang%" %baukasten.theme%>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
+`,
+    'src/hooks.server.ts': `// The hooks of a product: the baukasten first, then the product's own handle.
+import { building } from '$app/environment';
+import { sequence } from '@sveltejs/kit/hooks';
+import { kit } from '${LIB}/server/baukasten';
+import { handle as own } from '${LIB}/server/handle';
+
+export const init = kit.init(building);
+export const handle = sequence(kit.handle, own);
+export const handleError = kit.handleError;
+`,
+    'src/routes/+layout.server.ts': `import { kit } from '${LIB}/server/baukasten';
+
+export const { load } = kit.pages.layout;
+`,
+    'src/routes/+layout.svelte': `<script lang="ts">
+	import { Frame } from '@tollwyn/baukasten/ui';
+	import '../app.css';
+	import type { LayoutProps } from './$types';
+
+	let { data, children }: LayoutProps = $props();
+</script>
+
+<Frame {data}>{@render children()}</Frame>
+`,
+    'src/routes/+error.svelte': `<script lang="ts">
+	import { ErrorPage } from '@tollwyn/baukasten/ui';
+</script>
+
+<ErrorPage />
+`,
+    ...Object.fromEntries(PAGES.flatMap((page) => [
+        [`src/routes/${page.route}/+page.server.ts`, serverPart(page)],
+        [`src/routes/${page.route}/+page.svelte`, component(page)]
+    ])),
+    'e2e/baukasten.spec.ts': `// The connection test of the baukasten, in the gate of every product.
+import { expect, test } from '@playwright/test';
+import { connectionTest } from '@tollwyn/baukasten/testing';
+import product from '../baukasten.config';
+
+connectionTest(product, { test, expect });
+`
+};
+/**
+ * The files the product owns, by their path: the command writes each only where it is missing. The
+ * configuration fails loudly until it is filled in.
+ */
+export const STARTING_POINTS = {
+    'baukasten.config.ts': `// The configuration of the product, at the fixed place of every product (see the README of
+// @tollwyn/baukasten): what the pages, mails and legal texts of the baukasten say of it.
+import { defineProduct } from '@tollwyn/baukasten';
+
+export default defineProduct({
+	language: 'en',
+	env: {},
+	navigation: [],
+	accounts: { home: '/', keyPrefix: '', signup: { heading: '', lead: '' } },
+	termsDate: '',
+	legal: {
+		service: '',
+		notGuaranteed: '',
+		use: '',
+		data: [],
+		recipients: [],
+		processor: { kind: 'no' }
+	},
+	catalog: { currency: 'CHF', products: [] }
+});
+`,
+    'src/app.css': `/*
+ * The product's own styles, after the base styles of the baukasten and on every page, those of the
+ * baukasten too. Its colours go through the variables of the baukasten, like --bk-accent.
+ */
+`,
+    'src/lib/server/baukasten.ts': `// The baukasten in the product, with the hooks it calls in the product (Hooks of
+// @tollwyn/baukasten/server): checks, start and stop, deleting an account, plans from a
+// subscription, a paid purchase, numbers for the sales.
+import { baukasten } from '@tollwyn/baukasten/server';
+import product from '../../../baukasten.config';
+
+export const kit = baukasten(product);
+`,
+    'src/lib/server/handle.ts': `// The product's own handle, after that of the baukasten (src/hooks.server.ts).
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = ({ event, resolve }) => resolve(event);
+`
+};
+/** The stubs of a Shopify app, by their path, with exactly their content. */
+export const SHOPIFY_STUBS = {
+    'server.js': `import { start } from '@tollwyn/baukasten/shopify';
+
+await start(() => import('./build/handler.js'));
+`,
+    // App Bridge comes first, from the CDN of Shopify, as the App Store wants; the handle fills in the
+    // client ID.
+    'src/app.html': `<!doctype html>
+<html lang="%baukasten.lang%">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="shopify-api-key" content="%baukasten.clientId%" />
+		<script src="${APP_BRIDGE_URL}"></script>
+		<script src="${POLARIS_URL}"></script>
+		%sveltekit.head%
+	</head>
+	<body>
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
+`,
+    'src/hooks.server.ts': `// The hooks of a Shopify app: the baukasten first, then the app's own handle.
+import { building } from '$app/environment';
+import { sequence } from '@sveltejs/kit/hooks';
+import { kit } from '${LIB}/server/baukasten';
+import { handle as own } from '${LIB}/server/handle';
+
+export const init = kit.init(building);
+export const handle = sequence(kit.handle, own);
+export const handleError = kit.handleError;
+`,
+    'e2e/baukasten.spec.ts': `// The connection test of the baukasten, in the gate of every Shopify app.
+import { expect, test } from '@playwright/test';
+import { shopifyConnectionTest } from '@tollwyn/baukasten/testing';
+import app from '../baukasten.config';
+
+shopifyConnectionTest(app, { test, expect });
+`
+};
+/**
+ * The files a Shopify app owns, by their path, written only where they are missing. The
+ * configuration fails loudly until it is filled in; shopify.app.toml waits for the subdomain of the
+ * app, its name, handle and scopes, and for the client ID, which linking the app gives it.
+ */
+export const SHOPIFY_STARTING_POINTS = {
+    'baukasten.config.ts': `// The configuration of the Shopify app, at the fixed place of every product (see the README of
+// @tollwyn/baukasten): its plans and what its privacy text says of it.
+import { defineShopifyApp } from '@tollwyn/baukasten';
+
+export default defineShopifyApp({
+	language: 'en',
+	env: {},
+	plans: [],
+	privacyDate: '',
+	privacy: { service: '', data: [], recipients: [] }
+});
+`,
+    'shopify.app.toml': `# The configuration of the app at Shopify, which the Shopify CLI deploys; the client ID comes when
+# the app is linked. What baukasten-check holds in it: see the README of the baukasten.
+client_id = ""
+name = ""
+handle = ""
+application_url = "https://SUBDOMAIN.tollwyn.com"
+embedded = true
+
+[access_scopes]
+scopes = ""
+
+[auth]
+redirect_urls = ["https://SUBDOMAIN.tollwyn.com${SHOPIFY_AUTH_PATH}"]
+
+[webhooks]
+api_version = "${SHOPIFY_API_VERSION}"
+
+[[webhooks.subscriptions]]
+topics = ["app/uninstalled"]
+uri = "${SHOPIFY_WEBHOOK_PATH}"
+
+[[webhooks.subscriptions]]
+compliance_topics = [${COMPLIANCE_TOPICS.map((topic) => `"${topic}"`).join(', ')}]
+uri = "${SHOPIFY_WEBHOOK_PATH}"
+
+[build]
+automatically_update_urls_on_dev = false
+`,
+    'src/lib/server/baukasten.ts': `// The baukasten in the Shopify app, with the hooks it calls in the app (ShopifyHooks of
+// @tollwyn/baukasten/shopify): checks, start and stop, its webhooks, and what it keeps of a
+// customer of a shop.
+import { shopifyBaukasten } from '@tollwyn/baukasten/shopify';
+import app from '../../../baukasten.config';
+
+export const kit = shopifyBaukasten(app);
+`,
+    'src/lib/server/handle.ts': `// The app's own handle, after that of the baukasten (src/hooks.server.ts).
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = ({ event, resolve }) => resolve(event);
+`
+};

package/dist/sveltekit.d.ts

@@ -0,0 +1,20 @@
+export declare const SVELTEKIT_OPTIONS: {
+    csrf: {
+        trustedOrigins: string[];
+    };
+    csp: {
+        mode: "auto";
+        directives: {
+            'default-src': "self"[];
+            'script-src': "self"[];
+            'style-src': ("self" | "unsafe-inline")[];
+            'img-src': ("data:" | "self")[];
+            'font-src': ("data:" | "self")[];
+            'connect-src': "self"[];
+            'form-action': ("self" | "https://checkout.stripe.com" | "https://billing.stripe.com")[];
+            'frame-ancestors': "none"[];
+            'base-uri': "self"[];
+            'object-src': "none"[];
+        };
+    };
+};

package/dist/sveltekit.js

@@ -0,0 +1,18 @@
+export const SVELTEKIT_OPTIONS = {
+    csrf: { trustedOrigins: ['*'] },
+    csp: {
+        mode: 'auto',
+        directives: {
+            'default-src': ['self'],
+            'script-src': ['self'],
+            'style-src': ['self', 'unsafe-inline'],
+            'img-src': ['self', 'data:'],
+            'font-src': ['self', 'data:'],
+            'connect-src': ['self'],
+            'form-action': ['self', 'https://checkout.stripe.com', 'https://billing.stripe.com'],
+            'frame-ancestors': ['none'],
+            'base-uri': ['self'],
+            'object-src': ['none']
+        }
+    }
+};

package/dist/testing/app.d.ts

@@ -0,0 +1,36 @@
+import type { SmtpDouble } from './smtp.js';
+import type { StripeDouble } from './stripe.js';
+export type LogLine = Record<string, unknown>;
+export interface AppProcess {
+    logs: LogLine[];
+    stderr(): string;
+    exited: Promise<number | null>;
+    /** The first line that matches, as soon as it is written; fails when the process ends first. */
+    waitForLog(matches: (line: LogLine) => boolean, timeoutMs?: number): Promise<LogLine>;
+    /** Sends SIGTERM and resolves with the exit code. */
+    stop(): Promise<number | null>;
+}
+export interface RunningApp extends AppProcess {
+    /** Where it listens; PUBLIC_ORIGIN unless the test set another. */
+    url: string;
+}
+export declare function freePort(): Promise<number>;
+/** Runs a script of the product with exactly `env` and PATH, as the delivery service would. */
+export declare function spawnNode(args: string[], env: Record<string, string>, options?: {
+    cwd?: string;
+}): AppProcess;
+/**
+ * Starts the built product on a free port and waits until it listens. PUBLIC_ORIGIN points at it,
+ * and with `smtp` its mail goes to the SMTP double, unless `env` says otherwise. With `stripe` it
+ * talks to the Stripe double, which sends the events of its webhook to the app, as the webhook the
+ * delivery service sets up; the key is the one of `env`, or one of the test mode. freePort releases
+ * the port before the app takes it, so a test running alongside can take it in between: then the
+ * app ends with EADDRINUSE and starts again on another port. A port the test set itself stays.
+ */
+export declare function startApp(options: {
+    env: Record<string, string>;
+    smtp?: SmtpDouble;
+    stripe?: StripeDouble;
+    /** The root of the product; the working directory without it. */
+    root?: string;
+}): Promise<RunningApp>;

package/dist/testing/app.js

@@ -0,0 +1,155 @@
+// Runs the built product as its image does, with exactly the variables given. Every line on stdout
+// must be JSON and stderr must stay empty; the tests wait for lines of the log, not for time.
+import { spawn } from 'node:child_process';
+import { EventEmitter } from 'node:events';
+import { createServer } from 'node:net';
+import { WEBHOOK_PATH } from '../server/stripe.js';
+export function freePort() {
+    return new Promise((resolve, reject) => {
+        const server = createServer();
+        server.once('error', reject);
+        server.listen(0, '127.0.0.1', () => {
+            const address = server.address();
+            server.close(() => {
+                if (address === null || typeof address === 'string')
+                    reject(new Error('no port'));
+                else
+                    resolve(address.port);
+            });
+        });
+    });
+}
+/** Runs a script of the product with exactly `env` and PATH, as the delivery service would. */
+export function spawnNode(args, env, options = {}) {
+    const child = spawn(process.execPath, args, {
+        cwd: options.cwd,
+        env: { PATH: process.env.PATH ?? '', ...env },
+        stdio: ['ignore', 'pipe', 'pipe']
+    });
+    const logs = [];
+    const events = new EventEmitter();
+    let stderr = '';
+    let buffer = '';
+    let ended = false;
+    child.stderr.on('data', (chunk) => {
+        stderr += chunk.toString();
+    });
+    child.stdout.on('data', (chunk) => {
+        buffer += chunk.toString();
+        let end;
+        while ((end = buffer.indexOf('\n')) >= 0) {
+            const text = buffer.slice(0, end);
+            buffer = buffer.slice(end + 1);
+            let line;
+            try {
+                line = asLine(JSON.parse(text));
+            }
+            catch {
+                line = { notJson: text };
+            }
+            logs.push(line);
+            events.emit('line', line);
+        }
+    });
+    const exited = new Promise((resolve) => child.once('exit', (code) => {
+        ended = true;
+        events.emit('exit');
+        resolve(code);
+    }));
+    function waitForLog(matches, timeoutMs = 20_000) {
+        return new Promise((resolve, reject) => {
+            const done = () => {
+                clearTimeout(timer);
+                events.off('line', onLine);
+                events.off('exit', onExit);
+            };
+            const onLine = (line) => {
+                if (!matches(line))
+                    return;
+                done();
+                resolve(line);
+            };
+            const onExit = () => {
+                done();
+                reject(new Error(`the app ended first: ${JSON.stringify(logs)}`));
+            };
+            const timer = setTimeout(() => {
+                done();
+                reject(new Error(`no such line in ${timeoutMs} ms: ${JSON.stringify(logs)}`));
+            }, timeoutMs);
+            const found = logs.find(matches);
+            if (found !== undefined) {
+                done();
+                resolve(found);
+            }
+            else if (ended)
+                onExit();
+            else {
+                events.on('line', onLine);
+                events.on('exit', onExit);
+            }
+        });
+    }
+    return {
+        logs,
+        stderr: () => stderr,
+        exited,
+        waitForLog,
+        stop: () => {
+            child.kill('SIGTERM');
+            return exited;
+        }
+    };
+}
+/** A log line is a JSON object; anything else is kept as text. */
+function asLine(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+        throw new Error('not an object');
+    }
+    return Object.fromEntries(Object.entries(value));
+}
+/** How often startApp picks another port when the one it picked was taken before the app listened. */
+const PORT_TRIES = 5;
+/** Whether the app ended because its port was taken, as the log of its uncaught error says. */
+function portTaken(app) {
+    return app.logs.some(({ error }) => typeof error === 'object' && error !== null && 'code' in error && error.code === 'EADDRINUSE');
+}
+/**
+ * Starts the built product on a free port and waits until it listens. PUBLIC_ORIGIN points at it,
+ * and with `smtp` its mail goes to the SMTP double, unless `env` says otherwise. With `stripe` it
+ * talks to the Stripe double, which sends the events of its webhook to the app, as the webhook the
+ * delivery service sets up; the key is the one of `env`, or one of the test mode. freePort releases
+ * the port before the app takes it, so a test running alongside can take it in between: then the
+ * app ends with EADDRINUSE and starts again on another port. A port the test set itself stays.
+ */
+export async function startApp(options) {
+    const { smtp, stripe } = options;
+    for (let attempt = 1;; attempt++) {
+        const port = await freePort();
+        const url = `http://127.0.0.1:${port}`;
+        const app = spawnNode(['server.js'], {
+            LOG_LEVEL: 'info',
+            PORT: String(port),
+            PUBLIC_ORIGIN: url,
+            ...(smtp === undefined ? {} : { SMTP_HOST: smtp.host, SMTP_PORT: String(smtp.port) }),
+            ...(stripe === undefined ? {} : { STRIPE_SECRET_KEY: 'rk_test_double' }),
+            ...options.env,
+            // The double signs with its own secret, and only it takes the key.
+            ...(stripe === undefined
+                ? {}
+                : { STRIPE_API_BASE: stripe.url, STRIPE_WEBHOOK_SECRET: stripe.webhookSecret })
+        }, { cwd: options.root });
+        try {
+            await app.waitForLog((line) => line.msg === 'listening');
+            // The endpoint is the address of the product; the events go where it listens.
+            const origin = options.env.PUBLIC_ORIGIN ?? url;
+            stripe?.connect(`${origin}${WEBHOOK_PATH}`, `${url}${WEBHOOK_PATH}`);
+            return { ...app, url };
+        }
+        catch (error) {
+            const again = attempt < PORT_TRIES && !('PORT' in options.env) && portTaken(app);
+            if (!again)
+                throw error;
+        }
+    }
+}

package/dist/testing/browser.d.ts

@@ -0,0 +1,21 @@
+/** What the frame sets once the page is hydrated. */
+export declare const HYDRATED = "html[data-hydrated]";
+/** What these helpers need of a page of Playwright. */
+export interface PageLike {
+    goto(url: string): Promise<unknown>;
+    waitForSelector(selector: string, options: {
+        state: 'attached';
+    }): Promise<unknown>;
+}
+/** Waits until the page is interactive: filled before, a field can lose what was typed. */
+export declare function waitForHydration(page: Pick<PageLike, 'waitForSelector'>): Promise<void>;
+export declare function open(page: PageLike, url: string): Promise<void>;
+/**
+ * A client address no other caller of this process gets, so that the limits of one test do not
+ * reach into another: from 198.18.0.0/15, which is meant for tests, with the headers that carry it:
+ * CF-Connecting-IP in production, X-Forwarded-For locally.
+ */
+export declare function newCaller(): {
+    address: string;
+    headers: Record<string, string>;
+};

package/dist/testing/browser.js

@@ -0,0 +1,21 @@
+/** What the frame sets once the page is hydrated. */
+export const HYDRATED = 'html[data-hydrated]';
+/** Waits until the page is interactive: filled before, a field can lose what was typed. */
+export async function waitForHydration(page) {
+    await page.waitForSelector(HYDRATED, { state: 'attached' });
+}
+export async function open(page, url) {
+    await page.goto(url);
+    await waitForHydration(page);
+}
+let callers = 0;
+/**
+ * A client address no other caller of this process gets, so that the limits of one test do not
+ * reach into another: from 198.18.0.0/15, which is meant for tests, with the headers that carry it:
+ * CF-Connecting-IP in production, X-Forwarded-For locally.
+ */
+export function newCaller() {
+    const n = callers++;
+    const address = `198.${18 + (Math.floor(n / 65_536) % 2)}.${Math.floor(n / 256) % 256}.${n % 256}`;
+    return { address, headers: { 'CF-Connecting-IP': address, 'X-Forwarded-For': address } };
+}

package/dist/testing/connection.d.ts

@@ -0,0 +1,7 @@
+import type { expect as Expect, test as Test } from '@playwright/test';
+import type { Product, ProductEnv } from '../product.js';
+/** Registers the connection test of `product` with the test and expect of the product's Playwright. */
+export declare function connectionTest<E extends ProductEnv>(product: Product<E>, playwright: {
+    test: typeof Test;
+    expect: typeof Expect;
+}): void;