@sealcode/sealgen 0.18.8 → 0.19.0

package/lib/utils/extract-fields-from-collection.js

@@ -3,15 +3,20 @@ import { exec } from "./utils.js";
 const target_locreq = _locreq(process.cwd());
 import { promises as fs } from "fs";
 import { is, predicates } from "@sealcode/ts-predicates";
+import { sealiousFieldInfoToFormField } from "../forms/fields/get-field-for-sealious.js";
 const counter = function* () {
   let i = 0;
   while (true) {
     yield i++;
   }
 }();
+const cache = {};
 async function extract_fields_from_collection(collection_name) {
+  if (cache[collection_name]) {
+    return cache[collection_name];
+  }
   const extractor_code = `import {default as the_app} from "./app.js";
-const c = new the_app().collections["${collection_name}"];
+	const c = new the_app({}).collections["${collection_name}"];
 const fields = [];
 for (const field_name in c.fields){
     let field = c.fields[field_name];
@@ -21,14 +26,17 @@ for (const field_name in c.fields){
     let referencing_field = null;
     let intermediary_field_that_points_there = null;
     let is_readonly = false;
-    let is_required = field.required;
+    let is_required = field.required || false;
     let subfields = [];
-    if(["derived-value", "cached-value", "settable-by"].includes(type)){
+    if(["derived-value", "cached-value", "settable-by",  "control-access"].includes(type)){
 	    type = field.virtual_field.typeName;
     }
     if(["derived-value", "cached-value", "reverse-single-reference"].includes(field.typeName)){
 	    is_readonly = true;
     }
+    if(type == "single-reference"){
+		target = field.target_collection;
+    }
     if(type == "deep-reverse-single-reference" || type =="reverse-single-reference"){
 		target = field.target_collection;
         referencing_collection = field.referencing_collection;
@@ -46,24 +54,56 @@ for (const field_name in c.fields){
     `dist/back/___extract_fields--${counter.next().value || 0}.js`
   );
   await fs.writeFile(extractor_code_path, extractor_code);
-  const { stdout } = await exec("node", [extractor_code_path]);
-  await fs.unlink(extractor_code_path);
-  const ret = JSON.parse(stdout);
-  if (!is(
-    ret,
-    predicates.array(
-      predicates.shape({
-        name: predicates.string,
-        type: predicates.string,
-        is_readonly: predicates.boolean
-      })
-    )
-  )) {
-    throw new Error(
-      "Encountered a problem while extracting the names of fields from collection. Got: " + stdout
+  const result = exec("node", [extractor_code_path]).then(async ({ stdout }) => {
+    await fs.unlink(extractor_code_path);
+    const ret = JSON.parse(stdout);
+    if (!is(
+      ret,
+      predicates.array(
+        predicates.shape({
+          name: predicates.string,
+          type: predicates.string,
+          is_readonly: predicates.boolean,
+          target: predicates.or(
+            predicates.string,
+            predicates.null
+          ),
+          referencing_collection: predicates.or(
+            predicates.string,
+            predicates.null
+          ),
+          referencing_field: predicates.or(
+            predicates.string,
+            predicates.null
+          ),
+          is_required: predicates.boolean,
+          intermediary_field_that_points_there: predicates.or(
+            predicates.string,
+            predicates.null
+          ),
+          subfields: predicates.array(
+            predicates.shape({ name: predicates.string })
+          )
+        })
+      )
+    )) {
+      throw new Error(
+        "Encountered a problem while extracting the names of fields from collection. Got: " + stdout
+      );
+    }
+    const result2 = await Promise.all(
+      ret.map(async (field_info) => ({
+        ...field_info,
+        form_field: await sealiousFieldInfoToFormField(field_info)
+      }))
     );
-  }
-  return ret;
+    return result2;
+  }).catch((e) => {
+    console.error("ERROR", e);
+    process.exit(1);
+  });
+  cache[collection_name] = result;
+  return result;
 }
 export {
   extract_fields_from_collection as default

package/lib/utils/make-slug.js

@@ -1,5 +1,5 @@
 function makeSlug(t) {
-  return t.replaceAll(/\P{General_Category=Letter}/g, "-").replaceAll(/-+/g, "-");
+  return t.replaceAll(/\P{General_Category=Letter}/gu, "-").replaceAll(/-+/g, "-");
 }
 export {
   makeSlug

package/lib/utils/wrap-attributes.js

@@ -0,0 +1,20 @@
+function needsQuotes(str) {
+  try {
+    new Function(`var obj = { ${str}: 1 };`);
+    return false;
+  } catch {
+    return true;
+  }
+}
+function wrapAttribute(name) {
+  return needsQuotes(name) ? `["${name}"]` : `.${name}`;
+}
+function wrapKeyName(name) {
+  return needsQuotes(name) ? `["${name}"]` : `${name}`;
+}
+export {
+  needsQuotes,
+  wrapAttribute,
+  wrapKeyName
+};
+//# sourceMappingURL=wrap-attributes.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.18.8",
+	"version": "0.19.0",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -55,10 +55,10 @@
 		"playwright": "^1.29.2",
 		"source-map-support": "^0.5.21",
 		"ts-node": "^10.9.1",
-		"typescript": "^4.7",
+		"typescript": "5.9",
 		"wait-port": "^1.0.4"
 	},
-	"types": "./@types/src/index.d.ts",
+	"types": "./@types/index.d.ts",
 	"dependencies": {
 		"@koa/router": "^12.0.1",
 		"@sealcode/file-manager": "^1.0.2",
@@ -90,6 +90,7 @@
 	"peerDependencies": {
 		"koa": "^2.13.0",
 		"koa-responsive-image-router": "^0.2.24",
-		"sealious": "^0.21"
+		"sealious": "^0.21",
+		"stimulus": "^3.2.2"
 	}
 }

package/src/add-crud.ts

@@ -1,19 +1,16 @@
 import _locreq from "locreq";
-import prompts from "prompts";
-
 import { escape_url_params } from "./utils/escape-url-params.js";
+import prompts from "prompts";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 import { listCollections } from "./utils/list-collections.js";
-import {
-	makeDefaultDisplayFields,
-	makeDefaultFilterFields,
-} from "./templates/shared/collection-list.js";
+import { collectionListTemplate } from "./templates/shared/collection-list.js";
 import { writeFile } from "./utils/write-file.js";
-import { extractCollectionClassname } from "./generate-collections.js";
-import extract_fields_from_collection from "./utils/extract-fields-from-collection.js";
-import { getFieldHandler } from "./templates/shared/shared-crud-form-fields.js";
+import { curryImportPath, importPath } from "./utils/import-path.js";
+import { sharedCrudFormFields } from "./templates/shared/shared-crud-form-fields.js";
 import { generateRoutes } from "./generate-routes.js";
-import { formatWithPrettier } from "./utils/prettier.js";
+import { createItemFormTemplate } from "./templates/shared/collection-create-form.js";
+import { editItemFormTemplate } from "./templates/shared/collection-edit-form.js";
+import { itemDeleteTemplate } from "./templates/shared/item-delete.js";
 
 export async function addCRUD(
 	params: Partial<{ [key in "collection" | "url"]: string }>,
@@ -38,7 +35,7 @@ export async function addCRUD(
 			type: "text",
 			name: "url",
 			message:
-				"Enter a full absolute path for the new route (for example: /admin/users/): ",
+				"Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
 			validate: (s: string) =>
 				s.trim()[0] == "/" ? true : "Should start with a '/'",
 			initial: function (_, { collection }: { collection: string }) {
@@ -46,103 +43,95 @@ export async function addCRUD(
 			},
 		},
 	]);
-
 	const collection_name = response.collection as string;
 	const url = response.url as string;
+	const list_action_name = toPascalCase(collection_name) + "CRUDList";
+	const create_action_name = toPascalCase(collection_name) + "CRUDCreate";
+	const edit_action_name = toPascalCase(collection_name) + "CRUDEdit";
+	const delete_action_name = toPascalCase(collection_name) + "CRUDDelete";
 
 	/* create the list endpoint */
 	const list_path = target_locreq.resolve(
-		`src/back/routes/${escape_url_params(url)}/index.page.ts`
+		`src/back/routes/${escape_url_params(url)}/index.list.tsx`
 	);
-	const [uppercase_collection, collection_fields] = await Promise.all([
-		extractCollectionClassname(
-			target_locreq.resolve(
-				"src/back/collections/" + collection_name + ".ts"
-			)
-		),
-		extract_fields_from_collection(collection_name),
-	]);
-
-	const field_handler_results = await Promise.all(
-		collection_fields.map(async (field) => {
-			return getFieldHandler(
-				collection_name,
-				field,
-				(p) => p,
-				"edit_fields"
-			);
-		})
+	const list_content = await collectionListTemplate(
+		collection_name,
+		list_action_name,
+		list_path,
+		{
+			post_import_js: `import { ${create_action_name}URL, ${edit_action_name}URL, ${delete_action_name}URL } from "${importPath(
+				list_path,
+				"src/back/routes/urls.ts"
+			)}";`,
+			post_header_html: `<a href={${create_action_name}URL}> Create </a>`,
+			render_item: (
+				collection_name: string
+			) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
+				collection_name
+			)}>) {
+					   return <tr>
+						   {displayFields.map(({ field, format }) => {
+							   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+							   const value = item.get(field as any);
+							   return <td>{format ? format(value, item) : value}</td>;
+						   })}
+                           <td><div class="sealious-list__actions">
+                               <a href={${edit_action_name}URL(item.id)}>Edit</a>
+                               <a data-turbo-method="POST" data-turbo-confirm="Delete item?" href={${delete_action_name}URL(item.id)}>Delete</a>
+                               </div>
+                           </td>
+					   </tr>;
+				   }`,
+		}
 	);
+	await writeFile(list_path, list_content);
 
-	const list_content = `import { CRUD } from "@sealcode/crud-ui";
-import type { CollectionItem } from "sealious";
-import type { ListFilterRender } from "@sealcode/sealgen";
-import { Controls, DefaultListFilters, Fields } from "@sealcode/sealgen";
-import { ${toPascalCase(
-		collection_name
-	)} } from "src/back/collections/collections.js";
-import html from "src/back/html.js";
-
-export const actionName = "${toPascalCase(collection_name)}CRUD";
-
-const edit_fields = <const>
-{
-	${field_handler_results
-		.filter(({ hide_field }) => !hide_field)
-		.map(({ field }) => field)
-		.filter((e) => e != "")
-		.join(",\n")}
-};
-
-
-const edit_controls = [
-	${field_handler_results
-		.filter(({ hide_control }) => !hide_control)
-		.map(({ controls }) => controls)
-		.filter((e) => e != "")
-		.join(",\n")}
-]
+	/* create the shared fields file */
+	const fields_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/shared.ts`
+	);
+	const fields_content = await sharedCrudFormFields(
+		collection_name,
+		fields_path
+	);
+	await writeFile(fields_path, fields_content);
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const fields_for_display = [
-${makeDefaultDisplayFields(collection_fields)}
-] as {
-	field: keyof (typeof ${toPascalCase(collection_name)})["fields"];
-	label: string;
-	format?: (value: unknown, item: CollectionItem<typeof ${toPascalCase(
-		collection_name
-	)}>) => string | Promise<string>;
-}[];
+	/* create the create endpoint */
+	const create_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/create.form.ts`
+	);
+	const create_content = await createItemFormTemplate(
+		create_action_name,
+		create_path,
+		collection_name,
+		list_action_name
+	);
+	await writeFile(create_path, create_content);
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const fields_for_filters = [
-     ${makeDefaultFilterFields(collection_fields)}
-] as {
-	field: keyof (typeof ${uppercase_collection})["fields"];
-	render?: ListFilterRender;
-	prepareValue?: (filter_value: unknown)=>unknown; // set this function to change what filter value is passed to Sealious
-}[];
+	/* create the edit endpoint */
+	const edit_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/edit.form.ts`
+	);
+	const edit_content = await editItemFormTemplate(
+		edit_action_name,
+		edit_path,
+		collection_name,
+		list_action_name
+	);
+	await writeFile(edit_path, edit_content);
 
-export default new CRUD({
-	collection: ${toPascalCase(collection_name)},
-	nice_collection_name: "${toPascalCase(collection_name)}",
-	fields_for_display,
-	fields_for_filters,
-	html,
-	list_title: "${toPascalCase(collection_name)} list",
-	edit_title: "Edit",
-	edit_button_text: "Edit",
-	delete_button_text: "Delete",
-	back_to_list_button_text: "← Back to ${toPascalCase(collection_name)} list",
-	edit_fields,
-	edit_controls,
-	form_value_to_sealious_value: {},
-	sealious_value_to_form_value: {},
-	post_edit: async () => {},
-	post_create: async () => {},
-});
-`;
-	await writeFile(list_path, await formatWithPrettier(list_content));
+	/* create the actual delete endpoint */
+	const delete_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/delete.page.tsx`
+	);
+	const base_import_path = curryImportPath(delete_path);
+	const delete_content = await itemDeleteTemplate(
+		delete_action_name,
+		collection_name,
+		list_action_name,
+		base_import_path
+	);
+	await writeFile(delete_path, delete_content);
 
 	await generateRoutes();
 }

package/src/add-list-route.test.ts

@@ -4,7 +4,7 @@ import { RealAppTest } from "./test_utils/test-on-real-app.js";
 import { collectionTemplate } from "./templates/collection.js";
 import assert from "node:assert";
 
-describe("single-reference.test", () => {
+describe("single-reference", () => {
 	let page: Page;
 	before(async () => {
 		const browser = await getBrowser();

package/src/add-route.ts

@@ -2,7 +2,6 @@ import { existsSync, promises as fs } from "fs";
 import _locreq from "locreq";
 import { resolve } from "path";
 import { generateRoutes } from "./generate-routes.js";
-import { testTemplate } from "./templates/route-test.js";
 import { escape_url_params } from "./utils/escape-url-params.js";
 import prompts from "prompts";
 import { Templates } from "./templates/templates.js";
@@ -81,12 +80,6 @@ export async function addRoute(
 	}
 	await fs.mkdir(resolve(file_path, "../"), { recursive: true });
 	await fs.writeFile(file_path, await template(action, file_path));
-	if (mode !== "lpr" && mode !== "jdd-editor") {
-		await fs.writeFile(
-			test_file_path,
-			await testTemplate(action, file_path)
-		);
-	}
 	// eslint-disable-next-line no-console
 	console.log(`${file_path} created`);
 	// eslint-disable-next-line no-console

package/src/build.ts

@@ -94,7 +94,9 @@ async function build(watch: boolean): Promise<void> {
 	];
 	await Promise.all(builders.map((b) => b.build()));
 	if (watch) {
-		const watcher = chokidar.watch("src", { ignoreInitial: true });
+		const watcher = chokidar.watch(["src", ...controller_dirs], {
+			ignoreInitial: true,
+		});
 		const port = await get_notifier_port();
 		const notifier = make_notifier(port, 8080); // TODO: parse the app config to get the actual port
 		await write_notifier_config(watch, port);

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,7 +22,6 @@ const actions: Record<
 > = {
 	"add-collection": addCollection,
 	"add-route": addRoute,
-	"add-verbose-crud": addVerboseCRUD,
 	"add-crud": addCRUD,
 	"generate-collections": generateCollections,
 	"generate-components": generateComponents,
@@ -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/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
+		tbody.appendChild((template.cloneNode(true) as any).content);
+		template.innerHTML = orig_template;
+	}
+}

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";
@@ -58,7 +58,7 @@ export class StructuredArray<
 	}
 
 	makeSubfield(_field_name: string): FormField {
-		return new SimpleFormField(false);
+		return new TextBasedSimpleField(false);
 	}
 
 	async renderItemControl(
@@ -70,12 +70,12 @@ 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;
@@ -86,9 +86,7 @@ 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 (
@@ -107,10 +105,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 {
@@ -140,9 +150,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(
@@ -170,7 +179,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 +188,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 +206,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,10 +222,6 @@ 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(

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 }

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

@@ -19,9 +19,9 @@ 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">
 			${Object.entries(this.options).map(([key, { description }]) => {