@sealcode/sealgen 0.2.1 → 0.2.2

package/lib/utils/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.walkDir = exports.listCollections = exports.curryImportPath = exports.importPath = exports.exec = exports.UrlWithNewParams = exports.naturalNumbers = exports.sleep = void 0;
+var sleep_1 = require("./sleep");
+Object.defineProperty(exports, "sleep", { enumerable: true, get: function () { return sleep_1.sleep; } });
+var natural_numbers_1 = require("./natural-numbers");
+Object.defineProperty(exports, "naturalNumbers", { enumerable: true, get: function () { return natural_numbers_1.naturalNumbers; } });
+var url_with_new_params_1 = require("./url-with-new-params");
+Object.defineProperty(exports, "UrlWithNewParams", { enumerable: true, get: function () { return url_with_new_params_1.UrlWithNewParams; } });
+var exec_1 = require("./exec");
+Object.defineProperty(exports, "exec", { enumerable: true, get: function () { return exec_1.exec; } });
+var import_path_1 = require("./import-path");
+Object.defineProperty(exports, "importPath", { enumerable: true, get: function () { return import_path_1.importPath; } });
+Object.defineProperty(exports, "curryImportPath", { enumerable: true, get: function () { return import_path_1.curryImportPath; } });
+var list_collections_1 = require("./list-collections");
+Object.defineProperty(exports, "listCollections", { enumerable: true, get: function () { return list_collections_1.listCollections; } });
+var walk_1 = require("./walk");
+Object.defineProperty(exports, "walkDir", { enumerable: true, get: function () { return walk_1.walkDir; } });
+//# sourceMappingURL=utils.js.map

package/lib/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":";;;AAGA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,6DAAyD;AAAhD,uHAAA,gBAAgB,OAAA;AACzB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6CAA4D;AAAnD,yGAAA,UAAU,OAAA;AAAE,8GAAA,eAAe,OAAA;AACpC,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,+BAAiC;AAAxB,+FAAA,OAAO,OAAA"}

