@sealcode/sealgen 0.2.1 → 0.3.2

package/src/page/list.ts

@@ -0,0 +1,214 @@
+import { BaseContext } from "koa";
+import { Collection, CollectionItem } from "sealious";
+import { Templatable, tempstream } from "tempstream";
+import { peopleWhoCan } from "./access-control";
+import { Page } from "./page";
+import { predicates, ShapeToType } from "@sealcode/ts-predicates";
+import { PagePropsParser } from "./props-parser";
+import { FormFieldControl } from "../forms/controls/controls";
+import { FormField } from "../forms/field";
+import { FormData } from "../forms/form";
+import { FormFieldsList } from "../forms/form-fields-list";
+import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
+
+export const BasePagePropsShape = <const>{};
+export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
+
+export const BaseListPagePropsShape = <const>{
+	page: predicates.number,
+	itemsPerPage: predicates.number,
+};
+export type BaseListPageProps = ShapeToType<typeof BaseListPagePropsShape>;
+export const BaseListPageDefaultProps = { page: 1, itemsPerPage: 25 };
+
+export type PropsErrors<PropsType> = Partial<Record<keyof PropsType, string>>;
+
+export abstract class ListPage<
+	ItemType,
+	PropsType extends BaseListPageProps = BaseListPageProps
+> extends Page {
+	abstract getItems(
+		ctx: BaseContext,
+		props: PropsType
+	): Promise<{ items: ItemType[] }>;
+	abstract getTotalPages(ctx: BaseContext, props: PropsType): Promise<number>;
+	abstract renderItem(ctx: BaseContext, item: ItemType): Promise<Templatable>;
+	abstract propsParser: PagePropsParser<PropsType>;
+
+	filterFields: FormField<keyof PropsType>[] = [];
+	filterControls: FormFieldControl[] = [];
+
+	renderListContainer(_: BaseContext, content: Templatable): Templatable {
+		return tempstream`<div>${content}</div>`;
+	}
+
+	async validateProps(
+		ctx: BaseContext,
+		props: PropsType
+	): Promise<{ valid: boolean; errors: PropsErrors<PropsType> }> {
+		const errors: PropsErrors<PropsType> = {};
+		let has_errors = false;
+		const promises = [];
+		for (const [key, value] of Object.entries(props)) {
+			const field = FormFieldsList.getField(this.filterFields, key);
+			if (field) {
+				promises.push(
+					field._validate(ctx, value).then(({ valid, message }) => {
+						if (!valid) {
+							has_errors = true;
+							// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+							errors[key as keyof PropsType] = message;
+						}
+					})
+				);
+			}
+		}
+		await Promise.all(promises);
+		return { valid: has_errors, errors };
+	}
+
+	async getProps(ctx: BaseContext): Promise<{
+		parsed_props: PropsType;
+		errors: PropsErrors<PropsType>;
+		raw_props: PropsType;
+	}> {
+		const raw_props = this.propsParser.decode(ctx);
+		const parsed_props = { ...raw_props };
+		const { errors } = await this.validateProps(ctx, parsed_props);
+		for (const prop_name in errors) {
+			const default_value = this.propsParser.getDefaultValue(prop_name);
+			if (default_value !== undefined) {
+				parsed_props[prop_name] = default_value;
+			} else {
+				delete parsed_props[prop_name];
+			}
+		}
+		return { parsed_props, errors, raw_props };
+	}
+
+	async render(ctx: BaseContext) {
+		const { parsed_props, errors, raw_props } = await this.getProps(ctx);
+
+		return tempstream`${this.renderPagination(ctx, parsed_props)}
+${this.renderFilters(ctx, parsed_props, raw_props, errors)}
+${this.getItems(ctx, parsed_props).then(({ items }) =>
+	this.renderListContainer(
+		ctx,
+		items.map((item) => this.renderItem(ctx, item))
+	)
+)}`;
+	}
+
+	async renderPagination(ctx: BaseContext, props: PropsType) {
+		const totalIems = await this.getTotalPages(ctx, props);
+		const currentPage = props.page;
+
+		return tempstream/* HTML */ `<center>
+			${currentPage > 1
+				? this.renderPageButton(ctx, 1, "Pierwsza strona")
+				: ""}
+			${currentPage > 1
+				? this.renderPageButton(
+						ctx,
+						currentPage - 1,
+						"Poprzednia strona"
+				  )
+				: ""}
+
+			<select onchange="if (this.value) Turbo.visit(this.value)">
+				${Array.from(
+					naturalNumbers(1, await this.getTotalPages(ctx, props))
+				).map(
+					(n) => /* HTML */ `<option
+						value="${UrlWithNewParams(
+							ctx,
+							//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+							this.propsParser.overwriteProp(ctx, {
+								page: n,
+							} as Partial<PropsType>)
+						)}"
+						${currentPage === n ? "selected" : ""}
+					>
+						${n}
+					</option>`
+				)}
+			</select>
+			${currentPage < totalIems
+				? this.renderPageButton(ctx, currentPage + 1, "Następna strona")
+				: ""}
+			${currentPage < totalIems
+				? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
+				: ""}
+		</center>`;
+	}
+
+	private renderPageButton(ctx: BaseContext, page: number, text: string) {
+		return /* HTML */ `<a
+			href="${UrlWithNewParams(
+				ctx,
+				//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				this.propsParser.overwriteProp(ctx, {
+					page,
+				} as Partial<PropsType>)
+			)}"
+			>${text}</a
+		>`;
+	}
+
+	renderFilters(
+		ctx: BaseContext,
+		parsed_props: PropsType, // parsed props don't include wrong values
+		raw_props: PropsType,
+		errors: PropsErrors<PropsType>
+	) {
+		return tempstream/* HTML */ `<form method="GET">
+			${this.propsParser.makeHiddenInputs(parsed_props, [
+				"page",
+				...this.filterFields.map((f) => f.name),
+			])}
+			${this.filterControls.map((control) =>
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				control.render(ctx, this.filterFields, {
+					values: parsed_props,
+					raw_values: raw_props,
+					errors,
+					messages: [],
+				} as FormData)
+			)}
+		</form>`;
+	}
+}
+
+export abstract class SealiousItemListPage<
+	C extends Collection,
+	PageProps extends BaseListPageProps = BaseListPageProps
+> extends ListPage<CollectionItem<C>, PageProps> {
+	constructor(public collection: C) {
+		super();
+	}
+
+	async getTotalPages(ctx: BaseContext, props: PageProps) {
+		const { items } = await this.collection.list(ctx.$context).fetch();
+		return Math.ceil(items.length / props.itemsPerPage);
+	}
+
+	async getItems(ctx: BaseContext, props: PageProps) {
+		return {
+			items: (
+				await this.collection
+					.list(ctx.$context)
+					.paginate({ items: props.itemsPerPage, page: props.page })
+					.fetch()
+			).items,
+		};
+	}
+
+	async renderItem(
+		_: BaseContext,
+		item: CollectionItem<C>
+	): Promise<Templatable> {
+		return `<div>${item.id}</div>`;
+	}
+
+	canAccess = peopleWhoCan("list", this.collection);
+}

