@sealcode/sealgen 0.10.6 → 0.11.1

package/@types/add-jdd-component.d.ts

@@ -0,0 +1 @@
+export declare function addJDDComponent(): Promise<void>;

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/generate-components.d.ts

@@ -0,0 +1 @@
+export declare function generateComponents(): Promise<void>;

package/@types/templates/jdd-component.d.ts

@@ -0,0 +1 @@
+export declare function jddComponentTemplate(component_name: string): string;

package/@types/templates/templates.d.ts

@@ -1,4 +1,5 @@
 import { formTemplate } from "./form";
+import { jddComponentTemplate } from "./jdd-component";
 import { LongRunningProcessTemplate } from "./long-running-process";
 import { multiformTemplate } from "./multiform";
 import { pageTemplate } from "./page";
@@ -14,4 +15,5 @@ export declare const Templates: {
     post: typeof postTemplate;
     sreact: typeof statefulPageTemplate;
     lpr: typeof LongRunningProcessTemplate;
+    jdd: typeof jddComponentTemplate;
 };

package/lib/add-jdd-component.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addJDDComponent = void 0;
+const path_1 = require("path");
+const locreq_1 = __importDefault(require("locreq"));
+const fs_1 = require("fs");
+const question_1 = require("./utils/question");
+const target_locreq = (0, locreq_1.default)(process.cwd());
+const jdd_component_1 = require("./templates/jdd-component");
+const generate_components_1 = require("./generate-components");
+const js_convert_case_1 = require("js-convert-case");
+async function addJDDComponent() {
+    const component_name = await (0, question_1.question)("What's the name of the component?  > ", (s) => s.length > 3);
+    const file_path = target_locreq.resolve(`src/back/jdd-components/${(0, js_convert_case_1.toKebabCase)(component_name)}/${(0, js_convert_case_1.toKebabCase)(component_name)}.jdd.tsx`);
+    if ((0, fs_1.existsSync)(file_path)) {
+        // eslint-disable-next-line no-console
+        console.error(`ERROR: File ${file_path} already exists.`);
+        return;
+    }
+    await fs_1.promises.mkdir((0, path_1.resolve)(file_path, "../"), { recursive: true });
+    await fs_1.promises.writeFile(file_path, (0, jdd_component_1.jddComponentTemplate)(component_name));
+    const css_file_path = target_locreq.resolve(`src/back/jdd-components/${(0, js_convert_case_1.toKebabCase)(component_name)}/${(0, js_convert_case_1.toKebabCase)(component_name)}.scss`);
+    await fs_1.promises.writeFile(css_file_path, `.${(0, js_convert_case_1.toKebabCase)(component_name)} {
+}`);
+    // eslint-disable-next-line no-console
+    console.log(`Created ${file_path}`);
+    console.log(`Created ${css_file_path}`);
+    await (0, generate_components_1.generateComponents)();
+}
+exports.addJDDComponent = addJDDComponent;
+//# sourceMappingURL=add-jdd-component.js.map

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/cli.js

@@ -2,16 +2,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const add_collection_1 = require("./add-collection");
+const add_jdd_component_1 = require("./add-jdd-component");
 const add_route_1 = require("./add-route");
 const build_1 = require("./build");
 const find_scss_includes_1 = require("./find-scss-includes");
 const generate_collections_1 = require("./generate-collections");