package/lib/utils/walk.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.walk = void 0;
+exports.walkDir = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
-async function walk(dir) {
+async function walkDir(dir) {
     const entries = await fs_1.promises.readdir(dir);
     let ret = [];
     for (const entry of entries) {
@@ -12,7 +12,7 @@ async function walk(dir) {
         const info = await fs_1.promises.stat(fullpath);
         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];
@@ -20,5 +20,5 @@ async function walk(dir) {
     }
     return ret;
 }
-exports.walk = walk;
+exports.walkDir = walkDir;
 //# sourceMappingURL=walk.js.map

package/lib/utils/walk.js.map

@@ -1 +1 @@
-{"version":3,"file":"walk.js","sourceRoot":"","sources":["../../src/utils/walk.ts"],"names":[],"mappings":";;;AAAA,2BAAoC;AACpC,+BAA+B;AAExB,KAAK,UAAU,IAAI,CAAC,GAAW;IACrC,MAAM,OAAO,GAAG,MAAM,aAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,GAAG,GAAa,EAAE,CAAC;IACvB,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC5B,MAAM,QAAQ,GAAG,cAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACrC,4CAA4C;QAC5C,MAAM,IAAI,GAAG,MAAM,aAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACvB,4CAA4C;YAC5C,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SAC1C;aAAM;YACN,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC;SACzB;KACD;IACD,OAAO,GAAG,CAAC;AACZ,CAAC;AAhBD,oBAgBC"}
+{"version":3,"file":"walk.js","sourceRoot":"","sources":["../../src/utils/walk.ts"],"names":[],"mappings":";;;AAAA,2BAAoC;AACpC,+BAA+B;AAExB,KAAK,UAAU,OAAO,CAAC,GAAW;IACxC,MAAM,OAAO,GAAG,MAAM,aAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,GAAG,GAAa,EAAE,CAAC;IACvB,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC5B,MAAM,QAAQ,GAAG,cAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACrC,4CAA4C;QAC5C,MAAM,IAAI,GAAG,MAAM,aAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACvB,4CAA4C;YAC5C,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SAC7C;aAAM;YACN,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC;SACzB;KACD;IACD,OAAO,GAAG,CAAC;AACZ,CAAC;AAhBD,0BAgBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -10,11 +10,12 @@
 		"test-reports": "npm run build && rm -fr .xunit coverage && npm run test -- --cover --test-report"
 	},
 	"bin": {
-		"sealgen": "./lib/index.js"
+		"sealgen": "./lib/cli.js"
 	},
 	"author": "",
 	"license": "ISC",
 	"devDependencies": {
+		"@types/koa__router": "^8.0.4",
 		"@types/mocha": "^9.0.0",
 		"@types/prompts": "^2.0.14",
 		"@typescript-eslint/eslint-plugin": "^4.29.3",
@@ -33,8 +34,20 @@
 	},
 	"types": "./@types/index.d.ts",
 	"dependencies": {
-		"@sealcode/ts-predicates": "^0.2.1",
+		"@koa/router": "^10.1.1",
+		"@sealcode/ts-predicates": "^0.4.0",
+		"esbuild": "^0.14.54",
+		"esbuild-sass-plugin": "^2.3.1",
+		"koa": "^2.13.0",
 		"locreq": "^2.0.2",
-		"prompts": "^2.4.2"
+		"merge": "^2.1.1",
+		"prompts": "^2.4.2",
+		"tempstream": "^0.0.19",
+		"tiny-glob": "^0.2.9"
+	},
+	"peerDependencies": {
+		"@koa/router": "^10.1.1",
+		"koa": "^2.13.0",
+		"sealious": "0.14.x"
 	}
 }

package/src/build.ts

@@ -0,0 +1,82 @@
+import { build, BuildResult } from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+import * as chokidar from "chokidar";
+import { default as glob } from "tiny-glob";
+import { generateScssIncludes } from "./find-scss-includes";
+import { sleep } from "./utils/sleep";
+
+async function build_ts() {
+	const entryPoints = await glob("./src/back/**/*.ts");
+	await build({
+		entryPoints,
+		sourcemap: true,
+		outdir: "./dist/back",
+		logLevel: "info",
+		platform: "node",
+		target: "node16",
+		format: "cjs",
+	});
+}
+
+async function complex_build(watch: boolean): Promise<void> {
+	let scss_build: BuildResult | null = null;
+	if (watch) {
+		const scss_watcher = chokidar.watch("src", { ignoreInitial: true });
+		scss_watcher.on("all", async (_, path) => {
+			if (!scss_build) return;
+			if (path.endsWith(".scss") && !path.endsWith("/includes.scss")) {
+				// refresh the list of all scss files in includes.scss
+				await generateScssIncludes();
+				try {
+					await scss_build?.rebuild?.();
+					console.log(`Built main.scss [on ${path}]`);
+				} catch (e) {
+					console.error(e);
+					await sleep(200);
+					scss_build
+						?.rebuild?.()
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+						.catch((e) => console.error(e?.message));
+				}
+			}
+			if (path.endsWith(".ts")) {
+				await build_ts();
+				console.log(`Finished TS biuld [on ${path}]`);
+			}
+		});
+	}
+
+	try {
+		scss_build = await build({
+			entryPoints: ["./src/main.scss"],
+			sourcemap: true,
+			outfile: "./public/dist/style.css",
+			logLevel: "info",
+			incremental: watch,
+			plugins: [sassPlugin()],
+		});
+		await build_ts();
+		watch && scss_build?.rebuild?.();
+	} catch (e) {
+		console.error(e);
+	}
+}
+
+export async function buildProject(...args: string[]): Promise<void> {
+	const watch = args.includes("--watch");
+	await build({
+		entryPoints: ["./src/front/index.ts"],
+		sourcemap: true,
+		outfile: "./public/dist/bundle.js",
+		logLevel: "info",
+		bundle: true,
+		watch,
+	});
+
+	try {
+		await complex_build(watch);
+	} catch (e) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+		console.error(e.message);
+	}
+}

