@sealcode/sealgen 0.15.58 → 0.15.60

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

@@ -2,7 +2,6 @@
 import Router from "@koa/router";
 import { BaseContext, Context } from "koa";
 import { Templatable } from "tempstream";
-import { ExtractTail } from "../utils/utils.js";
 import { Mountable } from "./mountable.js";
 export type StatefulPageActionDescription<ActionName> = {
     action: ActionName;
@@ -22,7 +21,15 @@ export type StateAndMetadata<State, Actions> = {
     action_args: null;
     $: Record<string, unknown>;
 };
-export declare abstract class StatefulPage<State extends Record<string, unknown>, Actions extends Record<string, (ctx: BaseContext, state: State, inputs: Record<string, string>, ...args: unknown[]) => State | Promise<State>>> extends Mountable {
+export type StatefulPageActionArgument<State extends Record<string, unknown>, Args extends unknown[] = unknown[]> = {
+    ctx: BaseContext;
+    state: State;
+    inputs: Record<string, string>;
+    args: Args;
+};
+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>;
@@ -39,12 +46,12 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
         content: string;
         disabled: boolean;
     };
-    makeActionURL<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>>): string;
-    makeActionButton<ActionName extends keyof Actions>(_state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>>): string;
+    makeActionURL<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractStatefulPageActionArgs<Actions[ActionName]>): string;
+    makeActionButton<ActionName extends keyof Actions>(_state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractStatefulPageActionArgs<Actions[ActionName]>): string;
     makeActionCallback<ActionName extends keyof Actions>(action_description: {
         action: ActionName;
         label?: string;
-    } | ActionName, ...args: ExtractTail<ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>>): string;
+    } | 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>>;

package/lib/forms/controls/table.js

@@ -2,6 +2,7 @@ import { hasShape, is, predicates } from "@sealcode/ts-predicates";
 import qs from "qs";
 import { tempstream } from "tempstream";
 import { FormControl } from "./form-control.js";
