@sealcode/sealgen 0.18.10 → 0.19.0

package/src/forms/forms.css

@@ -1,85 +0,0 @@
-.form-message {
-	--color: black;
-	border: 1px solid var(--color);
-	border-radius: 5px;
-	padding: 10px;
-}
-
-.form-message--error {
-	--color: #ff4136;
-}
-
-.form-message--success {
-	--color: #2ecc40;
-}
-
-.form__error {
-	color: #ff4136;
-}
-
-.form-input__wrapper--checkbox {
-	display: flex;
-	flex-flow: row nowrap;
-	align-items: center;
-	& > input[type="checkbox"] {
-		width: 15px;
-		height: 15px;
-
-		+ label {
-			padding-left: 10px;
-		}
-	}
-}
-
-.form-input__wrapper--multiple-files--photos {
-	ul {
-		list-style: none;
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		grid-gap: 10px;
-		margin-bottom: 20px;
-
-		li {
-			background-color: white;
-			box-shadow: 1px 1px 6px 0px #00000038;
-			padding: 10px;
-			display: grid;
-			grid-template-columns: 1fr 20px;
-			grid-template-rows: 20px auto min-content;
-			grid-row-gap: 10px;
-
-			a {
-				grid-row: 1/3;
-				grid-column: 1/3;
-
-				picture,
-				img {
-					width: 100%;
-					height: 150px;
-					object-fit: contain;
-				}
-			}
-
-			.filename {
-				grid-row: 3/4;
-				grid-column: 1/3;
-			}
-
-			form {
-				grid-row: 1/2;
-				grid-column: 2/3;
-				position: relative;
-				z-index: 2;
-			}
-		}
-	}
-}
-
-.file-list-item {
-	display: flex;
-	flex-flow: row;
-
-	form {
-		padding-left: 20px;
-	}
-}

package/src/forms/multiform.test.ts

@@ -9,7 +9,7 @@ import { Multiform } from "./multiform.js";
 import { assertThrowsAsync } from "../utils/utils.js";
 import { form_factory } from "./form.test.js";
 import { getBrowser } from "../utils/browser-creator.js";
-import { SimpleFormField } from "./fields/simple-form-field.js";
+import { TextBasedSimpleField } from "./fields/simple-form-field.js";
 import { Form } from "./form.js";
 import { FormHeader } from "./controls/form-header.js";
 import { SimpleInput } from "./controls/simple-input.js";
