@sealcode/sealgen 0.8.44 → 0.8.48

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/make-env.js

@@ -11,7 +11,7 @@ const target_locreq = locreq_1.default(process.cwd());
 async function makeEnv() {
     const { uid, gid } = os_1.default.userInfo();
     const content = `USER_ID=${uid}
-GROUD_ID=${gid}
+GROUP_ID=${gid}
 `;
     const path = target_locreq.resolve(".env");
     await fs_1.promises.writeFile(path, content);

package/lib/mount.js

@@ -54,7 +54,7 @@ function mount(router, url, mountable, use_dummy_app = false) {
         const url2 = ctx.URL;
         if (!url2.pathname.endsWith("/")) {
             url2.pathname += "/";
-            ctx.redirect(url2.pathname);
+            ctx.redirect(url2.href);
         }
         await next();
     });

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.44",
+	"version": "0.8.48",
 	"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/tsconfig.json

@@ -16,7 +16,6 @@
 		"resolveJsonModule": true,
 		"sourceMap": true,
 		"allowSyntheticDefaultImports": true,
-		"keyofStringsOnly": true,
 		"skipLibCheck": true
 	},
 	"include": ["src/**/*"],

package/.arcconfig

@@ -1,12 +0,0 @@
-{
-  "phabricator.uri": "https://hub.sealcode.org/",
-  "arc.land.onto.default": "hotwire",
-  "load": [
-    "arcanist-linters",
-    "arc-unit-mocha/src"
-  ],
-  "unit.engine": "MochaEngine",
-  "unit.mocha.include": [
-    ".test/**/*.ts"
-  ]
-}

package/.arclint

@@ -1,18 +0,0 @@
-{
-  "linters": {
-      "prettier": {
-        "type": "prettier",
-        "bin": "./node_modules/.bin/prettier",
-        "include": [
-          "(src/.*\\.[tj]s$)"
-        ]
-      },
-      "eslint": {
-        "type": "eslint",
-        "include": [
-          "(src/.*\\.ts$)",
-          "(src/.*\\.js$)"
-        ]
-      }
-    }
-}

package/.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-	env: { node: true },
-	parser: "@typescript-eslint/parser",
-	plugins: ["@typescript-eslint", "prettier"],
-	extends: [
-		"eslint:recommended",
-		"plugin:@typescript-eslint/recommended",
-		"plugin:@typescript-eslint/recommended-requiring-type-checking",
-		"plugin:prettier/recommended",
-	],
-	ignorePatterns: [".eslintrc.js", "src/**/*.test.ts", "@types/*", "mocha_root_hooks.js"],
-	parserOptions: {
-		sourceType: "module",
-		ecmaFeatures: {
-			modules: true,
-		},
-		project: ["./tsconfig.json"],
-	},
-	rules: {
-		"@typescript-eslint/require-await": 0,
-		"no-await-in-loop": 2,
-		"@typescript-eslint/no-misused-promises": 0,
-	},
-	settings: { jsdoc: { mode: "typescript" } },
-	overrides: [
-		{
-			files: ["*.subtest.ts", "*.test.ts"],
-			rules: {
-				"@typescript-eslint/no-unsafe-member-access": 0,
-				"prefer-const": 0,
-				"@typescript-eslint/no-unsafe-call": 0,
-				"@typescript-eslint/no-unsafe-return": 0,
-				"@typescript-eslint/no-unsafe-assignment": 0,
-				"no-await-in-loop": 1, // sometimes it's easier to debug when requests run sequentially
-			},
-		},
-	],
-};

package/.mocharc.js

@@ -1,10 +0,0 @@
-module.exports = {
-	require: [
-		"ts-node/register",
-		"source-map-support/register",
-		"./mocha_root_hooks.js",
-	],
-	recursive: true,
-	timeout: "10000",
-	spec: ["src/*.test.ts", "src/**/*.test.ts"],
-};

package/.nyc_output/00b15432-2e8d-4b16-9dd6-7e23314363c9.json

@@ -1 +0,0 @@
-{}

package/.nyc_output/0190dc00-d309-48d0-a5db-e9484e3c7334.json

@@ -1 +0,0 @@
-{}

package/.nyc_output/04bfea78-9274-4d35-b7e4-d0bf42636911.json

@@ -1 +0,0 @@
-{}

package/.nyc_output/0d4efe84-14e0-4bf0-bf22-b95472fe2be4.json

@@ -1 +0,0 @@
-{}

package/.nyc_output/1faea508-9cb4-46f4-b7ad-94a816e1ee7d.json

@@ -1 +0,0 @@
-{}