@sealcode/sealgen 0.16.1-beta3 → 0.16.2

package/@types/src/page/stateful-page.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="koa__router" />
 import Router from "@koa/router";
-import { BaseContext, Context } from "koa";
+import { Context } from "koa";
 import { Templatable } from "tempstream";
 import { Mountable } from "./mountable.js";
 export type StatefulPageActionDescription<ActionName> = {
@@ -21,25 +21,25 @@ export type StateAndMetadata<State, Actions> = {
     action_args: null;
     $: Record<string, unknown>;
 };
-export type StatefulPageActionArgument<State extends Record<string, unknown>, Args extends unknown[] = unknown[]> = {
-    ctx: BaseContext;
+export type StatefulPageActionArgument<State extends Record<string, unknown>, Args extends unknown[] = unknown[], Page extends StatefulPage<Record<string, unknown>, any> = StatefulPage<any, any>> = {
+    ctx: Context;
     state: State;
     inputs: Record<string, string>;
     args: Args;
-    page: StatefulPage<any, any>;
+    page: Page;
 };
 export type StatefulPageAction<State extends Record<string, unknown>, Args extends unknown[] = unknown[]> = (obj: StatefulPageActionArgument<State, Args>) => State | Promise<State>;
 export type ExtractStatefulPageActionArgs<X> = X extends StatefulPageAction<any, infer Args> ? Args : never;
 export declare abstract class StatefulPage<State extends Record<string, unknown>, Actions extends Record<string, StatefulPageAction<State>>> extends Mountable {
     abstract actions: Actions;
-    abstract getInitialState(ctx: BaseContext): State | Promise<State>;
-    abstract render(ctx: BaseContext, state: State, inputs: Record<string, string>): Templatable | Promise<Templatable>;
+    abstract getInitialState(ctx: Context): State | Promise<State>;
+    abstract render(ctx: Context, state: State, inputs: Record<string, string>): Templatable | Promise<Templatable>;
     canAccess(): Promise<{
         readonly canAccess: true;
         readonly message: "";
     }>;
     constructor();
-    abstract wrapInLayout(ctx: BaseContext, content: Templatable, state: State): Templatable;
+    abstract wrapInLayout(ctx: Context, content: Templatable, state: State): Templatable;
     wrapInForm(context: Context, state: State, content: Templatable): Promise<Templatable>;
     extractActionAndLabel<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>): {
         action: string;
@@ -55,9 +55,9 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
     } | ActionName, ...args: ExtractStatefulPageActionArgs<Actions[ActionName]>): string;
     rerender(): string;
     preprocessState(values: State): Promise<State>;
-    preprocessOverrides(_context: BaseContext, _state: State, values: Record<string, unknown>): Promise<Record<string, unknown>>;
-    serializeState(_context: BaseContext, state: State): Promise<string>;
-    deserializeState(_context: BaseContext, s: string): Promise<State>;
-    extractState(ctx: BaseContext): Promise<StateAndMetadata<State, Actions>>;
+    preprocessOverrides(_context: Context, _state: State, values: Record<string, unknown>): Promise<Record<string, unknown>>;
+    serializeState(_context: Context, state: State): Promise<string>;
+    deserializeState(_context: Context, s: string): Promise<State>;
+    extractState(ctx: Context): Promise<StateAndMetadata<State, Actions>>;
     mount(router: Router, path: string): void;
 }

package/lib/builder.js

@@ -1,5 +1,6 @@
 import { build } from "esbuild";
 import glob from "tiny-glob";
+import { promises as fs } from "fs";
 import { embeddable_file_extensions } from "./embeddable-file-extensions.js";
 import { load_assets_plugin } from "./esbuild-plugins/load-assets.js";
 import { rewrite_asset_imports_plugin } from "./esbuild-plugins/rewrite-asset-imports.js";
@@ -8,6 +9,7 @@ import { generateComponents } from "./generate-components.js";
 import { generateRoutes } from "./generate-routes.js";
 import { generateStimulusControllers } from "./generate-stimulus.js";
 import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
