@sealcode/sealgen 0.10.6 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.10.6",
+	"version": "0.11.1",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -26,6 +26,7 @@
 		"@types/node": "^18.11.4",
 		"@types/prettier": "^2.7.0",
 		"@types/prompts": "^2.0.14",
+		"@types/recursive-readdir": "^2.2.4",
 		"@typescript-eslint/eslint-plugin": "^4.29.3",
 		"@typescript-eslint/parser": "^4.29.3",
 		"eslint": "^7.32.0",
@@ -50,12 +51,14 @@
 		"deepmerge": "^4.3.1",
 		"esbuild": "^0.15.5",
 		"esbuild-sass-plugin": "^2.3.1",
+		"js-convert-case": "^4.2.0",
 		"koa": "^2.13.0",
 		"locreq": "^2.0.2",
 		"merge": "^2.1.1",
 		"prettier": "^2.7.1",
 		"prompts": "^2.4.2",
-		"tempstream": "^0.0.21",
+		"recursive-readdir": "^2.2.3",
+		"tempstream": "^0.3.0",
 		"tiny-glob": "^0.2.9",
 		"yargs": "^17.6.2"
 	},

package/src/add-jdd-component.ts

@@ -0,0 +1,43 @@
+import { resolve } from "path";
+import _locreq from "locreq";
+import { promises as fs, existsSync } from "fs";
+import { question } from "./utils/question";
+const target_locreq = _locreq(process.cwd());
+import { jddComponentTemplate } from "./templates/jdd-component";
+import { generateComponents } from "./generate-components";
+import { toKebabCase } from "js-convert-case";
+
+export async function addJDDComponent(): Promise<void> {
+	const component_name = await question(
+		"What's the name of the component?  > ",
+		(s: string) => s.length > 3
+	);
+	const file_path = target_locreq.resolve(
+		`src/back/jdd-components/${toKebabCase(component_name)}/${toKebabCase(
+			component_name
+		)}.jdd.tsx`
+	);
+
+	if (existsSync(file_path)) {
+		// eslint-disable-next-line no-console
+		console.error(`ERROR: File ${file_path} already exists.`);
+		return;
+	}
+	await fs.mkdir(resolve(file_path, "../"), { recursive: true });
+	await fs.writeFile(file_path, jddComponentTemplate(component_name));
+
+	const css_file_path = target_locreq.resolve(
+		`src/back/jdd-components/${toKebabCase(component_name)}/${toKebabCase(
+			component_name
+		)}.scss`
+	);
+	await fs.writeFile(
+		css_file_path,
+		`.${toKebabCase(component_name)} {
+}`
+	);
+	// eslint-disable-next-line no-console
+	console.log(`Created ${file_path}`);
+	console.log(`Created ${css_file_path}`);
+	await generateComponents();
+}

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

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 import { addCollection } from "./add-collection";
+import { addJDDComponent } from "./add-jdd-component";
 import { addRoute } from "./add-route";
 import { buildProject } from "./build";
 import { generateScssIncludes } from "./find-scss-includes";
 import { generateCollections } from "./generate-collections";
+import { generateComponents } from "./generate-components";
 import { generateRoutes } from "./generate-routes";
 import { makeEnv } from "./make-env";
 
@@ -14,6 +16,7 @@ const actions: Record<
 	"add-collection": addCollection,
 	"add-route": addRoute,
 	"generate-collections": generateCollections,
+	"generate-components": generateComponents,
 	"generate-routes": generateRoutes,
 	"generate-scss-includes": generateScssIncludes,
 	build: buildProject,
@@ -26,6 +29,7 @@ const actions: Record<
 		);
 	},
 	"make-env": makeEnv,
+    "add-component": addJDDComponent
 };
 
 void (async function () {

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

@@ -0,0 +1,46 @@
+import _locreq from "locreq";
+import * as prettier from "prettier";
+import { promises as fs } from "fs";
+import { assertType, predicates } from "@sealcode/ts-predicates";
+import { getPrettierConfig } from "./utils/prettier";
+import recursive from "recursive-readdir";
+import path from "path";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+
+const target_locreq = _locreq(process.cwd());
+
+export async function generateComponents(): Promise<void> {
+	const components_dir = target_locreq.resolve("src/back/jdd-components");
+	const component_names = (await recursive(components_dir)).filter((c) =>
+		c.endsWith(".jdd.tsx")
+	);
+	const component_data = component_names
+		.map(
+			(p) =>
+				"./" +
+				path.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 { ${toPascalCase(c.name)} } from "${c.relative_path}";
+	registry.add("${toKebabCase(c.name)}", ${toPascalCase(c.name)});`
+	)
+	.join("\n")}`;
+	const target = "src/back/jdd-components/components.ts";
+	await fs.writeFile(
+		target_locreq.resolve(target),
+		prettier.format(content, await getPrettierConfig())
+	);
+	// eslint-disable-next-line no-console
+	console.log(`Successfuly generated new ${target} file`);
+}

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

@@ -0,0 +1,41 @@
+import { toKebabCase, toPascalCase } from "js-convert-case";
+
+export function jddComponentTemplate(component_name: string) {
+	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 ${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="${toKebabCase(component_name)}">
+				<h2>{title} • ${toPascalCase(component_name)} </h2>
+				<div>{render_markdown(content)}</div>
+			</div>
+		);
+	}
+}
+
+`;
+}

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;
 }[];
 
@@ -102,18 +102,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;
 				}
@@ -124,31 +124,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/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/templates/templates.ts

@@ -1,4 +1,5 @@
 import { formTemplate } from "./form";
+import { jddComponentTemplate } from "./jdd-component";
 import { listTemplate } from "./list";
 import { LongRunningProcessTemplate } from "./long-running-process";
 import { multiformTemplate } from "./multiform";
@@ -16,4 +17,5 @@ export const Templates = {
 	post: postTemplate,
 	sreact: statefulPageTemplate,
 	lpr: LongRunningProcessTemplate,
+	jdd: jddComponentTemplate,
 };

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;