@sealcode/sealgen 0.11.7 → 0.12.0

package/dist/build.js

@@ -0,0 +1,149 @@
+import { build, context } from "esbuild";
+import { promises as fs } from "fs";
+import * as chokidar from "chokidar";
+import { default as glob } from "tiny-glob";
+import { generate_css_includes } from "./find-css-includes.js";
+import { sleep } from "./utils/sleep.js";
+import { generateCollections } from "./generate-collections.js";
+import { generateRoutes } from "./generate-routes.js";
+import { generateComponents } from "./generate-components.js";
+import { make_notifier } from "./notifier.js";
+import getPort from "get-port";
+import { remove_named_imports } from "../remove-named-imports.js";
+import _locreq from "locreq";
+const target_locreq = _locreq(process.cwd());
+async function get_notifier_port() {
+  return getPort({ port: 4e3 });
+}
+async function write_notifier_config(watch, port) {
+  const config = { watch };
+  if (port) {
+    config.port = port;
+  }
+  await fs.writeFile(
+    target_locreq.resolve("public/dist/notifier.json"),
+    JSON.stringify(config)
+  );
+}
+async function build_ts() {
+  await Promise.all([
+    generateCollections(),
+    generateRoutes(),
+    generateComponents()
+  ]);
+  const entryPoints = (await glob("./src/back/**/*.{ts,tsx}")).filter(
+    (path) => !path.includes(".#")
+  );
+  try {
+    await build({
+      entryPoints,
+      sourcemap: true,
+      bundle: false,
+      jsxFactory: "TempstreamJSX.createElement",
+      outdir: "./dist/back",
+      logLevel: "info",
+      platform: "node",
+      target: "es2022",
+      format: "esm",
+      plugins: [remove_named_imports]
+    });
+  } catch (e) {
+    console.error(e.message);
+  }
+}
+async function complex_build(watch) {
+  const loader = Object.fromEntries(
+    ["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"].map(
+      (ext) => ["." + ext, "file"]
+    )
+  );
+  let css_build = await context({
+    entryPoints: ["./src/main.css"],
+    sourcemap: true,
+    bundle: true,
+    outdir: "./public/dist",
+    logLevel: "info",
+    // plugins: [sassPlugin()],
+    loader
+  });
+  let ongoing_ts = false;
+  let ongoing_css = false;
+  let ongoing_ts_promise = null;
+  if (watch) {
+    const watcher = chokidar.watch("src", { ignoreInitial: true });
+    const port = await get_notifier_port();
+    const notifier = make_notifier(port);
+    await write_notifier_config(watch, port);
+    watcher.on("all", async (_, path) => {
+      if (!css_build)
+        return;
+      if (path.includes(".#"))
+        return;
+      if (path.endsWith(".css") && !path.endsWith("/includes.css")) {
+        if (ongoing_css) {
+          return;
+        }
+        ongoing_css = true;
+        await generate_css_includes();
+        try {
+          await css_build?.rebuild?.();
+          console.log(`Built main.css [on ${path}]`);
+        } catch (e) {
+          console.error(e.message);
+          await sleep(200);
+          css_build?.rebuild?.().catch((e2) => console.error(e2?.message));
+        }
+        if (ongoing_ts_promise) {
+          await ongoing_ts_promise;
+        }
+        notifier("css");
+        ongoing_css = false;
+      }
+      if ((path.endsWith(".ts") || path.endsWith(".tsx")) && !path.endsWith("src/back/collections/collections.ts") && !path.endsWith("src/back/routes/routes.ts") && !path.endsWith("src/back/routes/urls.ts")) {
+        if (ongoing_ts) {
+          return;
+        }
+        ongoing_ts = true;
+        ongoing_ts_promise = build_ts();
+        await ongoing_ts_promise;
+        notifier("ts");
+        ongoing_ts_promise = null;
+        console.log(`Finished TS build [on ${path}]`);
+        ongoing_ts = false;
+      }
+    });
+  } else {
+    await write_notifier_config(watch);
+  }
+  await generate_css_includes();
+  await Promise.all([css_build.rebuild(), build_ts()]);
+  if (watch) {
+    css_build?.rebuild?.();
+  } else {
+    css_build.dispose();
+  }
+}
+async function buildProject({
+  watch
+}) {
+  try {
+    await build({
+      entryPoints: ["./src/front/index.ts"],
+      sourcemap: true,
+      outfile: "./public/dist/bundle.js",
+      logLevel: "info",
+      bundle: true
+    });
+    await complex_build(watch);
+  } catch (e) {
+    console.log("CAUGHT!");
+    console.error(e.message);
+    if (!watch) {
+      process.exit(1);
+    }
+  }
+}
+export {
+  buildProject
+};
+//# sourceMappingURL=build.js.map