@@ -22,7 +22,7 @@ const port = await getPort();
 console.log(`Using port ${port} form multiform.test.ts`);
 
 const fields1 = {
-	email: new SimpleFormField(true),
+	email: new TextBasedSimpleField(true),
 };
 
 const form1 = new (class extends Form<typeof fields1, void> {
@@ -35,7 +35,7 @@ const form1 = new (class extends Form<typeof fields1, void> {
 })();
 
 const fields2 = {
-	name: new SimpleFormField(true),
+	name: new TextBasedSimpleField(true),
 };
 
 const form2 = new (class extends Form<Record<never, unknown>, void> {

package/src/forms/multiform.ts

@@ -103,6 +103,7 @@ export class Multiform extends MountableWithFields {
 			{
 				raw_values: await this.getSubformRawValues(ctx, sub_form_name),
 				messages: [],
+				field_messages: {},
 			},
 			show_field_errors
 		);
@@ -134,6 +135,7 @@ export class Multiform extends MountableWithFields {
 		return tempstream/* HTML */ `${this.renderMessages(ctx, {
 				raw_values: {},
 				messages,
+				field_messages: {},
 			})}
 			<div class="forms">
 				<form

package/src/generate-stimulus.ts

@@ -16,6 +16,7 @@ export async function generateStimulusControllers(
 		target_locreq.resolve("src/"),
 		...controller_dirs,
 	];
+	console.log("Looking for controllers in ", stimulus_search_dirs);
 	const controller_names = (
 		await Promise.all(stimulus_search_dirs.map((dir) => recursive(dir)))
 	)

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./forms/multiform.js";
 export * as Components from "./components/components.js";
 export * from "./mount.js";
 export * from "./page/default-list-filters.js";
+export * from "./forms/fields/get-field-for-sealious.js";
 
 import { Context } from "koa";
 import { Readable } from "node:stream";
@@ -37,7 +38,7 @@ export interface HTMLHeadOptions {
 export interface HTMLArgs {
 	ctx: Context;
 	title: string | Promise<string>;
-	body: string | Promise<string>;
+	body: string | Promise<string> | Readable;
 	htmlOptions?: Partial<HTMLOptions>;
 	makeHead?: (
 		args: HTMLHeadOptions

package/src/make-hidden-inputs.ts

@@ -17,7 +17,7 @@ export function makeHiddenInputs(
 				type="hidden"
 				name="${key}"
 				value="${field
-					.getValue(ctx, values)
+					.getParsedValue(ctx, values)
 					.then((r) => attribute(JSON.stringify(r.raw) || ""))}"
 			/>`
 		)}`;

package/src/mount.ts

@@ -4,6 +4,7 @@ import { FileManager } from "@sealcode/file-manager";
 import Koa, { Context } from "koa";
 import { Middlewares as SealiousMiddlewares } from "sealious";
 import { Mountable } from "./page/mountable.js";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 
 async function handleHtmlPromise(ctx: Context, next: Koa.Next) {
 	await next();
@@ -24,6 +25,17 @@ export function mount(
 		: undefined
 ): void {
 	const raw_url = typeof url === "string" ? url : url.rawURL;
+
+	const imageRouter = new KoaResponsiveImageRouter({
+		staticPath: "/tmp",
+		thumbnailSize: 10,
+		cacheManagerResolutionThreshold: 10,
+		imageStoragePath: "/tmp",
+		smartCropStoragePath: "/tmp",
+	});
+
+	const fileManager = new FileManager("/tmp", "/uploaded_files");
+
 	const args = use_dummy_app
 		? [
 				async (ctx: Context, next: any) => {
@@ -32,6 +44,8 @@ export function mount(
 					// regard
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 					ctx.$app = {
+						fileManager,
+						imageRouter,
 						// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 						Logger: new Proxy(
 							{},

package/src/notifier.ts

@@ -50,7 +50,6 @@ async function wait_for_app_to_be_stable(app_port: number, n = 3) {
 	let counter = 0;
 	// eslint-disable-next-line no-constant-condition
 	while (true) {
-		console.debug("notifier.ts:53");
 		// eslint-disable-next-line no-await-in-loop
 		const { status } = await get_status(app_port).catch(() => ({
 			status: "down",

package/src/page/list.ts

@@ -8,7 +8,7 @@ import { naturalNumbers, UrlWithNewParams } from "../utils/utils.js";
 import { makeHiddenInputs } from "../make-hidden-inputs.js";
 import qs from "qs";
 import { NumberField } from "../forms/fields/number.js";
-import { SimpleFormField } from "../forms/fields/simple-form-field.js";
+import { TextBasedSimpleField } from "../forms/fields/simple-form-field.js";
 import { FormDataValue } from "../forms/form-types.js";
 
 export const BasePagePropsShape = <const>{};
@@ -19,7 +19,7 @@ export const DEFAULT_ITEMS_PER_PAGE = 12;
 export const BaseListPageFields = <const>{
 	page: new NumberField(false, 1),
 	itemsPerPage: new NumberField(false, DEFAULT_ITEMS_PER_PAGE),
-	sort: new SimpleFormField(false),
+	sort: new TextBasedSimpleField(false),
 };
 
 export type ListSort = { field: string; order: "asc" | "desc" };
@@ -74,8 +74,8 @@ export abstract class ListPage<
 
 	init(): void {
 		super.init();
-		for (const [fieldname, field] of Object.entries(this.filterFields)) {
-			void field.init(fieldname);
+		for (const [, field] of Object.entries(this.filterFields)) {
+			void field.init();
 		}
 	}
 
@@ -85,12 +85,15 @@ export abstract class ListPage<
 
 	async getPaginationConfig(ctx: Context) {
 		const values = await this.extractRawValues(ctx);
-		let { parsed: page } = await this.fields.page.getValue(ctx, values);
+		let { parsed: page } = await this.fields.page.getParsedValue(
+			ctx,
+			values
+		);
 		if (!page) {
 			page = 1;
 		}
 		const { parsed: itemsPerPage } =
-			await this.fields.itemsPerPage.getValue(ctx, values);
+			await this.fields.itemsPerPage.getParsedValue(ctx, values);
 		return { page, itemsPerPage };
 	}
 
@@ -182,7 +185,7 @@ export abstract class ListPage<
 		const raw_values = await this.extractRawValues(ctx);
 		for (const [fieldname, field] of Object.entries(this.filterFields)) {
 			// eslint-disable-next-line no-await-in-loop
-			const { parsed } = await field.getValue(ctx, raw_values);
+			const { parsed } = await field.getParsedValue(ctx, raw_values);
 			filter[fieldname] = field.mapToFilter(parsed);
 		}
 		return filter;
@@ -226,7 +229,11 @@ export abstract class ListPage<
 				return control.render(
 					this.makeFormControlContext(
 						ctx,
-						{ raw_values: values, messages: [] },
+						{
+							raw_values: values,
+							messages: [],
+							field_messages: {},
+						},
 						false
 					)
 				);

package/src/page/mountable-with-fields.test.ts

@@ -19,7 +19,7 @@ describe("mountable-with-fields", () => {
 				data.not_required?.trim();
 				// this should work without the optional chaining:
 				data.required.trim();
-				const { parsed: data2 } = await this.fields.not_required.getValue(
+				const { parsed: data2 } = await this.fields.not_required.getParsedValue(
 					ctx,
 					form_values.raw_values
 				);

package/src/page/mountable-with-fields.ts

@@ -2,6 +2,7 @@ import { ShapeToType } from "@sealcode/ts-predicates";
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import {
+	FieldMessages,
 	FormControl,
 	FormControlContext,
 } from "../forms/controls/form-control.js";
@@ -20,7 +21,7 @@ export type Fields = Record<string, FormField<boolean, any>>;
 
 type Resolved<T> = T extends Promise<infer X> ? X : never;
 type ParsedValue<T extends FormField> = Resolved<
-	ReturnType<T["getValue"]>
+	ReturnType<T["getParsedValue"]>
 >["parsed"];
 
 export abstract class MountableWithFields<
@@ -37,8 +38,9 @@ export abstract class MountableWithFields<
 	}
 
 	init(): void {
-		for (const [name, field] of Object.entries(this.fields)) {
-			void field.init(name);
+		for (const [field_name, field] of Object.entries(this.fields)) {
+			void field.init();
+			field.setName(field_name);
 		}
 	}
 
@@ -51,7 +53,7 @@ export abstract class MountableWithFields<
 	) {
 		return new FormControlContext(
 			ctx,
-			data.raw_values,
+			data,
 			data.messages,
 			field_name_prefix,
 			form_id,
@@ -81,10 +83,10 @@ export abstract class MountableWithFields<
 		values: Record<string, FormDataValue>
 	): Promise<{
 		valid: boolean;
-		field_errors: Partial<Record<keyof Fields, string>>;
+		field_errors: FieldMessages;
 		form_messages: FormMessage[];
 	}> {
-		const field_errors = {} as Record<keyof Fields, string>;
+		const field_errors = {} as FieldMessages;
 		let valid = true;
 		const form_messages = [] as FormMessage[];
 
@@ -92,10 +94,13 @@ export abstract class MountableWithFields<
 			Object.keys(this.fields).map(async (key: keyof F) => {
 				const field = this.fields[key];
 				const { valid: fieldvalid, message: fieldmessage } =
-					await field.getValue(ctx, values, true);
+					await field.getParsedValue(ctx, values, true);
 				if (!fieldvalid) {
 					valid = false;
-					field_errors[field.name] = fieldmessage;
+					field_errors[field.name] = {
+						type: "error",
+						message: fieldmessage,
+					};
 				}
 			})
 		);
@@ -149,7 +154,11 @@ export abstract class MountableWithFields<
 		const promises = Object.entries(this.fields).map(
 			async ([key, field]) => {
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-				const { parsed } = await field.getValue(ctx, raw_values, false);
+				const { parsed } = await field.getParsedValue(
+					ctx,
+					raw_values,
+					false
+				);
 				result[key] = parsed;
 			}
 		);

package/src/register-external.ts

@@ -70,7 +70,7 @@ async function updatePackageJson(
 	}
 
 	const pathToAdd = `node_modules/${moduleName}/${subdirectory}`;
-	const existingPaths = packageJson.sealgen[type] as string[];
+	const existingPaths = packageJson.sealgen[type];
 
 	// Check if the path is already present
 	if (existingPaths.includes(pathToAdd)) {

package/src/templates/form.ts

@@ -1,13 +1,11 @@
-import Prettier from "prettier";
-import { curryImportPath } from "../utils/import-path.js";
-import { getPrettierConfig } from "../utils/prettier.js";
+import { formatWithPrettier } from "../utils/prettier.js";
 
 const defaults = {
 	postimport: `
          import { Fields } from "@sealcode/sealgen";
          import type {FormDataValue} from "@sealcode/sealgen";`,
 	fields: `
-           password: new Fields.SimpleFormField(true),`,
+           password: new Fields.Password(true),`,
 	controls: `
 		new Controls.SimpleInput(fields.password, {
 			label: "Password:",
@@ -18,8 +16,8 @@ const defaults = {
 		data: Record<string, FormDataValue>
 	): Promise<{ valid: boolean; error: string }> {
 		// just a silly example, please remove this with better logic
-		const { parsed: email } = await this.fields.email.getValue(ctx, data);
-		const { parsed: password } = await this.fields.password.getValue(ctx, data);
+		const { parsed: email } = await this.fields.email.getParsedValue(ctx, data);
+		const { parsed: password } = await this.fields.password.getParsedValue(ctx, data);
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 		if ((password || "").length > ((email as string) || "").length) {
 			return { valid: false, error: "Password cannot be longer than email" };
@@ -49,11 +47,10 @@ export async function formTemplate(
 	_params: Partial<typeof defaults> & { success_message: string } = defaults
 ): Promise<string> {
 	const params = { ...defaults, ..._params };
-	const rel = curryImportPath(newfilefullpath);
 	const content = `import type { Context } from "koa";
 import type { FormData } from "@sealcode/sealgen";
 import { Form,  Controls, fieldsToShape } from "@sealcode/sealgen";
-import html from "${rel("src/back/html.js")}";
+import html from "src/back/html.js";
 
 ${params.postimport}
 
@@ -63,6 +60,8 @@ const fields = {
     ${params.fields}
 };
 
+Form.initFieldNames(fields);
+
 export const ${action_name}Shape = fieldsToShape(fields);
 
 export default new (class ${action_name}Form extends Form<typeof fields, void> {
@@ -84,5 +83,5 @@ export default new (class ${action_name}Form extends Form<typeof fields, void> {
    ${params.render}
 })();
 `;
-	return Prettier.format(content, await getPrettierConfig());
+	return formatWithPrettier(content);
 }

package/src/templates/multiform.ts

@@ -13,8 +13,8 @@ import { FlatTemplatable } from "tempstream";
 export const actionName = "${action_name}";
 
 const fields1 = {
-	email: new Fields.SimpleFormField(true),
-	password: new Fields.SimpleFormField(true),
+	email: new Fields.TextBasedSimpleField(true),
+	password: new Fields.TextBasedSimpleField(true),
 };
 
 const form1 = new (class extends Form<typeof fields1, unknown> {
@@ -30,8 +30,8 @@ const form1 = new (class extends Form<typeof fields1, unknown> {
 })();
 
 const fields2 = {
-	name: new Fields.SimpleFormField(true),
-	surname: new Fields.SimpleFormField(true),
+	name: new Fields.TextBasedSimpleField(true),
+	surname: new Fields.TextBasedSimpleField(true),
 };
 
 const form2 = new (class extends Form<typeof fields2, unknown> {

package/src/templates/page.ts

@@ -1,9 +1,7 @@
-import { curryImportPath } from "../utils/import-path.js";
 export async function pageTemplate(
 	action_name: string,
 	newfilefullpath: string
 ): Promise<string> {
-	const rel = curryImportPath(newfilefullpath);
 	return `import type { Context } from "koa";
 import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";

package/src/templates/shared/collection-create-form.ts

@@ -1,10 +1,9 @@
 import { toKebabCase, toPascalCase } from "js-convert-case";
 import { formTemplate } from "../form.js";
-import { curryImportPath } from "../../utils/import-path.js";
 
 import _locreq from "locreq";
 import extract_fields_from_collection from "../../utils/extract-fields-from-collection.js";
-import { getFieldHandler } from "./shared-crud-form-fields.js";
+import { wrapAttribute } from "../../utils/wrap-attributes.js";
 
 export async function createItemFormTemplate(
 	create_action_name: string,
@@ -15,33 +14,20 @@ export async function createItemFormTemplate(
 	const collection_fields = await extract_fields_from_collection(
 		collection_name
 	);
-	const importPath = curryImportPath(newfilefullpath);
-
-	const field_handler_results = await Promise.all(
-		collection_fields.map((field) =>
-			getFieldHandler(collection_name, field, importPath)
-		)
-	);
-
-	const post_create_actions = field_handler_results
-		.map(({ post_create }) => post_create)
-		.filter((e) => e != "");
+	const formFieldsVar = `${toPascalCase(collection_name)}FormFields`;
 
 	return formTemplate(create_action_name, newfilefullpath, {
 		success_message: "Created!",
-		postimport: `import {${toPascalCase(
-			collection_name
-		)}FormFields, ${toPascalCase(
+		postimport: `import {${formFieldsVar}, get${toPascalCase(
 			collection_name
 		)}FormControls }from "./shared.js";
 
-        import { ${toPascalCase(collection_name)} } from "${importPath(
-			"src/back/collections/collections.js"
-		)}";
-
-		import { ${list_action}URL } from "${importPath("src/back/routes/urls.js")}";
+        import { ${toPascalCase(
+			collection_name
+		)} } from "src/back/collections/collections.js";
 
-        import {tempstream} from "tempstream";
+		import { ${list_action}URL } from "src/back/routes/urls.js";
+		import {tempstream} from "tempstream";
 `,
 
 		fields: `...${toPascalCase(collection_name)}FormFields`,
@@ -49,7 +35,7 @@ export async function createItemFormTemplate(
                 new Controls.FormHeader("Create ${toPascalCase(
 					collection_name
 				)}"), 
-                ...${toPascalCase(collection_name)}FormControls`,
+                ...get${toPascalCase(collection_name)}FormControls()`,
 
 		can_access: `canAccess = async (ctx: Context) => {
 			 const policy = ${toPascalCase(collection_name)}.getPolicy("create");
@@ -57,53 +43,31 @@ export async function createItemFormTemplate(
 			 return { canAccess: response?.allowed || false, message: response?.reason || "" };
 		 };`,
 
-		get_initial_values: field_handler_results
-			.filter((r) => !r.hide_initial_value_create)
-			.map(({ initial_value_create }) => initial_value_create)
-			.filter((e) => e != "").length
-			? `getInitialValues(ctx: Context){
-                   return {
-                        ${field_handler_results
-							.filter((r) => !r.hide_initial_value_create)
-							.map(
-								({ initial_value_create }) =>
-									initial_value_create
-							)
-							.join(",\n")}
-                   }
-}`
-			: ``,
+		get_initial_values: "",
 
 		onsubmit: `
-	async onSubmit(ctx: Context) {
-		const data = await this.getParsedValues(ctx);
-		if (!data) {
-			throw new Error("Error when parsing the form values");
-		}
-
-	   ${field_handler_results
-			.map(({ pre_create }) => pre_create)
-			.filter((e) => e !== "")
-			.join("\n")}
+	async onSubmit(ctx: Context, formData: FormData) {
+		const fctx = this.makeFormControlContext(ctx, formData, true);
 
-		${
-			post_create_actions.length ? `const created = ` : ""
-		} await ctx.$app.collections["${toKebabCase(collection_name)}"].create(
+		const created =  await ctx.$app.collections["${toKebabCase(
+			collection_name
+		)}"].createExtraSafe(
 			ctx.$context,
-			{
-			      ${field_handler_results
-						.filter((result) => !result.hide_sealious_value)
-						.map((result) => result.sealious_value(result))
-						.filter((e) => e != "")
-						.join(",\n")}
-			} 
-		);
-        ${
-			post_create_actions.length
-				? `/* ==== POST CREATE ACTIONS ==== */`
-				: ""
-		}
-        ${post_create_actions.join("\n")}
+		{
+		${collection_fields
+			.map((field_info) =>
+				field_info.form_field.generateCreateValueGetter(field_info, {
+					form_field_types: formFieldsVar,
+					sealious_field: `fields${wrapAttribute(field_info.name)}`,
+					form_fields: "fields",
+				})
+			)
+			.join(",\n")} 
+			});
+
+    	for(const field of Object.values(${formFieldsVar})){
+            await field.postSealiousCreate(ctx, created, formData)
+        }
 	}
 `,
 		render: `	async render(ctx: Context, data: FormData, show_field_errors: boolean) {