@sealcode/sealgen 0.15.23 → 0.15.25

package/@types/src/add-collection.d.ts

@@ -1 +1 @@
-export declare function addCollection(): Promise<void>;
+export declare function addCollection(params?: Record<string, string | boolean>): Promise<void>;

package/@types/src/page/list.d.ts

@@ -9,6 +9,7 @@ import { SimpleFormField } from "../forms/fields/simple-form-field.js";
 import { FormDataValue } from "../forms/form-types.js";
 export declare const BasePagePropsShape: {};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
+export declare const DEFAULT_ITEMS_PER_PAGE = 12;
 export declare const BaseListPageFields: {
     readonly page: NumberField<1, false>;
     readonly itemsPerPage: NumberField<12, false>;

package/@types/src/page/sealious-list.d.ts

@@ -1,7 +1,7 @@
 import { Context } from "koa";
 import { BaseListPageFields, ListPage } from "./list.js";
 import { Collection, CollectionItem, ItemList, Context as SealiousContext } from "sealious";
-import { FlatTemplatable } from "tempstream";
+import { FlatTemplatable, Templatable } from "tempstream";
 export declare abstract class SealiousItemListPage<C extends Collection, F extends typeof BaseListPageFields> extends ListPage<CollectionItem<C>, F> {
     collection: C;
     constructor(collection: C);
@@ -9,8 +9,9 @@ export declare abstract class SealiousItemListPage<C extends Collection, F exten
     getTotalPages(ctx: Context, itemsPerPage: number): Promise<number>;
     protected addFilter(ctx: Context, list: ItemList<C>): Promise<void>;
     makeQuery(ctx: Context): Promise<ItemList<C>>;
-    getItems(ctx: Context, page: number, itemsPerPage: number): Promise<CollectionItem<C>[]>;
+    getItems(ctx: Context, page: number, itemsPerPage: number | null): Promise<CollectionItem<C>[]>;
     getFilterValues(ctx: Context): Promise<Record<string, string | undefined>>;
+    renderListContainer(_: Context, content: Templatable): FlatTemplatable;
     renderItem(_: Context, item: CollectionItem<C>, _index: number): Promise<FlatTemplatable>;
     canAccess: (ctx: Context) => Promise<{
         canAccess: boolean;

package/@types/src/page/sealious-list.test.d.ts

@@ -0,0 +1 @@
+export {};

package/@types/src/test_utils/exec_async.d.ts

@@ -0,0 +1 @@
+export declare const execAsync: (cmd: string) => Promise<void>;

package/@types/src/test_utils/test-on-real-app.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="node" resolution-mode="require"/>
+import EventEmitter from "events";
+export declare const callSealgenBin: () => string;
+export declare class RealAppTest {
+    node_pid: number;
+    app_port: number;
+    mongo_port: number;
+    app_path: string;
+    container_name: string;
+    emitter: EventEmitter;
+    static init(): Promise<RealAppTest>;
+    start(): Promise<void>;
+    close(): Promise<void>;
+    runSealgenCommand(command: string): Promise<void>;
+    throwIfItKillsTheApp<T>(cb: () => Promise<T>): Promise<T>;
+    httpGet(path: string): Promise<{
+        status: number;
+        response: string;
+    }>;
+    httpPOST(path: string, body: Record<string, unknown>): Promise<{
+        status: number;
+        response: string;
+    }>;
+}

package/@types/src/utils/input-wrapper.d.ts

@@ -2,4 +2,4 @@
 import { Readable } from "stream";
 import { FlatTemplatable } from "tempstream";
 export declare function getRequiredClass(isRequired: boolean): string;
-export declare function inputWrapper(modifiers: string[], input: FlatTemplatable): Readable;
+export declare function inputWrapper(type: string, modifiers: string[], input: FlatTemplatable): Readable;

package/lib/add-collection.js

@@ -1,18 +1,28 @@
 import { resolve } from "path";
 import _locreq from "locreq";
 import { promises as fs, existsSync } from "fs";
-import { question } from "./utils/question.js";
 import { collectionTemplate } from "./templates/collection.js";
 import { generateCollections } from "./generate-collections.js";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
-async function addCollection() {
-  const collection_name = toPascalCase(
-    await question(
-      "What's the name of the collection class: ",
-      (s) => s.length > 3
-    )
-  );
+import prompts from "prompts";
+async function addCollection(params = {}) {
+  prompts.override(params);
+  const response = await prompts([
+    {
+      type: "text",
+      name: "collection_name",
+      message: "What's the name of the collection class: ",
+      validate: (s) => s.length > 3 ? true : "Should be at least 3 characters long",
+      format: function(action) {
+        return toPascalCase(action);
+      }
+    }
+  ]);
+  const collection_name = response.collection_name;
+  if (!collection_name) {
+    throw new Error("Empty collection name, please try again");
+  }
   const file_path = target_locreq.resolve(
     `src/back/collections/${toKebabCase(collection_name)}.ts`
   );

package/lib/add-route.test.js

@@ -1,98 +1,15 @@
-import { promises as fs } from "fs";
-import { exec, spawn } from "child_process";
-import axios from "axios";
-import waitPort from "wait-port";
-import getPort from "get-port";
-import _locreq from "locreq";
-import { module_dirname } from "./utils/module-dirname.js";
-const locreq = _locreq(module_dirname(import.meta.url));
-const execAsync = (cmd) => {
-  return new Promise((resolve, reject) => {
-    const process2 = exec(cmd);
-    console.log("EXECUTING", cmd);
-    process2?.stdout?.on("data", (data) => {
-      console.log(`stdout: ${data}`);
-    });
-    process2?.stderr?.on("data", (data) => {
-      console.log(`stdout: ${data}`);
-    });
-    process2.on("exit", (code) => {
-      if (code == 0) {
-        resolve();
-      } else {
-        reject();
-      }
-    });
-  });
-};
-const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
+import { RealAppTest } from "./test_utils/test-on-real-app.js";
 describe("add route test", () => {
-  let node_pid = 0;
-  const timestamp = Date.now();
-  const app_path = `/tmp/sealious-minimal-${timestamp}`;
-  const container_name = `sealgen-test-mongo-${timestamp}`;
-  afterEach(async function() {
-    try {
-      if (node_pid != 0)
-        await execAsync(`kill -9 ${node_pid}`);
-    } catch (error) {
-      throw new Error("node process exited unexpectedly, please inspect the output");
-    }
-    await Promise.all([
-      fs.rm(app_path, { recursive: true, force: true }),
-      execAsync(`docker rm -f ${container_name}`)
-    ]);
-  });
-  it("creates minimal sealious app", async function() {
-    console.log("	cloning sealious-minimal...");
-    await execAsync(
-      `git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout df8cccf`
-    );
-    console.log("	installing dependencies and sealgen...");
-    await execAsync(
-      `cd ${app_path} && npm ci rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen && ${callSealgenBin()} make-env`
-    );
-    console.log("	running add-route and building app...");
-    await execAsync(
-      `cd ${app_path} && ${callSealgenBin()} add-route --url=/sample --action=Sample --mode=page && ${callSealgenBin()} build`
-    );
-    console.log(
-      "	starting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
-    );
-    const mongo_port = await getPort();
-    const app_port = await getPort();
-    await execAsync(
-      `docker run -p ${mongo_port}:27017 --name ${container_name} -d mongo:4.4-bionic`
-    );
-    console.log("	running app and making request to the generated url...");
-    const env = {
-      ...process.env,
-      SEALIOUS_MONGO_PORT: mongo_port.toString(),
-      SEALIOUS_PORT: app_port.toString()
-    };
-    const node_args = [`${app_path}/dist/back/index.js`];
-    console.log(
-      "EXECUTING APP",
-      `${Object.entries(env).map(([key, value]) => `${key}=${value}`).join(" ")} node ${node_args.join(" ")}`
-    );
-    let app_start = spawn(`node`, node_args, {
-      env
-    });
-    app_start.stdout.on("data", (data) => console.log("APP OUTPUT:", data.toString()));
-    app_start.stderr.on("data", (data) => console.log(data.toString()));
-    if (app_start.pid == void 0)
-      throw new Error("node failed to start");
-    node_pid = app_start.pid;
-    await waitPort({
-      host: "localhost",
-      port: app_port,
-      output: "silent",
-      timeout: 6e3
-    });
-    const res = await axios.get(`http://localhost:${app_port}/sample`);
+  it("creates minimal sealious app and adds a simple route that works", async function() {
+    const test_app = await RealAppTest.init();
+    const path = "/sample";
+    await test_app.runSealgenCommand(`add-route --url=${path} --action=Sample --mode=page`);
+    await test_app.start();
+    const res = await test_app.httpGet(path);
     if (res.status != 200) {
-      throw new Error("url generated by add-route exists but doesnt return 200");
+      throw new Error("url generated by add-route exists but doesn't return 200");
     }
+    await test_app.close();
   }).timeout(100 * 1e3);
 });
 //# sourceMappingURL=add-route.test.js.map

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

@@ -20,28 +20,43 @@ class CheckboxedListInput extends FormFieldControl {
     ]);
     const { name, required } = this.field;
     return inputWrapper(
-      [name, getRequiredClass(required)],
+      "checkboxed-list",
+      [
+        name,
+        getRequiredClass(required),
+        "options-count--" + options.length.toString(),
+        ...options.length >= 5 ? ["options-count--5-or-more"] : [],
+        ...options.length >= 10 ? ["options-count--10-or-more"] : [],
+        ...options.length >= 15 ? ["options-count--15-or-more"] : [],
+        ...options.length >= 20 ? ["options-count--20-or-more"] : []
+      ],
       tempstream`<label
 					>${this.options.label || this.field.name}</label
-				>${isVisible ? options.map(
-        ({ value, label }) => inputWrapper(
+				>
+				<ul>
+					${isVisible ? options.map(
+        ({ value, label }) => tempstream`<li>
+									${inputWrapper(
+          "checkbox",
           [name],
           /* HTML */
           `
-									<input
-										type="checkbox"
-										id="${name}.${value}"
-										name="${name}.${value}"
-										${pickedValues.includes(value) ? "checked" : ""}
-										form=${fctx.form_id}
-									/>
-									<label for="${name}.${value}"
-										>${label || value}</label
-									>
-								`
-        )
+											<input
+												type="checkbox"
+												id="${name}.${value}"
+												name="${name}.${value}"
+												${pickedValues.includes(value) ? "checked" : ""}
+												form=${fctx.form_id}
+											/>
+											<label for="${name}.${value}"
+												>${label || value}</label
+											>
+										`
+        )}
+								</li>`
       ) : ""}
-				${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}`
+					${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}
+				</ul>`
     );
   }
 }

package/lib/forms/controls/multiple-files.js

@@ -161,6 +161,7 @@ class MultipleFiles extends FormFieldControl {
       ])
     )).filter(([_, f]) => f !== null);
     return inputWrapper(
+      "multiple-files",
       ["multiple-files", this.field.name, ...this.getClassModifiers()],
       tempstream`
 				<label>${this.options.label || this.field.name}</label>

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

@@ -73,6 +73,7 @@ class SimpleInput extends FormFieldControl {
       true
     );
     return inputWrapper(
+      "simple-input",
       this.getWrapperModifiers(),
       tempstream`
 				${label ? `<label for="${id}">${label}</label>` : ""}

package/lib/forms/controls/tickable.js

@@ -33,6 +33,7 @@ class Tickable extends FormFieldControl {
     const readonly = this.options.readonly || false;
     const required = this.field.required;
     return inputWrapper(
+      this.type,
       this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
       /* HTML */
       `

package/lib/page/list.js

@@ -202,6 +202,7 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 export {
   BaseListPageFields,
   BasePagePropsShape,
+  DEFAULT_ITEMS_PER_PAGE,
   ListPage
 };
 //# sourceMappingURL=list.js.map

package/lib/page/sealious-list.js

@@ -1,4 +1,8 @@
-import { ListPage } from "./list.js";
+import {
+  DEFAULT_ITEMS_PER_PAGE,
+  ListPage
+} from "./list.js";
+import { tempstream } from "tempstream";
 import { peopleWhoCan } from "./access-control.js";
 import qs from "qs";
 import { is, predicates } from "@sealcode/ts-predicates";
@@ -39,7 +43,7 @@ class SealiousItemListPage extends ListPage {
   async getItems(ctx, page, itemsPerPage) {
     const query = await this.makeQuery(ctx);
     await this.addFilter(ctx, query);
-    const { items } = await query.paginate({ items: itemsPerPage, page }).fetch();
+    const { items } = await query.paginate({ items: itemsPerPage || DEFAULT_ITEMS_PER_PAGE, page }).fetch();
     return items;
   }
   async getFilterValues(ctx) {
@@ -51,6 +55,9 @@ class SealiousItemListPage extends ListPage {
     ) ? _filter_values : {};
     return filter_values;
   }
+  renderListContainer(_, content) {
+    return tempstream`<div class="sealgen-sealious-list-container">${content}</div>`;
+  }
   async renderItem(_, item, _index) {
     return `<div>${item.id}</div>`;
   }

package/lib/page/sealious-list.test.js

@@ -0,0 +1,24 @@
+import assert from "assert";
+import { RealAppTest } from "../test_utils/test-on-real-app.js";
+describe("sealious-list test", () => {
+  it("creates minimal sealious app and adds a simple route that works", async function() {
+    const test_app = await RealAppTest.init();
+    const url = "/list";
+    await test_app.runSealgenCommand(`add-collection --collection_name=samples`);
+    await test_app.runSealgenCommand(
+      `add-route --url=${url} --action=List --mode=list --collection=samples`
+    );
+    await test_app.start();
+    const res_post = await test_app.httpPOST("/api/v1/collections/samples", {
+      content: "some-content"
+    });
+    assert(res_post.status == 201);
+    const res = await test_app.httpGet(url);
+    if (res.status != 200) {
+      throw new Error("url generated by add-route exists but doesn't return 200");
+    }
+    assert(res.response.includes("some-content"));
+    await test_app.close();
+  }).timeout(100 * 1e3);
+});
+//# sourceMappingURL=sealious-list.test.js.map

package/lib/templates/list.js

@@ -6,6 +6,7 @@ import { extractCollectionClassname } from "../generate-collections.js";
 import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
 import { DefaultListFilters } from "../page/default-list-filters.js";
 import { formatWithPrettier } from "../utils/prettier.js";
+import { toKebabCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
 const listTemplate = async (action_name, newfilefullpath) => {
   const response = await prompts({
@@ -147,7 +148,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 		return html(
 			ctx,
 			"${action_name}",
-			<div>
+			<div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
 				<h2>${action_name} List</h2>
 				<table class="sealious-list">
 					{this.renderTableHead(ctx, displayFields)}

package/lib/test_utils/exec_async.js

@@ -0,0 +1,24 @@
+import { exec } from "child_process";
+const execAsync = (cmd) => {
+  return new Promise((resolve, reject) => {
+    const process = exec(cmd);
+    console.log("EXECUTING", cmd);
+    process?.stdout?.on("data", (data) => {
+      console.log(`stdout: ${data}`);
+    });
+    process?.stderr?.on("data", (data) => {
+      console.log(`stdout: ${data}`);
+    });
+    process.on("exit", (code) => {
+      if (code == 0) {
+        resolve();
+      } else {
+        reject();
+      }
+    });
+  });
+};
+export {
+  execAsync
+};
+//# sourceMappingURL=exec_async.js.map

package/lib/test_utils/test-on-real-app.js

@@ -0,0 +1,147 @@
+import { execAsync } from "./exec_async.js";
+import { spawn } from "child_process";
+import getPort from "get-port";
+import waitPort from "wait-port";
+import { promises as fs } from "fs";
+import _locreq from "locreq";
+import { module_dirname } from "../utils/module-dirname.js";
+import EventEmitter from "events";
+const locreq = _locreq(module_dirname(import.meta.url));
+const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
+const sealious_minimal_commit = "b0d5bf5";
+class RealAppTest {
+  constructor() {
+    this.emitter = new EventEmitter();
+  }
+  static async init() {
+    const test_app = new RealAppTest();
+    test_app.node_pid = 0;
+    const timestamp = Date.now();
+    test_app.app_path = `/tmp/sealious-minimal-${timestamp}`;
+    test_app.container_name = `sealgen-test-mongo-${timestamp}`;
+    console.log("	cloning sealious-minimal...");
+    await execAsync(
+      `git clone https://hub.sealcode.org/source/sealious-minimal.git ${test_app.app_path} && cd ${test_app.app_path} && git checkout ${sealious_minimal_commit}`
+    );
+    console.log("	installing dependencies and sealgen...");
+    await execAsync(
+      `cd ${test_app.app_path} && npm ci rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen && ${callSealgenBin()} make-env`
+    );
+    console.log(
+      "	starting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
+    );
+    test_app.app_port = await getPort();
+    return test_app;
+  }
+  async start() {
+    this.mongo_port = await getPort();
+    await execAsync(
+      `docker run -p ${this.mongo_port}:27017 --name ${this.container_name} -d mongo:4.4-bionic`
+    );
+    const env = {
+      ...process.env,
+      SEALIOUS_MONGO_PORT: this.mongo_port.toString(),
+      SEALIOUS_PORT: this.app_port.toString()
+    };
+    const node_args = [`${this.app_path}/dist/back/index.js`];
+    console.log(
+      "EXECUTING APP",
+      `${Object.entries(env).map(([key, value]) => `${key}=${value}`).join(" ")} node ${node_args.join(" ")}`
+    );
+    const app_start = spawn(`node`, node_args, {
+      env
+    });
+    app_start.stdout.on(
+      "data",
+      (data) => console.log("APP OUTPUT:", data.toString())
+    );
+    app_start.stderr.on("data", (data) => console.log(data.toString()));
+    app_start.on("exit", (code) => {
+      this.emitter.emit("exit", code);
+      this.emitter.emit("process_error");
+    });
+    if (app_start.pid == void 0)
+      throw new Error("node failed to start");
+    this.node_pid = app_start.pid;
+    await waitPort({
+      host: "localhost",
+      port: this.app_port,
+      output: "silent",
+      timeout: 6e3
+    });
+  }
+  async close() {
+    try {
+      if (this.node_pid != 0)
+        await execAsync(`kill -9 ${this.node_pid}`);
+    } catch (error) {
+      throw new Error(
+        "node process exited unexpectedly, please inspect the output"
+      );
+    }
+    await Promise.all([
+      fs.rm(this.app_path, { recursive: true, force: true }),
+      execAsync(`docker rm -f ${this.container_name}`)
+    ]);
+  }
+  async runSealgenCommand(command) {
+    await execAsync(
+      `cd ${this.app_path} && ${callSealgenBin()} ${command} && ${callSealgenBin()} build`
+    );
+  }
+  async throwIfItKillsTheApp(cb) {
+    let finished = false;
+    return new Promise(async (resolve, reject) => {
+      const error_handler = () => {
+        if (!finished) {
+          reject();
+        }
+        finished = true;
+      };
+      this.emitter.addListener("process_error", error_handler);
+      try {
+        const result = await cb();
+        if (!finished) {
+          resolve(result);
+          finished = true;
+        }
+      } catch (e) {
+        if (!finished) {
+          reject(e);
+          finished = true;
+        }
+      }
+      this.emitter.removeListener("process_error", error_handler);
+    });
+  }
+  async httpGet(path) {
+    return this.throwIfItKillsTheApp(async () => {
+      const ret = await fetch(`http://localhost:${this.app_port}${path}`);
+      const status = ret.status;
+      const response = await ret.text();
+      return { status, response };
+    });
+  }
+  async httpPOST(path, body) {
+    return this.throwIfItKillsTheApp(async () => {
+      const ret = await fetch(
+        `http://localhost:${this.app_port}${path}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        }
+      );
+      const status = ret.status;
+      const response = await ret.text();
+      console.log("request done!");
+      console.log({ response });
+      return { status, response };
+    });
+  }
+}
+export {
+  RealAppTest,
+  callSealgenBin
+};
+//# sourceMappingURL=test-on-real-app.js.map

package/lib/utils/input-wrapper.js

@@ -5,9 +5,11 @@ function getRequiredClass(isRequired) {
 function getModifierClasses(modifiers) {
   return modifiers.map((m) => "form-input__wrapper--" + m).join(" ");
 }
-function inputWrapper(modifiers, input) {
+function inputWrapper(type, modifiers, input) {
   return tempstream`<div
-		class="form-input form-input__wrapper ${getModifierClasses(modifiers)}"
+		class="form-input form-input--type-${type} form-input__wrapper ${getModifierClasses(
+    modifiers
+  )}"
 	>
 		${input}
 	</div>`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.23",
+	"version": "0.15.25",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/add-collection.ts

@@ -1,20 +1,35 @@
 import { resolve } from "path";
 import _locreq from "locreq";
 import { promises as fs, existsSync } from "fs";
-import { question } from "./utils/question.js";
 import { collectionTemplate } from "./templates/collection.js";
 import { generateCollections } from "./generate-collections.js";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
+import prompts from "prompts";
 
-export async function addCollection(): Promise<void> {
-	const collection_name = toPascalCase(
-		await question(
-			"What's the name of the collection class: ",
-			(s: string) => s.length > 3
-		)
-	);
+export async function addCollection(
+	params: Record<string, string | boolean> = {}
+): Promise<void> {
+	prompts.override(params);
+	const response = await prompts([
+		{
+			type: "text",
+			name: "collection_name",
+			message: "What's the name of the collection class: ",
+			validate: (s: string) =>
+				s.length > 3 ? true : "Should be at least 3 characters long",
+			format: function (action: string) {
+				return toPascalCase(action);
+			},
+		},
+	]);
+
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	const collection_name: string = response.collection_name;
 
+	if (!collection_name) {
+		throw new Error("Empty collection name, please try again");
+	}
 	const file_path = target_locreq.resolve(
 		`src/back/collections/${toKebabCase(collection_name)}.ts`
 	);

package/src/add-route.test.ts

@@ -1,106 +1,16 @@
-import { promises as fs } from "fs";
-import { exec, spawn } from "child_process";
-import axios from "axios";
-import waitPort from "wait-port";
-import getPort from "get-port";
-
-import _locreq from "locreq";
-import { module_dirname } from "./utils/module-dirname.js";
-const locreq = _locreq(module_dirname(import.meta.url));
-
-const execAsync = (cmd: string) => {
-	return new Promise<void>((resolve, reject) => {
-		const process = exec(cmd);
-
-		console.log("EXECUTING", cmd);
-
-		process?.stdout?.on("data", (data) => {
-			console.log(`stdout: ${data}`);
-		});
-
-		process?.stderr?.on("data", (data) => {
-			console.log(`stdout: ${data}`);
-		});
-
-		process.on("exit", (code) => {
-			if (code == 0) {
-				resolve();
-			} else {
-				reject();
-			}
-		});
-	});
-};
-
-const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
+import { RealAppTest } from "./test_utils/test-on-real-app.js";
 
 describe("add route test", () => {
-	let node_pid = 0;
-	const timestamp = Date.now();
-	const app_path = `/tmp/sealious-minimal-${timestamp}`;
-	const container_name = `sealgen-test-mongo-${timestamp}`;
-	afterEach(async function () {
-		try {
-			if (node_pid != 0) await execAsync(`kill -9 ${node_pid}`);
-		} catch (error) {
-			throw new Error("node process exited unexpectedly, please inspect the output");
-		}
-		await Promise.all([
-			fs.rm(app_path, { recursive: true, force: true }),
-			execAsync(`docker rm -f ${container_name}`),
-		]);
-	});
+	it("creates minimal sealious app and adds a simple route that works", async function () {
+		const test_app = await RealAppTest.init();
 
-	it("creates minimal sealious app", async function () {
-		console.log("\tcloning sealious-minimal...");
-		await execAsync(
-			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout df8cccf`
-		);
-		console.log("\tinstalling dependencies and sealgen...");
-		await execAsync(
-			`cd ${app_path} && npm ci rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen && ${callSealgenBin()} make-env`
-		);
-		console.log("\trunning add-route and building app...");
-		await execAsync(
-			`cd ${app_path} && ${callSealgenBin()} add-route --url=/sample --action=Sample --mode=page && ${callSealgenBin()} build`
-		);
-		console.log(
-			"\tstarting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
-		);
-		const mongo_port = await getPort();
-		const app_port = await getPort();
-		await execAsync(
-			`docker run -p ${mongo_port}:27017 --name ${container_name} -d mongo:4.4-bionic`
-		);
-		console.log("\trunning app and making request to the generated url...");
-		const env = {
-			...process.env,
-			SEALIOUS_MONGO_PORT: mongo_port.toString(),
-			SEALIOUS_PORT: app_port.toString(),
-		};
-		const node_args = [`${app_path}/dist/back/index.js`];
-		console.log(
-			"EXECUTING APP",
-			`${Object.entries(env)
-				.map(([key, value]) => `${key}=${value}`)
-				.join(" ")} node ${node_args.join(" ")}`
-		);
-		let app_start = spawn(`node`, node_args, {
-			env,
-		});
-		app_start.stdout.on("data", (data) => console.log("APP OUTPUT:", data.toString()));
-		app_start.stderr.on("data", (data) => console.log(data.toString()));
-		if (app_start.pid == undefined) throw new Error("node failed to start");
-		node_pid = app_start.pid;
-		await waitPort({
-			host: "localhost",
-			port: app_port,
-			output: "silent",
-			timeout: 6000,
-		});
-		const res = await axios.get(`http://localhost:${app_port}/sample`);
+		const path = "/sample";
+		await test_app.runSealgenCommand(`add-route --url=${path} --action=Sample --mode=page`);
+		await test_app.start();
+		const res = await test_app.httpGet(path);
 		if (res.status != 200) {
-			throw new Error("url generated by add-route exists but doesnt return 200");
+			throw new Error("url generated by add-route exists but doesn't return 200");
 		}
+		await test_app.close();
 	}).timeout(100 * 1000);
 });

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

