@sealcode/sealgen 0.14.0 → 0.14.1

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

@@ -7,6 +7,7 @@ import { Mountable } from "./mountable.js";
 export type StatefulPageActionDescription<ActionName> = {
     action: ActionName;
     label?: string;
+    content?: string;
 } | ActionName;
 export type StateAndMetadata<State, Actions> = {
     state: State;
@@ -34,6 +35,7 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
     extractActionAndLabel<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>): {
         action: string;
         label: string;
+        content: 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;
@@ -42,7 +44,8 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
         label?: string;
     } | ActionName, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     rerender(): string;
-    preprocessRequestBody(values: Record<string, unknown>): Promise<StateAndMetadata<State, Actions>>;
+    preprocessState(values: State): Promise<State>;
+    preprocessOverrides(state: State, values: Record<string, unknown>): Promise<Record<string, unknown>>;
     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, hasField } from "@sealcode/ts-predicates";
+import { predicates, hasShape, is } from "@sealcode/ts-predicates";
 import deepmerge from "deepmerge";
 import { tempstream } from "tempstream";
 import { from_base64, to_base64 } from "../utils/base64.js";
@@ -31,15 +31,17 @@ class StatefulPage extends Mountable {
 		</form>`;
   }
   extractActionAndLabel(action_description) {
-    let label, action;
+    let label, action, content;
     if (is(action_description, predicates.object)) {
       action = action_description.action.toString();
       label = action_description.label || action;
+      content = action_description.content || label;
     } else {
       action = action_description.toString();
       label = action;
+      content = label;
     }
-    return { action, label };
+    return { action, label, content };
   }
   makeActionURL(action_description, ...args) {
     const { action } = this.extractActionAndLabel(action_description);
@@ -48,15 +50,17 @@ class StatefulPage extends Mountable {
     )}`;
   }
   makeActionButton(_state, action_description, ...args) {
-    const { label } = this.extractActionAndLabel(action_description);
+    let { label, content } = this.extractActionAndLabel(action_description);
     return (
       /* HTML */
       `
-			<input
+			<button
 				type="submit"
-				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
-			/>
+				title="${label}"
+			>
+				${content}
+			</button>
 		`
     );
   }
