@sealcode/sealgen 0.8.47 → 0.8.49

package/@types/index.d.ts

@@ -11,6 +11,7 @@ export * as Controls from "./forms/controls/controls";
 export * as Fields from "./forms/fields/field";
 export * from "./page/mountable";
 export * from "./page/page";
+export * from "./page/stateful-page";
 export * from "./forms/form";
 export * from "./page/props-parser";
 export * from "./utils/utils";

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

@@ -0,0 +1,34 @@
+/// <reference types="koa__router" />
+import Router from "@koa/router";
+import { BaseContext } from "koa";
+import { Templatable } from "tempstream";
+import { ExtractTail } from "../utils/utils";
+import { Mountable } from "./mountable";
+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 {
+    abstract actions: Actions;
+    abstract getInitialState(): State;
+    abstract render(ctx: BaseContext, state: State, inputs: Record<string, string>): Templatable | Promise<Templatable>;
+    canAccess(): Promise<{
+        readonly canAccess: true;
+        readonly message: "";
+    }>;
+    constructor();
+    abstract wrapInLayout(ctx: BaseContext, content: Templatable): Templatable;
+    wrapInForm(state: State, content: Templatable): Templatable;
+    makeActionButton<ActionName extends keyof Actions>(state: State, action_description: {
+        action: ActionName;
+        label?: string;
+    } | ActionName, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): 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;
+    };
+    mount(router: Router, path: string): void;
+}

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

@@ -0,0 +1 @@
+export declare function statefulPageTemplate(action_name: string, newfilefullpath: string): Promise<string>;

package/@types/utils/base64.d.ts

@@ -0,0 +1,2 @@
+export declare function to_base64(s: string): string;
+export declare function from_base64(s: string): string;

package/@types/utils/utils.d.ts

@@ -1,5 +1,7 @@
 export declare type Awaited<T> = T extends Promise<infer U> ? U : T;
 export declare type UnwrapArray<T> = T extends Array<infer U> ? U : T;
+export declare function keys<S extends string>(object: Record<S, unknown>): S[];
+export declare type ExtractTail<T extends any[]> = T extends [infer _, ...infer Tail] ? Tail : never;
 export { sleep } from "./sleep";
 export { naturalNumbers } from "./natural-numbers";
 export { UrlWithNewParams } from "./url-with-new-params";
@@ -11,3 +13,4 @@ export { assertThrowsAsync } from "./assert-throws";
 export * from "./make-slug";
 export * from "./render-attributes";
 export * from "./format-external-url";
+export * from "./base64";

package/lib/add-route.js

@@ -17,6 +17,7 @@ const route_test_1 = require("./templates/route-test");
 const escape_url_params_1 = require("./utils/escape-url-params");
 const prompts = require("prompts");
 const post_1 = require("./templates/post");
