@sealcode/sealgen 0.8.53 → 0.9.1

package/lib/add-route.js

@@ -31,7 +31,7 @@ async function addRoute(params, app_directory = process.cwd()) {
         {
             type: "text",
             name: "url",
-            message: "Enter a full absolute path for the new route (e.g. /admin/users/add): ",
+            message: "Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
             validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'",
         },
         {

package/lib/build.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildProject = void 0;
 const esbuild_1 = require("esbuild");
+const fs_1 = require("fs");
 const esbuild_sass_plugin_1 = require("esbuild-sass-plugin");
 const chokidar = __importStar(require("chokidar"));
 const tiny_glob_1 = __importDefault(require("tiny-glob"));
@@ -35,6 +36,14 @@ const find_scss_includes_1 = require("./find-scss-includes");
 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_";
+    let count = 0;
+    while (true) {
+        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(".#"));
@@ -46,7 +55,27 @@ async function build_ts() {
             logLevel: "info",
             platform: "node",
             target: "es2022",
-            format: "cjs",
+            format: "esm",
+            plugins: [
+                {
+                    name: "remove-named-imports",
+                    setup(build) {
+                        build.onLoad({ filter: /.*/ }, async ({ path }) => {
+                            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, (entire_string, default_import_name, _, all_named, module_path) => {
+                                const new_name = generate_names.next().value;
+                                return `import * as ${new_name} from ${module_path}; ${default_import_name
+                                    ? `const ${default_import_name.replace(",", "")} = ${new_name}`
+                                    : ""}; const ${all_named.replaceAll(/\s+as\s+/g, ": ")} = ${/\s+default\s+as/.test(all_named)
+                                    ? `${new_name};`
+                                    : `${new_name}.default || ${new_name};`}`;
+                            });
+                            return { contents, loader: "ts" };
+                        });
+                    },
+                },
+            ],
         });
     }
     catch (e) {

package/lib/generate-collections.js

@@ -61,7 +61,7 @@ async function generateCollections() {
 import { App } from "sealious";
 
 ${file_data
-        .map(({ class_name, urlname }) => `import _${class_name} from "./${urlname}";`)
+        .map(({ class_name, urlname }) => `import _${class_name} from "./${urlname}.js";`)
         .join("\n")}
 	
 ${file_data

package/lib/generate-routes.js

@@ -84,7 +84,7 @@ async function generateRoutes() {
 
 import Router from "@koa/router";
 import { mount } from "@sealcode/sealgen";
-import * as URLs from "./urls"
+import * as URLs from "./urls.js"
 
 ${files
         .map(({ actionName, fullpath }) => `import { default as ${actionName} } from "${(0, import_path_1.importPath)(target_locreq.resolve("src/back/routes/routes.ts"), fullpath)}";`)

package/lib/page/list.js

@@ -77,31 +77,38 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
     async renderPagination(ctx, values) {
         const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
         const totalIems = await this.getTotalPages(ctx, itemsPerPage, values);
-        return (0, tempstream_1.tempstream /* HTML */) `<center>
-			${page > 1 ? this.renderPageButton(ctx, 1, "Pierwsza strona") : ""}
-			${page > 1
+        return (0, tempstream_1.tempstream /* HTML */) `<div class="list-pagination">
+			<div class="list-pagination__left">
+				${page > 1
+            ? this.renderPageButton(ctx, 1, "Pierwsza strona")
+            : ""}
+				${page > 1
             ? this.renderPageButton(ctx, page - 1, "Poprzednia strona")
             : ""}
-
-			<select onchange="if (this.value) Turbo.visit(this.value)">
-				${Array.from((0, utils_1.naturalNumbers)(1, totalIems)).map((n) => /* HTML */ `<option
-						value="${(0, utils_1.UrlWithNewParams)(ctx, 
+			</div>
+			<div class="list-pagination__center">
+				<select onchange="if (this.value) Turbo.visit(this.value)">
+					${Array.from((0, utils_1.naturalNumbers)(1, totalIems)).map((n) => /* HTML */ `<option
+							value="${(0, utils_1.UrlWithNewParams)(ctx, 
         //eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         this.propsParser.overwriteProp(ctx, {
             page: n,
         }))}"
-						${page === n ? "selected" : ""}
-					>
-						${n}
-					</option>`)}
-			</select>
-			${page < totalIems
+							${page === n ? "selected" : ""}
+						>
+							${n}
+						</option>`)}
+				</select>
+			</div>
+			<div class="list-pagination__right">
+				${page < totalIems
             ? this.renderPageButton(ctx, page + 1, "Następna strona")
             : ""}
-			${page < totalIems
+				${page < totalIems
             ? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
             : ""}
-		</center>`;
+			</div>
+		</div>`;
     }
     renderPageButton(ctx, page, text) {
         return /* HTML */ `<a

package/lib/templates/form.js

@@ -6,8 +6,8 @@ async function formTemplate(action_name, newfilefullpath) {
     const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
 import { Form, FormData, FormDataValue, Fields, Controls } from "@sealcode/sealgen";
-import html from "${rel("src/back/html")}";
-import { Users } from "${rel("src/back/collections/collections")}";
+import html from "${rel("src/back/html.js")}";
+import { Users } from "${rel("src/back/collections/collections.js")}";
 
 export const actionName = "${action_name}";
 

package/lib/templates/list.js

@@ -20,8 +20,8 @@ const listTemplate = async (action_name, newfilefullpath) => {
     return `import { Context } from "koa";
 import { CollectionItem } from "sealious";
 import { tempstream } from "tempstream";
-import { ${uppercase_collection} } from "${rel("src/back/collections/collections")}";
-import html from "${rel("src/back/html.ts")}";
+import { ${uppercase_collection} } from "${rel("src/back/collections/collections.js")}";
+import html from "${rel("src/back/html.js")}";
 import { SealiousItemListPage, BaseListPageFields } from "@sealcode/sealgen";
 
 export const actionName = "${action_name}";
@@ -43,7 +43,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			"${uppercase_collection}",
 			tempstream/* HTML */ \`<div>
 				<h2>${uppercase_collection} List</h2>
-				<table>
+				<table class="sealious-list">
 					\${this.renderTableHead(ctx, [
 						{ field: "id" },
 						...Object.keys(Patrons.fields).map((field) => ({

package/lib/templates/multiform.js

@@ -5,7 +5,7 @@ const utils_1 = require("../utils/utils");
 async function multiformTemplate(action_name, newfilefullpath) {
     const rel = (0, utils_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
-import html from "${rel("src/back/html")}";
+import html from "${rel("src/back/html.js")}";
 import { Controls, Fields, Form, FormMessage, Multiform } from "@sealcode/sealgen";
 import { FlatTemplatable } from "tempstream";
 

package/lib/templates/page.js

@@ -7,7 +7,7 @@ async function pageTemplate(action_name, newfilefullpath) {
     return `import { Context } from "koa";
 import { tempstream } from "tempstream";
 import { Page } from "@sealcode/sealgen";
-import html from "${rel("src/back/html")}";
+import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
 

package/lib/templates/route-test.js

@@ -4,22 +4,52 @@ exports.testTemplate = void 0;
 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")}";
-import { LONG_TEST_TIMEOUT, webhintURL } from "${rel("src/back/test_utils/webhint")}";
-import { ${action_name}URL } from "${rel("src/back/routes/urls")}";
+    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 { ${action_name}URL } from "${rel("src/back/routes/urls.js")}";
+import { getBrowser } from "${rel("src/test_utils/browser-creator.js")}";
+
+describe("${action_name} webhint", () => {
+	it(
+		"doesn't crash",
+		async function () {
+			return withProdApp(async ({ base_url, rest_api }) => {
+				await rest_api.get(${action_name}URL);
+				await webhintURL(base_url + ${action_name}URL);
+				// alternatively you can use webhintHTML for faster but less precise scans
+				// or for scanning responses of requests that use some form of authorization:
+				// const response = await rest_api.get(${action_name}URL);
+				// await webhintHTML(response);
+			});
+		},
+		VERY_LONG_TEST_TIMEOUT
+	);
+});
 
 describe("${action_name}", () => {
-	it("doesn't crash", async function () {
-		this.timeout(LONG_TEST_TIMEOUT);
-		return withProdApp(async ({ base_url, rest_api }) => {
-			await rest_api.get(${action_name}URL);
-			await webhintURL(base_url + ${action_name}URL);
-			// alternatively you can use webhintHTML for faster but less precise scans
-			// or for scanning responses of requests that use some form of authorization:
-			// const response = await rest_api.get(${action_name}URL);
-			// await webhintHTML(response);
-		});
+	let page: Page;
+	let browser: Browser;
+	let context: BrowserContext;
+
+	beforeEach(async () => {
+		browser = await getBrowser();
+		context = await browser.newContext();
+		page = await context.newPage();
 	});
+
+	afterEach(async () => {
+		await context.close();
+	});
+
+	it(
+		"works as expected",
+		async function () {
+			return withProdApp(async ({ base_url }) => {
+				await page.goto(base_url + ${action_name}URL);
+			});
+		},
+		VERY_LONG_TEST_TIMEOUT
+	);
 });
 `;
 }

package/lib/templates/stateful-page.js

@@ -7,7 +7,7 @@ async function statefulPageTemplate(action_name, newfilefullpath) {
     return `import { BaseContext } from "koa";
 import { tempstream, Templatable } from "tempstream";
 import { StatefulPage } from "@sealcode/sealgen";
-import html from "${rel("src/back/html")}";
+import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
 

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$/, ""));
+    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"));
     if (result[0] != ".") {
         result = "./" + result;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.8.53",
+	"version": "0.9.1",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"playwright": "^1.29.2",
 		"source-map-support": "^0.5.21",
 		"ts-node": "^10.9.1",
-		"typescript": "^4.4",
+		"typescript": "^4.7",
 		"wait-port": "^1.0.4"
 	},
 	"types": "./@types/index.d.ts",

package/src/add-route.ts

@@ -31,7 +31,7 @@ export async function addRoute(
 			type: "text",
 			name: "url",
 			message:
-				"Enter a full absolute path for the new route (e.g. /admin/users/add): ",
+				"Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
 			validate: (s: string) =>
 				s.trim()[0] == "/" ? true : "Should start with a '/'",
 		},

package/src/build.ts

@@ -1,4 +1,5 @@
 import { build, BuildResult } from "esbuild";
+import { promises as fs } from "fs";
 import { sassPlugin } from "esbuild-sass-plugin";
 import * as chokidar from "chokidar";
 import { default as glob } from "tiny-glob";
@@ -7,6 +8,15 @@ import { sleep } from "./utils/sleep";
 import { generateCollections } from "./generate-collections";
 import { generateRoutes } from "./generate-routes";
 
+const generate_names = (function* generate_names() {
+	let base_name = "______unique_import_";
+	let count = 0;
+	while (true) {
+		yield base_name + count;
+		count++;
+	}
+})();
+
 async function build_ts() {
 	await Promise.all([generateCollections(), generateRoutes()]);
 	const entryPoints = (await glob("./src/back/**/*.ts")).filter(
@@ -20,7 +30,52 @@ async function build_ts() {
 			logLevel: "info",
 			platform: "node",
 			target: "es2022",
-			format: "cjs",
+			format: "esm",
+			plugins: [
+				{
+					name: "remove-named-imports", // named imports sometime cause some esm incompatibilities, like the "is a CommonJS module, which may not support all module.exports as named exports." error
+					setup(build) {
+						build.onLoad({ filter: /.*/ }, async ({ path }) => {
+							const named_and_default_regex =
+								/^import\s+((\S+),\s+)?({\s*[^}]+})\s+from\s+("[^"]+");\s*$/gm;
+
+							const old_content = await fs.readFile(
+								path,
+								"utf-8"
+							);
+							const contents = old_content.replace(
+								named_and_default_regex,
+								(
+									entire_string,
+									default_import_name,
+									_,
+									all_named,
+									module_path
+								) => {
+									const new_name =
+										generate_names.next().value;
+									return `import * as ${new_name} from ${module_path}; ${
+										default_import_name
+											? `const ${default_import_name.replace(
+													",",
+													""
+											  )} = ${new_name}`
+											: ""
+									}; const ${all_named.replaceAll(
+										/\s+as\s+/g,
+										": "
+									)} = ${
+										/\s+default\s+as/.test(all_named)
+											? `${new_name};`
+											: `${new_name}.default || ${new_name};`
+									}`;
+								}
+							);
+							return { contents, loader: "ts" };
+						});
+					},
+				},
+			],
 		});
 	} catch (e) {
 		console.error(e.message);

package/src/generate-collections.ts

@@ -51,7 +51,7 @@ import { App } from "sealious";
 ${file_data
 	.map(
 		({ class_name, urlname }) =>
-			`import _${class_name} from "./${urlname}";`
+			`import _${class_name} from "./${urlname}.js";`
 	)
 	.join("\n")}
 	

package/src/generate-routes.ts

@@ -77,7 +77,7 @@ export async function generateRoutes(): Promise<void> {
 
 import Router from "@koa/router";
 import { mount } from "@sealcode/sealgen";
-import * as URLs from "./urls"
+import * as URLs from "./urls.js"
 
 ${files
 	.map(

package/src/page/list.ts

@@ -120,35 +120,42 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 		const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
 		const totalIems = await this.getTotalPages(ctx, itemsPerPage, values);
 
-		return tempstream/* HTML */ `<center>
-			${page > 1 ? this.renderPageButton(ctx, 1, "Pierwsza strona") : ""}
-			${page > 1
-				? this.renderPageButton(ctx, page - 1, "Poprzednia strona")
-				: ""}
-
-			<select onchange="if (this.value) Turbo.visit(this.value)">
-				${Array.from(naturalNumbers(1, totalIems)).map(
-					(n) => /* HTML */ `<option
-						value="${UrlWithNewParams(
-							ctx,
-							//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-							this.propsParser.overwriteProp(ctx, {
-								page: n,
-							} as Partial<Record<string, unknown>>)
-						)}"
-						${page === n ? "selected" : ""}
-					>
-						${n}
-					</option>`
-				)}
-			</select>
-			${page < totalIems
-				? this.renderPageButton(ctx, page + 1, "Następna strona")
-				: ""}
-			${page < totalIems
-				? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
-				: ""}
-		</center>`;
+		return tempstream/* HTML */ `<div class="list-pagination">
+			<div class="list-pagination__left">
+				${page > 1
+					? this.renderPageButton(ctx, 1, "Pierwsza strona")
+					: ""}
+				${page > 1
+					? this.renderPageButton(ctx, page - 1, "Poprzednia strona")
+					: ""}
+			</div>
+			<div class="list-pagination__center">
+				<select onchange="if (this.value) Turbo.visit(this.value)">
+					${Array.from(naturalNumbers(1, totalIems)).map(
+						(n) => /* HTML */ `<option
+							value="${UrlWithNewParams(
+								ctx,
+								//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+								this.propsParser.overwriteProp(ctx, {
+									page: n,
+								} as Partial<Record<string, unknown>>)
+							)}"
+							${page === n ? "selected" : ""}
+						>
+							${n}
+						</option>`
+					)}
+				</select>
+			</div>
+			<div class="list-pagination__right">
+				${page < totalIems
+					? this.renderPageButton(ctx, page + 1, "Następna strona")
+					: ""}
+				${page < totalIems
+					? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
+					: ""}
+			</div>
+		</div>`;
 	}
 
 	private renderPageButton(ctx: Context, page: number, text: string) {

package/src/templates/form.ts

@@ -7,8 +7,8 @@ export async function formTemplate(
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
 import { Form, FormData, FormDataValue, Fields, Controls } from "@sealcode/sealgen";
-import html from "${rel("src/back/html")}";
-import { Users } from "${rel("src/back/collections/collections")}";
+import html from "${rel("src/back/html.js")}";
+import { Users } from "${rel("src/back/collections/collections.js")}";
 
 export const actionName = "${action_name}";
 

package/src/templates/list.ts

@@ -25,9 +25,9 @@ export const listTemplate = async (
 import { CollectionItem } from "sealious";
 import { tempstream } from "tempstream";
 import { ${uppercase_collection} } from "${rel(
-		"src/back/collections/collections"
+		"src/back/collections/collections.js"
 	)}";
-import html from "${rel("src/back/html.ts")}";
+import html from "${rel("src/back/html.js")}";
 import { SealiousItemListPage, BaseListPageFields } from "@sealcode/sealgen";
 
 export const actionName = "${action_name}";
@@ -49,7 +49,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			"${uppercase_collection}",
 			tempstream/* HTML */ \`<div>
 				<h2>${uppercase_collection} List</h2>
-				<table>
+				<table class="sealious-list">
 					\${this.renderTableHead(ctx, [
 						{ field: "id" },
 						...Object.keys(Patrons.fields).map((field) => ({

package/src/templates/multiform.ts

@@ -6,7 +6,7 @@ export async function multiformTemplate(
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
-import html from "${rel("src/back/html")}";
+import html from "${rel("src/back/html.js")}";
 import { Controls, Fields, Form, FormMessage, Multiform } from "@sealcode/sealgen";
 import { FlatTemplatable } from "tempstream";
 

package/src/templates/page.ts

@@ -7,7 +7,7 @@ export async function pageTemplate(
 	return `import { Context } from "koa";
 import { tempstream } from "tempstream";
 import { Page } from "@sealcode/sealgen";
-import html from "${rel("src/back/html")}";
+import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
 

package/src/templates/route-test.ts

@@ -3,25 +3,55 @@ import { curryImportPath } from "../utils/import-path";
 export function testTemplate(action_name: string, new_file_fullpath: string) {
 	const rel = curryImportPath(new_file_fullpath);
 	return `import { withProdApp } from "${rel(
-		"src/back/test_utils/with-prod-app"
+		"src/back/test_utils/with-prod-app.js"
 	)}";
 import { LONG_TEST_TIMEOUT, webhintURL } from "${rel(
-		"src/back/test_utils/webhint"
+		"src/back/test_utils/webhint.js"
 	)}";
-import { ${action_name}URL } from "${rel("src/back/routes/urls")}";
+import { ${action_name}URL } from "${rel("src/back/routes/urls.js")}";
+import { getBrowser } from "${rel("src/test_utils/browser-creator.js")}";
+
+describe("${action_name} webhint", () => {
+	it(
+		"doesn't crash",
+		async function () {
+			return withProdApp(async ({ base_url, rest_api }) => {
+				await rest_api.get(${action_name}URL);
+				await webhintURL(base_url + ${action_name}URL);
+				// alternatively you can use webhintHTML for faster but less precise scans
+				// or for scanning responses of requests that use some form of authorization:
+				// const response = await rest_api.get(${action_name}URL);
+				// await webhintHTML(response);
+			});
+		},
+		VERY_LONG_TEST_TIMEOUT
+	);
+});
 
 describe("${action_name}", () => {
-	it("doesn't crash", async function () {
-		this.timeout(LONG_TEST_TIMEOUT);
-		return withProdApp(async ({ base_url, rest_api }) => {
-			await rest_api.get(${action_name}URL);
-			await webhintURL(base_url + ${action_name}URL);
-			// alternatively you can use webhintHTML for faster but less precise scans
-			// or for scanning responses of requests that use some form of authorization:
-			// const response = await rest_api.get(${action_name}URL);
-			// await webhintHTML(response);
-		});
+	let page: Page;
+	let browser: Browser;
+	let context: BrowserContext;
+
+	beforeEach(async () => {
+		browser = await getBrowser();
+		context = await browser.newContext();
+		page = await context.newPage();
 	});
+
+	afterEach(async () => {
+		await context.close();
+	});
+
+	it(
+		"works as expected",
+		async function () {
+			return withProdApp(async ({ base_url }) => {
+				await page.goto(base_url + ${action_name}URL);
+			});
+		},
+		VERY_LONG_TEST_TIMEOUT
+	);
 });
 `;
 }

package/src/templates/stateful-page.ts

@@ -8,7 +8,7 @@ export async function statefulPageTemplate(
 	return `import { BaseContext } from "koa";
 import { tempstream, Templatable } from "tempstream";
 import { StatefulPage } from "@sealcode/sealgen";
-import html from "${rel("src/back/html")}";
+import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
 

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$/, "")
+		target_locreq.resolve(project_target_path).replace(/.ts$/, ".js")
 	);
 	if (result[0] != ".") {
 		result = "./" + result;