@sealcode/sealgen 0.8.52 → 0.9.0

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

@@ -18,6 +18,7 @@ export * from "./forms/form";
 export * from "./page/props-parser";
 export * from "./utils/utils";
 export * from "./page/list";
+export * from "./page/sealious-list";
 export * from "./utils/translate";
 export * as sanitize from "./sanitize";
 export * from "./forms/multiform";

package/src/page/list.ts

@@ -1,21 +1,13 @@
 import { Context } from "koa";
-import {
-	Collection,
-	CollectionItem,
-	ItemList,
-	Context as SealiousContext,
-	CollectionInput,
-} from "sealious";
-
 import { Templatable, tempstream, FlatTemplatable } from "tempstream";
-import { peopleWhoCan } from "./access-control";
 import { Page } from "./page";
 import { ShapeToType } from "@sealcode/ts-predicates";
 import { FormControl } from "../forms/controls/controls";
-import { FormField, NumberField } from "../forms/fields/field";
+import { FormField, NumberField, SimpleFormField } from "../forms/fields/field";
 import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
 import { FormDataValue } from "..";
 import { makeHiddenInputs } from "../make-hidden-inputs";
+import qs from "qs";
 
 export const BasePagePropsShape = <const>{};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
@@ -23,8 +15,33 @@ export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
 export const BaseListPageFields = <const>{
 	page: new NumberField(false, 1),
 	itemsPerPage: new NumberField(false, 12),
+	sort: new SimpleFormField(false),
 };
 
+const SORT_SEPARATOR = ":";
+function decodeSort(
+	s: unknown
+): { field: string; order: "asc" | "desc" } | null {
+	if (typeof s !== "string" || !s.includes(SORT_SEPARATOR)) {
+		return null;
+	}
+	let order = s.split(SORT_SEPARATOR)[1];
+	const field = s.split(SORT_SEPARATOR)[0];
+	if (order !== "asc" && order !== "desc") {
+		order = "asc";
+		return {
+			field,
+			order: order as "asc",
+		};
+	} else {
+		return { field, order };
+	}
+}
+
+function encodeSort(field: string, order: "asc" | "desc") {
+	return [field, order].join(SORT_SEPARATOR);
+}
+
 export abstract class ListPage<
 	ItemType,
 	F extends typeof BaseListPageFields
@@ -103,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) {
@@ -158,6 +182,21 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 		return filter;
 	}
 
+	async getSort(
+		ctx: Context
+	): Promise<{ field: string; order: "asc" | "desc" } | null> {
+		const { sort } = await this.extractRawValues(ctx);
+		return decodeSort(sort);
+	}
+
+	makeSortLink(ctx: Context, field: string, order: "asc" | "desc"): string {
+		const url = new URL(ctx.url, "https://example.com");
+		const params = qs.parse(url.search.slice(1));
+		params.sort = encodeSort(field, order);
+		url.search = qs.stringify(params);
+		return url.pathname + url.search;
+	}
+
 	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
 		const values = await this.extractRawValues(ctx);
 		return tempstream/* HTML */ `<form method="GET">
@@ -177,64 +216,35 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 			})}
 		</form>`;
 	}
