@sealcode/sealgen 0.12.13 → 0.14.0

package/@types/src/forms/controls/array.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" resolution-mode="require"/>
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { Field, FieldsetOutput } from "sealious";

package/@types/src/forms/controls/derived-frame.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 /// <reference types="node" resolution-mode="require"/>
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { ParsedUrlQuery } from "querystring";

package/@types/src/forms/controls/form-control.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";

package/@types/src/forms/controls/multiple-files.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 /// <reference types="node" resolution-mode="require"/>
 import Router from "@koa/router";
-import Sealious from "sealious";
+import { CollectionItem, File as SealiousFile, Field as SealiousField, Collection } from "sealious";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
@@ -10,7 +10,7 @@ import { FormControlContext } from "./form-control.js";
 export type MultipleFilesOptions = {
     label?: string;
     uploadLabel?: string;
-    getAdditionalFields: (ctx: Context, file: Sealious.File) => Promise<Record<string, unknown>>;
+    getAdditionalFields: (ctx: Context, file: SealiousFile) => Promise<Record<string, unknown>>;
 };
 export declare class MultipleFiles extends FormFieldControl {
     field: MultipleFilesField;
@@ -19,18 +19,18 @@ export declare class MultipleFiles extends FormFieldControl {
     getClassModifiers(): string[];
     mount(router: Router): void;
     deleteFileAssociation(ctx: Context, file_item_id: string): Promise<void>;
-    addFileAssociation(ctx: Context, file: Sealious.File): Promise<void>;
+    addFileAssociation(ctx: Context, file: SealiousFile): Promise<void>;
     getFrameRelativeURL(): string;
     getFrameID(): string;
     renderFrame(ctx: Context, content?: FlatTemplatable): import("stream").Readable;
     render(fctx: FormControlContext): FlatTemplatable | Promise<FlatTemplatable>;
-    getReferencingCollection(): Sealious.Collection;
-    getFileField(): Sealious.Field | null;
-    extractFileFromItem(item: Sealious.CollectionItem): Promise<Sealious.File | null>;
-    renderFileItemPreview(_fileItem: Sealious.CollectionItem, file: Sealious.File): Promise<FlatTemplatable>;
-    renderFileItem(fileItem: Sealious.CollectionItem, file: Sealious.File): Promise<FlatTemplatable>;
-    renderFileRemoveButton(fileItem: Sealious.CollectionItem): FlatTemplatable;
-    getFileItems(ctx: Context): Promise<Sealious.CollectionItem<any>[]>;
+    getReferencingCollection(): Collection;
+    getFileField(): SealiousField | null;
+    extractFileFromItem(item: CollectionItem): Promise<SealiousFile | null>;
+    renderFileItemPreview(_fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    renderFileItem(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable;
+    getFileItems(ctx: Context): Promise<CollectionItem<any>[]>;
     getInputAttributes(): {
         type: string;
         name: string;

package/@types/src/forms/fields/file.d.ts

@@ -1,14 +1,14 @@
 import { Context } from "koa";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 export type FileContainer = {
-    old: Sealious.File | null;
-    new: Sealious.File | null;
+    old: SealiousFile | null;
+    new: SealiousFile | null;
 };
 export declare class File<Required extends boolean> extends FormField<Required, FileContainer> {
     parse(ctx: Context, raw_value: FormDataValue): Promise<FieldParseResult<FileContainer>>;
-    getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>): Promise<Sealious.File | undefined>;
+    getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>): Promise<SealiousFile | undefined>;
     getEmptyValue(): {
         old: null;
         new: null;

package/@types/src/forms/form.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import { Context } from "koa";
 import Router from "@koa/router";
 import { FlatTemplatable } from "tempstream";

package/@types/src/forms/multiform.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";

package/@types/src/index.d.ts

@@ -1,8 +1,8 @@
-import Sealious, { App } from "sealious";
+import { App, Context as SealiousContext } from "sealious";
 import { FormDataValue } from "./forms/form-types.js";
 declare module "koa" {
     interface BaseContext {
-        $context: Sealious.Context;
+        $context: SealiousContext;
         $app: App;
         $body: Record<string, FormDataValue>;
     }

package/@types/src/mount.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Mountable } from "./page/mountable.js";
 export declare function mount(router: Router, url: string | {

package/@types/src/page/mountable.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 export declare abstract class Mountable {

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

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";

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

@@ -1,4 +1,4 @@
-/// <reference types="koa__router" resolution-mode="require"/>
+/// <reference types="koa__router" />
 import Router from "@koa/router";
 import { BaseContext } from "koa";
 import { Templatable } from "tempstream";
@@ -8,9 +8,21 @@ export type StatefulPageActionDescription<ActionName> = {
     action: ActionName;
     label?: string;
 } | ActionName;
-export declare abstract class StatefulPage<State extends Record<string, unknown>, Actions extends Record<string, (state: State, inputs: Record<string, string>, ...args: unknown[]) => State>> extends Mountable {
+export type StateAndMetadata<State, Actions> = {
+    state: State;
+    inputs: Record<string, string>;
+    action: keyof Actions;
+    action_args: string;
+} | {
+    state: State;
+    inputs: Record<string, string>;
+    action: null;
+    action_args: null;
+    $: Record<string, unknown>;
+};
+export declare abstract class StatefulPage<State extends Record<string, unknown>, Actions extends Record<string, (state: State, inputs: Record<string, string>, ...args: unknown[]) => State | Promise<State>>> extends Mountable {
     abstract actions: Actions;
-    abstract getInitialState(): State;
+    abstract getInitialState(): State | Promise<State>;
     abstract render(ctx: BaseContext, state: State, inputs: Record<string, string>): Templatable | Promise<Templatable>;
     canAccess(): Promise<{
         readonly canAccess: true;
@@ -24,22 +36,13 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
         label: string;
     };
     makeActionURL<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
-    makeActionButton<ActionName extends keyof Actions>(state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
+    makeActionButton<ActionName extends keyof Actions>(_state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     makeActionCallback<ActionName extends keyof Actions>(action_description: {
         action: ActionName;
         label?: string;
     } | ActionName, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     rerender(): string;
-    extractState(ctx: BaseContext): {
-        state: State;
-        inputs: Record<string, string>;
-        action: keyof Actions;
-        action_args: string;
-    } | {
-        state: State;
-        inputs: Record<string, string>;
-        action: null;
-        action_args: null;
-    };
+    preprocessRequestBody(values: Record<string, unknown>): Promise<StateAndMetadata<State, Actions>>;
+    extractState(ctx: BaseContext): Promise<StateAndMetadata<State, Actions>>;
     mount(router: Router, path: string): void;
 }

package/dist/forms/controls/multiple-files.js

@@ -1,4 +1,6 @@
-import Sealious from "sealious";
+import {
+  File as SealiousFile
+} from "sealious";
 import { inputWrapper } from "../../utils/input-wrapper.js";
 import { tempstream } from "tempstream";
 import { FormFieldControl } from "./form-field-control.js";
@@ -105,7 +107,7 @@ class MultipleFiles extends FormFieldControl {
     if (!sealious_field) {
       return null;
     }
-    return await Sealious.File.fromID(
+    return await SealiousFile.fromID(
       item.collection.app,
       item.get(sealious_field.name).id
     );

package/dist/forms/controls/photo.js

@@ -1,6 +1,6 @@
 import { tempstream } from "tempstream";
 import { File } from "./file.js";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 class Photo extends File {
   constructor(field, imageRouter, options) {
     super(field, options);
@@ -20,7 +20,7 @@ class Photo extends File {
     if (!id) {
       return empty_container;
     }
-    const file = await Sealious.File.fromID(ctx.$app, id);
+    const file = await SealiousFile.fromID(ctx.$app, id);
     return tempstream`<div class="${class_name}">
 			${this.imageRouter.image({
       resolutions: [100],

package/dist/forms/fields/file.js

@@ -4,19 +4,19 @@ import {
   is,
   predicates
 } from "@sealcode/ts-predicates";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormField } from "./field.js";
 class File extends FormField {
   async parse(ctx, raw_value) {
     let result;
-    if (raw_value instanceof Sealious.File || is(raw_value, predicates.object) && hasShape(
+    if (raw_value instanceof SealiousFile || is(raw_value, predicates.object) && hasShape(
       {
         filename: predicates.string,
         id: predicates.string
       },
       raw_value
     ) && raw_value.id) {
-      const file = await Sealious.File.fromID(
+      const file = await SealiousFile.fromID(
         ctx.$app,
         raw_value.id
       );
@@ -35,12 +35,12 @@ class File extends FormField {
       const old_file = hasFieldOfType(raw_value, "old", predicates.object) && hasShape(
         { id: predicates.string, filename: predicates.string },
         raw_value.old
-      ) && raw_value.old.id ? await Sealious.File.fromID(ctx.$app, raw_value.old.id) : null;
+      ) && raw_value.old.id ? await SealiousFile.fromID(ctx.$app, raw_value.old.id) : null;
       const new_file = hasFieldOfType(
         raw_value,
         "new",
         predicates.array(predicates.object)
-      ) && raw_value.new[0] instanceof Sealious.File ? raw_value.new[0] : null;
+      ) && raw_value.new[0] instanceof SealiousFile ? raw_value.new[0] : null;
       result = {
         parsable: true,
         error: null,

package/dist/mount.js

@@ -1,4 +1,4 @@
-import Sealious from "sealious";
+import { Middlewares as SealiousMiddlewares } from "sealious";
 async function handleHtmlPromise(ctx, next) {
   await next();
   if (ctx.body instanceof Promise) {
@@ -31,11 +31,11 @@ function mount(router, url, mountable, use_dummy_app = false) {
       };
       await next();
     },
-    Sealious.Middlewares.parseBody(),
+    SealiousMiddlewares.parseBody(),
     handleHtmlPromise
   ] : [
-    Sealious.Middlewares.extractContext(),
-    Sealious.Middlewares.parseBody(),
+    SealiousMiddlewares.extractContext(),
+    SealiousMiddlewares.parseBody(),
     handleHtmlPromise
   ];
   router.use(raw_url, ...args);

package/dist/page/stateful-page.js

@@ -1,4 +1,4 @@
-import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import { predicates, hasShape, is, hasField } from "@sealcode/ts-predicates";
 import deepmerge from "deepmerge";
 import { tempstream } from "tempstream";
 import { from_base64, to_base64 } from "../utils/base64.js";
@@ -43,16 +43,18 @@ class StatefulPage extends Mountable {
   }
   makeActionURL(action_description, ...args) {
     const { action } = this.extractActionAndLabel(action_description);
-    return `./?action=${action}&args=${to_base64(JSON.stringify(args))}`;
+    return `./?action=${action}&action_args=${to_base64(
+      JSON.stringify(args)
+    )}`;
   }
-  makeActionButton(state, action_description, ...args) {
+  makeActionButton(_state, action_description, ...args) {
     const { label } = this.extractActionAndLabel(action_description);
     return (
       /* HTML */
       `
 			<input
 				type="submit"
-				value=${label}
+				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
 			/>
 		`
@@ -67,12 +69,15 @@ class StatefulPage extends Mountable {
   rerender() {
     return "this.closest('form').requestSubmit()";
   }
-  extractState(ctx) {
+  async preprocessRequestBody(values) {
+    return values;
+  }
+  async extractState(ctx) {
     if (!hasShape(
       {
         action: predicates.maybe(predicates.string),
         state: predicates.string,
-        args: predicates.maybe(predicates.string),
+        action_args: predicates.maybe(predicates.string),
         $: predicates.maybe(predicates.object)
       },
       ctx.$body
@@ -80,43 +85,52 @@ class StatefulPage extends Mountable {
       console.error("Wrong data: ", ctx.$body);
       throw new Error("wrong formdata shape");
     }
+    const prepared_body = await this.preprocessRequestBody(ctx.$body);
     const inputs = Object.fromEntries(
-      Object.entries(ctx.$body).filter(
+      Object.entries(prepared_body).filter(
         ([key]) => !["action", "state", "args", "$"].includes(key)
       )
     );
-    const original_state = JSON.parse(from_base64(ctx.$body.state));
-    const modified_state = deepmerge(original_state, ctx.$body.$ || {}, {
-      arrayMerge: (_target, source, _options) => {
-        return source;
+    const original_state_string = prepared_body.state;
+    const original_state = JSON.parse(
+      typeof original_state_string == "string" ? from_base64(original_state_string) : "{}"
+    );
+    const modified_state = deepmerge(
+      original_state,
+      hasField("$", prepared_body) ? prepared_body.$ : {},
+      {
+        arrayMerge: (_target, source, _options) => {
+          return source;
+        }
       }
-    });
-    if (ctx.$body.action && ctx.$body.args) {
+    );
+    if (prepared_body.action && prepared_body.action_args) {
       return {
         state: modified_state,
-        action: ctx.$body.action,
+        action: prepared_body.action,
         inputs,
-        action_args: ctx.$body.args
+        action_args: prepared_body.action_args
       };
     } else {
       return {
         state: modified_state,
         action: null,
+        inputs,
         action_args: null,
-        inputs
+        $: hasField("$", prepared_body) ? prepared_body.$ : {}
       };
     }
   }
   mount(router, path) {
-    router.get(path, (ctx) => {
-      ctx.body = this.render(ctx, this.getInitialState(), {});
+    router.get(path, async (ctx) => {
+      ctx.body = this.render(ctx, await this.getInitialState(), {});
     });
-    router.post(path, (ctx) => {
-      const { action, state, inputs, action_args } = this.extractState(ctx);
+    router.post(path, async (ctx) => {
+      const { action, state, inputs, action_args } = await this.extractState(ctx);
       if (action) {
         ctx.body = this.render(
           ctx,
-          this.actions[action](
+          await this.actions[action](
             state,
             inputs,
             ...JSON.parse(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.12.13",
+	"version": "0.14.0",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",
@@ -71,6 +71,6 @@
 	"peerDependencies": {
 		"koa": "^2.13.0",
 		"koa-responsive-image-router": "^0.2.6",
-		"sealious": "^0.17.50"
+		"sealious": "^0.18.0"
 	}
 }

package/src/forms/controls/multiple-files.ts

@@ -1,5 +1,10 @@
 import Router from "@koa/router";
-import Sealious from "sealious";
+import {
+	CollectionItem,
+	File as SealiousFile,
+	Field as SealiousField,
+	Collection,
+} from "sealious";
 import { Context } from "koa";
 import { inputWrapper } from "../../utils/input-wrapper.js";
 import { FlatTemplatable, tempstream } from "tempstream";
@@ -14,7 +19,7 @@ export type MultipleFilesOptions = {
 	uploadLabel?: string;
 	getAdditionalFields: (
 		ctx: Context,
-		file: Sealious.File
+		file: SealiousFile
 	) => Promise<Record<string, unknown>>;
 };
 
@@ -52,7 +57,7 @@ export class MultipleFiles extends FormFieldControl {
 		);
 
 		router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
-			let files = ctx.$body.files as Sealious.File | Sealious.File[];
+			let files = ctx.$body.files as SealiousFile | SealiousFile[];
 			if (!files || !is(files, predicates.object)) {
 				ctx.body = "Missing files";
 				return;
@@ -64,7 +69,7 @@ export class MultipleFiles extends FormFieldControl {
 				files.map((file) =>
 					this.addFileAssociation(
 						ctx,
-						file as unknown as Sealious.File
+						file as unknown as SealiousFile
 					)
 				)
 			);
@@ -81,7 +86,7 @@ export class MultipleFiles extends FormFieldControl {
 		].removeByID(ctx.$context, file_item_id);
 	}
 
-	async addFileAssociation(ctx: Context, file: Sealious.File) {
+	async addFileAssociation(ctx: Context, file: SealiousFile) {
 		const file_field = this.getFileField();
 		if (!file_field) {
 			throw new Error("No file field in referencing collection");
@@ -130,7 +135,7 @@ export class MultipleFiles extends FormFieldControl {
 		return result;
 	}
 
-	getFileField(): Sealious.Field | null {
+	getFileField(): SealiousField | null {
 		for (const [_, field] of Object.entries(
 			this.getReferencingCollection().fields
 		)) {
@@ -142,28 +147,28 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	async extractFileFromItem(
-		item: Sealious.CollectionItem
-	): Promise<Sealious.File | null> {
+		item: CollectionItem
+	): Promise<SealiousFile | null> {
 		const sealious_field = this.getFileField();
 		if (!sealious_field) {
 			return null;
 		}
-		return await Sealious.File.fromID(
-			(item.collection as Sealious.Collection).app,
+		return await SealiousFile.fromID(
+			(item.collection as Collection).app,
 			item.get(sealious_field.name).id
 		);
 	}
 
 	async renderFileItemPreview(
-		_fileItem: Sealious.CollectionItem,
-		file: Sealious.File
+		_fileItem: CollectionItem,
+		file: SealiousFile
 	): Promise<FlatTemplatable> {
 		return file.filename || "no filename";
 	}
 
 	async renderFileItem(
-		fileItem: Sealious.CollectionItem,
-		file: Sealious.File
+		fileItem: CollectionItem,
+		file: SealiousFile
 	): Promise<FlatTemplatable> {
 		return tempstream/* HTML */ `<li class="file-list-item">
 			<a
@@ -177,7 +182,7 @@ export class MultipleFiles extends FormFieldControl {
 		</li>`;
 	}
 
-	renderFileRemoveButton(fileItem: Sealious.CollectionItem): FlatTemplatable {
+	renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable {
 		return /* HTML */ ` <form
 			data-turbo-frame="${this.getFrameID()}"
 			action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
@@ -221,10 +226,7 @@ export class MultipleFiles extends FormFieldControl {
 						await this.extractFileFromItem(item),
 					])
 			)
-		).filter(([_, f]) => f !== null) as [
-			Sealious.CollectionItem,
-			Sealious.File
-		][];
+		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
 
 		return inputWrapper(
 			["multiple-files", this.field.name, ...this.getClassModifiers()],

package/src/forms/controls/photo.ts

@@ -1,7 +1,7 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { File } from "./file.js";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormField } from "../fields/field.js";
 import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
@@ -34,7 +34,7 @@ export class Photo extends File {
 		if (!id) {
 			return empty_container;
 		}
-		const file = await Sealious.File.fromID(ctx.$app, id);
+		const file = await SealiousFile.fromID(ctx.$app, id);
 		return tempstream/* HTML */ `<div class="${class_name}">
 			${this.imageRouter.image({
 				resolutions: [100],

package/src/forms/fields/file.ts

@@ -5,13 +5,13 @@ import {
 	predicates,
 } from "@sealcode/ts-predicates";
 import { Context } from "koa";
-import Sealious from "sealious";
+import { File as SealiousFile } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 
 export type FileContainer = {
-	old: Sealious.File | null;
-	new: Sealious.File | null;
+	old: SealiousFile | null;
+	new: SealiousFile | null;
 };
 
 export class File<Required extends boolean> extends FormField<
@@ -24,7 +24,7 @@ export class File<Required extends boolean> extends FormField<
 	): Promise<FieldParseResult<FileContainer>> {
 		let result;
 		if (
-			raw_value instanceof Sealious.File ||
+			raw_value instanceof SealiousFile ||
 			(is(raw_value, predicates.object) &&
 				hasShape(
 					{
@@ -35,7 +35,7 @@ export class File<Required extends boolean> extends FormField<
 				) &&
 				raw_value.id)
 		) {
-			const file = await Sealious.File.fromID(
+			const file = await SealiousFile.fromID(
 				ctx.$app,
 				raw_value.id as string
 			);
@@ -58,14 +58,14 @@ export class File<Required extends boolean> extends FormField<
 					raw_value.old
 				) &&
 				raw_value.old.id
-					? await Sealious.File.fromID(ctx.$app, raw_value.old.id)
+					? await SealiousFile.fromID(ctx.$app, raw_value.old.id)
 					: null;
 			const new_file =
 				hasFieldOfType(
 					raw_value,
 					"new",
 					predicates.array(predicates.object)
-				) && raw_value.new[0] instanceof Sealious.File
+				) && raw_value.new[0] instanceof SealiousFile
 					? raw_value.new[0]
 					: null;
 			result = {

package/src/index.ts

@@ -1,9 +1,9 @@
-import Sealious, { App } from "sealious";
+import { App, Context as SealiousContext } from "sealious";
 import { FormDataValue } from "./forms/form-types.js";
 
 declare module "koa" {
 	interface BaseContext {
-		$context: Sealious.Context;
+		$context: SealiousContext;
 		$app: App;
 		$body: Record<string, FormDataValue>;
 	}

package/src/mount.ts

@@ -1,6 +1,6 @@
 import Router from "@koa/router";
 import Koa, { BaseContext, Context } from "koa";
-import Sealious from "sealious";
+import { Middlewares as SealiousMiddlewares } from "sealious";
 import { Mountable } from "./page/mountable.js";
 
 async function handleHtmlPromise(ctx: Context, next: Koa.Next) {
@@ -48,12 +48,12 @@ export function mount(
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 					await next();
 				},
-				Sealious.Middlewares.parseBody(),
+				SealiousMiddlewares.parseBody(),
 				handleHtmlPromise,
 		  ]
 		: [
-				Sealious.Middlewares.extractContext(),
-				Sealious.Middlewares.parseBody(),
+				SealiousMiddlewares.extractContext(),
+				SealiousMiddlewares.parseBody(),
 				handleHtmlPromise,
 		  ];
 

package/src/page/stateful-page.ts

@@ -1,5 +1,5 @@
 import Router from "@koa/router";
-import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import { predicates, hasShape, is, hasField } from "@sealcode/ts-predicates";
 import deepmerge, { ArrayMergeOptions } from "deepmerge";
 import { BaseContext } from "koa";
 import { Templatable, tempstream } from "tempstream";
@@ -14,6 +14,21 @@ export type StatefulPageActionDescription<ActionName> =
 	  }
 	| ActionName;
 
+export type StateAndMetadata<State, Actions> =
+	| {
+			state: State;
+			inputs: Record<string, string>;
+			action: keyof Actions;
+			action_args: string;
+	  }
+	| {
+			state: State;
+			inputs: Record<string, string>;
+			action: null;
+			action_args: null;
+			$: Record<string, unknown>;
+	  };
+
 export abstract class StatefulPage<
 	State extends Record<string, unknown>,
 	Actions extends Record<
@@ -22,11 +37,11 @@ export abstract class StatefulPage<
 			state: State,
 			inputs: Record<string, string>,
 			...args: unknown[]
-		) => State
+		) => State | Promise<State>
 	>
 > extends Mountable {
 	abstract actions: Actions;
-	abstract getInitialState(): State;
+	abstract getInitialState(): State | Promise<State>;
 	abstract render(
 		ctx: BaseContext,
 		state: State,
@@ -87,11 +102,13 @@ export abstract class StatefulPage<
 		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
 	) {
 		const { action } = this.extractActionAndLabel(action_description);
-		return `./?action=${action}&args=${to_base64(JSON.stringify(args))}`;
+		return `./?action=${action}&action_args=${to_base64(
+			JSON.stringify(args)
+		)}`;
 	}
 
 	makeActionButton<ActionName extends keyof Actions>(
-		state: State,
+		_state: State,
 		action_description: StatefulPageActionDescription<ActionName>,
 		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
 	) {
@@ -99,7 +116,7 @@ export abstract class StatefulPage<
 		return /* HTML */ `
 			<input
 				type="submit"
-				value=${label}
+				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
 			/>
 		`;
@@ -124,25 +141,21 @@ export abstract class StatefulPage<
 		return "this.closest('form').requestSubmit()";
 	}
 
-	extractState(ctx: BaseContext):
-		| {
-				state: State;
-				inputs: Record<string, string>;
-				action: keyof Actions;
-				action_args: string;
-		  }
-		| {
-				state: State;
-				inputs: Record<string, string>;
-				action: null;
-				action_args: null;
-		  } {
+	async preprocessRequestBody(
+		values: Record<string, unknown>
+	): Promise<StateAndMetadata<State, Actions>> {
+		return values as StateAndMetadata<State, Actions>;
+	}
+
+	async extractState(
+		ctx: BaseContext
+	): Promise<StateAndMetadata<State, Actions>> {
 		if (
 			!hasShape(
 				{
 					action: predicates.maybe(predicates.string),
 					state: predicates.string,
-					args: predicates.maybe(predicates.string),
+					action_args: predicates.maybe(predicates.string),
 					$: predicates.maybe(predicates.object),
 				},
 				ctx.$body
@@ -151,55 +164,67 @@ export abstract class StatefulPage<
 			console.error("Wrong data: ", ctx.$body);
 			throw new Error("wrong formdata shape");
 		}
+		// giving extending classes a change to modify body before furhter processing
+		const prepared_body = await this.preprocessRequestBody(ctx.$body);
 		const inputs = Object.fromEntries(
-			Object.entries(ctx.$body).filter(
+			Object.entries(prepared_body).filter(
 				([key]) => !["action", "state", "args", "$"].includes(key)
 			)
 		) as Record<string, string>;
 		// the "$" key is parsed as dot notation and overrides the state
 
-		const original_state = JSON.parse(from_base64(ctx.$body.state));
-
-		const modified_state = deepmerge(original_state, ctx.$body.$ || {}, {
-			arrayMerge: (
-				_target: any[],
-				source: any[],
-				_options: ArrayMergeOptions
-			) => {
-				// https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
-				return source;
-			},
-		}) as State;
+		const original_state_string = prepared_body.state;
+		const original_state = JSON.parse(
+			typeof original_state_string == "string"
+				? from_base64(original_state_string)
+				: "{}"
+		);
+
+		const modified_state = deepmerge(
+			original_state,
+			hasField("$", prepared_body) ? prepared_body.$ : {},
+			{
+				arrayMerge: (
+					_target: any[],
+					source: any[],
+					_options: ArrayMergeOptions
+				) => {
+					// https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
+					return source;
+				},
+			}
+		) as State;
 
-		if (ctx.$body.action && ctx.$body.args) {
+		if (prepared_body.action && prepared_body.action_args) {
 			return {
 				state: modified_state,
-				action: ctx.$body.action as string,
+				action: prepared_body.action as string,
 				inputs,
-				action_args: ctx.$body.args,
+				action_args: prepared_body.action_args,
 			};
 		} else {
 			return {
 				state: modified_state,
 				action: null,
-				action_args: null,
 				inputs,
+				action_args: null,
+				$: hasField("$", prepared_body) ? prepared_body.$ : {},
 			};
 		}
 	}
 
 	mount(router: Router, path: string) {
-		router.get(path, (ctx) => {
-			ctx.body = this.render(ctx, this.getInitialState(), {});
+		router.get(path, async (ctx) => {
+			ctx.body = this.render(ctx, await this.getInitialState(), {});
 		});
 
-		router.post(path, (ctx) => {
+		router.post(path, async (ctx) => {
 			const { action, state, inputs, action_args } =
-				this.extractState(ctx);
+				await this.extractState(ctx);
 			if (action) {
 				ctx.body = this.render(
 					ctx,
-					this.actions[action](
+					await this.actions[action](
 						state,
 						inputs,
 						...(JSON.parse(