package/src/page/page.ts

@@ -0,0 +1,31 @@
+import Router from "@koa/router";
+import { BaseContext } from "koa";
+
+import { Templatable, tempstream } from "tempstream";
+
+export type PageErrorMessage = { type: "access" | "internal"; message: string };
+
+export interface Mountable {
+	mount: (router: Router, path: string) => void;
+	canAccess: (ctx: BaseContext) => Promise<{ canAccess: boolean; message: string }>;
+	renderError(ctx: BaseContext, error: PageErrorMessage): Promise<Templatable>;
+}
+
+export abstract class Page implements Mountable {
+	mount(router: Router, path: string) {
+		router.get(path, async (ctx) => {
+			ctx.body = await this.render(ctx);
+		});
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: BaseContext) {
+		return { canAccess: true, message: "" };
+	}
+
+	async renderError(_: BaseContext, error: PageErrorMessage) {
+		return tempstream/* HTML */ `<div>${error.message}</div>`;
+	}
+
+	public abstract render(ctx: BaseContext): Promise<Templatable>;
+}

package/src/page/props-parser.ts

@@ -0,0 +1,99 @@
+import {
+	hasShape,
+	predicates,
+	Shape,
+	ShapeToType,
+} from "@sealcode/ts-predicates";
+
+import { BaseContext } from "koa";
+import merge from "merge";
+import { BasePageProps } from "./list";
+
+export type EncodedProps = Record<string, unknown>;
+
+// the intention here is to sometime in the future be able to store multiple frames on one document, so props for each frame will be in a different namespace, and parsers are going to help with that
+
+function parseStringValues<TheShape extends Shape>(
+	shape: TheShape,
+	values: Record<string, string>
+): ShapeToType<TheShape> {
+	const result: Record<string, unknown> = {};
+	for (const [key, value] of Object.entries(values)) {
+		if (!(key in shape)) {
+			continue;
+		}
+		const predicate = shape[key];
+		if (predicate == predicates.number) {
+			result[key] = parseFloat(value);
+		} else {
+			result[key] = value;
+		}
+	}
+	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+	return result as ShapeToType<TheShape>;
+}
+
+export abstract class PagePropsParser<PropsType extends BasePageProps> {
+	abstract decode(ctx: BaseContext): PropsType;
+	abstract encode(props: PropsType): EncodedProps;
+	abstract getHTMLInputName(prop_name: string): string;
+
+	constructor(
+		public propsShape: Shape,
+		public defaultValues: Partial<PropsType>
+	) {}
+
+	overwriteProp(
+		ctx: BaseContext,
+		new_props: Partial<PropsType>
+	): EncodedProps {
+		const result = {};
+		merge.recursive(result, this.decode(ctx), new_props);
+		return result;
+	}
+
+	makeHiddenInputs(values: PropsType, fields_to_skip: string[]): string {
+		return Object.entries(values)
+			.filter(([key]) => !fields_to_skip.includes(key))
+			.map(
+				([key, value]: [string, string | number]) =>
+					/* HTML */ `<input
+						type="hidden"
+						name="${key}"
+						value="${value}"
+					/>`
+			)
+			.join(" ");
+	}
+
+	getDefaultValue<Key extends keyof PropsType>(
+		key: Key
+	): PropsType[Key] | undefined {
+		return this.defaultValues[key];
+	}
+}
+
+export class AllQueryParams<
+	PropsType extends BasePageProps
+> extends PagePropsParser<PropsType> {
+	decode(ctx: BaseContext): PropsType {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const query = parseStringValues(this.propsShape, {
+			...this.defaultValues,
+			...ctx.query,
+		} as unknown as Record<string, string>);
+		if (!hasShape(this.propsShape, query)) {
+			throw new Error("Wrong props shape");
+		}
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		return query as PropsType;
+	}
+
+	encode(props: PropsType): Record<string, unknown> {
+		return props;
+	}
+
+	getHTMLInputName(prop_name: string): string {
+		return prop_name;
+	}
+}