+const TO_REPLACE = "____$$$$";
 class Table extends FormControl {
   constructor(table_field, options) {
     super();
@@ -24,7 +25,7 @@ class Table extends FormControl {
 				 ${Object.entries(this.table_field.columns).map(([key]) => {
           return tempstream`<td>${this.options.render_fields[key](
             fctx,
-            `${this.table_field.name}[][${key}]`,
+            `${this.table_field.name}[${row_index}][${key}]`,
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             row?.[key] || ""
           )}</td>`;
@@ -32,13 +33,19 @@ class Table extends FormControl {
 				 ${this.options.allow_removing ? (
           /* HTML */
           `<td>
-									<input
-										type="submit"
-										data-turbo-frame="${this.getFrameID()}"
-										value="${this.options.label_remove || "remove"}"
-										form="${fctx.form_id}"
-										formnovalidate
-										formaction="${this.getActionURL(
+									<button
+										onclick="this.closest('tr').remove()"
+									>
+										remove
+									</button>
+									<noscript>
+										<input
+											type="submit"
+											data-turbo-frame="${this.getFrameID()}"
+											value="${this.options.label_remove || "remove"}"
+											form="${fctx.form_id}"
+											formnovalidate
+											formaction="${this.getActionURL(
             this.table_field.name,
             {
               remove: {
@@ -46,7 +53,8 @@ class Table extends FormControl {
               }
             }
           )}"
-									/>
+										/>
+									</noscript>
 							  </td>`
         ) : ""}
 			 </tr>`
@@ -71,21 +79,29 @@ class Table extends FormControl {
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template> ${make_row(null, rows.length)} </template>
-				${this.options.allow_adding ? (
+				<template> ${make_row(null, TO_REPLACE)} </template>
+
+				${/* because of https://github.com/ljharb/qs/issues/252 we have to
+    put the indexes in the field names */
+    this.options.allow_adding ? (
       /* HTML */
       `<button
-								onclick="this.closest('turbo-frame').querySelector('tbody').appendChild(this.closest('turbo-frame').querySelector('template').cloneNode(true).content)"
-							>
-								add
-							</button>
-							<noscript>
-								<input
-									type="submit"
-									value="${this.options.label_add || "add"}"
-									form="${fctx.form_id}"
-									formnovalidate
-									formaction="${this.getActionURL(
+									onclick="const template = this.closest('turbo-frame').querySelector('template');
+ const tbody = this.closest('turbo-frame').querySelector('tbody');
+const orig_template = template.innerHTML;
+template.innerHTML = orig_template.replaceAll('${TO_REPLACE}', tbody.querySelectorAll('tr').length);
+ tbody.appendChild(template.cloneNode(true).content);
+template.innerHTML = orig_template;"
+								>
+									add
+								</button>
+								<noscript>
+									<input
+										type="submit"
+										value="${this.options.label_add || "add"}"
+										form="${fctx.form_id}"
+										formnovalidate
+										formaction="${this.getActionURL(
         this.table_field.name,
         {
           insert: {
@@ -94,8 +110,8 @@ class Table extends FormControl {
           }
         }
       )}"
-								/>
-							</noscript>`
+									/>
+								</noscript>`
     ) : ""}
 			</div>
 		</turbo-frame>`;

package/lib/page/stateful-page.js

@@ -176,14 +176,14 @@ class StatefulPage extends Mountable {
     router.post(path, async (ctx) => {
       const { action, state, inputs, action_args } = await this.extractState(ctx);
       if (action) {
-        const new_state = await this.actions[action](
+        const new_state = await this.actions[action]({
           ctx,
           state,
           inputs,
-          ...JSON.parse(
+          args: JSON.parse(
             from_base64(action_args)
           )
-        );
+        });
         ctx.body = this.render(ctx, new_state, inputs);
       } else {
         ctx.body = this.render(ctx, state, inputs);

package/lib/page/stateful-page.test.js

@@ -1,9 +1,16 @@
 import { tempstream } from "tempstream";
-import { StatefulPage } from "./stateful-page.js";
+import {
+  StatefulPage
+} from "./stateful-page.js";
 describe("stateful page", () => {
+  it("has types that allow for extracting action argument types", () => {
+    const action = async ({}) => {
+    };
+    const a = [2];
+  });
   it("handles a basic case with action buttons", () => {
     const actions = {
-      some_action: async (_ctx, _state, _inputs, _arg1) => {
+      some_action: async ({}) => {
       }
     };
     new class extends StatefulPage {

package/package.json

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

package/src/forms/controls/table.ts

@@ -38,6 +38,8 @@ export type TableControlOptions<F extends Record<string, FormField>> = {
 	  }
 );
 
+const TO_REPLACE = "____$$$$";
+
 export class Table<F extends Record<string, FormField>> extends FormControl {
 	role = <const>"input";
 	constructor(
@@ -64,13 +66,13 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 						>;
 				  }
 				| null,
-			row_index: number
+			row_index: number | string
 		) => {
 			return /* HTML */ tempstream`<tr>
 				 ${Object.entries(this.table_field.columns).map(([key]) => {
 						return tempstream`<td>${this.options.render_fields[key](
 							fctx,
-							`${this.table_field.name}[][${key}]`,
+							`${this.table_field.name}[${row_index}][${key}]`,
 							// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 							(row?.[key] as string) || ""
 						)}</td>`;
@@ -78,22 +80,29 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 				 ${
 						this.options.allow_removing
 							? /* HTML */ `<td>
-									<input
-										type="submit"
-										data-turbo-frame="${this.getFrameID()}"
-										value="${this.options.label_remove ||
-										"remove"}"
-										form="${fctx.form_id}"
-										formnovalidate
-										formaction="${this.getActionURL(
-											this.table_field.name,
-											{
-												remove: {
-													index: row_index,
-												},
-											}
-										)}"
-									/>
+									<button
+										onclick="this.closest('tr').remove()"
+									>
+										remove
+									</button>
+									<noscript>
+										<input
+											type="submit"
+											data-turbo-frame="${this.getFrameID()}"
+											value="${this.options
+												.label_remove || "remove"}"
+											form="${fctx.form_id}"
+											formnovalidate
+											formaction="${this.getActionURL(
+												this.table_field.name,
+												{
+													remove: {
+														index: row_index,
+													},
+												}
+											)}"
+										/>
+									</noscript>
 							  </td>`
 							: ""
 					}
@@ -127,31 +136,42 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template> ${make_row(null, rows.length)} </template>
-				${this.options.allow_adding
-					? /* HTML */ `<button
-								onclick="this.closest('turbo-frame').querySelector('tbody').appendChild(this.closest('turbo-frame').querySelector('template').cloneNode(true).content)"
-							>
-								add
-							</button>
-							<noscript>
-								<input
-									type="submit"
-									value="${this.options.label_add || "add"}"
-									form="${fctx.form_id}"
-									formnovalidate
-									formaction="${this.getActionURL(
-										this.table_field.name,
-										{
-											insert: {
-												index: rows.length,
-												value: {},
-											},
-										}
-									)}"
-								/>
-							</noscript>`
-					: ""}
+				<template> ${make_row(null, TO_REPLACE)} </template>
+
+				${
+					/* because of https://github.com/ljharb/qs/issues/252 we have to
+					put the indexes in the field names */
+					this.options.allow_adding
+						? /* HTML */ `<button
+									onclick="const template = this.closest('turbo-frame').querySelector('template');
+ const tbody = this.closest('turbo-frame').querySelector('tbody');
+const orig_template = template.innerHTML;
+template.innerHTML = orig_template.replaceAll('${TO_REPLACE}', tbody.querySelectorAll('tr').length);
+ tbody.appendChild(template.cloneNode(true).content);
+template.innerHTML = orig_template;"
+								>
+									add
+								</button>
+								<noscript>
+									<input
+										type="submit"
+										value="${this.options.label_add ||
+										"add"}"
+										form="${fctx.form_id}"
+										formnovalidate
+										formaction="${this.getActionURL(
+											this.table_field.name,
+											{
+												insert: {
+													index: rows.length,
+													value: {},
+												},
+											}
+										)}"
+									/>
+								</noscript>`
+						: ""
+				}
 			</div>
 		</turbo-frame>`;
 	}

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

@@ -1,17 +1,23 @@
 import { BaseContext } from "koa";
 import { Templatable, tempstream } from "tempstream";
-import { StatefulPage } from "./stateful-page.js";
+import {
+	ExtractStatefulPageActionArgs,
+	StatefulPage,
+	StatefulPageActionArgument,
+} from "./stateful-page.js";
 
 describe("stateful page", () => {
+	it("has types that allow for extracting action argument types", () => {
+		type TestState = {};
+		const action = async ({}: StatefulPageActionArgument<TestState, [number]>) => {};
+		type Args = ExtractStatefulPageActionArgs<typeof action>;
+		const a = [2] as Args; // should not throw a typescript error;
+	});
+
 	it("handles a basic case with action buttons", () => {
 		type TestState = {};
 		const actions = <const>{
-			some_action: async (
-				_ctx: BaseContext,
-				_state: TestState,
-				_inputs: Record<string, unknown>,
-				_arg1: number
-			) => {},
+			some_action: async ({}: StatefulPageActionArgument<TestState, [number]>) => {},
 		};
 		new (class extends StatefulPage<TestState, typeof actions> {
 			actions = actions;

package/src/page/stateful-page.ts

@@ -5,7 +5,6 @@ import deepmerge, { ArrayMergeOptions } from "deepmerge";
 import { BaseContext, Context } from "koa";
 import { Templatable, tempstream } from "tempstream";
 import { from_base64, to_base64 } from "../utils/base64.js";
-import { ExtractTail } from "../utils/utils.js";
 import { Mountable } from "./mountable.js";
 import { isPlainObject } from "is-what";
 
@@ -33,17 +32,31 @@ export type StateAndMetadata<State, Actions> =
 			$: Record<string, unknown>;
 	  };
 
+export type StatefulPageActionArgument<
+	State extends Record<string, unknown>,
+	Args extends unknown[] = unknown[]
+> = {
+	ctx: BaseContext;
+	state: State;
+	inputs: Record<string, string>;
+	args: Args;
+};
+
+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 abstract class StatefulPage<
 	State extends Record<string, unknown>,
-	Actions extends Record<
-		string,
-		(
-			ctx: BaseContext,
-			state: State,
-			inputs: Record<string, string>,
-			...args: unknown[]
-		) => State | Promise<State>
-	>
+	Actions extends Record<string, StatefulPageAction<State>>
 > extends Mountable {
 	abstract actions: Actions;
 	abstract getInitialState(ctx: BaseContext): State | Promise<State>;
@@ -123,9 +136,7 @@ export abstract class StatefulPage<
 
 	makeActionURL<ActionName extends keyof Actions>(
 		action_description: StatefulPageActionDescription<ActionName>,
-		...args: ExtractTail<
-			ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
-		>
+		...args: ExtractStatefulPageActionArgs<Actions[ActionName]>
 	) {
 		const { action } = this.extractActionAndLabel(action_description);
 		return `./?action=${action}&action_args=${encodeURIComponent(
@@ -137,9 +148,7 @@ export abstract class StatefulPage<
 	makeActionButton<ActionName extends keyof Actions>(
 		_state: State,
 		action_description: StatefulPageActionDescription<ActionName>,
-		...args: ExtractTail<
-			ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
-		>
+		...args: ExtractStatefulPageActionArgs<Actions[ActionName]>
 	) {
 		const { label, content, disabled } =
 			this.extractActionAndLabel(action_description);
@@ -162,9 +171,7 @@ export abstract class StatefulPage<
 					label?: string;
 			  }
 			| ActionName,
-		...args: ExtractTail<
-			ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
-		>
+		...args: ExtractStatefulPageActionArgs<Actions[ActionName]>
 	) {
 		return `(()=>{const form = this.closest('form'); form.action='${this.makeActionURL(
 			action_description,
@@ -301,14 +308,14 @@ export abstract class StatefulPage<
 			const { action, state, inputs, action_args } =
 				await this.extractState(ctx);
 			if (action) {
-				const new_state = await this.actions[action](
+				const new_state = await this.actions[action]({
 					ctx,
 					state,
 					inputs,
-					...(JSON.parse(
+					args: JSON.parse(
 						from_base64(action_args as string)
-					) as unknown[])
-				);
+					) as unknown[],
+				});
 				ctx.body = this.render(ctx, new_state, inputs);
 			} else {
 				ctx.body = this.render(ctx, state, inputs);