@sealcode/sealgen 0.1.7 → 0.2.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

@@ -1,6 +1,9 @@
 import { curryImportPath } from "../utils/import-path";
 
-export const formTemplate = (action_name: string, newfilefullpath: string) => {
+export async function formTemplate(
+	action_name: string,
+	newfilefullpath: string
+): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { BaseContext } from "koa";
 import {Users} from "${rel("src/back/collections/collections")}";
@@ -39,4 +42,4 @@ export default new(class ${action_name}Form extends Form {
 	}
 })();
 `;
-};
+}

package/src/templates/list.ts

@@ -0,0 +1,65 @@
+import { curryImportPath } from "../utils/import-path";
+import prompts = require("prompts");
+import { listCollections } from "../utils/list-collections";
+
+export const listTemplate = async (
+	action_name: string,
+	newfilefullpath: string
+): Promise<string> => {
+	const response = await prompts({
+		type: "autocomplete",
+		name: "collection",
+		message: "Which sealious collection do you want to list?",
+		choices: (
+			await listCollections()
+		).map((collection) => ({
+			title: collection,
+			value: collection,
+		})),
+	});
+	const collection = response.collection as string;
+	const uppercase_collection =
+		collection[0].toLocaleUpperCase() + collection.slice(1);
+	const rel = curryImportPath(newfilefullpath);
+	return `import { BaseContext } 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 {
+	BaseListPageDefaultProps,
+	BaseListPageProps,
+	BaseListPagePropsShape,
+	SealiousItemListPage,
+} from "${rel("src/back/page/list.ts")}";
+import { AllQueryParams } from "${rel("src/back/page/props-parser.ts")}";
+
+export const actionName = "${action_name}";
+
+export default new (class ${action_name}Page extends SealiousItemListPage<typeof ${uppercase_collection}> {
+	propsParser = new AllQueryParams<BaseListPageProps>(
+		BaseListPagePropsShape,
+		BaseListPageDefaultProps
+	);
+
+	async render(ctx: BaseContext) {
+		return html(
+			ctx,
+            "${uppercase_collection}",
+			tempstream/* HTML */ \`<div>
+                <h2>${uppercase_collection} List</h2>
+				<ul>
+					\${super.render(ctx)}
+				</ul>
+			</div>\`
+		);
+	}
+
+    async renderItem(_: BaseContext, item: CollectionItem<typeof ${uppercase_collection}>) {
+		return tempstream\`<li>\${item.id}</li>\`;
+	}
+})(${uppercase_collection});
+`;
+};

package/src/templates/page.ts

@@ -1,9 +1,10 @@
 import { importPath } from "../utils/import-path";
 
-export const pageTemplate = (
+export async function pageTemplate(
 	action_name: string,
 	fullpath: string
-) => `import { BaseContext } from "koa";
+): Promise<string> {
+	return `import { BaseContext } from "koa";
 import { tempstream } from "tempstream";
 import { Page } from "${importPath(fullpath, "src/back/page/page")}";
 
@@ -21,3 +22,4 @@ export default new (class ${action_name}Page extends Page {
 	}
 })();
 `;
+}

package/src/utils/list-collections.ts

@@ -0,0 +1,16 @@
+import _locreq from "locreq";
+import { walkDir } from "./walk";
+const target_locreq = _locreq(process.cwd());
+
+export async function listCollections(): Promise<string[]> {
+	const files = await walkDir(target_locreq.resolve("src/back/collections"));
+	return files
+		.filter(
+			(f) =>
+				f.endsWith(".ts") &&
+				!f.endsWith(".test.ts") &&
+				!f.endsWith("collections.ts")
+		)
+		.map((f) => f.replace(/.ts$/, "").split("/").at(-1) || "")
+		.filter((e) => e !== "");
+}

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

@@ -1,26 +1,24 @@
 {
-    "compilerOptions": {
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "strictNullChecks": true,
-        "target": "ES6",
-        "declaration": true,
-        "esModuleInterop": true,
-        "lib": [
-            "ES6",
-            "ESNext"
-        ],
-        "outDir": "lib",
-        "checkJs": true,
-        "allowJs": true,
-        "declarationDir": "@types",
-        "resolveJsonModule": true,
-        "sourceMap": true
-    },
-    "include":[
-        "src/**/*"
-    ],
-    "exclude": ["src/**/*.test.ts"]
-}
+	"compilerOptions": {
+		"module": "commonjs",
+		"moduleResolution": "node",
+		"noImplicitAny": true,
+		"noImplicitThis": true,
+		"strictNullChecks": true,
+		"target": "es2020",
+		"declaration": true,
+		"esModuleInterop": true,
+		"lib": ["ES6", "ESNext"],
+		"outDir": "lib",
+		"checkJs": true,
+		"allowJs": true,
+		"declarationDir": "@types",
+		"resolveJsonModule": true,
+		"sourceMap": true,
+		"allowSyntheticDefaultImports": true,
+		"keyofStringsOnly": true,
+		"skipLibCheck": true
+	},
+	"include": ["src/**/*"],
+	"exclude": ["src/**/*.test.ts", "node_modules/**"]
+}

package/src/tsconfig.json

@@ -1,18 +0,0 @@
-{
-	"compilerOptions": {
-		"module": "ESNext",
-		"moduleResolution": "node",
-		"noImplicitAny": true,
-		"noImplicitThis": true,
-		"strictNullChecks": true,
-		"target": "ES2020",
-		"lib": ["es6", "esnext"],
-		"outDir": "../../dist/scripts",
-		"checkJs": true,
-		"allowJs": true,
-		"resolveJsonModule": true,
-		"sourceMap": true,
-		"skipLibCheck": true
-	},
-	"include": ["./**/*", "./*"]
-}