@@ -69,7 +73,10 @@ class StatefulPage extends Mountable {
   rerender() {
     return "this.closest('form').requestSubmit()";
   }
-  async preprocessRequestBody(values) {
+  async preprocessState(values) {
+    return values;
+  }
+  async preprocessOverrides(state, values) {
     return values;
   }
   async extractState(ctx) {
@@ -85,31 +92,50 @@ 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(prepared_body).filter(
+      Object.entries(ctx.$body).filter(
         ([key]) => !["action", "state", "args", "$"].includes(key)
       )
     );
-    const original_state_string = prepared_body.state;
+    const original_state_string = ctx.$body.state;
     const original_state = JSON.parse(
       typeof original_state_string == "string" ? from_base64(original_state_string) : "{}"
     );
-    const modified_state = deepmerge(
+    const $body = ctx.$body;
+    let state_overrides = $body.$ || {};
+    state_overrides = await this.preprocessOverrides(
       original_state,
-      hasField("$", prepared_body) ? prepared_body.$ : {},
-      {
-        arrayMerge: (_target, source, _options) => {
-          return source;
-        }
-      }
+      state_overrides
     );
-    if (prepared_body.action && prepared_body.action_args) {
+    let modified_state = deepmerge(original_state, state_overrides, {
+      arrayMerge: (target, source, options) => {
+        const destination = target.slice();
+        source.forEach((item, index) => {
+          if (typeof destination[index] === "undefined") {
+            destination[index] = options.cloneUnlessOtherwiseSpecified(
+              item,
+              options
+            );
+          } else if (options.isMergeableObject(item)) {
+            destination[index] = deepmerge(
+              target[index],
+              item,
+              options
+            );
+          } else if (target.indexOf(item) === -1) {
+            destination.push(item);
+          }
+        });
+        return destination;
+      }
+    });
+    modified_state = await this.preprocessState(modified_state);
+    if (ctx.$body.action && ctx.$body.action_args) {
       return {
         state: modified_state,
-        action: prepared_body.action,
+        action: ctx.$body.action,
         inputs,
-        action_args: prepared_body.action_args
+        action_args: ctx.$body.action_args
       };
     } else {
       return {
@@ -117,7 +143,7 @@ class StatefulPage extends Mountable {
         action: null,
         inputs,
         action_args: null,
-        $: hasField("$", prepared_body) ? prepared_body.$ : {}
+        $: ctx.$body.$ || {}
       };
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"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.18.0"
+		"sealious": "^0.18.1"
 	}
 }

package/src/page/stateful-page.ts

@@ -11,6 +11,7 @@ export type StatefulPageActionDescription<ActionName> =
 	| {
 			action: ActionName;
 			label?: string;
+			content?: string;
 	  }
 	| ActionName;
 
@@ -85,16 +86,18 @@ export abstract class StatefulPage<
 
 	extractActionAndLabel<ActionName extends keyof Actions>(
 		action_description: StatefulPageActionDescription<ActionName>
-	): { action: string; label: string } {
-		let label, action: string;
+	): { action: string; label: string; content: string } {
+		let label, action, content: string;
 		if (is(action_description, predicates.object)) {
 			action = action_description.action.toString();
 			label = action_description.label || action;
+			content = action_description.content || label;
 		} else {
 			action = action_description.toString();
 			label = action;
+			content = label;
 		}
-		return { action, label };
+		return { action, label, content };
 	}
 
 	makeActionURL<ActionName extends keyof Actions>(
@@ -112,13 +115,15 @@ export abstract class StatefulPage<
 		action_description: StatefulPageActionDescription<ActionName>,
 		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
 	) {
-		const { label } = this.extractActionAndLabel(action_description);
+		let { label, content } = this.extractActionAndLabel(action_description);
 		return /* HTML */ `
-			<input
+			<button
 				type="submit"
-				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
-			/>
+				title="${label}"
+			>
+				${content}
+			</button>
 		`;
 	}
 
@@ -141,10 +146,15 @@ export abstract class StatefulPage<
 		return "this.closest('form').requestSubmit()";
 	}
 
-	async preprocessRequestBody(
+	async preprocessState(values: State): Promise<State> {
+		return values;
+	}
+
+	async preprocessOverrides(
+		state: State,
 		values: Record<string, unknown>
-	): Promise<StateAndMetadata<State, Actions>> {
-		return values as StateAndMetadata<State, Actions>;
+	): Promise<Record<string, unknown>> {
+		return values;
 	}
 
 	async extractState(
@@ -164,43 +174,66 @@ 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(prepared_body).filter(
+			Object.entries(ctx.$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_string = prepared_body.state;
+		const original_state_string = ctx.$body.state;
 		const original_state = JSON.parse(
 			typeof original_state_string == "string"
 				? from_base64(original_state_string)
 				: "{}"
 		);
 
-		const modified_state = deepmerge(
+		const $body = ctx.$body;
+		let state_overrides = $body.$ || {};
+		state_overrides = await this.preprocessOverrides(
 			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;
+			state_overrides
+		);
+		let modified_state = deepmerge(original_state, state_overrides, {
+			arrayMerge: (
+				target: any[],
+				source: any[],
+				options: ArrayMergeOptions
+			) => {
+				// https://github.com/TehShrike/deepmerge?tab=readme-ov-file#arraymerge-example-combine-arrays
+				const destination = target.slice();
+
+				source.forEach((item, index) => {
+					if (typeof destination[index] === "undefined") {
+						destination[index] =
+							options.cloneUnlessOtherwiseSpecified(
+								item,
+								options
+							);
+					} else if (options.isMergeableObject(item)) {
+						destination[index] = deepmerge(
+							target[index],
+							item,
+							options
+						);
+					} else if (target.indexOf(item) === -1) {
+						destination.push(item);
+					}
+				});
+				return destination;
+			},
+		}) as State;
+
+		// giving extending classes a change to modify the state before furhter processing
+		modified_state = await this.preprocessState(modified_state);
 
-		if (prepared_body.action && prepared_body.action_args) {
+		if (ctx.$body.action && ctx.$body.action_args) {
 			return {
 				state: modified_state,
-				action: prepared_body.action as string,
+				action: ctx.$body.action as string,
 				inputs,
-				action_args: prepared_body.action_args,
+				action_args: ctx.$body.action_args,
 			};
 		} else {
 			return {
@@ -208,7 +241,7 @@ export abstract class StatefulPage<
 				action: null,
 				inputs,
 				action_args: null,
-				$: hasField("$", prepared_body) ? prepared_body.$ : {},
+				$: ctx.$body.$ || {},
 			};
 		}
 	}