package/src/templates/form.ts

@@ -6,11 +6,16 @@ export async function formTemplate(
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { BaseContext } from "koa";
-import {Users} from "${rel("src/back/collections/collections")}";
-import { FormHeader, SimpleInput } from "${rel("src/back/forms/controls")}";
-import { FormField } from "${rel("src/back/forms/field")}";
-import Form, { FormData } from "${rel("src/back/forms/form")}";
-import { collectionFieldValidator } from "${rel("src/back/forms/validator")}";
+import {
+	Form,
+	FormData,
+	FormHeader,
+	SimpleInput,
+	FormField,
+    collectionFieldValidator,
+} from "@sealcode/sealgen";
+
+import { Users } from "${rel("src/back/collections/collections")}";
 import html from "${rel("src/back/html")}";
 
 export const actionName = "${action_name}";

package/src/templates/list.ts

@@ -22,7 +22,7 @@ export const listTemplate = async (
 		collection[0].toLocaleUpperCase() + collection.slice(1);
 	const rel = curryImportPath(newfilefullpath);
 	return `import { BaseContext } from "koa";
-import { CollectionItem, Middlewares } from "sealious";
+import { CollectionItem } from "sealious";
 import { tempstream } from "tempstream";
 import { ${uppercase_collection} } from "${rel(
 		"src/back/collections/collections"
@@ -33,8 +33,8 @@ import {
 	BaseListPageProps,
 	BaseListPagePropsShape,
 	SealiousItemListPage,
-} from "${rel("src/back/page/list.ts")}";
-import { AllQueryParams } from "${rel("src/back/page/props-parser.ts")}";
+	AllQueryParams,
+} from "@sealcode/sealgen";
 
 export const actionName = "${action_name}";
 

package/src/templates/page.ts

@@ -1,24 +1,24 @@
-import { importPath } from "../utils/import-path";
-
+import { curryImportPath } from "../utils/import-path";
 export async function pageTemplate(
 	action_name: string,
-	fullpath: string
+	newfilefullpath: string
 ): Promise<string> {
+	const rel = curryImportPath(newfilefullpath);
 	return `import { BaseContext } from "koa";
 import { tempstream } from "tempstream";
-import { Page } from "${importPath(fullpath, "src/back/page/page")}";
+import { Page } from "@sealcode/sealgen";
+import html from "${rel("src/back/html")}";
 
 export const actionName = "${action_name}";
 
 export default new (class ${action_name}Page extends Page {
-
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	async canAccess(_: BaseContext) {
 		return { canAccess: true, message: "" };
 	}
 
 	async render(ctx: BaseContext) {
-		return tempstream/* HTML */ \`<div></div>\`;
+		return html(ctx, "${action_name}", tempstream/* HTML */ \`<div></div>\`);
 	}
 })();
 `;

package/src/utils/escape-url-params.ts

@@ -2,6 +2,7 @@ export function escape_url_params(url: string): string {
 	return url
 		.split("/")
 		.map((e) => (e.startsWith(":") ? `[${e.slice(1)}]` : e))
+		.filter((e) => e != "")
 		.join("/");
 }
 

package/src/utils/list-collections.ts

@@ -1,9 +1,9 @@
 import _locreq from "locreq";
-import { walk } from "./walk";
+import { walkDir } from "./walk";
 const target_locreq = _locreq(process.cwd());
 
 export async function listCollections(): Promise<string[]> {
-	const files = await walk(target_locreq.resolve("src/back/collections"));
+	const files = await walkDir(target_locreq.resolve("src/back/collections"));
 	return files
 		.filter(
 			(f) =>

package/src/utils/natural-numbers.ts

@@ -0,0 +1,5 @@
+export function* naturalNumbers(min: number, max: number) {
+	for (let i = min; i <= max; i++) {
+		yield i;
+	}
+}

package/src/utils/sleep.ts

@@ -0,0 +1,3 @@
+export async function sleep(time: number) {
+	return new Promise((resolve) => setTimeout(resolve, time));
+}

package/src/utils/url-with-new-params.ts

@@ -0,0 +1,9 @@
+import { BaseContext } from "koa";
+import qs from "qs";
+
+export function UrlWithNewParams(
+	ctx: BaseContext,
+	query_params: Record<string, unknown>
+): string {
+	return `${ctx.path}?${qs.stringify(query_params)}`;
+}

package/src/utils/utils.ts

@@ -0,0 +1,10 @@
+export type Awaited<T> = T extends Promise<infer U> ? U : T;
+export type UnwrapArray<T> = T extends Array<infer U> ? U : T;
+
+export { sleep } from "./sleep";
+export { naturalNumbers } from "./natural-numbers";
+export { UrlWithNewParams } from "./url-with-new-params";
+export { exec } from "./exec";
+export { importPath, curryImportPath } from "./import-path";
+export { listCollections } from "./list-collections";
+export { walkDir } from "./walk";

package/src/utils/walk.ts

@@ -1,7 +1,7 @@
 import { promises as fs } from "fs";
 import { resolve } from "path";
 
-export async function walk(dir: string): Promise<string[]> {
+export async function walkDir(dir: string): Promise<string[]> {
 	const entries = await fs.readdir(dir);
 	let ret: string[] = [];
 	for (const entry of entries) {
@@ -11,7 +11,7 @@ export async function walk(dir: string): Promise<string[]> {
 
 		if (info.isDirectory()) {
 			// eslint-disable-next-line no-await-in-loop
-			ret = [...ret, ...(await walk(fullpath))];
+			ret = [...ret, ...(await walkDir(fullpath))];
 		} else {
 			ret = [...ret, fullpath];
 		}

package/tsconfig.json

@@ -14,8 +14,11 @@
 		"allowJs": true,
 		"declarationDir": "@types",
 		"resolveJsonModule": true,
-		"sourceMap": true
+		"sourceMap": true,
+		"allowSyntheticDefaultImports": true,
+		"keyofStringsOnly": true,
+		"skipLibCheck": true
 	},
 	"include": ["src/**/*"],
-	"exclude": ["src/**/*.test.ts"]
+	"exclude": ["src/**/*.test.ts", "node_modules/**"]
 }