package/src/cli.ts

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+import { addCollection } from "./add-collection";
+import { addRoute } from "./add-route";
+import { buildProject } from "./build";
+import { generateScssIncludes } from "./find-scss-includes";
+import { generateCollections } from "./generate-collections";
+import { generateRoutes } from "./generate-routes";
+
+const actions: Record<
+	string,
+	(...args: string[]) => Promise<void> | undefined
+> = {
+	"add-collection": addCollection,
+	"add-route": addRoute,
+	"generate-collections": generateCollections,
+	"generate-routes": generateRoutes,
+	"generate-scss-includes": generateScssIncludes,
+	build: buildProject,
+	default: async function () {
+		console.log("Usage: `sealscript <action>`");
+		console.log(
+			`Available actions: ${Object.keys(actions)
+				.filter((e) => e != "default")
+				.join(", ")}`
+		);
+	},
+};
+
+void (async function () {
+	const action = process.argv.at(2);
+	actions;
+	const fn = actions[action || "default"] || actions.default;
+	await fn(...process.argv.slice(3));
+})();

package/src/find-scss-includes.ts

@@ -1,13 +1,13 @@
 import { promises as fs } from "fs";
 import _locreq from "locreq";
 import { relative } from "path";
-import { walk } from "./utils/walk";
+import { walkDir } from "./utils/walk";
 
 const target_locreq = _locreq(process.cwd());
 
 export async function generateScssIncludes(): Promise<void> {
 	const files = await Promise.all(
-		(await walk(target_locreq.resolve("src/")))
+		(await walkDir(target_locreq.resolve("src/")))
 			.filter(
 				(f) =>
 					f.endsWith(".scss") &&
@@ -23,6 +23,7 @@ export async function generateScssIncludes(): Promise<void> {
 		target_locreq.resolve("src/includes.scss"),
 		`// DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes
 
+@import "../node_modules/@sealcode/sealgen/src/forms/forms.scss";
 ${files.map((path) => `@import "${path}";`).join("\n")}
 `
 	);

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

@@ -0,0 +1,50 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { BaseContext } from "koa";
+import { tempstream } from "tempstream";
+import { ChekboxedListField, FormField } from "../field";
+import { Form, FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+export class CheckboxedListInput extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public options: { label: string } = { label: fieldname }
+	) {
+		super([fieldname]);
+	}
+
+	isValidFieldName(form: Form) {
+		return form.fields.some((f) => f.name == this.fieldname);
+	}
+
+	async _render(ctx: BaseContext, fields: FormField[], data: FormData) {
+		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const field = FormFieldsList.getField(
+			fields,
+			this.fieldname
+		) as ChekboxedListField;
+		const pickedValues = data.values[field.name] || "";
+		if (!is(pickedValues, predicates.array(predicates.string))) {
+			throw new Error("picked values is not an array of strings");
+		}
+		const [options, isVisible] = await Promise.all([
+			field.generateOptions(ctx),
+			field.isVisible(ctx),
+		]);
+		return tempstream/* HTML */ `${isVisible
+			? Object.entries(options).map(
+					([value, text]) => /* HTML */ `<div>
+						<input
+							type="checkbox"
+							id="${field.name}.${value}"
+							name="${field.name}.${value}"
+							${pickedValues.includes(value) ? "checked" : ""}
+						/>
+						<label for="${field.name}.${value}">${text}</label>
+					</div>`
+			  )
+			: ""}`;
+	}
+}

package/src/forms/controls/controls.ts

@@ -0,0 +1,9 @@
+export { FormControl } from "./form-control";
+export { FormFieldControl } from "./form-field-control";
+export { EditableCollectionSubset } from "./editable-collection-subset";
+export { Frame } from "./frame";
+export { CheckboxedListInput } from "./checkboxed-list-input";
+export { Dropdown } from "./dropdown";
+export { SimpleInput } from "./simple-input";
+export { FormHeader } from "./form-header";
+export { FormParagraph } from "./form-paragraph";

package/src/forms/controls/dropdown.ts

@@ -0,0 +1,57 @@
+import { BaseContext } from "koa";
+import { tempstream } from "tempstream";
+import { FormField, PickFromListField } from "../field";
+import { FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+export class Dropdown extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public options: {
+			label: string;
+			autosubmit?: boolean;
+			autocomplete?: boolean;
+		} = {
+			label: fieldname,
+			autosubmit: false,
+			autocomplete: true,
+		}
+	) {
+		super([fieldname]);
+	}
+
+	areFieldNamesValid(fields: FormField[]) {
+		return (
+			super.areFieldNamesValid(fields) &&
+			FormFieldsList.getField(fields, this.fieldname) instanceof PickFromListField
+		);
+	}
+
+	_render(ctx: BaseContext, fields: FormField[], data: FormData) {
+		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const field = FormFieldsList.getField(
+			fields,
+			this.fieldname
+		) as PickFromListField;
+		const picked_value = data.values[field.name] || "";
+		const id = field.name;
+		return tempstream/* HTML */ `<label for="${id}">${this.options.label}</label
+			><select
+				name="${this.fieldnames}"
+				id="${id}"
+				${this.options.autosubmit ? `onchange='this.form.submit()'` : ""}
+				${!this.options.autocomplete ? `autocomplete="off"` : ""}
+			>
+				${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+					Object.entries(options).map(
+						([value, text]) =>
+							`<option value="${value}" ${
+								(value || "") == picked_value ? "selected" : ""
+							}>${text}</option>`
+					)
+				)}
+			</select>`;
+	}
+}

package/src/forms/controls/editable-collection-subset.ts

@@ -0,0 +1,91 @@
+import { BaseContext } from "koa";
+import { Templatable, tempstream } from "tempstream";
+import { FormField, PickFromListField } from "../field";
+import { FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+/**
+ * This control has own forms in it so if you want to use it you
+ * probably shouldn't use `await super.render(ctx, data, path)` in
+ * render method of you from implementation and you should write
+ * your own implementation of this method. See forms that uses
+ * this control for reference.
+ */
+export class EditableCollectionSubset extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public actionname: string,
+		public listLabel?: string,
+		public selectLabel?: string
+	) {
+		super([fieldname]);
+	}
+
+	_render(
+		ctx: BaseContext,
+		fields: FormField[],
+		data: FormData<string>
+	): Templatable | Promise<Templatable> {
+		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const field = FormFieldsList.getField(
+			fields,
+			this.fieldname
+		) as PickFromListField;
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const values = data.values[this.fieldname] as string[];
+
+		return tempstream/* HTML */ `<div>
+			<ul>
+				${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+					Object.entries(options)
+						.filter(([value]) => values.includes(value))
+						.map(
+							([value, text]) => /* HTML */ `
+								<li>
+									<form method="POST" action="${ctx.path}">
+										<span>${text}</span>
+										<input
+											type="hidden"
+											name="${this.fieldname}"
+											value="${value}"
+										/>
+										<input
+											type="hidden"
+											name="${this.actionname}"
+											value="list"
+										/>
+										<input
+											type="submit"
+											${this.listLabel
+												? `value="${this.listLabel}"`
+												: ""}
+										/>
+									</form>
+								</li>
+							`
+						)
+				)}
+			</ul>
+			<form method="POST" action="${ctx.path}">
+				<select name="${this.fieldname}">
+					${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+						Object.entries(options)
+							.filter(([value]) => !values.includes(value))
+							.map(
+								([value, text]) =>
+									`<option value="${value}">${text}</option>`
+							)
+					)}
+				</select>
+				<input type="hidden" name="${this.actionname}" value="select" />
+				<input
+					type="submit"
+					${this.selectLabel ? `value="${this.selectLabel}"` : ""}
+				/>
+			</form>
+		</div>`;
+	}
+	role = <const>"input";
+}

