@sealcode/sealgen 0.12.12 → 0.13.0

package/@types/src/get-fonts.d.ts

@@ -0,0 +1,2 @@
+export declare const FONTS_CONFIG_PATH = "src/fonts.json";
+export declare function getFonts(_?: Record<string, string | boolean>): Promise<void>;

package/@types/src/page/stateful-page.d.ts

@@ -8,9 +8,21 @@ export type StatefulPageActionDescription<ActionName> = {
     action: ActionName;
     label?: string;
 } | ActionName;
-export declare abstract class StatefulPage<State extends Record<string, unknown>, Actions extends Record<string, (state: State, inputs: Record<string, string>, ...args: unknown[]) => State>> extends Mountable {
+export type StateAndMetadata<State, Actions> = {
+    state: State;
+    inputs: Record<string, string>;
+    action: keyof Actions;
+    action_args: string;
+} | {
+    state: State;
+    inputs: Record<string, string>;
+    action: null;
+    action_args: null;
+    $: Record<string, unknown>;
+};
+export declare abstract class StatefulPage<State extends Record<string, unknown>, Actions extends Record<string, (state: State, inputs: Record<string, string>, ...args: unknown[]) => State | Promise<State>>> extends Mountable {
     abstract actions: Actions;
-    abstract getInitialState(): State;
+    abstract getInitialState(): State | Promise<State>;
     abstract render(ctx: BaseContext, state: State, inputs: Record<string, string>): Templatable | Promise<Templatable>;
     canAccess(): Promise<{
         readonly canAccess: true;
@@ -24,22 +36,13 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
         label: string;
     };
     makeActionURL<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
-    makeActionButton<ActionName extends keyof Actions>(state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
+    makeActionButton<ActionName extends keyof Actions>(_state: State, action_description: StatefulPageActionDescription<ActionName>, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     makeActionCallback<ActionName extends keyof Actions>(action_description: {
         action: ActionName;
         label?: string;
     } | ActionName, ...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>): string;
     rerender(): string;
-    extractState(ctx: BaseContext): {
-        state: State;
-        inputs: Record<string, string>;
-        action: keyof Actions;
-        action_args: string;
-    } | {
-        state: State;
-        inputs: Record<string, string>;
-        action: null;
-        action_args: null;
-    };
+    preprocessRequestBody(values: Record<string, unknown>): Promise<StateAndMetadata<State, Actions>>;
+    extractState(ctx: BaseContext): Promise<StateAndMetadata<State, Actions>>;
     mount(router: Router, path: string): void;
 }

package/@types/src/target-locreq.d.ts

@@ -0,0 +1,4 @@
+export declare const target_locreq: {
+    (module_path: string): unknown;
+    resolve: (module_path: string) => string;
+};

package/dist/build.js

@@ -14,6 +14,7 @@ import md5 from "md5";
 import _locreq from "locreq";
 import path, { basename, extname } from "path";
 import { copyFile } from "fs/promises";
+import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
 const target_locreq = _locreq(process.cwd());
 async function get_notifier_port() {
   return getPort({ port: 4e3 });
@@ -113,7 +114,6 @@ async function build_ts() {
                 )
               },
               async (args) => {
-                const mode = "url";
                 let contents = `export const url =  "${await makeResourceURL(
                   args.path
                 )}";
@@ -167,6 +167,7 @@ async function complex_build(watch) {
     // plugins: [sassPlugin()],
     loader
   });
+  let ongoing_fonts = false;
   let ongoing_ts = false;
   let ongoing_css = false;
   let ongoing_ts_promise = null;
@@ -180,6 +181,14 @@ async function complex_build(watch) {
         return;
       if (path2.includes(".#"))
         return;
+      if (path2 == FONTS_CONFIG_PATH) {
+        if (!ongoing_fonts) {
+          ongoing_fonts = true;
+          await getFonts();
+          ongoing_fonts = false;
+        }
+        return;
+      }
       if (path2.endsWith(".css") && !path2.endsWith("/includes.css")) {
         if (ongoing_css) {
           return;

package/dist/cli.js

@@ -9,6 +9,7 @@ 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";
 const actions = {
   "add-collection": addCollection,
   "add-route": addRoute,
@@ -24,7 +25,8 @@ const actions = {
     );
   },
   "make-env": makeEnv,
-  "add-component": addJDDComponent
+  "add-component": addJDDComponent,
+  "get-fonts": getFonts
 };
 void async function() {
   const action = process.argv.at(2);

package/dist/get-fonts.js

@@ -0,0 +1,27 @@
+import { readFile } from "fs/promises";
+import { constructURL, download } from "google-fonts-helper";
+import { target_locreq } from "./target-locreq.js";
+const FONTS_CONFIG_PATH = "src/fonts.json";
+async function getFonts(_ = {}) {
+  const fonts_config_path = target_locreq.resolve(FONTS_CONFIG_PATH);
+  const fonts_config = JSON.parse(await readFile(fonts_config_path, "utf8"));
+  const fonts_url = constructURL(fonts_config.googleFonts);
+  if (!fonts_url) {
+    throw new Error("Invalid font config");
+  }
+  const downloader = download(fonts_url, {
+    base64: false,
+    overwriting: false,
+    outputDir: target_locreq.resolve("public/dist/fonts"),
+    stylePath: "fonts.css",
+    fontsDir: "./",
+    fontsPath: "/dist/fonts"
+  });
+  await downloader.execute();
+  console.log("Downloaded new fonts pack");
+}
+export {
+  FONTS_CONFIG_PATH,
+  getFonts
+};
+//# sourceMappingURL=get-fonts.js.map

package/dist/page/stateful-page.js

@@ -1,4 +1,4 @@
-import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import { predicates, hasShape, is, hasField } from "@sealcode/ts-predicates";
 import deepmerge from "deepmerge";
 import { tempstream } from "tempstream";
 import { from_base64, to_base64 } from "../utils/base64.js";
@@ -43,16 +43,18 @@ class StatefulPage extends Mountable {
   }
   makeActionURL(action_description, ...args) {
     const { action } = this.extractActionAndLabel(action_description);
-    return `./?action=${action}&args=${to_base64(JSON.stringify(args))}`;
+    return `./?action=${action}&action_args=${to_base64(
+      JSON.stringify(args)
+    )}`;
   }
-  makeActionButton(state, action_description, ...args) {
+  makeActionButton(_state, action_description, ...args) {
     const { label } = this.extractActionAndLabel(action_description);
     return (
       /* HTML */
       `
 			<input
 				type="submit"
-				value=${label}
+				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
 			/>
 		`
@@ -67,12 +69,15 @@ class StatefulPage extends Mountable {
   rerender() {
     return "this.closest('form').requestSubmit()";
   }
-  extractState(ctx) {
+  async preprocessRequestBody(values) {
+    return values;
+  }
+  async extractState(ctx) {
     if (!hasShape(
       {
         action: predicates.maybe(predicates.string),
         state: predicates.string,
-        args: predicates.maybe(predicates.string),
+        action_args: predicates.maybe(predicates.string),
         $: predicates.maybe(predicates.object)
       },
       ctx.$body
@@ -80,43 +85,52 @@ class StatefulPage extends Mountable {
       console.error("Wrong data: ", ctx.$body);
       throw new Error("wrong formdata shape");
     }
+    const prepared_body = await this.preprocessRequestBody(ctx.$body);
     const inputs = Object.fromEntries(
-      Object.entries(ctx.$body).filter(
+      Object.entries(prepared_body).filter(
         ([key]) => !["action", "state", "args", "$"].includes(key)
       )
     );
-    const original_state = JSON.parse(from_base64(ctx.$body.state));
-    const modified_state = deepmerge(original_state, ctx.$body.$ || {}, {
-      arrayMerge: (_target, source, _options) => {
-        return source;
+    const original_state_string = prepared_body.state;
+    const original_state = JSON.parse(
+      typeof original_state_string == "string" ? from_base64(original_state_string) : "{}"
+    );
+    const modified_state = deepmerge(
+      original_state,
+      hasField("$", prepared_body) ? prepared_body.$ : {},
+      {
+        arrayMerge: (_target, source, _options) => {
+          return source;
+        }
       }
-    });
-    if (ctx.$body.action && ctx.$body.args) {
+    );
+    if (prepared_body.action && prepared_body.action_args) {
       return {
         state: modified_state,
-        action: ctx.$body.action,
+        action: prepared_body.action,
         inputs,
-        action_args: ctx.$body.args
+        action_args: prepared_body.action_args
       };
     } else {
       return {
         state: modified_state,
         action: null,
+        inputs,
         action_args: null,
-        inputs
+        $: hasField("$", prepared_body) ? prepared_body.$ : {}
       };
     }
   }
   mount(router, path) {
-    router.get(path, (ctx) => {
-      ctx.body = this.render(ctx, this.getInitialState(), {});
+    router.get(path, async (ctx) => {
+      ctx.body = this.render(ctx, await this.getInitialState(), {});
     });
-    router.post(path, (ctx) => {
-      const { action, state, inputs, action_args } = this.extractState(ctx);
+    router.post(path, async (ctx) => {
+      const { action, state, inputs, action_args } = await this.extractState(ctx);
       if (action) {
         ctx.body = this.render(
           ctx,
-          this.actions[action](
+          await this.actions[action](
             state,
             inputs,
             ...JSON.parse(

package/dist/target-locreq.js

@@ -0,0 +1,6 @@
+import _locreq from "locreq";
+const target_locreq = _locreq(process.cwd());
+export {
+  target_locreq
+};
+//# sourceMappingURL=target-locreq.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.12.12",
+	"version": "0.13.0",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",
@@ -55,6 +55,7 @@
 		"@sealcode/ts-predicates": "^0.4.3",
 		"deepmerge": "^4.3.1",
 		"esbuild": "^0.20.0",
+		"google-fonts-helper": "^3.4.1",
 		"js-convert-case": "^4.2.0",
 		"locreq": "^3.0.0",
 		"md5": "^2.3.0",

package/src/build.ts

@@ -1,4 +1,4 @@
-import { build, BuildContext, BuildResult, context } from "esbuild";
+import { build, BuildContext, context } from "esbuild";
 import { promises as fs } from "fs";
 import * as chokidar from "chokidar";
 import { default as glob } from "tiny-glob";
@@ -14,7 +14,8 @@ import md5 from "md5";
 
 import _locreq from "locreq";
 import path, { basename, extname } from "path";
-import { copyFile, writeFile } from "fs/promises";
+import { copyFile } from "fs/promises";
+import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
 const target_locreq = _locreq(process.cwd());
 
 async function get_notifier_port() {
@@ -127,7 +128,6 @@ async function build_ts() {
 								),
 							},
 							async (args: any) => {
-								const mode = "url";
 								let contents = `export const url =  "${await makeResourceURL(
 									args.path
 								)}";
@@ -183,6 +183,7 @@ async function complex_build(watch: boolean): Promise<void> {
 		// plugins: [sassPlugin()],
 		loader,
 	});
+	let ongoing_fonts = false;
 	let ongoing_ts = false;
 	let ongoing_css = false;
 	let ongoing_ts_promise: Promise<any> | null = null;
@@ -194,6 +195,14 @@ async function complex_build(watch: boolean): Promise<void> {
 		watcher.on("all", async (_, path) => {
 			if (!css_build) return;
 			if (path.includes(".#")) return;
+			if (path == FONTS_CONFIG_PATH) {
+				if (!ongoing_fonts) {
+					ongoing_fonts = true;
+					await getFonts();
+					ongoing_fonts = false;
+				}
+				return;
+			}
 			if (path.endsWith(".css") && !path.endsWith("/includes.css")) {
 				if (ongoing_css) {
 					return;

package/src/cli.ts

@@ -9,6 +9,7 @@ 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";
 
 const actions: Record<
 	string,
@@ -31,6 +32,7 @@ const actions: Record<
 	},
 	"make-env": makeEnv,
 	"add-component": addJDDComponent,
+    	"get-fonts": getFonts,
 };
 
 void (async function () {

package/src/get-fonts.ts

@@ -0,0 +1,25 @@
+import { readFile } from "fs/promises";
+import { constructURL, download } from "google-fonts-helper";
+import { target_locreq } from "./target-locreq.js";
+
+export const FONTS_CONFIG_PATH = "src/fonts.json";
+
+export async function getFonts(_: Record<string, string | boolean> = {}) {
+	const fonts_config_path = target_locreq.resolve(FONTS_CONFIG_PATH);
+
+	const fonts_config = JSON.parse(await readFile(fonts_config_path, "utf8"));
+	const fonts_url = constructURL(fonts_config.googleFonts);
+	if (!fonts_url) {
+		throw new Error("Invalid font config");
+	}
+	const downloader = download(fonts_url, {
+		base64: false,
+		overwriting: false,
+		outputDir: target_locreq.resolve("public/dist/fonts"),
+		stylePath: "fonts.css",
+		fontsDir: "./",
+		fontsPath: "/dist/fonts",
+	});
+	await downloader.execute();
+	console.log("Downloaded new fonts pack");
+}

package/src/page/stateful-page.ts

@@ -1,5 +1,5 @@
 import Router from "@koa/router";
-import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import { predicates, hasShape, is, hasField } from "@sealcode/ts-predicates";
 import deepmerge, { ArrayMergeOptions } from "deepmerge";
 import { BaseContext } from "koa";
 import { Templatable, tempstream } from "tempstream";
@@ -14,6 +14,21 @@ export type StatefulPageActionDescription<ActionName> =
 	  }
 	| ActionName;
 
+export type StateAndMetadata<State, Actions> =
+	| {
+			state: State;
+			inputs: Record<string, string>;
+			action: keyof Actions;
+			action_args: string;
+	  }
+	| {
+			state: State;
+			inputs: Record<string, string>;
+			action: null;
+			action_args: null;
+			$: Record<string, unknown>;
+	  };
+
 export abstract class StatefulPage<
 	State extends Record<string, unknown>,
 	Actions extends Record<
@@ -22,11 +37,11 @@ export abstract class StatefulPage<
 			state: State,
 			inputs: Record<string, string>,
 			...args: unknown[]
-		) => State
+		) => State | Promise<State>
 	>
 > extends Mountable {
 	abstract actions: Actions;
-	abstract getInitialState(): State;
+	abstract getInitialState(): State | Promise<State>;
 	abstract render(
 		ctx: BaseContext,
 		state: State,
@@ -87,11 +102,13 @@ export abstract class StatefulPage<
 		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
 	) {
 		const { action } = this.extractActionAndLabel(action_description);
-		return `./?action=${action}&args=${to_base64(JSON.stringify(args))}`;
+		return `./?action=${action}&action_args=${to_base64(
+			JSON.stringify(args)
+		)}`;
 	}
 
 	makeActionButton<ActionName extends keyof Actions>(
-		state: State,
+		_state: State,
 		action_description: StatefulPageActionDescription<ActionName>,
 		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
 	) {
@@ -99,7 +116,7 @@ export abstract class StatefulPage<
 		return /* HTML */ `
 			<input
 				type="submit"
-				value=${label}
+				value="${label}"
 				formaction="${this.makeActionURL(action_description, ...args)}"
 			/>
 		`;
@@ -124,25 +141,21 @@ export abstract class StatefulPage<
 		return "this.closest('form').requestSubmit()";
 	}
 
-	extractState(ctx: BaseContext):
-		| {
-				state: State;
-				inputs: Record<string, string>;
-				action: keyof Actions;
-				action_args: string;
-		  }
-		| {
-				state: State;
-				inputs: Record<string, string>;
-				action: null;
-				action_args: null;
-		  } {
+	async preprocessRequestBody(
+		values: Record<string, unknown>
+	): Promise<StateAndMetadata<State, Actions>> {
+		return values as StateAndMetadata<State, Actions>;
+	}
+
+	async extractState(
+		ctx: BaseContext
+	): Promise<StateAndMetadata<State, Actions>> {
 		if (
 			!hasShape(
 				{
 					action: predicates.maybe(predicates.string),
 					state: predicates.string,
-					args: predicates.maybe(predicates.string),
+					action_args: predicates.maybe(predicates.string),
 					$: predicates.maybe(predicates.object),
 				},
 				ctx.$body
@@ -151,55 +164,67 @@ export abstract class StatefulPage<
 			console.error("Wrong data: ", ctx.$body);
 			throw new Error("wrong formdata shape");
 		}
+		// giving extending classes a change to modify body before furhter processing
+		const prepared_body = await this.preprocessRequestBody(ctx.$body);
 		const inputs = Object.fromEntries(
-			Object.entries(ctx.$body).filter(
+			Object.entries(prepared_body).filter(
 				([key]) => !["action", "state", "args", "$"].includes(key)
 			)
 		) as Record<string, string>;
 		// the "$" key is parsed as dot notation and overrides the state
 
-		const original_state = JSON.parse(from_base64(ctx.$body.state));
-
-		const modified_state = deepmerge(original_state, ctx.$body.$ || {}, {
-			arrayMerge: (
-				_target: any[],
-				source: any[],
-				_options: ArrayMergeOptions
-			) => {
-				// https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
-				return source;
-			},
-		}) as State;
+		const original_state_string = prepared_body.state;
+		const original_state = JSON.parse(
+			typeof original_state_string == "string"
+				? from_base64(original_state_string)
+				: "{}"
+		);
+
+		const modified_state = deepmerge(
+			original_state,
+			hasField("$", prepared_body) ? prepared_body.$ : {},
+			{
+				arrayMerge: (
+					_target: any[],
+					source: any[],
+					_options: ArrayMergeOptions
+				) => {
+					// https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
+					return source;
+				},
+			}
+		) as State;
 
-		if (ctx.$body.action && ctx.$body.args) {
+		if (prepared_body.action && prepared_body.action_args) {
 			return {
 				state: modified_state,
-				action: ctx.$body.action as string,
+				action: prepared_body.action as string,
 				inputs,
-				action_args: ctx.$body.args,
+				action_args: prepared_body.action_args,
 			};
 		} else {
 			return {
 				state: modified_state,
 				action: null,
-				action_args: null,
 				inputs,
+				action_args: null,
+				$: hasField("$", prepared_body) ? prepared_body.$ : {},
 			};
 		}
 	}
 
 	mount(router: Router, path: string) {
-		router.get(path, (ctx) => {
-			ctx.body = this.render(ctx, this.getInitialState(), {});
+		router.get(path, async (ctx) => {
+			ctx.body = this.render(ctx, await this.getInitialState(), {});
 		});
 
-		router.post(path, (ctx) => {
+		router.post(path, async (ctx) => {
 			const { action, state, inputs, action_args } =
-				this.extractState(ctx);
+				await this.extractState(ctx);
 			if (action) {
 				ctx.body = this.render(
 					ctx,
-					this.actions[action](
+					await this.actions[action](
 						state,
 						inputs,
 						...(JSON.parse(

package/src/target-locreq.ts

@@ -0,0 +1,2 @@
+import _locreq from "locreq";
+export const target_locreq = _locreq(process.cwd());