@sealcode/sealgen 0.18.10 → 0.19.2

package/src/builders/frontend-ts-builder.ts

@@ -24,7 +24,6 @@ export class FrontendTSBuilder extends Builder {
 		);
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
 	async dispose(): Promise<void> {}
 
 	async _build(): Promise<void> {

package/src/cli.ts

@@ -1,17 +1,16 @@
 #!/usr/bin/env node
 import yargs from "yargs/yargs";
 import { addCollection } from "./add-collection.js";
-import { addCRUD } from "./add-crud.js";
 import { addJDDComponent } from "./add-jdd-component.js";
 import { addRoute } from "./add-route.js";
-import { addVerboseCRUD } from "./add-verbose-crud.js";
+import { addCRUD } from "./add-crud.js";
 import { buildProject } from "./build.js";
 import { generateCollections } from "./generate-collections.js";
 import { generateComponents } from "./generate-components.js";
 import { generateRoutes } from "./generate-routes.js";
 import { getFonts } from "./get-fonts.js";
 import { makeEnv } from "./make-env.js";
-import { crudFieldSnippets } from "./crud-field-snippets.js";
+
 import {
 	registerExternalControllers,
 	registerExternalStyles,
@@ -23,15 +22,14 @@ const actions: Record<
 > = {
 	"add-collection": addCollection,
 	"add-route": addRoute,
-	"add-verbose-crud": addVerboseCRUD,
 	"add-crud": addCRUD,
 	"generate-collections": generateCollections,
 	"generate-components": generateComponents,
 	"generate-routes": generateRoutes,
 	build: buildProject,
 	default: async function () {
-		console.log("Usage: `npx sealgen <action>`");
-		console.log(
+		console.info("Usage: `npx sealgen <action>`");
+		console.info(
 			`Available actions: ${Object.keys(actions)
 				.filter((e) => e != "default")
 				.join(", ")}`
@@ -40,7 +38,7 @@ const actions: Record<
 	"make-env": makeEnv,
 	"add-component": addJDDComponent,
 	"get-fonts": getFonts,
-	"crud-field-snippets": crudFieldSnippets,
+	// "crud-field-snippets": crudFieldSnippets,
 	"register-external-controllers": registerExternalControllers,
 	"register-external-styles": registerExternalStyles,
 };

package/src/components/tabs.ts

@@ -4,52 +4,53 @@ function name_to_id(str: string) {
 	return str.replace(/\W/g, "-");
 }
 
-const style = (hide_tabs_width: number) => /* HTML */ `<style>
-	.tab-label {
-		height: 45px;
-		line-height: 45px;
-		padding: 0 45px;
-		display: block;
-		float: left;
-		box-sizing: border-box;
-		border-bottom: 3px solid transparent;
-		cursor: pointer;
-		font-size: 18px;
-		-webkit-user-select: none;
-		user-select: none;
-	}
-
-	@media screen and (max-width: ${hide_tabs_width}px) {
+const style = (hide_tabs_width: number) =>
+	/* HTML */ `<style>
 		.tab-label {
-			display: none;
+			height: 45px;
+			line-height: 45px;
+			padding: 0 45px;
+			display: block;
+			float: left;
+			box-sizing: border-box;
+			border-bottom: 3px solid transparent;
+			cursor: pointer;
+			font-size: 18px;
+			-webkit-user-select: none;
+			user-select: none;
 		}
-	}
 
-	.tab-label--mobile {
-		line-height: unset;
-		padding-top: 30px;
-		padding-left: 0;
-		pointer-events: none;
-		padding-bottom: 30px;
-		color: $font-graphite;
-		border-bottom: 2px solid $font-primary;
-		display: none;
 		@media screen and (max-width: ${hide_tabs_width}px) {
-			display: block;
+			.tab-label {
+				display: none;
+			}
 		}
-	}
 
-	.tab-content {
-		padding-top: 30px;
-		clear: both;
-	}
+		.tab-label--mobile {
+			line-height: unset;
+			padding-top: 30px;
+			padding-left: 0;
+			pointer-events: none;
+			padding-bottom: 30px;
+			color: $font-graphite;
+			border-bottom: 2px solid $font-primary;
+			display: none;
+			@media screen and (max-width: ${hide_tabs_width}px) {
+				display: block;
+			}
+		}
 
-	@media screen and (max-width: ${hide_tabs_width}px) {
 		.tab-content {
-			display: block !important;
+			padding-top: 30px;
+			clear: both;
+		}
+
+		@media screen and (max-width: ${hide_tabs_width}px) {
+			.tab-content {
+				display: block !important;
+			}
 		}
-	}
-</style>`;
+	</style>`;
 
 export function tabs(
 	tabs: Record<string, FlatTemplatable>,

package/src/components/toggle-modal.ts

@@ -10,7 +10,7 @@ export function toggleModal(options: {
 }) {
 	const { contentWrapped, contentUnwrapped, name } = options;
 	const id = makeSlug(name);
-	return tempstream/* HTML */ `<style>
+	return tempstream /* HTML */ `<style>
 			.toggle-modal__wrapped {
 				display: none;
 			}

package/src/controllers/table-add-button.stimulus.ts

@@ -0,0 +1,35 @@
+/// <reference lib="dom" />
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+	static targets = ["textarea"];
+	defaultRowsNumber = 20;
+
+	addRow() {
+		const template = this.element
+			.closest("turbo-frame")
+			?.querySelector("template");
+		if (!template) {
+			throw new Error("Couldn't find template");
+		}
+		const tbody = this.element
+			.closest("turbo-frame")
+			?.querySelector("tbody");
+		if (!tbody) {
+			throw new Error("tbody not found");
+		}
+
+		const orig_template = template.innerHTML;
+		const placeholder = this.element.getAttribute("data-table-placeholder");
+		if (!placeholder) {
+			throw new Error("Could find placeholder attribute");
+		}
+		template.innerHTML = orig_template.replaceAll(
+			placeholder,
+			String(tbody.querySelectorAll("tr").length)
+		);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+		tbody.appendChild((template.cloneNode(true) as any).content);
+		template.innerHTML = orig_template;
+	}
+}

package/src/esbuild-plugins/rewrite-asset-imports.ts

@@ -22,16 +22,13 @@ export const rewrite_asset_imports_plugin = (project_dir: string) => ({
 				`^import ([^ ]+, )?(\\w+|{[^}]+}) from "([^"]+)";`,
 				"gm"
 			);
-			contents = contents.replaceAll(
-				regex_import,
-				(line, _: string, original_path: string) => {
-					const replaced = line.replace(
-						`"src/`,
-						`"` + resolve(project_dir, "./dist") + "/"
-					);
-					return replaced;
-				}
-			);
+			contents = contents.replaceAll(regex_import, (line) => {
+				const replaced = line.replace(
+					`"src/`,
+					`"` + resolve(project_dir, "./dist") + "/"
+				);
+				return replaced;
+			});
 
 			return {
 				contents,

package/src/forms/controls/array.ts

@@ -6,8 +6,8 @@ import qs from "qs";
 import { Field, FieldsetOutput } from "sealious";
 import { tempstream } from "tempstream";
 import { FormField } from "../fields/field.js";
-import { SimpleFormField } from "../fields/simple-form-field.js";
-import { StructuredArrayField } from "../fields/structured-array.js";
+import { TextBasedSimpleField } from "../fields/simple-form-field.js";
+import { StructuredArray as StructuredArrayField } from "../fields/structured-array.js";
 import { FormDataValue } from "../form-types.js";
 import { Derived } from "./derived.js";
 import { FormControl, FormControlContext } from "./form-control.js";
@@ -16,11 +16,11 @@ import { FormFieldControl } from "./form-field-control.js";
 export type UnboundControlStorage<
 	F extends { new (...args: any): FormFieldControl } = {
 		new (...args: any): FormFieldControl;
-	}
+	},
 > = [F, string, ConstructorParameters<F>];
 
 export function UnboundControl<
-	F extends { new (...args: any): FormFieldControl }
+	F extends { new (...args: any): FormFieldControl },
 >(
 	controlClass: F,
 	arbitrary_field_name: string,
@@ -30,7 +30,7 @@ export function UnboundControl<
 }
 
 export class StructuredArray<
-	Subfields extends Record<string, Field<any>>
+	Subfields extends Record<string, Field<any>>,
 > extends FormFieldControl {
 	constructor(
 		public field: StructuredArrayField<Subfields>,
@@ -58,7 +58,7 @@ export class StructuredArray<
 	}
 
 	makeSubfield(_field_name: string): FormField {
-		return new SimpleFormField(false);
+		return new TextBasedSimpleField(false);
 	}
 
 	async renderItemControl(
@@ -70,14 +70,13 @@ export class StructuredArray<
 	) {
 		const fctx = {
 			ctx,
-			data: {},
+			data: { raw_values: {}, messages: [], field_messages: {} },
 			messages: [],
 			field_name_prefix: "",
 			form_id,
 			validate: false,
-		};
+		} as FormControlContext;
 		if (Array.isArray(control)) {
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 			const [constructor, field_name, params] = control;
 			const field = this.makeSubfield(field_name);
 			if (!field) {
@@ -86,20 +85,16 @@ export class StructuredArray<
 				);
 				return "";
 			}
-			await field.init(
-				`${this.field.name}[data][${index}][${field_name}]`
-			);
+			field.setName(`${this.field.name}[data][${index}][${field_name}]`);
 			const hidden_shadow = new Derived(
 				[field],
-				async (
-					values,
-					{ inner_form_id, field_name }
-				) => /* HTML */ `<input
-					name="${field_name}"
-					type="hidden"
-					value="${values[field_name] || ""}"
-					form="${inner_form_id}"
-				/>`,
+				async (values, { inner_form_id, field_name }) =>
+					/* HTML */ `<input
+						name="${field_name}"
+						type="hidden"
+						value="${values[field_name] || ""}"
+						form="${inner_form_id}"
+					/>`,
 				async () => ({
 					inner_form_id: this.getInnerFormID(),
 					field_name: field.name,
@@ -107,10 +102,22 @@ export class StructuredArray<
 			);
 			return tempstream`${new constructor(field, params).render({
 				...fctx,
-				data: { [field.name]: item[field_name] as FormDataValue },
+				data: {
+					raw_values: {
+						[field.name]: item[field_name] as FormDataValue,
+					},
+					messages: [],
+					field_messages: {},
+				},
 			})}${hidden_shadow.render({
 				...fctx,
-				data: { [field.name]: item[field_name] as FormDataValue },
+				data: {
+					raw_values: {
+						[field.name]: item[field_name] as FormDataValue,
+					},
+					messages: [],
+					field_messages: {},
+				},
 				form_id: this.getInnerFormID(),
 			})}`;
 		} else {
@@ -124,7 +131,7 @@ export class StructuredArray<
 		item: FieldsetOutput<Subfields>,
 		index: number
 	) {
-		return tempstream/* HTML */ `<div>
+		return tempstream /* HTML */ `<div>
 			${this.item_controls.map((control) =>
 				this.renderItemControl(ctx, form_id, control, item, index)
 			)}
@@ -140,9 +147,8 @@ export class StructuredArray<
 	}
 
 	async getItems(ctx: Context, raw_values: Record<string, FormDataValue>) {
-		return (await this.field.getValue(ctx, raw_values)).parsed as Promise<
-			FieldsetOutput<Subfields>[]
-		>;
+		return (await this.field.getParsedValue(ctx, raw_values))
+			.parsed as FieldsetOutput<Subfields>[];
 	}
 
 	async _render(
@@ -152,7 +158,7 @@ export class StructuredArray<
 	) {
 		const items = await this.getItems(ctx, raw_values);
 
-		return tempstream/* HTML */ `<turbo-frame id="${this.getFrameID()}">
+		return tempstream /* HTML */ `<turbo-frame id="${this.getFrameID()}">
 			Reverse Single Reference
 			${items.map((item, index) =>
 				this.renderItem(ctx, form_id, item, index)
@@ -170,7 +176,7 @@ export class StructuredArray<
 	}
 
 	render(fctx: FormControlContext) {
-		return this._render(fctx.ctx, fctx.form_id, fctx.data);
+		return this._render(fctx.ctx, fctx.form_id, fctx.data.raw_values);
 	}
 
 	async getTargetItemID(ctx: Context): Promise<string> {
@@ -179,7 +185,6 @@ export class StructuredArray<
 	}
 
 	mount(router: Router) {
-		console.log("mounting!", this.getActionURL());
 		router.post(this.getActionURL(), async (ctx) => {
 			const form_id = ctx.query.form_id;
 			if (typeof form_id != "string") {
@@ -198,7 +203,6 @@ export class StructuredArray<
 			const field_data = (ctx.$body as Record<string, unknown>)[
 				this.field.name
 			] || { data: [] };
-			console.log({ action: field_data });
 			if (
 				!hasShape(
 					{
@@ -215,12 +219,7 @@ export class StructuredArray<
 				...ctx.$body.action,
 				data: field_data.data || [],
 			});
-			console.log("ACTION", {
-				...ctx.$body.action,
-				data: field_data.data || [],
-			});
 			await item.save(ctx.$context);
-			console.log(await item.getDecodedBody(ctx.$context, {}));
 			ctx.body = this._render(
 				ctx,
 				form_id,

package/src/forms/controls/autocomplete.ts

@@ -4,7 +4,7 @@ import { PickFromListField } from "../fields/pick-from-list.js";
 import { FormControlContext } from "./form-control.js";
 import { SimpleInput } from "./simple-input.js";
 
-export class Autocomplete extends SimpleInput<string | null> {
+export class Autocomplete extends SimpleInput {
 	constructor(
 		public field: PickFromListField<boolean>,
 		public options: { id?: string; label?: string; placeholder?: string }
@@ -24,7 +24,7 @@ export class Autocomplete extends SimpleInput<string | null> {
 	}
 
 	async postInput(ctx: Context) {
-		return tempstream/* HTML */ `<datalist id="${this.getListID()}">
+		return tempstream /* HTML */ `<datalist id="${this.getListID()}">
 			${(await this.field.generateOptions(ctx)).map(
 				({ value }) => /* HTML */ `<option>${value}</option>`
 			)}

package/src/forms/controls/big-radio-group.ts

@@ -19,14 +19,14 @@ export class BigRadioGroup extends FormFieldControl {
 	}
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		const { raw: current_value } = await this.field.getValue(
+		const { raw: current_value } = await this.field.getParsedValue(
 			fctx.ctx,
-			fctx.data
+			fctx.data.raw_values
 		);
-		return tempstream/* HTML */ `<div class="bigradios">
+		return tempstream /* HTML */ `<div class="bigradios">
 			${Object.entries(this.options).map(([key, { description }]) => {
 				const id = `${this.field.name}-radio-${key}`;
-				return tempstream/* HTML */ `<input
+				return tempstream /* HTML */ `<input
 						type="radio"
 						name="${this.field.name}"
 						value="${key}"

package/src/forms/controls/checkbox-group.ts

@@ -1,10 +1,10 @@
 import { FlatTemplatable } from "tempstream";
-import { EnumMultipleField } from "../fields/enum-multiple.js";
 import { ProxyFormField } from "../fields/proxy-field.js";
 import { CheckboxWithValue } from "./checkbox.js";
 import { FieldGroup } from "./field-group.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
+import { CheckboxedListField } from "../fields/checkboxed-list.js";
 
 export type DefaultCheckboxOptions = {
 	id?: string;
@@ -17,10 +17,10 @@ export type DefaultCheckboxOptions = {
 };
 
 export class CheckboxGroup<
-	Options extends DefaultCheckboxOptions = DefaultCheckboxOptions
+	Options extends DefaultCheckboxOptions = DefaultCheckboxOptions,
 > extends FormFieldControl {
 	constructor(
-		public field: EnumMultipleField<readonly string[], boolean>,
+		public field: CheckboxedListField<boolean, string>,
 		public options: Options = {} as Options
 	) {
 		super([field]);
@@ -40,28 +40,28 @@ export class CheckboxGroup<
 	}
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		const { parsed: values } = await this.field.getValue(
+		const { parsed: values } = await this.field.getParsedValue(
 			fctx.ctx,
-			fctx.data
+			fctx.data.raw_values
 		);
-		const checkboxes = this.field.options.map(
+		const checkboxes = (await this.field.generateOptions(fctx.ctx)).map(
 			(option) =>
 				new CheckboxWithValue(
 					new ProxyFormField(
 						false,
 						this.field.name,
 						false,
-						(values || []).includes(option)
+						Object.keys(values || {}).includes(option.value)
 					),
 					{
-						id: this.field.name + "__" + option,
+						id: this.field.name + "__" + option.value,
 						label: (
 							this.options.checkboxNameToLabel ||
 							((s: string) => s)
-						)(option),
+						)(option.value),
 						default_value: false,
 					},
-					option
+					option.value
 				)
 		);
 		return this.wrapGroup(fctx, checkboxes);

package/src/forms/controls/checkboxed-list-input.test.ts

@@ -23,7 +23,7 @@ describe("checkboxed-list", () => {
 
 		it("sends the values", async () => {
 			const port = await getPort();
-			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
 			const app = new Koa();
 			const router = new Router();
 
@@ -71,7 +71,7 @@ describe("checkboxed-list", () => {
 		describe("behavior with (non)required", () => {
 			it("allows to send a form when no value is selected and fiels is not required", async () => {
 				const port = await getPort();
-				console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+				console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
 				const app = new Koa();
 				const router = new Router();
 
@@ -118,7 +118,7 @@ describe("checkboxed-list", () => {
 
 			it("does not allow to send a form when no value is selected and field IS required", async () => {
 				const port = await getPort();
-				console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+				console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
 				const app = new Koa();
 				const router = new Router();
 
@@ -166,7 +166,7 @@ describe("checkboxed-list", () => {
 
 			it("allows to send a form when no value is selected and field IS required", async () => {
 				const port = await getPort();
-				console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+				console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
 				const app = new Koa();
 				const router = new Router();
 
@@ -215,7 +215,7 @@ describe("checkboxed-list", () => {
 
 		it("renders the label", async () => {
 			const port = await getPort();
-			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
 			const app = new Koa();
 			const router = new Router();
 
@@ -258,7 +258,7 @@ describe("checkboxed-list", () => {
 
 		it("groups checkboxes based on the value of the 'group' attribute", async () => {
 			const port = await getPort();
-			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
 			const app = new Koa();
 			const router = new Router();
 

package/src/forms/controls/checkboxed-list-input.ts

@@ -7,9 +7,11 @@ import {
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
 
-export class CheckboxedListInput extends FormFieldControl {
+export class CheckboxedListInput<
+	Values extends string,
+> extends FormFieldControl {
 	constructor(
-		public field: CheckboxedListField<boolean>,
+		public field: CheckboxedListField<boolean, Values>,
 		public options: { label: string } = { label: field.name }
 	) {
 		super([field]);
@@ -30,7 +32,11 @@ export class CheckboxedListInput extends FormFieldControl {
 			valid,
 			message,
 			parsed: currentValue,
-		} = await this.field.getValue(fctx.ctx, fctx.data, true);
+		} = await this.field.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values,
+			true
+		);
 		const pickedValues = Object.entries(currentValue || {})
 			.filter(([, is_on]) => is_on)
 			.map(([key]) => key);
@@ -60,7 +66,7 @@ export class CheckboxedListInput extends FormFieldControl {
 				getRequiredClass(required),
 				...this.generateCountBasedClasses(options.length),
 			],
-			tempstream/* HTML */ `<label
+			tempstream /* HTML */ `<label
 					>${this.options.label || this.field.name}</label
 				>
 				${~valid && fctx.validate
@@ -70,9 +76,10 @@ export class CheckboxedListInput extends FormFieldControl {
 					${isVisible
 						? Object.entries(groups).map(
 								([group_label, options]) =>
-									tempstream/* HTML */ ` <h3>
+									tempstream /* HTML */ ` <h3>
 											${group_label}
 										</h3>
+
 										${options!.map(({ value, label }) =>
 											this.renderOption({
 												name,
@@ -85,7 +92,7 @@ export class CheckboxedListInput extends FormFieldControl {
 													),
 											})
 										)}`
-						  )
+							)
 						: ""}
 					${isVisible
 						? ungroupped.map(({ value, label }) =>
@@ -96,7 +103,7 @@ export class CheckboxedListInput extends FormFieldControl {
 									form_id: fctx.form_id,
 									checked: pickedValues.includes(value),
 								})
-						  )
+							)
 						: ""}
 				</ul>`
 		);
@@ -115,7 +122,7 @@ export class CheckboxedListInput extends FormFieldControl {
 		label?: string;
 		checked: boolean;
 	}) {
-		return tempstream/* HTML */ `<li>
+		return tempstream /* HTML */ `<li>
 			${inputWrapper(
 				"checkbox",
 				[name],
@@ -126,6 +133,7 @@ export class CheckboxedListInput extends FormFieldControl {
 						name="${name}.${value}"
 						${checked ? "checked" : ""}
 						form=${form_id}
+						autocomplete="off"
 					/>
 					<label for="${name}.${value}">${label || value}</label>
 				`

package/src/forms/controls/controls.ts

@@ -23,10 +23,10 @@ export * from "./collapsible-field-group.js";
 export * from "./collapsible-checkbox-group.js";
 export * from "./autocomplete.js";
 export * from "./file.js";
-export * from "./photo.js";
+export * from "./image.js";
 export * from "./multiple-files.js";
 export * from "./number.js";
-export * from "./multiple-photos.js";
+export * from "./multiple-images.js";
 // export * from "./reverse-single-reference";
 export * from "./array.js";
 export * from "./table.js";