package/dist/cli.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import { addCollection } from "./add-collection.js";
+import { addJDDComponent } from "./add-jdd-component.js";
+import { addRoute } from "./add-route.js";
+import { buildProject } from "./build.js";
+import { generate_css_includes } from "./find-css-includes.js";
+import { generateCollections } from "./generate-collections.js";
+import { generateComponents } from "./generate-components.js";
+import { generateRoutes } from "./generate-routes.js";
+import { makeEnv } from "./make-env.js";
+import yargs from "yargs/yargs";
+const actions = {
+  "add-collection": addCollection,
+  "add-route": addRoute,
+  "generate-collections": generateCollections,
+  "generate-components": generateComponents,
+  "generate-routes": generateRoutes,
+  "generate-css-includes": generate_css_includes,
+  build: buildProject,
+  default: async function() {
+    console.log("Usage: `npx sealgen <action>`");
+    console.log(
+      `Available actions: ${Object.keys(actions).filter((e) => e != "default").join(", ")}`
+    );
+  },
+  "make-env": makeEnv,
+  "add-component": addJDDComponent
+};
+void async function() {
+  const action = process.argv.at(2);
+  const fn = actions[action || "default"] || actions.default;
+  const args = yargs(process.argv).argv;
+  await fn(args);
+}();
+//# sourceMappingURL=cli.js.map

package/dist/components/components.js

@@ -0,0 +1,3 @@
+export * from "./tabs.js";
+export * from "./toggle-modal.js";
+//# sourceMappingURL=components.js.map

package/dist/components/tabs.js

