@sealcode/sealgen 0.18.10 → 0.19.0

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,81 @@ 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,
+    fields_path
+  );
+  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-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,12 +66,6 @@ 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`);
   await generateRoutes();

package/lib/build.js

@@ -86,7 +86,9 @@ 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);

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,7 +17,6 @@ import {
 const actions = {
   "add-collection": addCollection,
   "add-route": addRoute,
-  "add-verbose-crud": addVerboseCRUD,
   "add-crud": addCRUD,
   "generate-collections": generateCollections,
   "generate-components": generateComponents,
@@ -34,7 +31,7 @@ const actions = {
   "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/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/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,9 +46,7 @@ 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 }) => (
@@ -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,10 +157,6 @@ 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(

package/lib/forms/controls/big-radio-group.js

@@ -7,9 +7,9 @@ class BigRadioGroup extends FormFieldControl {
     this.options = options;
   }
   async render(fctx) {
-    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`<div class="bigradios">
 			${Object.entries(this.options).map(([key, { description }]) => {

package/lib/forms/controls/checkbox-group.js

@@ -18,24 +18,24 @@ class CheckboxGroup extends FormFieldControl {
     }).render(fctx);
   }
   async render(fctx) {
-    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,
-          label: (this.options.checkboxNameToLabel || ((s) => s))(option),
+          id: this.field.name + "__" + option.value,
+          label: (this.options.checkboxNameToLabel || ((s) => s))(option.value),
           default_value: false
         },
-        option
+        option.value
       )
     );
     return this.wrapGroup(fctx, checkboxes);

package/lib/forms/controls/checkboxed-list-input.js

@@ -21,7 +21,11 @@ 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);
     const [options, isVisible] = await Promise.all([
       this.field.generateOptions(fctx.ctx),
@@ -56,7 +60,9 @@ class CheckboxedListInput extends FormFieldControl {
         ([group_label, options2]) => tempstream` <h3>
 											${group_label}
 										</h3>
-										${options2.map(
+
+										${// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        options2.map(
           ({ value, label }) => this.renderOption({
             name,
             value,
@@ -99,6 +105,7 @@ class CheckboxedListInput extends FormFieldControl {
 						name="${name}.${value}"
 						${checked ? "checked" : ""}
 						form=${form_id}
+						autocomplete="off"
 					/>
 					<label for="${name}.${value}">${label || value}</label>
 				`

package/lib/forms/controls/controls.js

@@ -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 "./array.js";
 export * from "./table.js";
 export {

package/lib/forms/controls/derived-frame.js

@@ -58,7 +58,11 @@ class DerivedFrame extends Derived {
         await this.generateFrameContent(
           new FormControlContext(
             ctx,
-            ctx.query,
+            {
+              messages: [],
+              field_messages: {},
+              raw_values: ctx.query
+            },
             [],
             query.field_name_prefix,
             query.form_id,

package/lib/forms/controls/derived.js

@@ -12,7 +12,7 @@ class Derived extends FormControl {
   async getBackendValues(fctx) {
     const fieldnames = this.fields.map((f) => f.name);
     const result = Object.fromEntries(
-      Object.entries(fctx.data).filter(
+      Object.entries(fctx.data.raw_values).filter(
         ([key]) => fieldnames.includes(key)
       )
     );

package/lib/forms/controls/dropdown.js

@@ -30,7 +30,10 @@ class FreeformDropdown extends SimpleInput {
     };
   }
   async renderInput(ctx, attributes_str, data) {
-    const { parsed: picked_value } = await this.field.getValue(ctx, data);
+    const { parsed: picked_value } = await this.field.getParsedValue(
+      ctx,
+      data
+    );
     return (
       /* HTML */
       tempstream`<select ${attributes_str}>

package/lib/forms/controls/editable-collection-subset.js

@@ -11,9 +11,9 @@ class EditableCollectionSubset extends FormFieldControl {
     this.role = "input";
   }
   async render(fctx) {
-    const { parsed: values } = await this.field.getValue(
+    const { parsed: values } = await this.field.getParsedValue(
       fctx.ctx,
-      fctx.data
+      fctx.data.raw_values
     );
     return tempstream`<div>
 			<ul>

package/lib/forms/controls/file.js

@@ -1,6 +1,8 @@
+import { PathFilePointer } from "@sealcode/file-manager";
 import { tempstream } from "tempstream";
 import { SimpleInput } from "./simple-input.js";
 import { htmlEscape } from "escape-goat";
+import { extname } from "node:path";
 class File extends SimpleInput {
   getType() {
     return "file";
@@ -11,12 +13,31 @@ class File extends SimpleInput {
     if (!file) {
       return empty_container;
     }
+    if (file instanceof PathFilePointer) {
+      const filename = await file.getOriginalFilename();
+      return tempstream`<div class="${class_name}">
+				<div class="${class_name}__icon">
+					<picture>
+						<img
+							src="/dist/sealgen/file-icon.svg"
+							width="80"
+							height="80"
+							alt=""
+						/>
+						<span class="${class_name}__icon__extension"
+							>${extname(filename)}</span
+						>
+					</picture>
+					<a href="${file.getURL()}" download>${filename}</a>
+				</div>
+			</div>`;
+    }
     return tempstream`<div class="${class_name}">
 			${file.getOriginalFilename()}
 		</div>`;
   }
   async preInput(fctx, data) {
-    let { parsed } = await this.field.getValue(fctx.ctx, data);
+    let { parsed } = await this.field.getParsedValue(fctx.ctx, data);
     if (parsed === null) {
       parsed = { old: null, new: null };
     }
@@ -35,7 +56,10 @@ class File extends SimpleInput {
   }
   async getInputAttributes(fctx) {
     const original = await super.getInputAttributes(fctx);
-    const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
+    const { parsed } = await this.field.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
     return {
       ...original,
       name: this.field.name + "[new]",

package/lib/forms/controls/file.test.js

@@ -20,11 +20,11 @@ describe("file-control", () => {
     });
     it("doesn't require image input if it already has old-value", async () => {
       const port = await getPort();
-      console.log(`Using port ${port} for photo.test.ts`);
+      console.log(`Using port ${port} for image.test.ts`);
       const app = new Koa();
       const router = new Router();
       const fields = {
-        file: new Fields.File(true, new FileManager("/tmp", "/uploaded_files"))
+        file: new Fields.File(true)
       };
       let submit_called = false;
       mount(

package/lib/forms/controls/hidden-input.js

@@ -7,7 +7,10 @@ class HiddenInput extends FormFieldControl {
     this.field = field;
   }
   async render(fctx) {
-    const { raw } = await this.field.getValue(fctx.ctx, fctx.data);
+    const { raw } = await this.field.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
     return tempstream`<input type="hidden" name="${this.field.name}" value="${attribute((raw || "").toString())}" form="${fctx.form_id}">`;
   }
 }