@sealcode/sealgen 0.12.13 → 0.13.0

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

@@ -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/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.13.0",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",

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(