@@ -0,0 +1,101 @@
+import { tempstream } from "tempstream";
+function name_to_id(str) {
+  return str.replace(/\W/g, "-");
+}
+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;
+		}
+	}
+
+	.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-content {
+		padding-top: 30px;
+		clear: both;
+	}
+
+	@media screen and (max-width: ${hide_tabs_width}px) {
+		.tab-content {
+			display: block !important;
+		}
+	}
+</style>`
+);
+function tabs(tabs2, selected_tab_style = "font-weight: bold;", selected_index = 0, hide_tabs_width = 0) {
+  return (
+    /* HTML */
+    tempstream`${style(hide_tabs_width)}
+	${Object.keys(tabs2).map((tab_title, index) => {
+      const id = name_to_id(tab_title);
+      return (
+        /* HTML */
+        `<input
+					type="radio"
+					name="tabs"
+					id="${id}"
+					class="tab-radio--${id}"
+					style="display: none"
+					${selected_index == index ? "checked" : ""}
+				/>
+				<label class="tab-label tab-label--${id}" for="${id}">
+					${tab_title}
+				</label>`
+      );
+    }).join("\n")}
+	${Object.entries(tabs2).map(([title, content]) => {
+      const id = name_to_id(title);
+      return (
+        /* HTML */
+        tempstream`<div class="tab-label tab-label--mobile">
+					${title}
+				</div>
+				<div class="tab-content tab-content--${id}">${content}</div>
+				<style>
+					.tab-radio--${id} ~ .tab-content--${id} {
+						display:none;
+					}
+					.tab-radio--${id}:checked ~ .tab-content--${id} {
+						display:block;
+					}
+					.tab-radio--${id}:checked ~ label.tab-label--${id} {
+						${selected_tab_style}
+					}
+				</style>`
+      );
+    })}`
+  );
+}
+export {
+  tabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/toggle-modal.js

@@ -0,0 +1,49 @@
+import { tempstream } from "tempstream";
+import { makeSlug } from "../utils/utils.js";
+function toggleModal(options) {
+  const { contentWrapped, contentUnwrapped, name } = options;
+  const id = makeSlug(name);
+  return tempstream`<style>
+			.toggle-modal__wrapped {
+				display: none;
+			}
+
+			@media (max-width: 960px) {
+				.toggle-modal__wrapped {
+					display: block;
+				}
+				.toggle-modal__unwrapped {
+					display: none;
+				}
+
+				#${id} {
+					display: none;
+				}
+
+				#${id}:checked ~ .toggle-modal__wrapped {
+					display: none;
+				}
+
+				#${id}:checked ~ .toggle-modal__unwrapped {
+					display: block;
+					position: fixed;
+					height: 100vh;
+					width: 100vw;
+					top: 0;
+					left: 0;
+					background-color: white;
+					z-index: 99;
+					overflow-y: scroll;
+				}
+			}
+		</style>
+		<div class="toggle-modal toggle-modal--${id}">
+			<input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
+			<div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
+			<div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
+		</div>`;
+}
+export {
+  toggleModal
+};
+//# sourceMappingURL=toggle-modal.js.map

package/dist/example.test.js

@@ -0,0 +1,5 @@
+describe("empty test", () => {
+  it("empty test", () => {
+  });
+});
+//# sourceMappingURL=example.test.js.map

package/dist/find-css-includes.js

@@ -0,0 +1,27 @@
+import { promises as fs } from "fs";
+import _locreq from "locreq";
+import { relative } from "path";
+import { walkDir } from "./utils/walk.js";
+const target_locreq = _locreq(process.cwd());
+async function generate_css_includes() {
+  const files = await Promise.all(
+    (await walkDir(target_locreq.resolve("src/"))).filter(
+      (f) => f.endsWith(".css") && !f.endsWith("/main.css") && !f.endsWith("\\main.css") && !f.endsWith("/includes.css") && !f.endsWith("\\includes.css") && !f.includes(".#")
+    ).map(
+      (fullpath) => relative(target_locreq.resolve("src/"), fullpath)
+    )
+  );
+  await fs.writeFile(
+    target_locreq.resolve("src/includes.css"),
+    `/*  DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-css-includes */
+
+@import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
+${files.map((path) => `@import "${path.replaceAll("\\", "/")}";`).join("\n")}
+`
+  );
+  console.log("Successfuly generated new src/includes.css file");
+}
+export {
+  generate_css_includes
+};
+//# sourceMappingURL=find-css-includes.js.map

package/dist/forms/controls/array.js

@@ -0,0 +1,171 @@
+import { hasShape, predicates } from "@sealcode/ts-predicates";
+import qs from "qs";
+import { tempstream } from "tempstream";
+import { SimpleFormField } 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) {
+  return [controlClass, arbitrary_field_name, params];
+}
+class StructuredArray extends FormFieldControl {
+  constructor(field, item_controls) {
+    super([field]);
+    this.field = field;
+    this.item_controls = item_controls;
+  }
+  getFrameID() {
+    return `array-frame-${this.field.name}`;
+  }
+  getInnerFormID() {
+    return this.getFrameID() + "-form";
+  }
+  getActionURL(form_id, action) {
+    return `${this.getFrameID()}${form_id || action ? "?" : ""}${qs.stringify({ form_id, action })}`;
+  }
+  async getDefaultItemBody() {
+    return {};
+  }
+  makeSubfield(_field_name) {
+    const fields = this;
+    return new SimpleFormField(false);
+  }
+  async renderItemControl(ctx, form_id, control, item, index) {
+    const fctx = {
+      ctx,
+      data: {},
+      messages: [],
+      field_name_prefix: "",
+      form_id,
+      validate: false
+    };
+    if (Array.isArray(control)) {
+      const [constructor, field_name, params] = control;
+      const field = this.makeSubfield(field_name);
+      if (!field) {
+        console.warn(
+          `makeSubfield returned null for field ${field_name}`
+        );
+        return "";
+      }
+      await field.init(
+        `${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}"
+				/>`
+        ),
+        async () => ({
+          inner_form_id: this.getInnerFormID(),
+          field_name: field.name
+        })
+      );
+      return tempstream`${new constructor(field, params).render({
+        ...fctx,
+        data: { [field.name]: item[field_name] }
+      })}${hidden_shadow.render({
+        ...fctx,
+        data: { [field.name]: item[field_name] },
+        form_id: this.getInnerFormID()
+      })}`;
+    } else {
+      return control.render(fctx);
+    }
+  }
+  async renderItem(ctx, form_id, item, index) {
+    return tempstream`<div>
+			${this.item_controls.map(
+      (control) => this.renderItemControl(ctx, form_id, control, item, index)
+    )}
+			<input
+				type="submit"
+				value="remove"
+				form="${this.getInnerFormID()}"
+				formaction="${this.getActionURL(form_id, {
+      remove: index
+    })}"
+			/>
+		</div>`;
+  }
+  async getItems(ctx, raw_values) {
+    return (await this.field.getValue(ctx, raw_values)).parsed;
+  }
+  async _render(ctx, form_id, raw_values) {
+    const items = await this.getItems(ctx, raw_values);
+    return tempstream`<turbo-frame id="${this.getFrameID()}">
+			Reverse Single Reference
+			${items.map(
+      (item, index) => this.renderItem(ctx, form_id, item, index)
+    )}
+			<form id="${this.getInnerFormID()}" method="POST"></form>
+			<input
+				type="submit"
+				value="add"
+				form="${this.getInnerFormID()}"
+				formaction="${this.getActionURL(form_id, {
+      insert: { index: items.length, value: {} }
+    })}"
+			/>
+		</turbo-frame>`;
+  }
+  render(fctx) {
+    return this._render(fctx.ctx, fctx.form_id, fctx.data);
+  }
+  async getTargetItemID(ctx) {
+    return ctx.params.id;
+  }
+  mount(router) {
+    console.log("mounting!", this.getActionURL());
+    router.post(this.getActionURL(), async (ctx) => {
+      let form_id = ctx.query.form_id;
+      if (typeof form_id != "string") {
+        throw new Error("Missing form_id query param");
+      }
+      const item = await this.field.sealious_field.collection.getByID(
+        ctx.$context,
+        await this.getTargetItemID(ctx)
+      );
+      if (!hasShape({ action: predicates.object }, ctx.$body)) {
+        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(
+            this.field.sealious_field.value_predicate
+          )
+        },
+        field_data
+      )) {
+        throw new Error("missing data atribute in action description");
+      }
+      item.set(this.field.name, {
+        ...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,
+        await item.getDecodedBody(ctx.$context, {})
+      );
+    });
+  }
+}
+export {
+  StructuredArray,
+  UnboundControl
+};
+//# sourceMappingURL=array.js.map

package/dist/forms/controls/autocomplete.js

@@ -0,0 +1,34 @@
+import { SimpleInput } from "./simple-input.js";
+class Autocomplete extends SimpleInput {
+  constructor(field, options) {
+    super(field);
+    this.field = field;
+    this.options = options;
+  }
+  getListID() {
+    return this.getID() + "_list";
+  }
+  async getInputAttributes(fctx) {
+    return {
+      ...await super.getInputAttributes(fctx),
+      list: this.getListID()
+    };
+  }
+  async postInput(ctx) {
+    return (
+      /* HTML */
+      `<datalist id="${this.getListID()}">
+			${(await this.field.generateOptions(ctx)).map(
+        ({ value }) => (
+          /* HTML */
+          `<option>${value}</option>`
+        )
+      )}
+		</datalist>`
+    );
+  }
+}
+export {
+  Autocomplete
+};
+//# sourceMappingURL=autocomplete.js.map

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

@@ -0,0 +1,38 @@
+import { tempstream } from "tempstream";
+import { FormFieldControl } from "./form-field-control.js";
+class BigRadioGroup extends FormFieldControl {
+  constructor(field, options) {
+    super([field]);
+    this.field = field;
+    this.options = options;
+  }
+  async render(fctx) {
+    const { raw: current_value } = await this.field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    return tempstream`<div class="bigradios">
+			${Object.entries(this.options).map(([key, { description }]) => {
+      const id = `${this.field.name}-radio-${key}`;
+      return tempstream`<input
+						type="radio"
+						name="${this.field.name}"
+						value="${key}"
+						id="${id}"
+						style="display: none"
+						${fctx.form_id ? `form=${fctx.form_id}` : ""}
+						${this.field.required ? "required" : ""}
+						${key == current_value ? "checked" : ""}
+					/>
+					<div class="bigradio">
+						${typeof description == "function" ? description(fctx) : description}
+						<label class="bigradio__cta" for="${id}">Wybierz</label>
+					</div>`;
+    })}
+		</div>`;
+  }
+}
+export {
+  BigRadioGroup
+};
+//# sourceMappingURL=big-radio-group.js.map

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

@@ -0,0 +1,46 @@
+import { ProxyFormField } from "../fields/proxy-field.js";
+import { CheckboxWithValue } from "./checkbox.js";
+import { FieldGroup } from "./field-group.js";
+import { FormFieldControl } from "./form-field-control.js";
+class CheckboxGroup extends FormFieldControl {
+  constructor(field, options = {}) {
+    super([field]);
+    this.field = field;
+    this.options = options;
+  }
+  wrapGroup(fctx, checkboxes) {
+    return new FieldGroup(checkboxes, {
+      label: this.options.label,
+      classes: [
+        ...this.options.classes || [],
+        "field-group--checkboxes"
+      ]
+    }).render(fctx);
+  }
+  async render(fctx) {
+    const { parsed: values } = await this.field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    const checkboxes = this.field.options.map(
+      (option) => new CheckboxWithValue(
+        new ProxyFormField(
+          false,
+          this.field.name,
+          false,
+          values.includes(option)
+        ),
+        {
+          id: this.field.name + "__" + option,
+          label: (this.options.checkboxNameToLabel || ((s) => s))(option)
+        },
+        option
+      )
+    );
+    return this.wrapGroup(fctx, checkboxes);
+  }
+}
+export {
+  CheckboxGroup
+};
+//# sourceMappingURL=checkbox-group.js.map

package/dist/forms/controls/checkbox.js

@@ -0,0 +1,28 @@
+import { Tickable } from "./tickable.js";
+class Checkbox extends Tickable {
+  constructor() {
+    super(...arguments);
+    this.type = "checkbox";
+  }
+  isChecked(_ctx, _data, value) {
+    return value;
+  }
+  getValueAttribute() {
+    return "";
+  }
+}
+class CheckboxWithValue extends Checkbox {
+  constructor(field, options, value) {
+    super(field, options);
+    this.field = field;
+    this.value = value;
+  }
+  getValueAttribute() {
+    return this.value;
+  }
+}
+export {
+  Checkbox,
+  CheckboxWithValue
+};
+//# sourceMappingURL=checkbox.js.map