@sealcode/sealgen 0.10.5 → 0.11.0

package/@types/forms/controls/array.d.ts

@@ -25,7 +25,7 @@ export declare class StructuredArray<Subfields extends Record<string, Field>> ex
     getActionURL(form_id?: string, action?: Record<string, unknown>): string;
     getDefaultItemBody(): Promise<{}>;
     makeSubfield(_field_name: string): FormField;
-    renderItemControl(ctx: Context, form_id: string, control: FormControl | UnboundControlStorage, item: FieldsetOutput<Subfields>, index: number): Promise<(string | number | import("stream").Readable | null) | (string | number | import("stream").Readable | null)[] | Promise<string | number | import("stream").Readable | null>[] | import("tempstream").Slot>;
+    renderItemControl(ctx: Context, form_id: string, control: FormControl | UnboundControlStorage, item: FieldsetOutput<Subfields>, index: number): Promise<(string | number | import("stream").Readable | null) | (string | number | import("stream").Readable | null)[] | Promise<string | number | import("stream").Readable | null>[]>;
     renderItem(ctx: Context, form_id: string, item: FieldsetOutput<Subfields>, index: number): Promise<import("stream").Readable>;
     getItems(ctx: Context, raw_values: Record<string, FormDataValue>): Promise<FieldsetOutput<Subfields>[]>;
     _render(ctx: Context, form_id: string, raw_values: Record<string, FormDataValue>): Promise<import("stream").Readable>;

package/@types/forms/multiform.d.ts

@@ -17,7 +17,7 @@ export declare class Multiform extends MountableWithFields {
     getSubformsToRender(ctx: Context): Array<readonly [string, Form<any, unknown>]>;
     renderSubform(ctx: Context, sub_form_name: string, show_field_errors: boolean): Promise<FlatTemplatable>;
     getSubformRawValues(ctx: Context, sub_form_name: string): Promise<Record<string, FormDataValue>>;
-    render(ctx: Context, messages: FormMessage[], prerenderedForms: Record<string, FlatTemplatable | undefined> | undefined, show_field_errors: boolean): Promise<FlatTemplatable>;
+    render(ctx: Context, messages: FormMessage[], prerenderedForms: Record<string, import("tempstream/@types/stringify").Stringifiable | undefined> | undefined, show_field_errors: boolean): Promise<FlatTemplatable>;
     makeBottomScript(): string;
     mount(router: Router, path: string): void;
 }

package/@types/page/sealious-list.d.ts

@@ -10,6 +10,7 @@ export declare abstract class SealiousItemListPage<C extends Collection, F exten
     protected addFilter(ctx: Context, list: ItemList<C>): Promise<void>;
     makeQuery(ctx: Context): Promise<ItemList<C>>;
     getItems(ctx: Context, page: number, itemsPerPage: number): Promise<CollectionItem<C>[]>;
+    getFilterValues(ctx: Context): Promise<Record<string, string | undefined>>;
     renderItem(_: Context, item: CollectionItem<C>, index: number): Promise<FlatTemplatable>;
     canAccess: (ctx: Context) => Promise<{
         canAccess: boolean;

package/lib/add-route.js

@@ -45,7 +45,10 @@ async function addRoute(params, app_directory = process.cwd()) {
         },
     ]);
     const { action, url, mode } = response;