-}
-
-export abstract class SealiousItemListPage<
-	C extends Collection,
-	F extends typeof BaseListPageFields
-> extends ListPage<CollectionItem<C>, F> {
-	constructor(public collection: C) {
-		super();
-	}
-
-	async getContextForList(ctx: Context): Promise<SealiousContext> {
-		return ctx.$context;
-	}
 
-	async getTotalPages(ctx: Context, itemsPerPage: number): Promise<number> {
-		const query = this.collection.list(await this.getContextForList(ctx));
-		await this.addFilter(ctx, query);
-		const { items } = await query.fetch();
-		return Math.ceil(items.length / itemsPerPage);
-	}
-
-	protected async addFilter(ctx: Context, list: ItemList<C>): Promise<void> {
-		const filters = await this.getFilterValues(ctx);
-
-		for (const key in filters) {
-			if (filters[key] === undefined || filters[key] == "") {
-				delete filters[key];
-			}
-		}
-		if (Object.keys(filters).length) {
-			list.filter(filters as Partial<CollectionInput<C>>);
-		}
-	}
-
-	async makeQuery(ctx: Context): Promise<ItemList<C>> {
-		return this.collection.list(await this.getContextForList(ctx));
-	}
-
-	async getItems(
+	renderHeading(ctx: Context, field: string, label = field): FlatTemplatable {
+		const current_sort = decodeSort(
+			qs.parse(
+				new URL(ctx.url, "https://www.example.com").search.slice(1)
+			)["sort"]
+		);
+		const current_order =
+			current_sort?.field == field ? current_sort.order : null;
+		const order = current_order == "desc" ? "asc" : "desc";
+		return /* HTML */ `<th>
+			<a href="${this.makeSortLink(ctx, field, order)}"
+				>${label}
+				${(current_order && (current_order == "asc" ? "↑" : "↓")) ||
+				""}</a
+			>
+		</th>`;
+	}
+
+	renderTableHead(
 		ctx: Context,
-		page: number,
-		itemsPerPage: number
-	): Promise<CollectionItem<C>[]> {
-		const query = await this.makeQuery(ctx);
-		await this.addFilter(ctx, query);
-		const { items } = await query
-			.paginate({ items: itemsPerPage, page })
-			.fetch();
-		return items;
-	}
-
-	async renderItem(
-		_: Context,
-		item: CollectionItem<C>,
-		index: number
-	): Promise<FlatTemplatable> {
-		return `<div>${item.id}</div>`;
+		fields: { field: string; label?: string }[]
+	): FlatTemplatable {
+		return tempstream/* HTML */ `<thead>
+			<tr>
+				${fields.map(({ label, field }) =>
+					this.renderHeading(ctx, field, label)
+				)}
+			</tr>
+		</thead>`;
 	}
-
-	canAccess = peopleWhoCan("list", this.collection);
 }

package/src/page/sealious-list.ts

@@ -0,0 +1,76 @@
+import { Context } from "koa";
+import { BaseListPageFields, ListPage } from "./list";
+import {
+	Collection,
+	CollectionItem,
+	ItemList,
+	Context as SealiousContext,
+	CollectionInput,
+} from "sealious";
+import { FlatTemplatable } from "tempstream";
+import { peopleWhoCan } from "./access-control";
+
+export abstract class SealiousItemListPage<
+	C extends Collection,
+	F extends typeof BaseListPageFields
+> extends ListPage<CollectionItem<C>, F> {
+	constructor(public collection: C) {
+		super();
+	}
+
+	async getContextForList(ctx: Context): Promise<SealiousContext> {
+		return ctx.$context;
+	}
+
+	async getTotalPages(ctx: Context, itemsPerPage: number): Promise<number> {
+		const query = this.collection.list(await this.getContextForList(ctx));
+		await this.addFilter(ctx, query);
+		const { items } = await query.fetch();
+		return Math.ceil(items.length / itemsPerPage);
+	}
+
+	protected async addFilter(ctx: Context, list: ItemList<C>): Promise<void> {
+		const filters = await this.getFilterValues(ctx);
+
+		for (const key in filters) {
+			if (filters[key] === undefined || filters[key] == "") {
+				delete filters[key];
+			}
+		}
+		if (Object.keys(filters).length) {
+			list.filter(filters as Partial<CollectionInput<C>>);
+		}
+	}
+
+	async makeQuery(ctx: Context): Promise<ItemList<C>> {
+		const query = this.collection.list(await this.getContextForList(ctx));
+		const sort = await this.getSort(ctx);
+		if (sort) {
+			query.sort({ [sort.field]: sort.order } as any);
+		}
+		return query;
+	}
+
+	async getItems(
+		ctx: Context,
+		page: number,
+		itemsPerPage: number
+	): Promise<CollectionItem<C>[]> {
+		const query = await this.makeQuery(ctx);
+		await this.addFilter(ctx, query);
+		const { items } = await query
+			.paginate({ items: itemsPerPage, page })
+			.fetch();
+		return items;
+	}
+
+	async renderItem(
+		_: Context,
+		item: CollectionItem<C>,
+		index: number
+	): Promise<FlatTemplatable> {
+		return `<div>${item.id}</div>`;
+	}
+
+	canAccess = peopleWhoCan("list", this.collection);
+}

package/src/templates/list.ts

@@ -49,13 +49,14 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			"${uppercase_collection}",
 			tempstream/* HTML */ \`<div>
 				<h2>${uppercase_collection} List</h2>
-				<table>
-					<thead>
-						<th>id</th>
-						\${Object.keys(${uppercase_collection}.fields).map(
-							(fieldname) => \`<th>\${fieldname}</th>\`
-						)}
-					</thead>
+				<table class="sealious-list">
+					\${this.renderTableHead(ctx, [
+						{ field: "id" },
+						...Object.keys(Patrons.fields).map((field) => ({
+							field,
+							label: field,
+						})),
+					])}
 					<tbody>
 						\${super.render(ctx)}
 					</tbody>

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;