+import { relative } from "node:path";
 class Builder {
   constructor(project_dir) {
     this.project_dir = project_dir;
@@ -61,7 +63,7 @@ class BackendTSBuilder extends Builder {
         ","
       )}}`
     )).filter((path) => !path.includes(".#"));
-    await build({
+    const { metafile } = await build({
       entryPoints,
       sourcemap: true,
       bundle: false,
@@ -75,8 +77,13 @@ class BackendTSBuilder extends Builder {
       loader: Object.fromEntries(
         embeddable_file_extensions.map((ext) => ["." + ext, "js"])
       ),
-      plugins: [rewrite_asset_imports_plugin, load_assets_plugin]
+      plugins: [rewrite_asset_imports_plugin, load_assets_plugin],
+      metafile: true
     });
+    await fs.writeFile(
+      relative(this.project_dir, "dist") + "/back.meta.json",
+      JSON.stringify(metafile)
+    );
   }
 }
 class FrontendTSBuilder extends Builder {
@@ -91,14 +98,20 @@ class FrontendTSBuilder extends Builder {
   }
   async _build() {
     await generateStimulusControllers();
-    await build({
+    const { metafile } = await build({
       entryPoints: ["./src/front/index.ts"],
       sourcemap: true,
       outfile: "./public/dist/bundle.js",
       logLevel: "info",
       bundle: true,
-      minify: true
+      minify: true,
+      metafile: true,
+      treeShaking: true
     });
+    await fs.writeFile(
+      relative(this.project_dir, "dist") + "/front.meta.json",
+      JSON.stringify(metafile)
+    );
   }
 }
 export {

package/lib/get-fonts.js

@@ -1,5 +1,6 @@
-import { readFile } from "fs/promises";
+import { readFile, writeFile } from "fs/promises";
 import { constructURL, download } from "google-fonts-helper";
+import { resolve } from "node:path";
 import { target_locreq } from "./target-locreq.js";
 const FONTS_CONFIG_PATH = "src/fonts.json";
 async function getFonts(_ = {}) {
@@ -18,6 +19,15 @@ async function getFonts(_ = {}) {
     fontsPath: "/dist/fonts"
   });
   await downloader.execute();
+  const fonts_css_file_path = resolve(
+    target_locreq.resolve("public/dist/fonts"),
+    "fonts.css"
+  );
+  const content = await readFile(fonts_css_file_path, "utf-8");
+  await writeFile(
+    fonts_css_file_path,
+    content.replace(/@font-face {/g, "@font-face {\nfont-display: swap;")
+  );
   console.log("Downloaded new fonts pack");
 }
 export {

package/lib/templates/stateful-page.js

@@ -2,7 +2,7 @@ import { curryImportPath } from "../utils/import-path.js";
 async function statefulPageTemplate(action_name, newfilefullpath) {
   const rel = curryImportPath(newfilefullpath);
   return `import { TempstreamJSX, Templatable } from "tempstream";
-import { BaseContext } from "koa";
+import { Context } from "koa";
 import { StatefulPage } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
@@ -34,11 +34,11 @@ export default new (class ${action_name}Page extends StatefulPage<State, typeof
 		return { elements: ["one", "two", "three"] };
 	}
 
-	wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
+	wrapInLayout(ctx: Context, content: Templatable): Templatable {
 		return html(ctx, "${action_name}", content);
 	}
 
