@sealcode/sealgen 0.11.8 → 0.12.2

package/dist/forms/multiform.test.js

@@ -0,0 +1,486 @@
+import Router from "@koa/router";
+import Koa from "koa";
+import axios from "axios";
+import { expect } from "@playwright/test";
+import { tempstream } from "tempstream";
+import { mount } from "../mount.js";
+import { Multiform } from "./multiform.js";
+import { assertThrowsAsync } from "../utils/utils.js";
+import { form_factory } from "./form.test.js";
+import { getBrowser } from "../utils/browser-creator.js";
+import { SimpleFormField } from "./fields/simple-form-field.js";
+import { Form } from "./form.js";
+import { FormHeader } from "./controls/form-header.js";
+import { SimpleInput } from "./controls/simple-input.js";
+import { EmailField } from "./fields/email.js";
+const fields1 = {
+  email: new SimpleFormField(true)
+};
+const form1 = new class extends Form {
+  constructor() {
+    super(...arguments);
+    this.defaultSuccessMessage = "Form1 done!";
+    this.controls = [new FormHeader("form1"), new SimpleInput(fields1.email)];
+    this.fields = fields1;
+  }
+  onSubmit() {
+    return;
+  }
+}();
+const fields2 = {
+  name: new SimpleFormField(true)
+};
+const form2 = new class extends Form {
+  constructor() {
+    super(...arguments);
+    this.defaultSuccessMessage = "Form2 done!";
+    this.controls = [new FormHeader("form2"), new SimpleInput(fields2.name)];
+    this.fields = fields2;
+  }
+  onSubmit() {
+    return;
+  }
+}();
+function multiform_factory(canAccessFun1, canAccessFun2) {
+  return new class extends Multiform {
+    constructor() {
+      super(...arguments);
+      this.name = "multiform_test";
+      this.forms = {
+        form1: form_factory(canAccessFun1),
+        form2: form_factory(canAccessFun2)
+      };
+    }
+    async render(...args) {
+      return tempstream`<!DOCTYPE html>
+				<html>
+					<head>
+						<title>Multiform Test - Sealgen</title>
+						<script type="module">
+							import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+						</script>
+					</head>
+					<body>
+						${super.render(...args)}
+					</body>
+				</html>`;
+    }
+  }();
+}
+async function tests(js_enabled) {
+  let page;
+  beforeAll(async () => {
+    const browser = await getBrowser();
+    const context = await browser.newContext({
+      javaScriptEnabled: js_enabled
+    });
+    page = await context.newPage();
+    await page.goto("http://localhost:8080");
+    await page.getByLabel("email").click();
+    await page.getByLabel("email").fill("sample1");
+    await page.getByLabel("name").click();
+    await page.getByLabel("name").fill("sample2");
+    await page.locator("#multiform_test_form1_submit").click();
+  });
+  it("checking whether only one submit handler is run", async () => {
+    await page.getByText("Form1 done!").click();
+    await assertThrowsAsync(async () => {
+      return page.getByText("Form2 done!").click({ timeout: 500 });
+    });
+  });
+  it("checking whether the input in the not submitted form prevails", async () => {
+    await expect(page.getByLabel("name")).toHaveValue("sample2");
+  });
+}
+async function general_form_validation_e2e_tests(js_enabled) {
+  let browser;
+  let page;
+  browser = await getBrowser();
+  const context = await browser.newContext({
+    javaScriptEnabled: js_enabled
+  });
+  page = await context.newPage();
+  await page.goto("http://localhost:8080");
+  await page.getByPlaceholder("text").click();
+  await page.getByPlaceholder("text").fill("incorrect");
+  await page.getByPlaceholder("password").click();
+  await page.getByPlaceholder("password").fill("test");
+  await page.locator("#multiform_test_form2_submit").click();
+  await assertThrowsAsync(async () => {
+    await page.getByText("Incorrect input").click({ timeout: 500 });
+  });
+}
+async function individual_field_validation_e2e_tests(javaScriptEnabled) {
+  let browser;
+  let page;
+  beforeAll(async () => {
+    browser = await getBrowser();
+    const context = await browser.newContext({
+      javaScriptEnabled
+    });
+    page = await context.newPage();
+    await page.goto("http://localhost:8080");
+  });
+  it("validation message shows when incorrect input is given", async () => {
+    await page.getByPlaceholder("text").click();
+    await page.getByPlaceholder("text").fill("notanemail");
+    await page.locator("#multiform_test_form1_submit").click();
+    await page.getByText("Please enter a proper email address").click();
+  });
+  it("validation message doesn't show when correct input is given", async () => {
+    await page.getByPlaceholder("text").click();
+    await page.getByPlaceholder("text").fill("yes@an.email");
+    await page.locator("#multiform_test_form1_submit").click();
+    assertThrowsAsync(async () => {
+      return page.getByText("Please enter a proper email address").click({ timeout: 500 });
+    });
+  });
+}
+describe("multiform test", () => {
+  describe("basic tests", async () => {
+    let server;
+    beforeAll(async () => {
+      const app = new Koa();
+      const router = new Router();
+      mount(
+        router,
+        "/",
+        new class extends Multiform {
+          constructor() {
+            super(...arguments);
+            this.name = "multiform_test";
+            this.forms = { form1, form2 };
+          }
+          async render(ctx, messages, prerenderedForms, show_field_errors = true) {
+            return tempstream`<!DOCTYPE html>
+							<html>
+								<head>
+									<title>Multiform Test - Sealgen</title>
+									<script type="module">
+										import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+									</script>
+								</head>
+								<body>
+									${super.render(
+              ctx,
+              messages,
+              prerenderedForms,
+              show_field_errors
+            )}
+								</body>
+							</html>`;
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(8080);
+    });
+    afterAll(() => {
+      server.close();
+    });
+    describe("turbolinks + js enabled", async () => tests(true));
+    describe("turbolinks + js disabled", async () => tests(false));
+  });
+  describe("canAccess", async () => {
+    let page;
+    let server;
+    describe("allow access to both forms when both canAccess return true", async () => {
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          multiform_factory(
+            async (ctx) => {
+              return { canAccess: true, message: "" };
+            },
+            async (ctx) => {
+              return { canAccess: true, message: "" };
+            }
+          ),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+        const browser = await getBrowser();
+        const context = await browser.newContext();
+        page = await context.newPage();
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      it("check wether it renders", async () => {
+        const response = await page.goto("http://localhost:8080");
+        if (response?.status() != 200) {
+          throw new Error(
+            `Should return 200 status and it returns ${response?.status()}`
+          );
+        }
+        await page.locator("#form1").getByText("This is a test:").click();
+        await page.locator("#form2").getByText("This is a test:").click();
+      });
+      it("check wether you can submit through http (axios)", async () => {
+        await axios.post(
+          "http://localhost:8080/form2",
+          {
+            form2__text: "pass"
+          },
+          {
+            validateStatus: (status) => {
+              if (status == 422)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+    describe("deny access to both forms", async () => {
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          multiform_factory(
+            async (ctx) => {
+              return { canAccess: false, message: "" };
+            },
+            async (ctx) => {
+              return { canAccess: false, message: "" };
+            }
+          ),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+        const browser = await getBrowser();
+        const context = await browser.newContext();
+        page = await context.newPage();
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      it("check wether forms didnt render", async () => {
+        await page.goto("http://localhost:8080");
+        await assertThrowsAsync(async () => {
+          return page.locator("#form1").getByText("This is a test:").click({ timeout: 300 });
+        });
+      });
+      it("check wether it's possible to submit through http", async () => {
+        await axios.post(
+          "http://localhost:8080/form2",
+          {
+            form2__text: "pass"
+          },
+          {
+            validateStatus: (status) => {
+              if (status == 403)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+    describe("allow access to one form, deny to the other", async () => {
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          multiform_factory(
+            async (ctx) => {
+              return { canAccess: true, message: "" };
+            },
+            async (ctx) => {
+              return { canAccess: false, message: "" };
+            }
+          ),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+        const browser = await getBrowser();
+        const context = await browser.newContext({});
+        page = await context.newPage();
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      it("check wether form1 renders", async () => {
+        await page.goto("http://localhost:8080");
+        await page.locator("#form1").getByText("This is a test:").click({ timeout: 300 });
+      });
+      it("check wether it's possible to submit to form1 through http", async () => {
+        await axios.post(
+          "http://localhost:8080/form1",
+          {
+            form1__text: "pass"
+          },
+          {
+            validateStatus: (status) => {
+              if (status == 422)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+      it("check wether form2 does not render", async () => {
+        await page.goto("http://localhost:8080");
+        await assertThrowsAsync(async () => {
+          return page.locator("#form2").getByText("This is a test:").click({ timeout: 300 });
+        });
+      });
+      it("check wether it's possible to submit to form2 through http", async () => {
+        await axios.post(
+          "http://localhost:8080/form2",
+          {
+            form2__text: "pass"
+          },
+          {
+            validateStatus: (status) => {
+              if (status == 403)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+  });
+  describe("validation e2e", async () => {
+    describe("basic tests", async () => {
+      let server;
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          new class extends Multiform {
+            constructor() {
+              super(...arguments);
+              this.name = "multiform_test";
+              this.forms = {
+                form1: new class extends Form {
+                  constructor() {
+                    super(...arguments);
+                    this.fields = fields1;
+                    this.submitButtonText = "Submit";
+                    this.controls = [
+                      new SimpleInput(fields1.email, {
+                        label: "This is a test:",
+                        type: "text"
+                      })
+                    ];
+                  }
+                  async onSubmit() {
+                    return;
+                  }
+                  async validateValues(ctx, data) {
+                    if (data.email === "incorrect")
+                      return {
+                        valid: false,
+                        error: "Incorrect input"
+                      };
+                    return { valid: true, error: "" };
+                  }
+                }(),
+                form2: form_factory()
+              };
+            }
+            async render(...args) {
+              return tempstream`<!DOCTYPE html>
+								<html>
+									<head>
+										<title>Multiform Test - Sealgen</title>
+										<script type="module">
+											import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+										</script>
+									</head>
+									<body>
+										${super.render(...args)}
+									</body>
+								</html>`;
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      it("js enabled", async () => general_form_validation_e2e_tests(true));
+      it("js disabled", async () => general_form_validation_e2e_tests(false));
+    });
+    describe("field specific validation", async () => {
+      let server;
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        const fields = {
+          text: new EmailField(true)
+        };
+        mount(
+          router,
+          "/",
+          new class extends Multiform {
+            constructor() {
+              super(...arguments);
+              this.name = "multiform_test";
+              this.forms = {
+                form1: new class extends Form {
+                  constructor() {
+                    super(...arguments);
+                    this.fields = fields;
+                    this.submitButtonText = "Submit";
+                    this.controls = [
+                      new SimpleInput(fields.text, {
+                        label: "This is a test:",
+                        type: "text"
+                      })
+                    ];
+                  }
+                  async onSubmit() {
+                    return;
+                  }
+                }(),
+                form2: form_factory()
+              };
+            }
+            async render(...args) {
+              return tempstream`<!DOCTYPE html>
+								<html>
+									<head>
+										<title>Multiform Test - Sealgen</title>
+										<script type="module">
+											import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+										</script>
+									</head>
+									<body>
+										${super.render(...args)}
+									</body>
+								</html>`;
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      describe("js enabled", async () => individual_field_validation_e2e_tests(true));
+      describe("js disabled", async () => individual_field_validation_e2e_tests(false));
+    });
+  });
+});
+//# sourceMappingURL=multiform.test.js.map

package/dist/generate-collections.js

@@ -0,0 +1,65 @@
+import _locreq from "locreq";
+import * as prettier from "prettier";
+import { promises as fs } from "fs";
+import { assertType, predicates } from "@sealcode/ts-predicates";
+import { getPrettierConfig } from "./utils/prettier.js";
+const target_locreq = _locreq(process.cwd());
+async function extractCollectionClassname(full_file_path) {
+  const file_content = await fs.readFile(full_file_path, "utf-8");
+  const result = /export default class (\w+)/.exec(file_content);
+  if (result === null) {
+    throw new Error("Missing 'export default class' statement?");
+  }
+  return assertType(
+    result[1],
+    predicates.string,
+    `Missing export default class in '${full_file_path}'?`
+  );
+}
+async function generateCollections() {
+  const collections_dir = target_locreq.resolve("src/back/collections");
+  const files = (await fs.readdir(collections_dir)).filter(
+    (f) => !/\.(sub)?test\./.exec(f) && f != "collections.ts" && !f.includes(".#") && f.endsWith(".ts")
+  );
+  const file_data = await Promise.all(
+    files.map(async (file) => {
+      const full_path = target_locreq.resolve(
+        "src/back/collections/" + file
+      );
+      const class_name = await extractCollectionClassname(full_path);
+      return {
+        class_name,
+        file,
+        full_path,
+        urlname: file.replace(".ts", "")
+      };
+    })
+  );
+  const content = `// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-collections'
+import { App } from "sealious";
+
+${file_data.map(
+    ({ class_name, urlname }) => `import _${class_name} from "./${urlname}.js";`
+  ).join("\n")}
+	
+${file_data.map(
+    ({ class_name }) => `export const ${class_name} = new _${class_name}();`
+  ).join("\n")}
+
+export const collections = {
+	...App.BaseCollections,
+${file_data.map(({ class_name, urlname }) => `	"${urlname}": ${class_name},`).join("\n")}
+};`;
+  await fs.writeFile(
+    target_locreq.resolve("src/back/collections/collections.ts"),
+    prettier.format(content, await getPrettierConfig())
+  );
+  console.log(
+    "Successfuly generated new src/back/collections/collections.ts file"
+  );
+}
+export {
+  extractCollectionClassname,
+  generateCollections
+};
+//# sourceMappingURL=generate-collections.js.map

package/dist/generate-components.js

@@ -0,0 +1,41 @@
+import _locreq from "locreq";
+import * as prettier from "prettier";
+import { promises as fs } from "fs";
+import { getPrettierConfig } from "./utils/prettier.js";
+import recursive from "recursive-readdir";
+import path from "path";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+import { mkdir } from "fs/promises";
+const target_locreq = _locreq(process.cwd());
+async function generateComponents() {
+  const components_dir = target_locreq.resolve("src/back/jdd-components");
+  await mkdir(components_dir, { recursive: true });
+  const component_names = (await recursive(components_dir)).filter(
+    (c) => c.endsWith(".jdd.tsx")
+  );
+  const component_data = component_names.map(
+    (p) => "./" + path.relative(components_dir, p).replace(/\.[tj]sx?$/, ".js")
+  ).map((relative_path) => {
+    const name = relative_path.match(/\/([^\/]+).jdd/)?.[1];
+    return { name, relative_path };
+  });
+  const content = `// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-components'
+	import { Registry } from "@sealcode/jdd";
+
+	export const registry = new Registry();
+${component_data.map(
+    (c) => `
+	import { ${toPascalCase(c.name)} } from "${c.relative_path}";
+	registry.add("${toKebabCase(c.name)}", ${toPascalCase(c.name)});`
+  ).join("\n")}`;
+  const target = "src/back/jdd-components/components.ts";
+  await fs.writeFile(
+    target_locreq.resolve(target),
+    prettier.format(content, await getPrettierConfig())
+  );
+  console.log(`Successfuly generated new ${target} file`);
+}
+export {
+  generateComponents
+};
+//# sourceMappingURL=generate-components.js.map

package/dist/generate-routes.js

@@ -0,0 +1,90 @@
+import { promises as fs } from "fs";
+import * as prettier from "prettier";
+import { relative } from "path";
+import _locreq from "locreq";
+import { walkDir } from "./utils/walk.js";
+import { importPath } from "./utils/import-path.js";
+import { assertType, predicates } from "@sealcode/ts-predicates";
+import { unescape_url_params } from "./utils/escape-url-params.js";
+import { getPrettierConfig } from "./utils/prettier.js";
+import { Templates } from "./templates/templates.js";
+const target_locreq = _locreq(process.cwd());
+async function extractActionName(full_file_path) {
+  const file_content = await fs.readFile(full_file_path, "utf-8");
+  const result = /export const actionName = "(\w+)"/.exec(file_content);
+  if (result === null) {
+    throw new Error("Missing 'export const actionName' statement?");
+  }
+  return assertType(
+    result[1],
+    predicates.string,
+    "Missing export default class?"
+  );
+}
+function generateURL(actionName, url) {
+  const parts = url.split("/");
+  const params = parts.filter((part) => part.startsWith(":")).map((part) => part.slice(1));
+  if (params.length === 0) {
+    return `export const ${actionName}URL = "${url}";`;
+  }
+  return `export const ${actionName}URL = (${params.map((s) => s + ": string").join(", ")})=>\`${parts.map(
+    (part) => part.startsWith(":") ? "${" + part.slice(1) + "}" : part
+  ).join("/")}\`;
+        ${actionName}URL.params = [${params.map((param) => `"${param}"`).join(",")}];
+        ${actionName}URL.rawURL = "${url}";`;
+}
+async function generateRoutes() {
+  const files = await Promise.all(
+    (await walkDir(target_locreq.resolve("src/back/routes"))).filter(
+      (f) => Object.keys(Templates).some(
+        (key) => f.endsWith(`.${key}.ts`) || f.endsWith(`.${key}.tsx`)
+      )
+    ).map(async (fullpath) => ({
+      fullpath,
+      actionName: await extractActionName(fullpath),
+      url: unescape_url_params(
+        "/" + relative(
+          target_locreq.resolve("src/back/routes"),
+          fullpath
+        ).replace(/\..+/, "") + "/"
+        // trailing slash is important here, as it enables to use the entire path while building relative URLs. For example, while visiting /users/123, the path ./add-photo leads to /users/add-photo. While visiting /users/123/ (note the trailing slash), the path ./add-photo leads to /users/123/add-photo
+      )
+    }))
+  );
+  const routes_content = `// DO NOT EDIT! This file is generated automaticaly with npm run generate-routes
+
+import Router from "@koa/router";
+import { mount } from "@sealcode/sealgen";
+import * as URLs from "./urls.js"
+
+${files.map(
+    ({ actionName, fullpath }) => `import { default as ${actionName} } from "${importPath(
+      target_locreq.resolve("src/back/routes/routes.ts"),
+      fullpath
+    )}";`
+  ).join("\n")}
+
+export default function mountAutoRoutes(router: Router) {
+${files.map(
+    ({ actionName }) => `	mount(router, URLs.${actionName}URL, ${actionName});`
+  ).join("\n")}
+}`;
+  const urls_content = `${files.sort(({ url: url1 }, { url: url2 }) => url1 < url2 ? -1 : 1).map(({ actionName, url }) => generateURL(actionName, url)).join("\n")}
+`;
+  const prettier_config = await getPrettierConfig();
+  await fs.writeFile(
+    target_locreq.resolve("src/back/routes/routes.ts"),
+    prettier.format(routes_content, prettier_config)
+  );
+  await fs.writeFile(
+    target_locreq.resolve("src/back/routes/urls.ts"),
+    prettier.format(urls_content, prettier_config)
+  );
+  console.log(
+    "Successfuly generated new src/back/routes/routes.ts and src/back/routes/urls.ts"
+  );
+}
+export {
+  generateRoutes
+};
+//# sourceMappingURL=generate-routes.js.map

package/dist/hehe.test.js

@@ -0,0 +1,7 @@
+import { hehe } from "./sample-lib.js";
+describe("hehe", () => {
+  it("hehe", () => {
+    hehe.hehe;
+  });
+});
+//# sourceMappingURL=hehe.test.js.map