@sealcode/sealgen 0.18.10 → 0.19.2

package/lib/add-crud.js

@@ -1,18 +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";
 async function addCRUD(params, app_directory = process.cwd()) {
   const target_locreq = _locreq(app_directory);
   prompts.override(params);
@@ -29,7 +27,7 @@ async function addCRUD(params, app_directory = process.cwd()) {
     {
       type: "text",
       name: "url",
-      message: "Enter a full absolute path for the new route (for example: /admin/users/): ",
+      message: "Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
       validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'",
       initial: function(_, { collection }) {
         return "/" + toKebabCase(collection);
@@ -38,88 +36,78 @@ async function addCRUD(params, app_directory = process.cwd()) {
   ]);
   const collection_name = response.collection;
   const url = response.url;
+  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";
   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_name2) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
+        collection_name2
+      )}>) {
+					   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>;
+				   }`
+    }
   );
-  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")}
-]
-
-// 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>;
-}[];
-
-// 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
-}[];
-
-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: "\u2190 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));
+  await writeFile(list_path, list_content);
+  const fields_path = target_locreq.resolve(
+    `src/back/routes/${escape_url_params(url)}/shared.ts`
+  );
+  const fields_content = await sharedCrudFormFields(collection_name);
+  await writeFile(fields_path, fields_content);
+  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);
+  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);
+  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();
 }
 export {

package/lib/add-jdd-component.js

@@ -21,7 +21,7 @@ async function addJDDComponent() {
     return;
   }
   await fs.mkdir(resolve(file_path, "../"), { recursive: true });
-  await fs.writeFile(file_path, jddComponentTemplate(component_name));
+  await fs.writeFile(file_path, await jddComponentTemplate(component_name));
   const css_file_path = target_locreq.resolve(
     `src/back/jdd-components/${toKebabCase(component_name)}/${toKebabCase(
       component_name
@@ -32,8 +32,8 @@ async function addJDDComponent() {
     `.${toKebabCase(component_name)} {
 }`
   );
-  console.log(`Created ${file_path}`);
-  console.log(`Created ${css_file_path}`);
+  console.info(`Created ${file_path}`);
+  console.info(`Created ${css_file_path}`);
   await generateComponents();
 }
 export {

package/lib/add-list-route.test.js

@@ -2,7 +2,7 @@ import { getBrowser } from "./utils/browser-creator.js";
 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;
   before(async () => {
     const browser = await getBrowser();

package/lib/add-route.js

@@ -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";
@@ -67,14 +66,8 @@ async function addRoute(params, app_directory = process.cwd()) {
   }
   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)
-    );
-  }
-  console.log(`${file_path} created`);
-  console.log(`${test_file_path} created`);
+  console.info(`${file_path} created`);
+  console.info(`${test_file_path} created`);
   await generateRoutes();
 }
 export {

package/lib/build.js

@@ -57,7 +57,7 @@ async function build(watch) {
     copy_to_public.map(async ({ from, to }) => {
       try {
         await fs.stat(resolve(project_dir, "public", to));
-      } catch (e) {
+      } catch (_e) {
         await fs.mkdir(resolve(project_dir, "public", to, "../"), {
           recursive: true
         });
@@ -86,12 +86,14 @@ async function build(watch) {
   ];
   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);
     await write_notifier_config(watch, port);
     watcher.on("all", (_, file_path) => {
-      console.log("Detected a change!", file_path);
+      console.info("Detected a change!", file_path);
       builders.forEach((builder) => {
         const owns_a_file = builder.ownsFile(file_path);
         if (owns_a_file) {
@@ -112,7 +114,7 @@ async function buildProject({
   try {
     await build(watch);
   } catch (e) {
-    console.log("CAUGHT!");
+    console.error("CAUGHT!");
     console.error(e.message);
     if (!watch) {
       process.exit(1);

package/lib/builders/backend-ts-builder.js

@@ -16,7 +16,6 @@ class BackendTSBuilder extends Builder {
   ownsFile(file_path) {
     return (file_path.endsWith(".ts") || file_path.endsWith(".tsx")) && !file_path.endsWith("src/back/collections/collections.ts") && !file_path.endsWith("src/back/routes/routes.ts") && !file_path.endsWith("src/back/routes/urls.ts") && !file_path.endsWith("stimulus.ts") && !file_path.startsWith("src/front");
   }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   async dispose() {
   }
   async _build() {

package/lib/builders/colors-builder.js

@@ -18,7 +18,6 @@ class ColorsBuilder extends Builder {
   ownsFile(file_path) {
     return file_path == COLORS_TS_PATH;
   }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   async dispose() {
   }
   async _build() {
@@ -212,8 +211,12 @@ class ColorsBuilder extends Builder {
 
 								.hex {
 									padding: 8px;
-									font-family: Menlo, Consolas, Monaco,
-										Liberation Mono, Lucida Console,
+									font-family:
+										Menlo,
+										Consolas,
+										Monaco,
+										Liberation Mono,
+										Lucida Console,
 										monospace;
 									opacity: 0.5;
 									visibility: hidden;
@@ -403,16 +406,16 @@ class ColorsBuilder extends Builder {
 								)
 									? \`var(--color-\${box.getAttribute(
 											"data-color-group-name"
-									  )}-\${box.getAttribute(
+										)}-\${box.getAttribute(
 											"data-color-name"
-									  )})\`
+										)})\`
 									: \`var(--color-\${box.getAttribute(
 											"data-color-group-name"
-									  )}-\${box.getAttribute(
+										)}-\${box.getAttribute(
 											"data-color-name"
-									  )}-\${box.getAttribute(
+										)}-\${box.getAttribute(
 											"data-color-shade-number"
-									  )})\`;
+										)})\`;
 								navigator.clipboard.writeText(css_var);
 								pop_toast();
 							}

package/lib/builders/fonts-builder.js

@@ -7,7 +7,6 @@ class FontsBuilder extends Builder {
   ownsFile(file_path) {
     return file_path == FONTS_CONFIG_PATH;
   }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   async dispose() {
   }
   async _build() {

package/lib/builders/frontend-ts-builder.js

@@ -16,7 +16,6 @@ class FrontendTSBuilder extends Builder {
   ownsFile(file_path) {
     return file_path.startsWith("src/front") || file_path.endsWith(".stimulus.ts");
   }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   async dispose() {
   }
   async _build() {

package/lib/cli.js

@@ -1,17 +1,15 @@
 #!/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
@@ -19,22 +17,21 @@ import {
 const actions = {
   "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(", ")}`
     );
   },
   "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/lib/components/tabs.js

@@ -5,51 +5,51 @@ function name_to_id(str) {
 const style = (hide_tabs_width) => (
   /* 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) {
 		.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>`
 );
 function tabs(tabs2, selected_tab_style = "font-weight: bold;", selected_index = 0, hide_tabs_width = 0) {
   return (

package/lib/controllers/table-add-button.stimulus.js

@@ -0,0 +1,35 @@
+import { Controller } from "stimulus";
+class table_add_button_stimulus_default extends Controller {
+  constructor() {
+    super(...arguments);
+    this.defaultRowsNumber = 20;
+  }
+  static {
+    this.targets = ["textarea"];
+  }
+  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)
+    );
+    tbody.appendChild(template.cloneNode(true).content);
+    template.innerHTML = orig_template;
+  }
+}
+export {
+  table_add_button_stimulus_default as default
+};
+//# sourceMappingURL=table-add-button.stimulus.js.map

package/lib/esbuild-plugins/rewrite-asset-imports.js

@@ -20,16 +20,13 @@ const rewrite_asset_imports_plugin = (project_dir) => ({
         `^import ([^ ]+, )?(\\w+|{[^}]+}) from "([^"]+)";`,
         "gm"
       );
-      contents = contents.replaceAll(
-        regex_import,
-        (line, _, original_path) => {
-          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,
         loader: extname(args.path) === ".tsx" ? "tsx" : "ts"

package/lib/forms/controls/array.js

@@ -1,7 +1,7 @@
 import { hasShape, predicates } from "@sealcode/ts-predicates";
 import qs from "qs";
 import { tempstream } from "tempstream";
-import { SimpleFormField } from "../fields/simple-form-field.js";
+import { TextBasedSimpleField } from "../fields/simple-form-field.js";
 import { Derived } from "./derived.js";
 import { FormFieldControl } from "./form-field-control.js";
 function UnboundControl(controlClass, arbitrary_field_name, params) {
@@ -26,12 +26,12 @@ class StructuredArray extends FormFieldControl {
     return {};
   }
   makeSubfield(_field_name) {
-    return new SimpleFormField(false);
+    return new TextBasedSimpleField(false);
   }
   async renderItemControl(ctx, form_id, control, item, index) {
     const fctx = {
       ctx,
-      data: {},
+      data: { raw_values: {}, messages: [], field_messages: {} },
       messages: [],
       field_name_prefix: "",
       form_id,
@@ -46,19 +46,17 @@ class StructuredArray extends FormFieldControl {
         );
         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: field_name2 }) => (
           /* HTML */
           `<input
-					name="${field_name2}"
-					type="hidden"
-					value="${values[field_name2] || ""}"
-					form="${inner_form_id}"
-				/>`
+						name="${field_name2}"
+						type="hidden"
+						value="${values[field_name2] || ""}"
+						form="${inner_form_id}"
+					/>`
         ),
         async () => ({
           inner_form_id: this.getInnerFormID(),
@@ -67,10 +65,22 @@ class StructuredArray extends FormFieldControl {
       );
       return tempstream`${new constructor(field, params).render({
         ...fctx,
-        data: { [field.name]: item[field_name] }
+        data: {
+          raw_values: {
+            [field.name]: item[field_name]
+          },
+          messages: [],
+          field_messages: {}
+        }
       })}${hidden_shadow.render({
         ...fctx,
-        data: { [field.name]: item[field_name] },
+        data: {
+          raw_values: {
+            [field.name]: item[field_name]
+          },
+          messages: [],
+          field_messages: {}
+        },
         form_id: this.getInnerFormID()
       })}`;
     } else {
@@ -93,7 +103,7 @@ class StructuredArray extends FormFieldControl {
 		</div>`;
   }
   async getItems(ctx, raw_values) {
-    return (await this.field.getValue(ctx, raw_values)).parsed;
+    return (await this.field.getParsedValue(ctx, raw_values)).parsed;
   }
   async _render(ctx, form_id, raw_values) {
     const items = await this.getItems(ctx, raw_values);
@@ -114,13 +124,12 @@ class StructuredArray extends FormFieldControl {
 		</turbo-frame>`;
   }
   render(fctx) {
-    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) {
     return ctx.params.id;
   }
   mount(router) {
-    console.log("mounting!", this.getActionURL());
     router.post(this.getActionURL(), async (ctx) => {
       const form_id = ctx.query.form_id;
       if (typeof form_id != "string") {
@@ -134,7 +143,6 @@ class StructuredArray extends FormFieldControl {
         throw new Error("Missing action param");
       }
       const field_data = ctx.$body[this.field.name] || { data: [] };
-      console.log({ action: field_data });
       if (!hasShape(
         {
           data: predicates.array(
@@ -149,12 +157,7 @@ class StructuredArray extends FormFieldControl {
         ...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,