-    const file_path = target_locreq.resolve(`src/back/routes/${(0, escape_url_params_1.escape_url_params)(url)}.${mode}.ts`);
+    const extension = ["list", "lpr", "page", "sreact"].includes(mode)
+        ? "tsx"
+        : "ts";
+    const file_path = target_locreq.resolve(`src/back/routes/${(0, escape_url_params_1.escape_url_params)(url)}.${mode}.${extension}`);
     const test_file_path = target_locreq.resolve(`src/back/routes/${(0, escape_url_params_1.escape_url_params)(url)}.test.ts`);
     const template = templates_1.Templates[mode];
     if (!template) {

package/lib/add-route.test.js

@@ -9,7 +9,10 @@ const util_1 = require("util");
 const axios_1 = __importDefault(require("axios"));
 const wait_port_1 = __importDefault(require("wait-port"));
 const get_port_1 = __importDefault(require("get-port"));
+const locreq_1 = __importDefault(require("locreq"));
+const target_locreq = (0, locreq_1.default)(__dirname);
 const execAsync = (0, util_1.promisify)(child_process_1.exec);
+const callSealgenBin = () => `node ${target_locreq.resolve("lib/cli.js")}`;
 describe("add route test", () => {
     let node_pid = 0;
     const app_path = "/tmp/sealious-minimal";
@@ -30,11 +33,11 @@ describe("add route test", () => {
     it("creates minimal sealious app", async function () {
         this.timeout(250000);
         console.log("\tcloning sealious-minimal...");
-        await execAsync(`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout ce4f33309294`);
+        await execAsync(`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout d5abeb9514359dde4`);
         console.log("\tinstalling dependencies and sealgen...");
         await execAsync(`cd ${app_path} && npm ci && rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen`);
         console.log("\trunning add-route and building app...");
-        await execAsync(`cd ${app_path} && npx sealgen add-route --url=/sample --action=Sample --mode=page && npm run build`);
+        await execAsync(`cd ${app_path} && ${callSealgenBin()} add-route --url=/sample --action=Sample --mode=page && ${callSealgenBin()} build`);
         console.log("\tstarting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)");
         const port = await (0, get_port_1.default)();
         await execAsync(`docker run -p ${port}:27017 --name ${container_name} -d mongo:4.4-bionic`);

package/lib/build.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildProject = void 0;
 const esbuild_1 = require("esbuild");
 const fs_1 = require("fs");
+const path_1 = require("path");
 const esbuild_sass_plugin_1 = require("esbuild-sass-plugin");
 const chokidar = __importStar(require("chokidar"));
 const tiny_glob_1 = __importDefault(require("tiny-glob"));
@@ -37,20 +38,22 @@ const sleep_1 = require("./utils/sleep");
 const generate_collections_1 = require("./generate-collections");
 const generate_routes_1 = require("./generate-routes");
 const generate_names = (function* generate_names() {
-    let base_name = "____unique_import_";
+    const base_name = "____unique_import_";
     let count = 0;
     while (true) {
-        yield base_name + count;
+        yield `${base_name}${count}`;
         count++;
     }
 })();
 async function build_ts() {
     await Promise.all([(0, generate_collections_1.generateCollections)(), (0, generate_routes_1.generateRoutes)()]);
-    const entryPoints = (await (0, tiny_glob_1.default)("./src/back/**/*.ts")).filter((path) => !path.includes(".#"));
+    const entryPoints = (await (0, tiny_glob_1.default)("./src/back/**/*.{ts,tsx}")).filter((path) => !path.includes(".#"));
     try {
         await (0, esbuild_1.build)({
             entryPoints,
             sourcemap: true,
+            bundle: false,
+            jsxFactory: "TempstreamJSX.createElement",
             outdir: "./dist/back",
             logLevel: "info",
             platform: "node",
@@ -64,6 +67,7 @@ async function build_ts() {
                             const named_and_default_regex = /^import\s+((\S+),\s+)?({\s*[^}]+})\s+from\s+("[^"]+");\s*$/gm;
                             const old_content = await fs_1.promises.readFile(path, "utf-8");
                             const contents = old_content.replace(named_and_default_regex, (_, default_import_name, __, all_named, module_path) => {
+                                /* eslint-disable */
                                 const new_name = generate_names.next().value;
                                 const result = `import * as ${new_name} from ${module_path}${default_import_name
                                     ? `; const ${default_import_name.replace(",", "")} = ${new_name}.default || ${new_name};`
@@ -83,8 +87,12 @@ async function build_ts() {
                                     })
                                         .join(" ");
                                 return result;
+                                /* eslint-enable */
                             });
-                            return { contents, loader: "ts" };
+                            return {
+                                contents,
+                                loader: (0, path_1.extname)(path) === ".tsx" ? "tsx" : "ts",
+                            };
                         });
                     },
                 },
@@ -92,6 +100,7 @@ async function build_ts() {
         });
     }
     catch (e) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         console.error(e.message);
     }
 }
@@ -112,6 +121,7 @@ async function complex_build(watch) {
                     console.log(`Built main.scss [on ${path}]`);
                 }
                 catch (e) {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                     console.error(e.message);
                     await (0, sleep_1.sleep)(200);
                     scss_build
@@ -120,7 +130,7 @@ async function complex_build(watch) {
                         .catch((e) => console.error(e?.message));
                 }
             }
-            if (path.endsWith(".ts") &&
+            if ((path.endsWith(".ts") || path.endsWith(".tsx")) &&
                 !path.endsWith("src/back/collections/collections.ts") &&
                 !path.endsWith("src/back/routes/routes.ts") &&
                 !path.endsWith("src/back/routes/urls.ts")) {

package/lib/forms/multiform.test.js

@@ -107,8 +107,8 @@ async function general_form_validation_e2e_tests(js_enabled) {
     await page.getByPlaceholder("password").click();
     await page.getByPlaceholder("password").fill("test");
     await page.locator("#multiform_test_form2_submit").click();
-    (0, utils_1.assertThrowsAsync)(async () => {
-        page.getByText("Incorrect input").click({ timeout: 500 });
+    await (0, utils_1.assertThrowsAsync)(async () => {
+        await page.getByText("Incorrect input").click({ timeout: 500 });
     });
 }
 async function individual_field_validation_e2e_tests(javaScriptEnabled) {

package/lib/generate-routes.js

@@ -66,7 +66,7 @@ function generateURL(actionName, url) {
 }
 async function generateRoutes() {
     const files = await Promise.all((await (0, walk_1.walkDir)(target_locreq.resolve("src/back/routes")))
-        .filter((f) => Object.keys(templates_1.Templates).some((key) => f.endsWith(`.${key}.ts`)))
+        .filter((f) => Object.keys(templates_1.Templates).some((key) => f.endsWith(`.${key}.ts`) || f.endsWith(`.${key}.tsx`)))
         .map(async (fullpath) => ({
         fullpath,
         actionName: await extractActionName(fullpath),

package/lib/page/sealious-list.js

@@ -1,8 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SealiousItemListPage = void 0;
 const list_1 = require("./list");
 const access_control_1 = require("./access-control");
+const qs_1 = __importDefault(require("qs"));
+const ts_predicates_1 = require("@sealcode/ts-predicates");
 class SealiousItemListPage extends list_1.ListPage {
     constructor(collection) {
         super();
@@ -45,6 +50,14 @@ class SealiousItemListPage extends list_1.ListPage {
             .fetch();
         return items;
     }
+    async getFilterValues(ctx) {
+        const query_params = qs_1.default.parse(ctx.search.slice(1));
+        const _filter_values = query_params?.filter || {};
+        let filter_values = (0, ts_predicates_1.is)(_filter_values, ts_predicates_1.predicates.record(ts_predicates_1.predicates.string, ts_predicates_1.predicates.string))
+            ? _filter_values
+            : {};
+        return filter_values;
+    }
     async renderItem(_, item, index) {
         return `<div>${item.id}</div>`;
     }

package/lib/templates/list.js

@@ -29,8 +29,8 @@ const listTemplate = async (action_name, newfilefullpath) => {
     ]);
     const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
-import { CollectionItem, Field } from "sealious";
-import { FlatTemplatable, tempstream } from "tempstream";
+import { CollectionItem } from "sealious";
+import { FlatTemplatable, TempstreamJSX } from "tempstream";
 import { ${uppercase_collection} } from "${rel("src/back/collections/collections.js")}";
 import html from "${rel("src/back/html.js")}";
 import {
@@ -51,7 +51,7 @@ ${collection_fields
         : `DefaultListFilters.fallback`} }`)
         .join(",\n")}
 ] as {
-	field: keyof (typeof PatronEvents)["fields"];
+	field: keyof (typeof ${uppercase_collection})["fields"];
 	render?: ListFilterRender;
 }[];
 
@@ -87,38 +87,22 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 > {
 	fields = BaseListPageFields;
 
-	async render(ctx: Context) {
-		return html(
-			ctx,
-			"${action_name}",
-			tempstream/* HTML */ \`<div>
-				<h2>${action_name}</h2>
-				<table class="sealious-list">
-					\${this.renderTableHead(ctx, displayFields)}
-					<tbody>
-						\${super.render(ctx)}
-					</tbody>
-				</table>
-			</div>\`
-		);
-	}
-
 	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
 		const query_params = qs.parse(ctx.search.slice(1));
 		query_params.page = "1";
 		const filter_values = await this.getFilterValues(ctx);
-		return tempstream/* HTML */ \`<form>
-			\${Object.entries(query_params).map(([key, value]) => {
+		return <form>
+			{Object.entries(query_params).map(([key, value]) => {
 				if (key == "filter") {
 					return "";
 				}
-				return /* HTML */ \`<input
+				return <input
 					type="hidden"
 					name="\${key}"
 					value="\${value}"
-				/>\`;
+				/>;
 			})}
-			\${filterFields.map(({ field, render }) => {
+			{filterFields.map(({ field, render }) => {
 				if (!render) {
 					render = DefaultListFilters.fallback;
 				}
@@ -129,29 +113,32 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 				);
 			})}
 			<input type="submit" />
-		</form>\`;
-	}
-
-	async getFilterValues(ctx: Context) {
-		const query_params = qs.parse(ctx.search.slice(1));
-		const _filter_values = query_params?.filter || {};
-		let filter_values: Record<string, string | undefined> = is(
-			_filter_values,
-			predicates.record(predicates.string, predicates.string)
-		)
-			? _filter_values
-			: {};
-		return filter_values;
+		</form>;
 	}
 
 	async renderItem(_: Context, item: CollectionItem<typeof ${uppercase_collection}>) {
-		return tempstream/* HTML */ \`<tr>
-			\${displayFields.map(({ field, format }) => {
+		return <tr>
+			{displayFields.map(({ field, format }) => {
 				const value = item.get(field as any);
-				return tempstream\`<td>\${format ? format(value) : value}</td>\`;
+				return <td>{format ? format(value) : value}</td>;
 			})}
-		</tr>\`;
+		</tr>;
 	}
+
+	async render(ctx: Context) {
+		return html(
+			ctx,
+			"${action_name}",
+			<div>
+				<h2>${action_name} List</h2>
+				<table class="sealious-list">
+					{this.renderTableHead(ctx, displayFields)}
+					<tbody>{super.render(ctx)}</tbody>
+				</table>
+			</div>
+		);
+	}
+
 })(${uppercase_collection});
 `;
 };

package/lib/templates/long-running-process.js

@@ -5,7 +5,7 @@ const import_path_1 = require("../utils/import-path");
 async function LongRunningProcessTemplate(action_name, newfilefullpath) {
     const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
-import { tempstream } from "tempstream";
+import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 import { LongRunningProcess } from "sealious";
@@ -23,34 +23,38 @@ export default new (class PatroniteAutoImportStatusPage extends Page {
 	async render(ctx: Context) {
 		const lpr_id = ctx.params.id;
 		const lpr_data = LongRunningProcess.getByID(ctx.$context, lpr_id);
+		const render_script = lpr_data.state !== "error" && lpr_data.state !== "finished";
+		const script = /* HTML */ \`<script>
+			setTimeout(() => {
+				document.location = document.location;
+			}, \${this.interval});
+		</script>\`;
+
 		return html(
 			ctx,
 			"PatroniteAutoImportStatus",
-			tempstream/* HTML */ \`\${lpr_data.then(
-				(lpr_data) => tempstream/* HTML */ \`
-					<div>status: \${lpr_data.state}</div>
-					<div style="height: 20px; width: 100%">
-						<div
-							style="height: 100%; background-color: green; width: \${Math.round(
-								lpr_data.progress * 100
-							)}%"
-						></div>
-					</div>
-					<div>
-						\${lpr_data.events.map(
-							(e) => /* HTML */ \`<div>\${e.message}</div>\`
-						)}
-					</div>
-					\${lpr_data.state !== "error" &&
-					lpr_data.state !== "finished"
-						? /* HTML */ \`<script>
-								setTimeout(() => {
-									document.location = document.location;
-								}, \${this.interval});
-						  </script>\`
-						: ""}
-				\`
-			)}\`
+			<div>
+				{lpr_data.then((lpr_data) => {
+					return (
+						<div>
+							<div>status: {lpr_data.state}</div>
+							<div style="height: 20px; width: 100%">
+								<div
+									style="height: 100%; background-color: green; width: {Math.round(
+												lpr_data.progress * 100
+											)}%"
+								></div>
+							</div>
+							<div>
+								{lpr_data.events.map((e) => (
+									<div>{e.message}</div>
+								))}
+							</div>
+							{render_script ? { script } : ""}
+						</div>
+					);
+				})}
+			</div>
 		);
 	}
 })();

package/lib/templates/page.js

@@ -5,7 +5,7 @@ const import_path_1 = require("../utils/import-path");
 async function pageTemplate(action_name, newfilefullpath) {
     const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
-import { tempstream } from "tempstream";
+import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
@@ -18,7 +18,7 @@ export default new (class ${action_name}Page extends Page {
 	}
 
 	async render(ctx: Context) {
-		return html(ctx, "${action_name}", tempstream/* HTML */ \`<div></div>\`);
+		return html(ctx, "${action_name}", <div></div>);
 	}
 })();
 `;

package/lib/templates/route-test.js

@@ -5,9 +5,10 @@ const import_path_1 = require("../utils/import-path");
 function testTemplate(action_name, new_file_fullpath) {
     const rel = (0, import_path_1.curryImportPath)(new_file_fullpath);
     return `import { withProdApp } from "${rel("src/back/test_utils/with-prod-app.js")}";
-import { LONG_TEST_TIMEOUT, webhintURL } from "${rel("src/back/test_utils/webhint.js")}";
+import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "${rel("src/back/test_utils/webhint.js")}";
 import { ${action_name}URL } from "${rel("src/back/routes/urls.js")}";
-import { getBrowser } from "${rel("src/test_utils/browser-creator.js")}";
+import { getBrowser } from "${rel("src/back/test_utils/browser-creator.js")}";
+import { Browser, BrowserContext, Page } from "@playwright/test";
 
 describe("${action_name} webhint", () => {
 	it(

package/lib/templates/stateful-page.js

@@ -4,14 +4,14 @@ exports.statefulPageTemplate = void 0;
 const import_path_1 = require("../utils/import-path");
 async function statefulPageTemplate(action_name, newfilefullpath) {
     const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
-    return `import { BaseContext } from "koa";
-import { tempstream, Templatable } from "tempstream";
+    return `import { TempstreamJSX, Templatable } from "tempstream";
+import { BaseContext } from "koa";
 import { StatefulPage } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
 
-const actions = <const>{
+const actions = {
 	add: (state: State, inputs: Record<string, string>) => {
 		console.log({ inputs });
 		return {
@@ -25,39 +25,43 @@ const actions = <const>{
 			elements: state.elements.filter((_, index) => index != index_to_remove),
 		};
 	},
-};
+} as const;
 
 type State = {
 	elements: string[];
 };
 
-	export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
+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 {
+	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>
+		return (
 			<div>
-				<input
+				<ul>
+					{state.elements.map((e, index) => (
+						<li>
+							{e} {this.makeActionButton(state, "remove", index)}
+						</li>
+					))}
+				</ul>
+				<div>
+					<input
 						name="element_to_add"
 						type="text"
-						value="\${inputs.element_to_add || ""}"
+						value={inputs.element_to_add || ""}
 					/>
-					\${this.makeActionButton(state, "add")}
-			</div>\`;
+					{this.makeActionButton(state, "add")}
+				</div>
+			</div>
+		);
 	}
 })();
 `;

package/lib/utils/import-path.js

@@ -8,7 +8,7 @@ const path_1 = require("path");
 const locreq_1 = __importDefault(require("locreq"));
 const target_locreq = (0, locreq_1.default)(process.cwd());
 function importPath(project_module_path, project_target_path) {
-    let result = (0, path_1.relative)((0, path_1.dirname)(target_locreq.resolve(project_module_path)), target_locreq.resolve(project_target_path).replace(/.ts$/, ".js"));
+    let result = (0, path_1.relative)((0, path_1.dirname)(target_locreq.resolve(project_module_path)), target_locreq.resolve(project_target_path).replace(/.tsx?$/, ".js"));
     if (result[0] != ".") {
         result = "./" + result;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.10.5",
+	"version": "0.11.0",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -55,7 +55,7 @@
 		"merge": "^2.1.1",
 		"prettier": "^2.7.1",
 		"prompts": "^2.4.2",
-		"tempstream": "^0.0.21",
+		"tempstream": "^0.3.0",
 		"tiny-glob": "^0.2.9",
 		"yargs": "^17.6.2"
 	},

package/src/add-route.test.ts

@@ -4,9 +4,13 @@ import { promisify } from "util";
 import axios from "axios";
 import waitPort from "wait-port";
 import getPort from "get-port";
+import _locreq from "locreq";
+const target_locreq = _locreq(__dirname);
 
 const execAsync = promisify(exec);
 
+const callSealgenBin = () => `node ${target_locreq.resolve("lib/cli.js")}`;
+
 describe("add route test", () => {
 	let node_pid = 0;
 	const app_path = "/tmp/sealious-minimal";
@@ -27,7 +31,7 @@ describe("add route test", () => {
 		this.timeout(250000);
 		console.log("\tcloning sealious-minimal...");
 		await execAsync(
-			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout ce4f33309294`
+			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout d5abeb9514359dde4`
 		);
 		console.log("\tinstalling dependencies and sealgen...");
 		await execAsync(
@@ -35,7 +39,7 @@ describe("add route test", () => {
 		);
 		console.log("\trunning add-route and building app...");
 		await execAsync(
-			`cd ${app_path} && npx sealgen add-route --url=/sample --action=Sample --mode=page && npm run build`
+			`cd ${app_path} && ${callSealgenBin()} add-route --url=/sample --action=Sample --mode=page && ${callSealgenBin()} build`
 		);
 		console.log(
 			"\tstarting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"

package/src/add-route.ts

@@ -47,9 +47,12 @@ export async function addRoute(
 	]);
 
 	const { action, url, mode } = response as Record<string, string>;
+	const extension = ["list", "lpr", "page", "sreact"].includes(mode)
+		? "tsx"
+		: "ts";
 
 	const file_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}.${mode}.ts`
+		`src/back/routes/${escape_url_params(url)}.${mode}.${extension}`
 	);
 	const test_file_path = target_locreq.resolve(
 		`src/back/routes/${escape_url_params(url)}.test.ts`

package/src/build.ts

@@ -1,5 +1,6 @@
 import { build, BuildResult } from "esbuild";
 import { promises as fs } from "fs";
+import { extname } from "path";
 import { sassPlugin } from "esbuild-sass-plugin";
 import * as chokidar from "chokidar";
 import { default as glob } from "tiny-glob";
@@ -9,23 +10,25 @@ import { generateCollections } from "./generate-collections";
 import { generateRoutes } from "./generate-routes";
 
 const generate_names = (function* generate_names() {
-	let base_name = "____unique_import_";
+	const base_name = "____unique_import_";
 	let count = 0;
 	while (true) {
-		yield base_name + count;
+		yield `${base_name}${count}`;
 		count++;
 	}
 })();
 
 async function build_ts() {
 	await Promise.all([generateCollections(), generateRoutes()]);
-	const entryPoints = (await glob("./src/back/**/*.ts")).filter(
+	const entryPoints = (await glob("./src/back/**/*.{ts,tsx}")).filter(
 		(path) => !path.includes(".#")
 	);
 	try {
 		await build({
 			entryPoints,
 			sourcemap: true,
+			bundle: false,
+			jsxFactory: "TempstreamJSX.createElement",
 			outdir: "./dist/back",
 			logLevel: "info",
 			platform: "node",
@@ -52,6 +55,7 @@ async function build_ts() {
 									all_named,
 									module_path
 								) => {
+									/* eslint-disable */
 									const new_name =
 										generate_names.next().value;
 									const result =
@@ -92,15 +96,20 @@ async function build_ts() {
 											})
 											.join(" ");
 									return result;
+									/* eslint-enable */
 								}
 							);
-							return { contents, loader: "ts" };
+							return {
+								contents,
+								loader: extname(path) === ".tsx" ? "tsx" : "ts",
+							};
 						});
 					},
 				},
 			],
 		});
 	} catch (e) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 		console.error(e.message);
 	}
 }
@@ -119,6 +128,7 @@ async function complex_build(watch: boolean): Promise<void> {
 					await scss_build?.rebuild?.();
 					console.log(`Built main.scss [on ${path}]`);
 				} catch (e) {
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 					console.error(e.message);
 					await sleep(200);
 					scss_build
@@ -128,7 +138,7 @@ async function complex_build(watch: boolean): Promise<void> {
 				}
 			}
 			if (
-				path.endsWith(".ts") &&
+				(path.endsWith(".ts") || path.endsWith(".tsx")) &&
 				!path.endsWith("src/back/collections/collections.ts") &&
 				!path.endsWith("src/back/routes/routes.ts") &&
 				!path.endsWith("src/back/routes/urls.ts")

package/src/forms/multiform.test.ts

@@ -109,8 +109,8 @@ async function general_form_validation_e2e_tests(js_enabled: boolean) {
 	await page.getByPlaceholder("password").click();
 	await page.getByPlaceholder("password").fill("test");
 	await page.locator("#multiform_test_form2_submit").click();
-	assertThrowsAsync(async () => {
-		page.getByText("Incorrect input").click({ timeout: 500 });
+	await assertThrowsAsync(async () => {
+		await page.getByText("Incorrect input").click({ timeout: 500 });
 	});
 }
 

package/src/generate-routes.ts

@@ -51,7 +51,10 @@ export async function generateRoutes(): Promise<void> {
 			await walkDir(target_locreq.resolve("src/back/routes"))
 		)
 			.filter((f) =>
-				Object.keys(Templates).some((key) => f.endsWith(`.${key}.ts`))
+				Object.keys(Templates).some(
+					(key) =>
+						f.endsWith(`.${key}.ts`) || f.endsWith(`.${key}.tsx`)
+				)
 			)
 			.map(async (fullpath) => ({
 				fullpath,

package/src/page/sealious-list.ts

@@ -9,6 +9,8 @@ import {
 } from "sealious";
 import { FlatTemplatable } from "tempstream";
 import { peopleWhoCan } from "./access-control";
+import qs from "qs";
+import { is, predicates } from "@sealcode/ts-predicates";
 
 export abstract class SealiousItemListPage<
 	C extends Collection,
@@ -64,6 +66,18 @@ export abstract class SealiousItemListPage<
 		return items;
 	}
 
+	async getFilterValues(ctx: Context) {
+		const query_params = qs.parse(ctx.search.slice(1));
+		const _filter_values = query_params?.filter || {};
+		let filter_values: Record<string, string | undefined> = is(
+			_filter_values,
+			predicates.record(predicates.string, predicates.string)
+		)
+			? _filter_values
+			: {};
+		return filter_values;
+	}
+
 	async renderItem(
 		_: Context,
 		item: CollectionItem<C>,

package/src/templates/list.ts

@@ -33,8 +33,8 @@ export const listTemplate = async (
 	]);
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
-import { CollectionItem, Field } from "sealious";
-import { FlatTemplatable, tempstream } from "tempstream";
+import { CollectionItem } from "sealious";
+import { FlatTemplatable, TempstreamJSX } from "tempstream";
 import { ${uppercase_collection} } from "${rel(
 		"src/back/collections/collections.js"
 	)}";
@@ -62,7 +62,7 @@ ${collection_fields
 	)
 	.join(",\n")}
 ] as {
-	field: keyof (typeof PatronEvents)["fields"];
+	field: keyof (typeof ${uppercase_collection})["fields"];
 	render?: ListFilterRender;
 }[];
 
@@ -98,38 +98,22 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 > {
 	fields = BaseListPageFields;
 
-	async render(ctx: Context) {
-		return html(
-			ctx,
-			"${action_name}",
-			tempstream/* HTML */ \`<div>
-				<h2>${action_name}</h2>
-				<table class="sealious-list">
-					\${this.renderTableHead(ctx, displayFields)}
-					<tbody>
-						\${super.render(ctx)}
-					</tbody>
-				</table>
-			</div>\`
-		);
-	}
-
 	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
 		const query_params = qs.parse(ctx.search.slice(1));
 		query_params.page = "1";
 		const filter_values = await this.getFilterValues(ctx);
-		return tempstream/* HTML */ \`<form>
-			\${Object.entries(query_params).map(([key, value]) => {
+		return <form>
+			{Object.entries(query_params).map(([key, value]) => {
 				if (key == "filter") {
 					return "";
 				}
-				return /* HTML */ \`<input
+				return <input
 					type="hidden"
 					name="\${key}"
 					value="\${value}"
-				/>\`;
+				/>;
 			})}
-			\${filterFields.map(({ field, render }) => {
+			{filterFields.map(({ field, render }) => {
 				if (!render) {
 					render = DefaultListFilters.fallback;
 				}
@@ -140,29 +124,32 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 				);
 			})}
 			<input type="submit" />
-		</form>\`;
-	}
-
-	async getFilterValues(ctx: Context) {
-		const query_params = qs.parse(ctx.search.slice(1));
-		const _filter_values = query_params?.filter || {};
-		let filter_values: Record<string, string | undefined> = is(
-			_filter_values,
-			predicates.record(predicates.string, predicates.string)
-		)
-			? _filter_values
-			: {};
-		return filter_values;
+		</form>;
 	}
 
 	async renderItem(_: Context, item: CollectionItem<typeof ${uppercase_collection}>) {
-		return tempstream/* HTML */ \`<tr>
-			\${displayFields.map(({ field, format }) => {
+		return <tr>
+			{displayFields.map(({ field, format }) => {
 				const value = item.get(field as any);
-				return tempstream\`<td>\${format ? format(value) : value}</td>\`;
+				return <td>{format ? format(value) : value}</td>;
 			})}
-		</tr>\`;
+		</tr>;
 	}
+
+	async render(ctx: Context) {
+		return html(
+			ctx,
+			"${action_name}",
+			<div>
+				<h2>${action_name} List</h2>
+				<table class="sealious-list">
+					{this.renderTableHead(ctx, displayFields)}
+					<tbody>{super.render(ctx)}</tbody>
+				</table>
+			</div>
+		);
+	}
+
 })(${uppercase_collection});
 `;
 };

package/src/templates/long-running-process.ts

@@ -6,7 +6,7 @@ export async function LongRunningProcessTemplate(
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
-import { tempstream } from "tempstream";
+import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 import { LongRunningProcess } from "sealious";
@@ -24,34 +24,38 @@ export default new (class PatroniteAutoImportStatusPage extends Page {
 	async render(ctx: Context) {
 		const lpr_id = ctx.params.id;
 		const lpr_data = LongRunningProcess.getByID(ctx.$context, lpr_id);
+		const render_script = lpr_data.state !== "error" && lpr_data.state !== "finished";
+		const script = /* HTML */ \`<script>
+			setTimeout(() => {
+				document.location = document.location;
+			}, \${this.interval});
+		</script>\`;
+
 		return html(
 			ctx,
 			"PatroniteAutoImportStatus",
-			tempstream/* HTML */ \`\${lpr_data.then(
-				(lpr_data) => tempstream/* HTML */ \`
-					<div>status: \${lpr_data.state}</div>
-					<div style="height: 20px; width: 100%">
-						<div
-							style="height: 100%; background-color: green; width: \${Math.round(
-								lpr_data.progress * 100
-							)}%"
-						></div>
-					</div>
-					<div>
-						\${lpr_data.events.map(
-							(e) => /* HTML */ \`<div>\${e.message}</div>\`
-						)}
-					</div>
-					\${lpr_data.state !== "error" &&
-					lpr_data.state !== "finished"
-						? /* HTML */ \`<script>
-								setTimeout(() => {
-									document.location = document.location;
-								}, \${this.interval});
-						  </script>\`
-						: ""}
-				\`
-			)}\`
+			<div>
+				{lpr_data.then((lpr_data) => {
+					return (
+						<div>
+							<div>status: {lpr_data.state}</div>
+							<div style="height: 20px; width: 100%">
+								<div
+									style="height: 100%; background-color: green; width: {Math.round(
+												lpr_data.progress * 100
+											)}%"
+								></div>
+							</div>
+							<div>
+								{lpr_data.events.map((e) => (
+									<div>{e.message}</div>
+								))}
+							</div>
+							{render_script ? { script } : ""}
+						</div>
+					);
+				})}
+			</div>
 		);
 	}
 })();

package/src/templates/page.ts

@@ -5,7 +5,7 @@ export async function pageTemplate(
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
-import { tempstream } from "tempstream";
+import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
@@ -18,7 +18,7 @@ export default new (class ${action_name}Page extends Page {
 	}
 
 	async render(ctx: Context) {
-		return html(ctx, "${action_name}", tempstream/* HTML */ \`<div></div>\`);
+		return html(ctx, "${action_name}", <div></div>);
 	}
 })();
 `;

package/src/templates/route-test.ts

@@ -5,11 +5,12 @@ export function testTemplate(action_name: string, new_file_fullpath: string) {
 	return `import { withProdApp } from "${rel(
 		"src/back/test_utils/with-prod-app.js"
 	)}";
-import { LONG_TEST_TIMEOUT, webhintURL } from "${rel(
+import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "${rel(
 		"src/back/test_utils/webhint.js"
 	)}";
 import { ${action_name}URL } from "${rel("src/back/routes/urls.js")}";
-import { getBrowser } from "${rel("src/test_utils/browser-creator.js")}";
+import { getBrowser } from "${rel("src/back/test_utils/browser-creator.js")}";
+import { Browser, BrowserContext, Page } from "@playwright/test";
 
 describe("${action_name} webhint", () => {
 	it(

package/src/templates/stateful-page.ts

@@ -5,14 +5,14 @@ export async function statefulPageTemplate(
 	newfilefullpath: string
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
-	return `import { BaseContext } from "koa";
-import { tempstream, Templatable } from "tempstream";
+	return `import { TempstreamJSX, Templatable } from "tempstream";
+import { BaseContext } from "koa";
 import { StatefulPage } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
 
-const actions = <const>{
+const actions = {
 	add: (state: State, inputs: Record<string, string>) => {
 		console.log({ inputs });
 		return {
@@ -26,39 +26,43 @@ const actions = <const>{
 			elements: state.elements.filter((_, index) => index != index_to_remove),
 		};
 	},
-};
+} as const;
 
 type State = {
 	elements: string[];
 };
 
-	export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
+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 {
+	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>
+		return (
 			<div>
-				<input
+				<ul>
+					{state.elements.map((e, index) => (
+						<li>
+							{e} {this.makeActionButton(state, "remove", index)}
+						</li>
+					))}
+				</ul>
+				<div>
+					<input
 						name="element_to_add"
 						type="text"
-						value="\${inputs.element_to_add || ""}"
+						value={inputs.element_to_add || ""}
 					/>
-					\${this.makeActionButton(state, "add")}
-			</div>\`;
+					{this.makeActionButton(state, "add")}
+				</div>
+			</div>
+		);
 	}
 })();
 `;

package/src/utils/import-path.ts

@@ -8,7 +8,7 @@ export function importPath(
 ): string {
 	let result = relative(
 		dirname(target_locreq.resolve(project_module_path)),
-		target_locreq.resolve(project_target_path).replace(/.ts$/, ".js")
+		target_locreq.resolve(project_target_path).replace(/.tsx?$/, ".js")
 	);
 	if (result[0] != ".") {
 		result = "./" + result;