@sealcode/sealgen 0.18.2 → 0.18.5

package/lib/register-external.test.js

@@ -0,0 +1,340 @@
+import assert from "assert";
+import { promises as fs } from "fs";
+import path from "path";
+import { RealAppTest } from "./test_utils/test-on-real-app.js";
+async function ensureSealgenConfig(test_app) {
+  const packageJsonPath = path.join(test_app.app_path, "package.json");
+  let packageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+  let packageJson = JSON.parse(packageJsonContent);
+  if (!packageJson.sealgen) {
+    packageJson.sealgen = {};
+  }
+  await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+}
+async function createMockExternalModule(test_app, moduleName, subdirectory, files) {
+  const externalModulePath = path.join(test_app.app_path, "node_modules", moduleName);
+  const targetPath = path.join(externalModulePath, subdirectory);
+  await fs.mkdir(targetPath, { recursive: true });
+  for (const file of files) {
+    await fs.writeFile(path.join(targetPath, file.name), file.content);
+    if (file.name.endsWith(".ts") && file.name.includes("stimulus")) {
+      const jsName = file.name.replace(/\.ts$/, ".js");
+      const exportName = file.name.replace(/\.stimulus\.ts$/, "");
+      await fs.writeFile(
+        path.join(targetPath, jsName),
+        `export default { connect() { console.log('Dummy JS for ${exportName}'); } }`
+      );
+    }
+  }
+}
+describe("register-external CLI commands", () => {
+  describe("package.json configuration", () => {
+    it("registers external controllers and verifies package.json is updated", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const moduleName = "test-controller-module";
+      const subdirectory = "controllers";
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${moduleName} ${subdirectory}`
+      );
+      const packageJsonPath = path.join(test_app.app_path, "package.json");
+      const packageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+      const packageJson = JSON.parse(packageJsonContent);
+      assert(packageJson.sealgen, "sealgen configuration should exist");
+      assert(packageJson.sealgen.controllerDirs, "controllerDirs should exist");
+      assert(
+        Array.isArray(packageJson.sealgen.controllerDirs),
+        "controllerDirs should be an array"
+      );
+      const expectedPath = `node_modules/${moduleName}/${subdirectory}`;
+      assert(
+        packageJson.sealgen.controllerDirs.includes(expectedPath),
+        `controllerDirs should contain ${expectedPath}`
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+    it("registers external styles and verifies package.json is updated", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const moduleName = "test-style-module";
+      const subdirectory = "styles";
+      await test_app.runSealgenCommand(
+        `register-external-styles ${moduleName} ${subdirectory}`
+      );
+      const packageJsonPath = path.join(test_app.app_path, "package.json");
+      const packageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+      const packageJson = JSON.parse(packageJsonContent);
+      assert(packageJson.sealgen, "sealgen configuration should exist");
+      assert(packageJson.sealgen.styleDirs, "styleDirs should exist");
+      assert(Array.isArray(packageJson.sealgen.styleDirs), "styleDirs should be an array");
+      const expectedPath = `node_modules/${moduleName}/${subdirectory}`;
+      assert(
+        packageJson.sealgen.styleDirs.includes(expectedPath),
+        `styleDirs should contain ${expectedPath}`
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+    it("registers both controllers and styles in the same project", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const controllerModule = "test-controller-module";
+      const controllerSubdir = "controllers";
+      const styleModule = "test-style-module";
+      const styleSubdir = "styles";
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${controllerModule} ${controllerSubdir}`
+      );
+      await test_app.runSealgenCommand(
+        `register-external-styles ${styleModule} ${styleSubdir}`
+      );
+      const packageJsonPath = path.join(test_app.app_path, "package.json");
+      const packageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+      const packageJson = JSON.parse(packageJsonContent);
+      assert(packageJson.sealgen, "sealgen configuration should exist");
+      assert(packageJson.sealgen.controllerDirs, "controllerDirs should exist");
+      assert(packageJson.sealgen.styleDirs, "styleDirs should exist");
+      const expectedControllerPath = `node_modules/${controllerModule}/${controllerSubdir}`;
+      const expectedStylePath = `node_modules/${styleModule}/${styleSubdir}`;
+      assert(
+        packageJson.sealgen.controllerDirs.includes(expectedControllerPath),
+        `controllerDirs should contain ${expectedControllerPath}`
+      );
+      assert(
+        packageJson.sealgen.styleDirs.includes(expectedStylePath),
+        `styleDirs should contain ${expectedStylePath}`
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+    it("handles duplicate registrations gracefully", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const moduleName = "test-duplicate-module";
+      const subdirectory = "controllers";
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${moduleName} ${subdirectory}`
+      );
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${moduleName} ${subdirectory}`
+      );
+      const packageJsonPath = path.join(test_app.app_path, "package.json");
+      const packageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+      const packageJson = JSON.parse(packageJsonContent);
+      assert(packageJson.sealgen, "sealgen configuration should exist");
+      assert(packageJson.sealgen.controllerDirs, "controllerDirs should exist");
+      const expectedPath = `node_modules/${moduleName}/${subdirectory}`;
+      const controllerDirs = packageJson.sealgen.controllerDirs;
+      const occurrences = controllerDirs.filter((dir) => dir === expectedPath).length;
+      assert(
+        occurrences === 1,
+        `controllerDirs should contain ${expectedPath} exactly once, found ${occurrences} times`
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+    it("preserves existing sealgen configuration when adding new entries", async function() {
+      const test_app = await RealAppTest.init();
+      const packageJsonPath = path.join(test_app.app_path, "package.json");
+      const packageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+      const packageJson = JSON.parse(packageJsonContent);
+      packageJson.sealgen = {
+        controllerDirs: ["node_modules/existing-controller/controllers"],
+        styleDirs: ["node_modules/existing-style/styles"]
+      };
+      await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+      const newControllerModule = "new-controller-module";
+      const newStyleModule = "new-style-module";
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${newControllerModule} controllers`
+      );
+      await test_app.runSealgenCommand(`register-external-styles ${newStyleModule} styles`);
+      const updatedPackageJsonContent = await fs.readFile(packageJsonPath, "utf-8");
+      const updatedPackageJson = JSON.parse(updatedPackageJsonContent);
+      assert(updatedPackageJson.sealgen, "sealgen configuration should exist");
+      assert(updatedPackageJson.sealgen.controllerDirs, "controllerDirs should exist");
+      assert(updatedPackageJson.sealgen.styleDirs, "styleDirs should exist");
+      assert(
+        updatedPackageJson.sealgen.controllerDirs.includes(
+          "node_modules/existing-controller/controllers"
+        ),
+        "Existing controller directory should be preserved"
+      );
+      assert(
+        updatedPackageJson.sealgen.styleDirs.includes("node_modules/existing-style/styles"),
+        "Existing style directory should be preserved"
+      );
+      assert(
+        updatedPackageJson.sealgen.controllerDirs.includes(
+          `node_modules/${newControllerModule}/controllers`
+        ),
+        "New controller directory should be added"
+      );
+      assert(
+        updatedPackageJson.sealgen.styleDirs.includes(
+          `node_modules/${newStyleModule}/styles`
+        ),
+        "New style directory should be added"
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+  });
+  describe("build integration", () => {
+    it("registers external controllers and verifies they are included in build", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const externalModuleName = "test-external-controllers";
+      await createMockExternalModule(test_app, externalModuleName, "controllers", [
+        {
+          name: "test-external.stimulus.ts",
+          content: `
+import { Controller } from "stimulus";
+
+export default class TestExternalController extends Controller {
+	static targets = ["output"];
+	
+	connect() {
+		console.log("External controller connected!");
+	}
+}
+`
+        }
+      ]);
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${externalModuleName} controllers`
+      );
+      await test_app.runSealgenCommand("build");
+      const controllersFilePath = path.join(test_app.app_path, "src/front/controllers.ts");
+      const controllersContent = await fs.readFile(controllersFilePath, "utf-8");
+      assert(
+        controllersContent.includes(
+          `import { default as TestExternal } from "./../../node_modules/${externalModuleName}/controllers/test-external.stimulus.js"`
+        ),
+        "External controller should be imported in generated controllers file"
+      );
+      assert(
+        controllersContent.includes(`application.register("test-external", TestExternal);`),
+        "External controller should be registered in generated controllers file"
+      );
+      const bundlePath = path.join(test_app.app_path, "public/dist/bundle.js");
+      assert(
+        await fs.stat(bundlePath).then(() => true).catch(() => false),
+        "Bundle should be generated"
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+    it("registers external styles and verifies they are included in build", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const externalModuleName = "test-external-styles";
+      await createMockExternalModule(test_app, externalModuleName, "styles", [
+        {
+          name: "external.css",
+          content: `
+.external-style {
+	color: red;
+	background: blue;
+}
+`
+        }
+      ]);
+      await test_app.runSealgenCommand(
+        `register-external-styles ${externalModuleName} styles`
+      );
+      await test_app.runSealgenCommand("build");
+      const styleEntrypointPath = path.join(
+        test_app.app_path,
+        "src/style-entrypoints/default.entrypoint.css"
+      );
+      const styleEntrypointContent = await fs.readFile(styleEntrypointPath, "utf-8");
+      assert(
+        styleEntrypointContent.includes(
+          `@import "../../node_modules/${externalModuleName}/styles/external.css"`
+        ),
+        "External CSS should be imported in generated style entrypoint"
+      );
+      const cssOutputPath = path.join(
+        test_app.app_path,
+        "public/dist/default.entrypoint.css"
+      );
+      assert(
+        await fs.stat(cssOutputPath).then(() => true).catch(() => false),
+        "CSS should be generated"
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+    it("registers both external controllers and styles and verifies complete build integration", async function() {
+      const test_app = await RealAppTest.init();
+      await ensureSealgenConfig(test_app);
+      const controllerModuleName = "test-external-controllers";
+      const styleModuleName = "test-external-styles";
+      await createMockExternalModule(test_app, controllerModuleName, "controllers", [
+        {
+          name: "combined-test.stimulus.ts",
+          content: `
+import { Controller } from "stimulus";
+
+export default class CombinedTestController extends Controller {
+	static targets = ["output"];
+	
+	connect() {
+		console.log("Combined test controller connected!");
+	}
+}
+`
+        }
+      ]);
+      await createMockExternalModule(test_app, styleModuleName, "styles", [
+        {
+          name: "combined-external.css",
+          content: `
+.combined-external-style {
+	color: green;
+	background: yellow;
+}
+`
+        }
+      ]);
+      await test_app.runSealgenCommand(
+        `register-external-controllers ${controllerModuleName} controllers`
+      );
+      await test_app.runSealgenCommand(`register-external-styles ${styleModuleName} styles`);
+      await test_app.runSealgenCommand("build");
+      const controllersFilePath = path.join(test_app.app_path, "src/front/controllers.ts");
+      const controllersContent = await fs.readFile(controllersFilePath, "utf-8");
+      assert(
+        controllersContent.includes(
+          `import { default as CombinedTest } from "./../../node_modules/${controllerModuleName}/controllers/combined-test.stimulus.js"`
+        ),
+        "Combined test controller should be imported"
+      );
+      assert(
+        controllersContent.includes(`application.register("combined-test", CombinedTest);`),
+        "Combined test controller should be registered"
+      );
+      const styleEntrypointPath = path.join(
+        test_app.app_path,
+        "src/style-entrypoints/default.entrypoint.css"
+      );
+      const styleEntrypointContent = await fs.readFile(styleEntrypointPath, "utf-8");
+      assert(
+        styleEntrypointContent.includes(
+          `@import "../../node_modules/${styleModuleName}/styles/combined-external.css"`
+        ),
+        "Combined external CSS should be imported"
+      );
+      const bundlePath = path.join(test_app.app_path, "public/dist/bundle.js");
+      const cssOutputPath = path.join(
+        test_app.app_path,
+        "public/dist/default.entrypoint.css"
+      );
+      assert(
+        await fs.stat(bundlePath).then(() => true).catch(() => false),
+        "Bundle should be generated"
+      );
+      assert(
+        await fs.stat(cssOutputPath).then(() => true).catch(() => false),
+        "CSS should be generated"
+      );
+      await test_app.close();
+    }).timeout(100 * 1e3);
+  });
+});
+//# sourceMappingURL=register-external.test.js.map

package/lib/templates/shared/handlers/default.js

@@ -1,5 +1,5 @@
 import { toPascalCase } from "js-convert-case";
-const default_handler = async (collection_name, { name, is_readonly, is_required }, _, __, fields_var = `${toPascalCase(collection_name)}FormFields`) => {
+const default_handler = async (collection_name, { name, is_readonly, is_required }, _, __, ___, fields_var = `${toPascalCase(collection_name)}FormFields`) => {
   const required_s = `${toPascalCase(
     collection_name
   )}.fields.${name}.required`;

package/lib/templates/shared/shared-crud-form-fields.js

@@ -36,6 +36,7 @@ async function getFieldHandler(collection_name, field, importPath, fields_var) {
     field,
     importPath,
     {},
+    field_handlers,
     fields_var
   );
   const result = {
@@ -45,6 +46,7 @@ async function getFieldHandler(collection_name, field, importPath, fields_var) {
       field,
       importPath,
       defaults,
+      field_handlers,
       fields_var
     ) || {}
   };

package/lib/utils/extract-fields-from-collection.js

@@ -14,7 +14,7 @@ async function extract_fields_from_collection(collection_name) {
 const c = new the_app().collections["${collection_name}"];
 const fields = [];
 for (const field_name in c.fields){
-    const field = c.fields[field_name];
+    let field = c.fields[field_name];
     let type = field.typeName;
     let target = null;
     let referencing_collection = null;
@@ -23,7 +23,7 @@ for (const field_name in c.fields){
     let is_readonly = false;
     let is_required = field.required;
     let subfields = [];
-    if(["derived-value", "cached-value"].includes(type)){
+    if(["derived-value", "cached-value", "settable-by"].includes(type)){
 	    type = field.virtual_field.typeName;
     }
     if(["derived-value", "cached-value", "reverse-single-reference"].includes(field.typeName)){
@@ -36,7 +36,7 @@ for (const field_name in c.fields){
 		intermediary_field_that_points_there = field.intermediary_field_that_points_there
     }
     if( type == "structured-array" ) {
-         subfields = Object.keys(field.subfields).map(key=>({name: key}));
+         subfields = Object.keys(field.subfields || field.virtual_field.subfields).map(key=>({name: key}));
     }
     fields.push({ name: field_name, type, target, referencing_collection, referencing_field, intermediary_field_that_points_there, is_readonly, is_required, subfields })
 }

package/package.json

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

package/src/cli.ts

@@ -1,16 +1,21 @@
 #!/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 { buildProject } from "./build.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";
 import { getFonts } from "./get-fonts.js";
-import { addVerboseCRUD } from "./add-verbose-crud.js";
-import { addCRUD } from "./add-crud.js";
+import { makeEnv } from "./make-env.js";
+import { crudFieldSnippets } from "./crud-field-snippets.js";
+import {
+	registerExternalControllers,
+	registerExternalStyles,
+} from "./register-external.js";
 
 const actions: Record<
 	string,
@@ -35,6 +40,9 @@ const actions: Record<
 	"make-env": makeEnv,
 	"add-component": addJDDComponent,
 	"get-fonts": getFonts,
+	"crud-field-snippets": crudFieldSnippets,
+	"register-external-controllers": registerExternalControllers,
+	"register-external-styles": registerExternalStyles,
 };
 
 void (async function () {

package/src/crud-field-snippets.ts

@@ -0,0 +1,57 @@
+import _locreq from "locreq";
+import prompts from "prompts";
+import { getFieldHandler } from "./templates/shared/shared-crud-form-fields.js";
+import extract_fields_from_collection from "./utils/extract-fields-from-collection.js";
+import { listCollections } from "./utils/list-collections.js";
+import { formatWithPrettier } from "./utils/prettier.js";
+
+export async function crudFieldSnippets(
+	params: Partial<{ [key in "collection" | "url"]: string }>,
+	app_directory: string = process.cwd()
+) {
+	const target_locreq = _locreq(app_directory);
+	prompts.override(params);
+	const { collection_name } = (await prompts([
+		{
+			type: "autocomplete",
+			name: "collection_name",
+			message:
+				"Which sealious collection do you like to show a CRUD field config for?",
+			choices: (
+				await listCollections()
+			).map((collection) => ({
+				title: collection,
+				value: collection,
+			})),
+		},
+	])) as { collection_name: string };
+	const all_fields = await extract_fields_from_collection(collection_name);
+	const { field_name } = (await prompts([
+		{
+			type: "autocomplete",
+			name: "field_name",
+			message: `Which field do you want to show CRUD config for??`,
+			choices: all_fields.map((field) => ({
+				title: field.name,
+				value: field.name,
+			})),
+		},
+	])) as { field_name: string };
+
+	const handler = await getFieldHandler(
+		collection_name,
+		all_fields.find((e) => e.name == field_name)!,
+		(p) => p
+	);
+
+	console.log(`
+
+### Field in shared.ts
+
+${handler.field}
+
+### Control in shared.ts
+
+${await formatWithPrettier(handler.controls)}
+`);
+}

package/src/esbuild-plugins/rewrite-asset-imports.ts

@@ -1,7 +1,6 @@
 import { promises as fs } from "fs";
 import { extname, resolve } from "node:path";
 import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
-import { removeNamedImports } from "../../remove-named-imports.js";
 import { PluginBuild } from "esbuild";
 
 export const rewrite_asset_imports_plugin = (project_dir: string) => ({
@@ -34,7 +33,6 @@ export const rewrite_asset_imports_plugin = (project_dir: string) => ({
 				}
 			);
 
-			contents = removeNamedImports(contents) as string;
 			return {
 				contents,
 				loader: extname(args.path) === ".tsx" ? "tsx" : "ts",

package/src/find-css-includes.ts

@@ -1,6 +1,3 @@
-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());

package/src/page/list.ts

@@ -198,10 +198,18 @@ export abstract class ListPage<
 		}
 	}
 
-	makeSortLink(ctx: Context, field: string, order: "asc" | "desc"): string {
+	makeSortLink(
+		ctx: Context,
+		field: string,
+		order: "asc" | "desc" | null
+	): string {
 		const url = new URL(ctx.url, "https://example.com");
 		const params = qs.parse(url.search.slice(1));
-		params.sort = encodeSort(field, order);
+		if (order === null) {
+			delete params.sort;
+		} else {
+			params.sort = encodeSort(field, order);
+		}
 		url.search = qs.stringify(params);
 		return url.pathname + url.search;
 	}
@@ -234,7 +242,12 @@ export abstract class ListPage<
 		const current_sort = await this.getSort(ctx);
 		const current_order =
 			current_sort?.field == field ? current_sort.order : null;
-		const order = current_order == "desc" ? "asc" : "desc";
+		const order =
+			current_order === "asc" // cycles the sort order: null → "asc" → "desc" → null → ...
+				? "desc"
+				: current_order === null
+				? "asc"
+				: null;
 		return /* HTML */ `<th>
 			<a href="${this.makeSortLink(ctx, field, order)}"
 				>${label}

package/src/page/stateful-page.ts

@@ -67,7 +67,9 @@ export abstract class StatefulPage<
 		inputs: Record<string, string>
 	): Templatable | Promise<Templatable>;
 
-	async canAccess(): Promise<{ canAccess: boolean; message: string }> {
+	async canAccess(
+		_ctx: Context
+	): Promise<{ canAccess: boolean; message: string }> {
 		return <const>{ canAccess: true, message: "" };
 	}