package/src/forms/controls/form-control.ts

@@ -0,0 +1,13 @@
+import { BaseContext } from "koa";
+import { Templatable } from "tempstream";
+import { FormField } from "../field";
+import { FormData } from "../form";
+
+export abstract class FormControl {
+	abstract render(
+		ctx: BaseContext,
+		formFields: FormField[],
+		data: FormData
+	): Templatable | Promise<Templatable>;
+	abstract role: "input" | "decoration" | "messages" | "submit";
+}

package/src/forms/controls/form-field-control.ts

@@ -0,0 +1,39 @@
+import { BaseContext } from "koa";
+import { Templatable } from "tempstream";
+import { FormField } from "../field";
+import { FormData } from "../form";
+import { FormControl } from "./form-control";
+
+export abstract class FormFieldControl extends FormControl {
+	role = <const>"input";
+	constructor(public fieldnames: string[]) {
+		super();
+	}
+
+	areFieldNamesValid(fields: FormField[]) {
+		return this.fieldnames.every((fieldname) =>
+			fields.some((f) => f.name == fieldname)
+		);
+	}
+
+	abstract _render(
+		ctx: BaseContext,
+		fields: FormField[],
+		data: FormData
+	): Templatable | Promise<Templatable>;
+
+	render(
+		ctx: BaseContext,
+		fields: FormField[],
+		data: FormData
+	): Templatable | Promise<Templatable> {
+		if (!this.areFieldNamesValid(fields)) {
+			throw new Error(
+				`Invalid field names given to form control: "${this.fieldnames.join(
+					", "
+				)}". Allowed fields are: ${fields.map((f) => f.name).join(", ")}`
+			);
+		}
+		return this._render(ctx, fields, data);
+	}
+}