+const generate_components_1 = require("./generate-components");
 const generate_routes_1 = require("./generate-routes");
 const make_env_1 = require("./make-env");
 const actions = {
     "add-collection": add_collection_1.addCollection,
     "add-route": add_route_1.addRoute,
     "generate-collections": generate_collections_1.generateCollections,
+    "generate-components": generate_components_1.generateComponents,
     "generate-routes": generate_routes_1.generateRoutes,
     "generate-scss-includes": find_scss_includes_1.generateScssIncludes,
     build: build_1.buildProject,
@@ -22,6 +25,7 @@ const actions = {
             .join(", ")}`);
     },
     "make-env": make_env_1.makeEnv,
+    "add-component": add_jdd_component_1.addJDDComponent
 };
 void (async function () {
     const action = process.argv.at(2);

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-components.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateComponents = void 0;
+const locreq_1 = __importDefault(require("locreq"));
+const prettier = __importStar(require("prettier"));
+const fs_1 = require("fs");
+const prettier_1 = require("./utils/prettier");
+const recursive_readdir_1 = __importDefault(require("recursive-readdir"));
+const path_1 = __importDefault(require("path"));
+const js_convert_case_1 = require("js-convert-case");
+const target_locreq = (0, locreq_1.default)(process.cwd());
+async function generateComponents() {
+    const components_dir = target_locreq.resolve("src/back/jdd-components");
+    const component_names = (await (0, recursive_readdir_1.default)(components_dir)).filter((c) => c.endsWith(".jdd.tsx"));
+    const component_data = component_names
+        .map((p) => "./" +
+        path_1.default.relative(components_dir, p).replace(/\.[tj]sx?$/, ".js"))
+        .map((relative_path) => {
+        const name = relative_path.match(/\/([^\/]+).jdd/)?.[1];
+        return { name, relative_path };
+    });
+    const content = `// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-components'
+	import { Registry } from "@sealcode/jdd";
+
+	export const registry = new Registry();
+${component_data
+        .map((c) => `
+	import { ${(0, js_convert_case_1.toPascalCase)(c.name)} } from "${c.relative_path}";
+	registry.add("${(0, js_convert_case_1.toKebabCase)(c.name)}", ${(0, js_convert_case_1.toPascalCase)(c.name)});`)
+        .join("\n")}`;
+    const target = "src/back/jdd-components/components.ts";
+    await fs_1.promises.writeFile(target_locreq.resolve(target), prettier.format(content, await (0, prettier_1.getPrettierConfig)()));
+    // eslint-disable-next-line no-console
+    console.log(`Successfuly generated new ${target} file`);
+}
+exports.generateComponents = generateComponents;
+//# sourceMappingURL=generate-components.js.map

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/templates/jdd-component.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jddComponentTemplate = void 0;
+const js_convert_case_1 = require("js-convert-case");
+function jddComponentTemplate(component_name) {
+    return `import { FlatTemplatable, TempstreamJSX } from "tempstream";
+import {
+	Component,
+	ComponentArguments,
+	ExtractStructuredComponentArgumentsValues,
+	JDDContext,
+} from "@sealcode/jdd";
+
+const component_arguments = {
+	title: new ComponentArguments.ShortText(),
+	content: new ComponentArguments.Markdown(),
+} as const;
+
+export class ${(0, js_convert_case_1.toPascalCase)(component_name)} extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML(
+		{
+			title,
+			content,
+		}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
+		{ render_markdown }: JDDContext
+	): FlatTemplatable {
+		return (
+			<div class="${(0, js_convert_case_1.toKebabCase)(component_name)}">
+				<h2>{title} • ${(0, js_convert_case_1.toPascalCase)(component_name)} </h2>
+				<div>{render_markdown(content)}</div>
+			</div>
+		);
+	}
+}
+
+`;
+}
+exports.jddComponentTemplate = jddComponentTemplate;
+//# sourceMappingURL=jdd-component.js.map

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;
 }[];
 
@@ -91,18 +91,18 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 		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;
 				}
@@ -113,31 +113,29 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 				);
 			})}
 			<input type="submit" />
-		</form>\`;
+		</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}",
-			tempstream/* HTML */ \`<div>
-				<h2>${action_name}</h2>
+			<div>
+				<h2>${action_name} List</h2>
 				<table class="sealious-list">
-					\${this.renderTableHead(ctx, displayFields)}
-					<tbody>
-						\${super.render(ctx)}
-					</tbody>
+					{this.renderTableHead(ctx, displayFields)}
+					<tbody>{super.render(ctx)}</tbody>
 				</table>
-			</div>\`
+			</div>
 		);
 	}
 

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/templates/templates.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Templates = void 0;
 const form_1 = require("./form");
+const jdd_component_1 = require("./jdd-component");
 const list_1 = require("./list");
 const long_running_process_1 = require("./long-running-process");
 const multiform_1 = require("./multiform");
@@ -18,5 +19,6 @@ exports.Templates = {
     post: post_1.postTemplate,
     sreact: stateful_page_1.statefulPageTemplate,
     lpr: long_running_process_1.LongRunningProcessTemplate,
+    jdd: jdd_component_1.jddComponentTemplate,
 };
 //# sourceMappingURL=templates.js.map

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;
     }