-	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
+	render(ctx: Context, state: State, inputs: Record<string, string>) {
 		return (
 			<div>
 				<ul>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.16.1-beta3",
+	"version": "0.16.2",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/builder.ts

@@ -1,5 +1,6 @@
 import { build } from "esbuild";
 import glob from "tiny-glob";
+import { promises as fs } from "fs";
 import { embeddable_file_extensions } from "./embeddable-file-extensions.js";
 import { load_assets_plugin } from "./esbuild-plugins/load-assets.js";
 import { rewrite_asset_imports_plugin } from "./esbuild-plugins/rewrite-asset-imports.js";
@@ -8,6 +9,7 @@ import { generateComponents } from "./generate-components.js";
 import { generateRoutes } from "./generate-routes.js";
 import { generateStimulusControllers } from "./generate-stimulus.js";
 import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
+import { relative } from "node:path";
 
 export abstract class Builder {
 	abstract ownsFile(file_path: string): boolean;
@@ -84,7 +86,7 @@ export class BackendTSBuilder extends Builder {
 				)}}`
 			)
 		).filter((path) => !path.includes(".#"));
-		await build({
+		const { metafile } = await build({
 			entryPoints,
 			sourcemap: true,
 			bundle: false,
@@ -99,7 +101,13 @@ export class BackendTSBuilder extends Builder {
 				embeddable_file_extensions.map((ext) => ["." + ext, "js"])
 			),
 			plugins: [rewrite_asset_imports_plugin, load_assets_plugin],
+			metafile: true,
 		});
+
+		await fs.writeFile(
+			relative(this.project_dir, "dist") + "/" + "back" + ".meta.json",
+			JSON.stringify(metafile)
+		);
 	}
 }
 
@@ -120,13 +128,19 @@ export class FrontendTSBuilder extends Builder {
 
 	async _build(): Promise<void> {
 		await generateStimulusControllers();
-		await build({
+		const { metafile } = await build({
 			entryPoints: ["./src/front/index.ts"],
 			sourcemap: true,
 			outfile: "./public/dist/bundle.js",
 			logLevel: "info",
 			bundle: true,
 			minify: true,
+			metafile: true,
+			treeShaking: true,
 		});
+		await fs.writeFile(
+			relative(this.project_dir, "dist") + "/" + "front" + ".meta.json",
+			JSON.stringify(metafile)
+		);
 	}
 }

package/src/forms/form.test.ts

@@ -1,6 +1,6 @@
 import Router from "@koa/router";
 import axios from "axios";
-import Koa, { BaseContext } from "koa";
+import Koa, { Context } from "koa";
 import { Page } from "playwright";
 import { Controls, Fields, Form, Mountable } from "../index.js";
 import { mount } from "../mount.js";
@@ -205,7 +205,7 @@ describe("form test", () => {
 			const app = new Koa();
 			const router = new Router();
 
-			router.use(async (ctx: BaseContext, next: any) => {
+			router.use(async (ctx: Context, next: any) => {
 				ctx.$context = {
 					user_id: "miguel",
 				} as any;

package/src/get-fonts.ts

@@ -1,5 +1,6 @@
-import { readFile } from "fs/promises";
+import { readFile, writeFile } from "fs/promises";
 import { constructURL, download } from "google-fonts-helper";
+import { resolve } from "node:path";
 import { target_locreq } from "./target-locreq.js";
 
 export const FONTS_CONFIG_PATH = "src/fonts.json";
@@ -23,5 +24,15 @@ export async function getFonts(_: Record<string, string | boolean> = {}) {
 		fontsPath: "/dist/fonts",
 	});
 	await downloader.execute();
+	const fonts_css_file_path = resolve(
+		target_locreq.resolve("public/dist/fonts"),
+		"fonts.css"
+	);
+	const content = await readFile(fonts_css_file_path, "utf-8");
+	await writeFile(
+		fonts_css_file_path,
+		content.replace(/@font-face {/g, "@font-face {\nfont-display: swap;")
+	);
+
 	console.log("Downloaded new fonts pack");
 }

package/src/mount.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import Router from "@koa/router";
 import { FileManager } from "@sealcode/file-manager";
-import Koa, { BaseContext, Context } from "koa";
+import Koa, { Context } from "koa";
 import { Middlewares as SealiousMiddlewares } from "sealious";
 import { Mountable } from "./page/mountable.js";
 
@@ -26,7 +26,7 @@ export function mount(
 	const raw_url = typeof url === "string" ? url : url.rawURL;
 	const args = use_dummy_app
 		? [
-				async (ctx: BaseContext, next: any) => {
+				async (ctx: Context, next: any) => {
 					// this dummy is a temporary solution it's ilustrating the ways that
 					// sealgen is coupled with sealious. Definitely room for improvement in this
 					// regard

package/src/page/stateful-page.test.ts

@@ -1,4 +1,4 @@
-import { BaseContext } from "koa";
+import { Context } from "koa";
 import { Templatable, tempstream } from "tempstream";
 import {
 	ExtractStatefulPageActionArgs,
@@ -22,15 +22,15 @@ describe("stateful page", () => {
 		new (class extends StatefulPage<TestState, typeof actions> {
 			actions = actions;
 
-			getInitialState(_ctx: BaseContext) {
+			getInitialState(_ctx: Context) {
 				return {};
 			}
 
-			wrapInLayout(_ctx: BaseContext, content: Templatable, _state: TestState): Templatable {
+			wrapInLayout(_ctx: Context, content: Templatable, _state: TestState): Templatable {
 				return content;
 			}
 
-			render(_ctx: BaseContext, state: TestState) {
+			render(_ctx: Context, state: TestState) {
 				return tempstream`<div>${this.makeActionButton(state, "some_action", 2)}</div>`;
 			}
 		})();

package/src/page/stateful-page.ts

@@ -2,7 +2,7 @@
 import Router from "@koa/router";
 import { predicates, hasShape, is } from "@sealcode/ts-predicates";
 import deepmerge, { ArrayMergeOptions } from "deepmerge";
-import { BaseContext, Context } from "koa";
+import { Context } from "koa";
 import { Templatable, tempstream } from "tempstream";
 import { from_base64, to_base64 } from "../utils/base64.js";
 import { Mountable } from "./mountable.js";
@@ -34,13 +34,17 @@ export type StateAndMetadata<State, Actions> =
 
 export type StatefulPageActionArgument<
 	State extends Record<string, unknown>,
-	Args extends unknown[] = unknown[]
+	Args extends unknown[] = unknown[],
+	Page extends StatefulPage<Record<string, unknown>, any> = StatefulPage<
+		any,
+		any
+	>
 > = {
-	ctx: BaseContext;
+	ctx: Context;
 	state: State;
 	inputs: Record<string, string>;
 	args: Args;
-	page: StatefulPage<any, any>;
+	page: Page;
 };
 
 export type StatefulPageAction<
@@ -60,9 +64,9 @@ export abstract class StatefulPage<
 	Actions extends Record<string, StatefulPageAction<State>>
 > extends Mountable {
 	abstract actions: Actions;
-	abstract getInitialState(ctx: BaseContext): State | Promise<State>;
+	abstract getInitialState(ctx: Context): State | Promise<State>;
 	abstract render(
-		ctx: BaseContext,
+		ctx: Context,
 		state: State,
 		inputs: Record<string, string>
 	): Templatable | Promise<Templatable>;
@@ -75,14 +79,14 @@ export abstract class StatefulPage<
 		super();
 		const original_render = this.render.bind(this) as typeof this.render;
 		this.render = async (
-			ctx: BaseContext,
+			ctx: Context,
 			state: State,
 			inputs: Record<string, string>
 		) => {
 			return this.wrapInLayout(
 				ctx,
 				await this.wrapInForm(
-					ctx as Context,
+					ctx,
 					state,
 					await original_render(ctx, state, inputs)
 				),
@@ -92,7 +96,7 @@ export abstract class StatefulPage<
 	}
 
 	abstract wrapInLayout(
-		ctx: BaseContext,
+		ctx: Context,
 		content: Templatable,
 		state: State
 	): Templatable;
@@ -189,24 +193,24 @@ export abstract class StatefulPage<
 	}
 
 	async preprocessOverrides(
-		_context: BaseContext,
+		_context: Context,
 		_state: State,
 		values: Record<string, unknown>
 	): Promise<Record<string, unknown>> {
 		return values;
 	}
 
-	async serializeState(_context: BaseContext, state: State): Promise<string> {
+	async serializeState(_context: Context, state: State): Promise<string> {
 		return JSON.stringify(state);
 	}
 
-	async deserializeState(_context: BaseContext, s: string): Promise<State> {
+	async deserializeState(_context: Context, s: string): Promise<State> {
 		const deserialized = JSON.parse(s) as unknown;
 		return deserialized as State;
 	}
 
 	async extractState(
-		ctx: BaseContext
+		ctx: Context
 	): Promise<StateAndMetadata<State, Actions>> {
 		if (
 			!hasShape(

package/src/templates/stateful-page.ts

@@ -6,7 +6,7 @@ export async function statefulPageTemplate(
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { TempstreamJSX, Templatable } from "tempstream";
-import { BaseContext } from "koa";
+import { Context } from "koa";
 import { StatefulPage } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
@@ -38,11 +38,11 @@ export default new (class ${action_name}Page extends StatefulPage<State, typeof
 		return { elements: ["one", "two", "three"] };
 	}
 
-	wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
+	wrapInLayout(ctx: Context, content: Templatable): Templatable {
 		return html(ctx, "${action_name}", content);
 	}
 
-	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
+	render(ctx: Context, state: State, inputs: Record<string, string>) {
 		return (
 			<div>
 				<ul>