package/src/forms/controls/form-header.ts

@@ -0,0 +1,16 @@
+import { BaseContext } from "koa";
+import { FormControl } from "./controls";
+
+export class FormHeader extends FormControl {
+	role = <const>"decoration";
+	constructor(
+		public text: string,
+		public isVisible: (ctx: BaseContext) => Promise<boolean> = async () => true
+	) {
+		super();
+	}
+	async render(ctx: BaseContext) {
+		const isVsbl = await this.isVisible(ctx);
+		return isVsbl ? `<h2>${this.text}</h2>` : "";
+	}
+}

package/src/forms/controls/form-paragraph.ts

@@ -0,0 +1,11 @@
+import { FormControl } from "./controls";
+
+export class FormParagraph extends FormControl {
+	role = <const>"decoration";
+	constructor(public text: string) {
+		super();
+	}
+	render() {
+		return `<p>${this.text}</p>`;
+	}
+}

package/src/forms/controls/frame.ts

@@ -0,0 +1,26 @@
+import { Templatable } from "tempstream";
+import { FormControl } from "./controls";
+
+/**
+ * This class will render `turbo-frame` tag so that u can
+ * embed other route inside your form. This will require
+ * to add value to `data: FormData` (inside your master form
+ * render function) with key `Frame.FRAME_PATH_KEY`. Value
+ * needs to be url to route that you want to embed. If you
+ * this value wont be provided frame will redner empty string.
+ * See `src/back/routes/profile/[id].form.ts` for an example.
+ */
+export class Frame extends FormControl {
+	constructor(public src: string) {
+		super();
+	}
+
+	render(): Templatable | Promise<Templatable> {
+		return /* HTML */ `<turbo-frame
+			id="contrahents"
+			loading="lazy"
+			src="${this.src}"
+		></turbo-frame>`;
+	}
+	role = <const>"decoration";
+}

package/src/forms/controls/simple-input.ts

@@ -0,0 +1,73 @@
+import { BaseContext } from "koa";
+import { FormField } from "../field";
+import { FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+export class SimpleInput extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public options: {
+			id?: string;
+			label?: string;
+			autocomplete?: boolean;
+			type?:
+				| "color"
+				| "date"
+				| "email"
+				| "file"
+				| "month"
+				| "number"
+				| "password"
+				| "search"
+				| "tel"
+				| "text"
+				| "time"
+				| "url"
+				| "week";
+			value?: string;
+			placeholder?: string;
+			readonly?: boolean;
+			step?: number;
+		} = {}
+	) {
+		super([fieldname]);
+	}
+
+	_render(_: BaseContext, fields: FormField[], data: FormData) {
+		const field = FormFieldsList.getField(fields, this.fieldname);
+		if (!field) {
+			throw new Error("wrong field name");
+		}
+		const id = this.options.id || field.name;
+		const label = this.options.label || field.name;
+		const type = this.options.type || "text";
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const value = data.values[field.name] as string;
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const raw_value = data.raw_values[field.name] as string;
+		const placeholder = this.options.placeholder || type;
+		const readonly = this.options.readonly || false;
+		const required = field.required;
+		const error = data.errors[field.name];
+		return /* HTML */ `<div class="input">
+			<label for="${id}">${label}</label>
+			<input
+				id="${id}"
+				type="${type}"
+				name="${field.name}"
+				value="${value === undefined
+					? raw_value == undefined
+						? ""
+						: raw_value
+					: value}"
+				placeholder="${placeholder}"
+				${readonly ? "readonly" : ""}
+				${required ? "required" : ""}
+				${!this.options.autocomplete ? `autocomplete="off"` : ""}
+				${this.options.step ? `step="${this.options.step}"` : ""}
+			/>
+			${error ? `<div class="input__error">${error}</div>` : ""}
+		</div>`;
+	}
+}