+const stateful_page_1 = require("./templates/stateful-page");
 async function addRoute(params, app_directory = process.cwd()) {
     const target_locreq = locreq_1.default(app_directory);
     prompts.override(params);
@@ -39,6 +40,7 @@ async function addRoute(params, app_directory = process.cwd()) {
             message: "What kind of route is it?",
             choices: [
                 { title: "page", value: "page" },
+                { title: "stateful page", value: "sreact" },
                 { title: "form", value: "form" },
                 { title: "list", value: "list" },
                 { title: "multiform", value: "multiform" },
@@ -57,6 +59,7 @@ async function addRoute(params, app_directory = process.cwd()) {
         multiform: multiform_1.multiformTemplate,
         redirect: redirect_1.redirectTemplate,
         post: post_1.postTemplate,
+        sreact: stateful_page_1.statefulPageTemplate,
     }[mode];
     if (!template) {
         throw new Error(`Could not get template ${mode}`);

package/lib/generate-routes.js

@@ -66,7 +66,8 @@ async function generateRoutes() {
         f.endsWith(".multiform.ts") ||
         f.endsWith(".list.ts") ||
         f.endsWith(".redirect.ts") ||
-        f.endsWith(".post.ts"))
+        f.endsWith(".post.ts") ||
+        f.endsWith(".sreact.ts"))
         .map(async (fullpath) => ({
         fullpath,
         actionName: await extractActionName(fullpath),

package/lib/index.js

@@ -27,6 +27,7 @@ exports.Controls = __importStar(require("./forms/controls/controls"));
 exports.Fields = __importStar(require("./forms/fields/field"));
 __exportStar(require("./page/mountable"), exports);
 __exportStar(require("./page/page"), exports);
+__exportStar(require("./page/stateful-page"), exports);
 __exportStar(require("./forms/form"), exports);
 __exportStar(require("./page/props-parser"), exports);
 __exportStar(require("./utils/utils"), exports);

package/lib/page/stateful-page.js

@@ -0,0 +1,117 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulPage = void 0;
+const ts_predicates_1 = require("@sealcode/ts-predicates");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const tempstream_1 = require("tempstream");
+const base64_1 = require("../utils/base64");
+const mountable_1 = require("./mountable");
+class StatefulPage extends mountable_1.Mountable {
+    async canAccess() {
+        return { canAccess: true, message: "" };
+    }
+    constructor() {
+        super();
+        const original_render = this.render.bind(this);
+        this.render = async (ctx, state, inputs) => {
+            return this.wrapInLayout(ctx, this.wrapInForm(state, await original_render(ctx, state, inputs)));
+        };
+    }
+    wrapInForm(state, content) {
+        return tempstream_1.tempstream /* HTML */ `<form action="./" method="POST">
+			<input
+				name="state"
+				type="hidden"
+				value="${base64_1.to_base64(JSON.stringify(state))}"
+			/>
+			${content}
+		</form>`;
+    }
+    makeActionButton(state, action_description, ...args) {
+        let label, action;
+        if (ts_predicates_1.is(action_description, ts_predicates_1.predicates.object)) {
+            action = action_description.action.toString();
+            label = action_description.label || action;
+        }
+        else {
+            action = action_description.toString();
+            label = action;
+        }
+        return /* HTML */ `
+			<input
+				type="submit"
+				value=${label}
+				formaction="./?action=${action}&args=${base64_1.to_base64(JSON.stringify(args))}"
+			/>
+		`;
+    }
+    extractState(ctx) {
+        if (!ts_predicates_1.hasShape({
+            action: ts_predicates_1.predicates.maybe(ts_predicates_1.predicates.string),
+            state: ts_predicates_1.predicates.string,
+            args: ts_predicates_1.predicates.maybe(ts_predicates_1.predicates.string),
+            $: ts_predicates_1.predicates.maybe(ts_predicates_1.predicates.object),
+        }, ctx.$body)) {
+            console.error("Wrong data: ", ctx.$body);
+            throw new Error("wrong formdata shape");
+        }
+        const inputs = Object.fromEntries(Object.entries(ctx.$body).filter(([key]) => !["action", "state", "args", "$"].includes(key)));
+        // the "$" key is parsed as dot notation and overrides the state
+        const original_state = JSON.parse(base64_1.from_base64(ctx.$body.state));
+        const modified_state = deepmerge_1.default(original_state, ctx.$body.$ || {}, {
+            arrayMerge: (target, source, options) => {
+                // https://github.com/TehShrike/deepmerge#user-content-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_1.default(target[index], item, options);
+                    }
+                    else if (target.indexOf(item) === -1) {
+                        destination.push(item);
+                    }
+                });
+                return destination;
+            },
+        });
+        if (ctx.$body.action && ctx.$body.args) {
+            return {
+                state: modified_state,
+                action: ctx.$body.action,
+                inputs,
+                action_args: ctx.$body.args,
+            };
+        }
+        else {
+            return {
+                state: modified_state,
+                action: null,
+                action_args: null,
+                inputs,
+            };
+        }
+    }
+    mount(router, path) {
+        router.get(path, (ctx) => {
+            ctx.body = this.render(ctx, this.getInitialState(), {});
+        });
+        router.post(path, (ctx) => {
+            const { action, state, inputs, action_args } = this.extractState(ctx);
+            if (action) {
+                ctx.body = this.render(ctx, this.actions[action](state, inputs, ...JSON.parse(base64_1.from_base64(action_args))), inputs);
+            }
+            else {
+                ctx.body = this.render(ctx, state, inputs);
+            }
+            ctx.status = 433;
+        });
+    }
+}
+exports.StatefulPage = StatefulPage;
+//# sourceMappingURL=stateful-page.js.map

package/lib/templates/stateful-page.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statefulPageTemplate = void 0;
+const import_path_1 = require("../utils/import-path");
+async function statefulPageTemplate(action_name, newfilefullpath) {
+    const rel = import_path_1.curryImportPath(newfilefullpath);
+    return `import { BaseContext } from "koa";
+import { tempstream, Templatable } from "tempstream";
+import { StatefulPage } from "@sealcode/sealgen";
+import html from "${rel("src/back/html")}";
+
+export const actionName = "${action_name}";
+
+const actions = <const>{
+	add: (state: State, inputs: Record<string, string>) => {
+		console.log({ inputs });
+		return {
+			...state,
+			elements: [...state.elements, inputs.element_to_add || "new element"],
+		};
+	},
+	remove: (state: State, _: unknown, index_to_remove: number) => {
+		return {
+			...state,
+			elements: state.elements.filter((_, index) => index != index_to_remove),
+		};
+	},
+};
+
+type State = {
+	elements: string[];
+};
+
+	export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
+	actions = actions;
+
+	getInitialState() {
+		return { elements: ["one", "two", "three"] };
+	}
+
+    wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
+		return html(ctx, "${action_name}", content);
+	}
+
+	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
+		return tempstream/* HTML */ \`<ul>
+				\${state.elements.map(
+					(e, index) => /* HTML */ \`<li>
+						\${e} \${this.makeActionButton(state, "remove", index)}
+					</li>\`
+				)}
+			</ul>
+			<div>
+				<input
+						name="element_to_add"
+						type="text"
+						value="\${inputs.element_to_add || ""}"
+					/>
+					\${this.makeActionButton(state, "add")}
+			</div>\`;
+	}
+})();
+`;
+}
+exports.statefulPageTemplate = statefulPageTemplate;
+//# sourceMappingURL=stateful-page.js.map

package/lib/utils/base64.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.from_base64 = exports.to_base64 = void 0;
+function to_base64(s) {
+    return Buffer.from(s).toString("base64");
+}
+exports.to_base64 = to_base64;
+function from_base64(s) {
+    return Buffer.from(s, "base64").toString("utf-8");
+}
+exports.from_base64 = from_base64;
+//# sourceMappingURL=base64.js.map

package/lib/utils/utils.js

@@ -10,7 +10,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertThrowsAsync = exports.walkDir = exports.listCollections = exports.curryImportPath = exports.importPath = exports.exec = exports.UrlWithNewParams = exports.naturalNumbers = exports.sleep = void 0;
+exports.assertThrowsAsync = exports.walkDir = exports.listCollections = exports.curryImportPath = exports.importPath = exports.exec = exports.UrlWithNewParams = exports.naturalNumbers = exports.sleep = exports.keys = void 0;
+function keys(object) {
+    return Object.keys(object);
+}
+exports.keys = keys;
 var sleep_1 = require("./sleep");
 Object.defineProperty(exports, "sleep", { enumerable: true, get: function () { return sleep_1.sleep; } });
 var natural_numbers_1 = require("./natural-numbers");
@@ -31,4 +35,5 @@ Object.defineProperty(exports, "assertThrowsAsync", { enumerable: true, get: fun
 __exportStar(require("./make-slug"), exports);
 __exportStar(require("./render-attributes"), exports);
 __exportStar(require("./format-external-url"), exports);
+__exportStar(require("./base64"), exports);
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.8.47",
+	"version": "0.8.49",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -47,6 +47,7 @@
 	"dependencies": {
 		"@koa/router": "^10.1.1",
 		"@sealcode/ts-predicates": "^0.4.3",
+		"deepmerge": "^4.3.1",
 		"esbuild": "^0.15.5",
 		"esbuild-sass-plugin": "^2.3.1",
 		"koa": "^2.13.0",

package/src/add-route.ts

@@ -11,6 +11,7 @@ import { testTemplate } from "./templates/route-test";
 import { escape_url_params } from "./utils/escape-url-params";
 import prompts = require("prompts");
 import { postTemplate } from "./templates/post";
+import { statefulPageTemplate } from "./templates/stateful-page";
 
 export async function addRoute(
 	params: Partial<{ [key in "action" | "url" | "mode"]: string }>,
@@ -40,6 +41,7 @@ export async function addRoute(
 			message: "What kind of route is it?",
 			choices: [
 				{ title: "page", value: "page" },
+				{ title: "stateful page", value: "sreact" },
 				{ title: "form", value: "form" },
 				{ title: "list", value: "list" },
 				{ title: "multiform", value: "multiform" },
@@ -64,6 +66,7 @@ export async function addRoute(
 		multiform: multiformTemplate,
 		redirect: redirectTemplate,
 		post: postTemplate,
+		sreact: statefulPageTemplate,
 	}[mode];
 
 	if (!template) {

package/src/generate-routes.ts

@@ -56,7 +56,8 @@ export async function generateRoutes(): Promise<void> {
 					f.endsWith(".multiform.ts") ||
 					f.endsWith(".list.ts") ||
 					f.endsWith(".redirect.ts") ||
-					f.endsWith(".post.ts")
+					f.endsWith(".post.ts") ||
+					f.endsWith(".sreact.ts")
 			)
 			.map(async (fullpath) => ({
 				fullpath,

package/src/index.ts

@@ -13,6 +13,7 @@ export * as Controls from "./forms/controls/controls";
 export * as Fields from "./forms/fields/field";
 export * from "./page/mountable";
 export * from "./page/page";
+export * from "./page/stateful-page";
 export * from "./forms/form";
 export * from "./page/props-parser";
 export * from "./utils/utils";

package/src/page/stateful-page.ts

@@ -0,0 +1,202 @@
+import Router from "@koa/router";
+import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import deepmerge, { ArrayMergeOptions } from "deepmerge";
+import { BaseContext } from "koa";
+import { Templatable, tempstream } from "tempstream";
+import { from_base64, to_base64 } from "../utils/base64";
+import { ExtractTail } from "../utils/utils";
+import { Mountable } from "./mountable";
+
+export abstract class StatefulPage<
+	State extends Record<string, unknown>,
+	Actions extends Record<
+		string,
+		(
+			state: State,
+			inputs: Record<string, string>,
+			...args: unknown[]
+		) => State
+	>
+> extends Mountable {
+	abstract actions: Actions;
+	abstract getInitialState(): State;
+	abstract render(
+		ctx: BaseContext,
+		state: State,
+		inputs: Record<string, string>
+	): Templatable | Promise<Templatable>;
+
+	async canAccess() {
+		return <const>{ canAccess: true, message: "" };
+	}
+
+	constructor() {
+		super();
+		const original_render = this.render.bind(this);
+		this.render = async (
+			ctx: BaseContext,
+			state: State,
+			inputs: Record<string, string>
+		) => {
+			return this.wrapInLayout(
+				ctx,
+				this.wrapInForm(
+					state,
+					await original_render(ctx, state, inputs)
+				)
+			);
+		};
+	}
+
+	abstract wrapInLayout(ctx: BaseContext, content: Templatable): Templatable;
+
+	wrapInForm(state: State, content: Templatable): Templatable {
+		return tempstream/* HTML */ `<form action="./" method="POST">
+			<input
+				name="state"
+				type="hidden"
+				value="${to_base64(JSON.stringify(state))}"
+			/>
+			${content}
+		</form>`;
+	}
+
+	makeActionButton<ActionName extends keyof Actions>(
+		state: State,
+		action_description:
+			| {
+					action: ActionName;
+					label?: string;
+			  }
+			| ActionName,
+		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
+	) {
+		let label, action: string;
+		if (is(action_description, predicates.object)) {
+			action = action_description.action.toString();
+			label = action_description.label || action;
+		} else {
+			action = action_description.toString();
+			label = action;
+		}
+		return /* HTML */ `
+			<input
+				type="submit"
+				value=${label}
+				formaction="./?action=${action}&args=${to_base64(
+					JSON.stringify(args)
+				)}"
+			/>
+		`;
+	}
+
+	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;
+		  } {
+		if (
+			!hasShape(
+				{
+					action: predicates.maybe(predicates.string),
+					state: predicates.string,
+					args: predicates.maybe(predicates.string),
+					$: predicates.maybe(predicates.object),
+				},
+				ctx.$body
+			)
+		) {
+			console.error("Wrong data: ", ctx.$body);
+			throw new Error("wrong formdata shape");
+		}
+		const inputs = Object.fromEntries(
+			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 = 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
+				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;
+
+		if (ctx.$body.action && ctx.$body.args) {
+			return {
+				state: modified_state,
+				action: ctx.$body.action as string,
+				inputs,
+				action_args: ctx.$body.args,
+			};
+		} else {
+			return {
+				state: modified_state,
+				action: null,
+				action_args: null,
+				inputs,
+			};
+		}
+	}
+
+	mount(router: Router, path: string) {
+		router.get(path, (ctx) => {
+			ctx.body = this.render(ctx, this.getInitialState(), {});
+		});
+
+		router.post(path, (ctx) => {
+			const { action, state, inputs, action_args } =
+				this.extractState(ctx);
+			if (action) {
+				ctx.body = this.render(
+					ctx,
+					this.actions[action](
+						state,
+						inputs,
+						...(JSON.parse(
+							from_base64(action_args as string)
+						) as unknown[])
+					),
+					inputs
+				);
+			} else {
+				ctx.body = this.render(ctx, state, inputs);
+			}
+			ctx.status = 433;
+		});
+	}
+}

package/src/templates/stateful-page.ts

@@ -0,0 +1,65 @@
+import { curryImportPath } from "../utils/import-path";
+
+export async function statefulPageTemplate(
+	action_name: string,
+	newfilefullpath: string
+): Promise<string> {
+	const rel = curryImportPath(newfilefullpath);
+	return `import { BaseContext } from "koa";
+import { tempstream, Templatable } from "tempstream";
+import { StatefulPage } from "@sealcode/sealgen";
+import html from "${rel("src/back/html")}";
+
+export const actionName = "${action_name}";
+
+const actions = <const>{
+	add: (state: State, inputs: Record<string, string>) => {
+		console.log({ inputs });
+		return {
+			...state,
+			elements: [...state.elements, inputs.element_to_add || "new element"],
+		};
+	},
+	remove: (state: State, _: unknown, index_to_remove: number) => {
+		return {
+			...state,
+			elements: state.elements.filter((_, index) => index != index_to_remove),
+		};
+	},
+};
+
+type State = {
+	elements: string[];
+};
+
+	export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
+	actions = actions;
+
+	getInitialState() {
+		return { elements: ["one", "two", "three"] };
+	}
+
+    wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
+		return html(ctx, "${action_name}", content);
+	}
+
+	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
+		return tempstream/* HTML */ \`<ul>
+				\${state.elements.map(
+					(e, index) => /* HTML */ \`<li>
+						\${e} \${this.makeActionButton(state, "remove", index)}
+					</li>\`
+				)}
+			</ul>
+			<div>
+				<input
+						name="element_to_add"
+						type="text"
+						value="\${inputs.element_to_add || ""}"
+					/>
+					\${this.makeActionButton(state, "add")}
+			</div>\`;
+	}
+})();
+`;
+}

package/src/utils/base64.ts

@@ -0,0 +1,7 @@
+export function to_base64(s: string) {
+	return Buffer.from(s).toString("base64");
+}
+
+export function from_base64(s: string) {
+	return Buffer.from(s, "base64").toString("utf-8");
+}