@@ -28,33 +28,48 @@ export class CheckboxedListInput extends FormFieldControl {
 
 		const { name, required } = this.field;
 		return inputWrapper(
-			[name, getRequiredClass(required)],
+			"checkboxed-list",
+			[
+				name,
+				getRequiredClass(required),
+				"options-count--" + options.length.toString(),
+				...(options.length >= 5 ? ["options-count--5-or-more"] : []),
+				...(options.length >= 10 ? ["options-count--10-or-more"] : []),
+				...(options.length >= 15 ? ["options-count--15-or-more"] : []),
+				...(options.length >= 20 ? ["options-count--20-or-more"] : []),
+			],
 			tempstream/* HTML */ `<label
 					>${this.options.label || this.field.name}</label
-				>${isVisible
-					? options.map(({ value, label }) =>
-							inputWrapper(
-								[name],
-								/* HTML */ `
-									<input
-										type="checkbox"
-										id="${name}.${value}"
-										name="${name}.${value}"
-										${pickedValues.includes(value)
-											? "checked"
-											: ""}
-										form=${fctx.form_id}
-									/>
-									<label for="${name}.${value}"
-										>${label || value}</label
-									>
-								`
-							)
-					  )
-					: ""}
-				${~valid && fctx.validate
-					? `<div class="input__error">${message}</div>`
-					: ""}`
+				>
+				<ul>
+					${isVisible
+						? options.map(
+								({ value, label }) => tempstream/* HTML */ `<li>
+									${inputWrapper(
+										"checkbox",
+										[name],
+										/* HTML */ `
+											<input
+												type="checkbox"
+												id="${name}.${value}"
+												name="${name}.${value}"
+												${pickedValues.includes(value)
+													? "checked"
+													: ""}
+												form=${fctx.form_id}
+											/>
+											<label for="${name}.${value}"
+												>${label || value}</label
+											>
+										`
+									)}
+								</li>`
+						  )
+						: ""}
+					${~valid && fctx.validate
+						? `<div class="input__error">${message}</div>`
+						: ""}
+				</ul>`
 		);
 	}
 }

package/src/forms/controls/multiple-files.ts

@@ -230,6 +230,7 @@ export class MultipleFiles extends FormFieldControl {
 		][];
 
 		return inputWrapper(
+			"multiple-files",
 			["multiple-files", this.field.name, ...this.getClassModifiers()],
 			tempstream/* HTML */ `
 				<label>${this.options.label || this.field.name}</label>

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

@@ -137,6 +137,7 @@ export class SimpleInput<
 			true
 		);
 		return inputWrapper(
+			"simple-input",
 			this.getWrapperModifiers(),
 			tempstream/* HTML */ `
 				${label ? `<label for="${id}">${label}</label>` : ""}

package/src/forms/controls/tickable.ts

@@ -85,6 +85,7 @@ export abstract class Tickable<T> extends FormFieldControl {
 		const required = this.field.required;
 
 		return inputWrapper(
+			this.type,
 			this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
 
 			/* HTML */ `

package/src/page/list.ts

@@ -14,7 +14,7 @@ import { FormDataValue } from "../forms/form-types.js";
 export const BasePagePropsShape = <const>{};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
 
-const DEFAULT_ITEMS_PER_PAGE = 12;
+export const DEFAULT_ITEMS_PER_PAGE = 12;
 
 export const BaseListPageFields = <const>{
 	page: new NumberField(false, 1),

package/src/page/sealious-list.test.ts

@@ -0,0 +1,25 @@
+import assert from "assert";
+import { RealAppTest } from "../test_utils/test-on-real-app.js";
+
+describe("sealious-list test", () => {
+	it("creates minimal sealious app and adds a simple route that works", async function () {
+		const test_app = await RealAppTest.init();
+
+		const url = "/list";
+		await test_app.runSealgenCommand(`add-collection --collection_name=samples`);
+		await test_app.runSealgenCommand(
+			`add-route --url=${url} --action=List --mode=list --collection=samples`
+		);
+		await test_app.start();
+		const res_post = await test_app.httpPOST("/api/v1/collections/samples", {
+			content: "some-content",
+		});
+		assert(res_post.status == 201);
+		const res = await test_app.httpGet(url);
+		if (res.status != 200) {
+			throw new Error("url generated by add-route exists but doesn't return 200");
+		}
+		assert(res.response.includes("some-content"));
+		await test_app.close();
+	}).timeout(100 * 1000);
+});

package/src/page/sealious-list.ts

@@ -1,5 +1,9 @@
 import { Context } from "koa";
-import { BaseListPageFields, ListPage } from "./list.js";
+import {
+	BaseListPageFields,
+	DEFAULT_ITEMS_PER_PAGE,
+	ListPage,
+} from "./list.js";
 import {
 	Collection,
 	CollectionItem,
@@ -7,7 +11,7 @@ import {
 	Context as SealiousContext,
 	CollectionInput,
 } from "sealious";
-import { FlatTemplatable } from "tempstream";
+import { FlatTemplatable, Templatable, tempstream } from "tempstream";
 import { peopleWhoCan } from "./access-control.js";
 import qs from "qs";
 import { is, predicates } from "@sealcode/ts-predicates";
@@ -57,12 +61,12 @@ export abstract class SealiousItemListPage<
 	async getItems(
 		ctx: Context,
 		page: number,
-		itemsPerPage: number
+		itemsPerPage: number | null
 	): Promise<CollectionItem<C>[]> {
 		const query = await this.makeQuery(ctx);
 		await this.addFilter(ctx, query);
 		const { items } = await query
-			.paginate({ items: itemsPerPage, page })
+			.paginate({ items: itemsPerPage || DEFAULT_ITEMS_PER_PAGE, page })
 			.fetch();
 		return items;
 	}
@@ -79,6 +83,10 @@ export abstract class SealiousItemListPage<
 		return filter_values;
 	}
 
+	renderListContainer(_: Context, content: Templatable): FlatTemplatable {
+		return tempstream`<div class="sealgen-sealious-list-container">${content}</div>`;
+	}
+
 	async renderItem(
 		_: Context,
 		item: CollectionItem<C>,

package/src/templates/list.ts

@@ -6,6 +6,7 @@ import { extractCollectionClassname } from "../generate-collections.js";
 import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
 import { DefaultListFilters } from "../page/default-list-filters.js";
 import { formatWithPrettier } from "../utils/prettier.js";
+import { toKebabCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
 
 export const listTemplate = async (
@@ -162,7 +163,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 		return html(
 			ctx,
 			"${action_name}",
-			<div>
+			<div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
 				<h2>${action_name} List</h2>
 				<table class="sealious-list">
 					{this.renderTableHead(ctx, displayFields)}

package/src/test_utils/exec_async.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import { exec } from "child_process";
+
+export const execAsync = (cmd: string) => {
+	return new Promise<void>((resolve, reject) => {
+		const process = exec(cmd);
+
+		console.log("EXECUTING", cmd);
+
+		process?.stdout?.on("data", (data) => {
+			console.log(`stdout: ${data}`);
+		});
+
+		process?.stderr?.on("data", (data) => {
+			console.log(`stdout: ${data}`);
+		});
+
+		process.on("exit", (code) => {
+			if (code == 0) {
+				resolve();
+			} else {
+				reject();
+			}
+		});
+	});
+};

package/src/test_utils/test-on-real-app.ts

@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { execAsync } from "./exec_async.js";
+import { spawn } from "child_process";
+import getPort from "get-port";
+import waitPort from "wait-port";
+import { promises as fs } from "fs";
+
+import _locreq from "locreq";
+import { module_dirname } from "../utils/module-dirname.js";
+import EventEmitter from "events";
+const locreq = _locreq(module_dirname(import.meta.url));
+
+export const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
+
+const sealious_minimal_commit = "b0d5bf5";
+
+export class RealAppTest {
+	public node_pid: number;
+	public app_port: number;
+	public mongo_port: number;
+	public app_path: string;
+	public container_name: string;
+	public emitter = new EventEmitter();
+
+	static async init(): Promise<RealAppTest> {
+		const test_app = new RealAppTest();
+		test_app.node_pid = 0;
+		const timestamp = Date.now();
+		test_app.app_path = `/tmp/sealious-minimal-${timestamp}`;
+		test_app.container_name = `sealgen-test-mongo-${timestamp}`;
+		console.log("\tcloning sealious-minimal...");
+		await execAsync(
+			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${test_app.app_path} && cd ${test_app.app_path} && git checkout ${sealious_minimal_commit}`
+		);
+		console.log("\tinstalling dependencies and sealgen...");
+		await execAsync(
+			`cd ${
+				test_app.app_path
+			} && npm ci rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen && ${callSealgenBin()} make-env`
+		);
+
+		console.log(
+			"\tstarting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
+		);
+		test_app.app_port = await getPort();
+		return test_app;
+	}
+
+	async start() {
+		this.mongo_port = await getPort();
+		await execAsync(
+			`docker run -p ${this.mongo_port}:27017 --name ${this.container_name} -d mongo:4.4-bionic`
+		);
+		const env = {
+			...process.env,
+			SEALIOUS_MONGO_PORT: this.mongo_port.toString(),
+			SEALIOUS_PORT: this.app_port.toString(),
+		};
+		const node_args = [`${this.app_path}/dist/back/index.js`];
+		console.log(
+			"EXECUTING APP",
+			`${Object.entries(env)
+				.map(([key, value]) => `${key}=${value}`)
+				.join(" ")} node ${node_args.join(" ")}`
+		);
+		const app_start = spawn(`node`, node_args, {
+			env,
+		});
+		app_start.stdout.on("data", (data) =>
+			console.log("APP OUTPUT:", data.toString())
+		);
+		app_start.stderr.on("data", (data) => console.log(data.toString()));
+		app_start.on("exit", (code) => {
+			this.emitter.emit("exit", code);
+			this.emitter.emit("process_error");
+		});
+		if (app_start.pid == undefined) throw new Error("node failed to start");
+		this.node_pid = app_start.pid;
+		await waitPort({
+			host: "localhost",
+			port: this.app_port,
+			output: "silent",
+			timeout: 6000,
+		});
+	}
+
+	async close() {
+		try {
+			if (this.node_pid != 0) await execAsync(`kill -9 ${this.node_pid}`);
+		} catch (error) {
+			throw new Error(
+				"node process exited unexpectedly, please inspect the output"
+			);
+		}
+		await Promise.all([
+			fs.rm(this.app_path, { recursive: true, force: true }),
+			execAsync(`docker rm -f ${this.container_name}`),
+		]);
+	}
+
+	async runSealgenCommand(command: string) {
+		await execAsync(
+			`cd ${
+				this.app_path
+			} && ${callSealgenBin()} ${command} && ${callSealgenBin()} build`
+		);
+	}
+
+	async throwIfItKillsTheApp<T>(cb: () => Promise<T>): Promise<T> {
+		let finished = false;
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises,  no-async-promise-executor
+		return new Promise(async (resolve, reject) => {
+			const error_handler = () => {
+				if (!finished) {
+					reject();
+				}
+				finished = true;
+			};
+			this.emitter.addListener("process_error", error_handler);
+			try {
+				const result = await cb();
+				if (!finished) {
+					resolve(result);
+					finished = true;
+				}
+			} catch (e) {
+				if (!finished) {
+					reject(e);
+					finished = true;
+				}
+			}
+			this.emitter.removeListener("process_error", error_handler);
+		});
+	}
+
+	async httpGet(path: string): Promise<{ status: number; response: string }> {
+		return this.throwIfItKillsTheApp(async () => {
+			const ret = await fetch(`http://localhost:${this.app_port}${path}`);
+			const status = ret.status;
+			const response = await ret.text();
+			return { status, response };
+		});
+	}
+
+	async httpPOST(
+		path: string,
+		body: Record<string, unknown>
+	): Promise<{ status: number; response: string }> {
+		return this.throwIfItKillsTheApp(async () => {
+			const ret = await fetch(
+				`http://localhost:${this.app_port}${path}`,
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(body),
+				}
+			);
+			const status = ret.status;
+			const response = await ret.text();
+
+			console.log("request done!");
+			console.log({ response });
+			return { status, response };
+		});
+	}
+}

package/src/utils/input-wrapper.ts

@@ -10,11 +10,14 @@ function getModifierClasses(modifiers: string[]) {
 }
 
 export function inputWrapper(
+	type: string,
 	modifiers: string[],
 	input: FlatTemplatable
 ): Readable {
 	return tempstream/* HTML */ `<div
-		class="form-input form-input__wrapper ${getModifierClasses(modifiers)}"
+		class="form-input form-input--type-${type} form-input__wrapper ${getModifierClasses(
+			modifiers
+		)}"
 	>
 		${input}
 	</div>`;