@sealcode/sealgen 0.11.4 → 0.11.5

package/@types/find-css-includes.d.ts

@@ -0,0 +1 @@
+export declare function generate_css_includes(): Promise<void>;

package/lib/add-jdd-component.js

@@ -22,7 +22,7 @@ async function addJDDComponent() {
     }
     await fs_1.promises.mkdir((0, path_1.resolve)(file_path, "../"), { recursive: true });
     await fs_1.promises.writeFile(file_path, (0, jdd_component_1.jddComponentTemplate)(component_name));
-    const css_file_path = target_locreq.resolve(`src/back/jdd-components/${(0, js_convert_case_1.toKebabCase)(component_name)}/${(0, js_convert_case_1.toKebabCase)(component_name)}.scss`);
+    const css_file_path = target_locreq.resolve(`src/back/jdd-components/${(0, js_convert_case_1.toKebabCase)(component_name)}/${(0, js_convert_case_1.toKebabCase)(component_name)}.css`);
     await fs_1.promises.writeFile(css_file_path, `.${(0, js_convert_case_1.toKebabCase)(component_name)} {
 }`);
     // eslint-disable-next-line no-console

package/lib/build.js

@@ -30,10 +30,9 @@ exports.buildProject = void 0;
 const esbuild_1 = require("esbuild");
 const fs_1 = require("fs");
 const path_1 = require("path");
-const esbuild_sass_plugin_1 = require("esbuild-sass-plugin");
 const chokidar = __importStar(require("chokidar"));
 const tiny_glob_1 = __importDefault(require("tiny-glob"));
-const find_scss_includes_1 = require("./find-scss-includes");
+const find_css_includes_1 = require("./find-css-includes");
 const sleep_1 = require("./utils/sleep");
 const generate_collections_1 = require("./generate-collections");
 const generate_routes_1 = require("./generate-routes");
@@ -110,37 +109,47 @@ async function build_ts() {
     }
 }
 async function complex_build(watch) {
-    let scss_build = null;
+    const loader = Object.fromEntries(["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"].map((ext) => ["." + ext, "file"]));
+    console.log({ loader });
+    let css_build = await (0, esbuild_1.context)({
+        entryPoints: ["./src/main.css"],
+        sourcemap: true,
+        bundle: true,
+        outdir: "./public/dist",
+        logLevel: "info",
+        // plugins: [sassPlugin()],
+        loader,
+    });
     let ongoing_ts = false;
-    let ongoing_scss = false;
+    let ongoing_css = false;
     if (watch) {
         const watcher = chokidar.watch("src", { ignoreInitial: true });
         watcher.on("all", async (_, path) => {
-            if (!scss_build)
+            if (!css_build)
                 return;
             if (path.includes(".#"))
                 return;
-            if (path.endsWith(".scss") && !path.endsWith("/includes.scss")) {
-                if (ongoing_scss) {
+            if (path.endsWith(".css") && !path.endsWith("/includes.css")) {
+                if (ongoing_css) {
                     return;
                 }
-                ongoing_scss = true;
-                // refresh the list of all scss files in includes.scss
-                await (0, find_scss_includes_1.generateScssIncludes)();
+                ongoing_css = true;
+                // refresh the list of all css files in includes.css
+                await (0, find_css_includes_1.generate_css_includes)();
                 try {
-                    await scss_build?.rebuild?.();
-                    console.log(`Built main.scss [on ${path}]`);
+                    await css_build?.rebuild?.();
+                    console.log(`Built main.css [on ${path}]`);
                 }
                 catch (e) {
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                     console.error(e.message);
                     await (0, sleep_1.sleep)(200);
-                    scss_build
+                    css_build
                         ?.rebuild?.()
                         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                         .catch((e) => console.error(e?.message));
                 }
-                ongoing_scss = false;
+                ongoing_css = false;
             }
             if ((path.endsWith(".ts") || path.endsWith(".tsx")) &&
                 !path.endsWith("src/back/collections/collections.ts") &&
@@ -156,17 +165,9 @@ async function complex_build(watch) {
             }
         });
     }
-    await (0, find_scss_includes_1.generateScssIncludes)();
-    scss_build = await (0, esbuild_1.build)({
-        entryPoints: ["./src/main.scss"],
-        sourcemap: true,
-        outfile: "./public/dist/style.css",
-        logLevel: "info",
-        incremental: watch,
-        plugins: [(0, esbuild_sass_plugin_1.sassPlugin)()],
-    });
-    await build_ts();
-    watch && scss_build?.rebuild?.();
+    await (0, find_css_includes_1.generate_css_includes)();
+    await Promise.all([css_build.rebuild(), build_ts()]);
+    watch && css_build?.rebuild?.();
 }
 async function buildProject({ watch, }) {
     try {
@@ -176,7 +177,6 @@ async function buildProject({ watch, }) {
             outfile: "./public/dist/bundle.js",
             logLevel: "info",
             bundle: true,
-            watch,
         });
         await complex_build(watch);
     }

package/lib/cli.js

@@ -5,7 +5,7 @@ const add_collection_1 = require("./add-collection");
 const add_jdd_component_1 = require("./add-jdd-component");
 const add_route_1 = require("./add-route");
 const build_1 = require("./build");
-const find_scss_includes_1 = require("./find-scss-includes");
+const find_css_includes_1 = require("./find-css-includes");
 const generate_collections_1 = require("./generate-collections");
 const generate_components_1 = require("./generate-components");
 const generate_routes_1 = require("./generate-routes");
@@ -16,7 +16,7 @@ const actions = {
     "generate-collections": generate_collections_1.generateCollections,
     "generate-components": generate_components_1.generateComponents,
     "generate-routes": generate_routes_1.generateRoutes,
-    "generate-scss-includes": find_scss_includes_1.generateScssIncludes,
+    "generate-css-includes": find_css_includes_1.generate_css_includes,
     build: build_1.buildProject,
     default: async function () {
         console.log("Usage: `sealscript <action>`");

package/lib/find-css-includes.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generate_css_includes = void 0;
+const fs_1 = require("fs");
+const locreq_1 = __importDefault(require("locreq"));
+const path_1 = require("path");
+const walk_1 = require("./utils/walk");
+const target_locreq = (0, locreq_1.default)(process.cwd());
+async function generate_css_includes() {
+    const files = await Promise.all((await (0, walk_1.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) => (0, path_1.relative)(target_locreq.resolve("src/"), fullpath)));
+    await fs_1.promises.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")}
+`);
+    // eslint-disable-next-line no-console
+    console.log("Successfuly generated new src/includes.css file");
+}
+exports.generate_css_includes = generate_css_includes;
+//# sourceMappingURL=find-css-includes.js.map

package/lib/find-scss-includes.js

@@ -11,20 +11,20 @@ const walk_1 = require("./utils/walk");
 const target_locreq = (0, locreq_1.default)(process.cwd());
 async function generateScssIncludes() {
     const files = await Promise.all((await (0, walk_1.walkDir)(target_locreq.resolve("src/")))
-        .filter((f) => f.endsWith(".scss") &&
-        !f.endsWith("/main.scss") &&
-        !f.endsWith("\\main.scss") &&
-        !f.endsWith("/includes.scss") &&
-        !f.endsWith("\\includes.scss") &&
+        .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) => (0, path_1.relative)(target_locreq.resolve("src/"), fullpath)));
-    await fs_1.promises.writeFile(target_locreq.resolve("src/includes.scss"), `// DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes
+    await fs_1.promises.writeFile(target_locreq.resolve("src/includes.css"), `/*  DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes */
 
-@import "../node_modules/@sealcode/sealgen/src/forms/forms.scss";
+@import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
 ${files.map((path) => `@import "${path.replaceAll("\\", "/")}";`).join("\n")}
 `);
     // eslint-disable-next-line no-console
-    console.log("Successfuly generated new src/includes.scss file");
+    console.log("Successfuly generated new src/includes.css file");
 }
 exports.generateScssIncludes = generateScssIncludes;
 //# sourceMappingURL=find-scss-includes.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.11.4",
+	"version": "0.11.5",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -49,7 +49,7 @@
 		"@koa/router": "^12.0.1",
 		"@sealcode/ts-predicates": "^0.4.3",
 		"deepmerge": "^4.3.1",
-		"esbuild": "^0.15.5",
+		"esbuild": "^0.20.0",
 		"esbuild-sass-plugin": "^2.3.1",
 		"js-convert-case": "^4.2.0",
 		"koa": "^2.13.0",

package/src/add-jdd-component.ts

@@ -29,7 +29,7 @@ export async function addJDDComponent(): Promise<void> {
 	const css_file_path = target_locreq.resolve(
 		`src/back/jdd-components/${toKebabCase(component_name)}/${toKebabCase(
 			component_name
-		)}.scss`
+		)}.css`
 	);
 	await fs.writeFile(
 		css_file_path,

package/src/build.ts

@@ -1,10 +1,9 @@
-import { build, BuildResult } from "esbuild";
+import { build, BuildContext, BuildResult, context } from "esbuild";
 import { promises as fs } from "fs";
 import { extname } from "path";
-import { sassPlugin } from "esbuild-sass-plugin";
 import * as chokidar from "chokidar";
 import { default as glob } from "tiny-glob";
-import { generateScssIncludes } from "./find-scss-includes";
+import { generate_css_includes } from "./find-css-includes";
 import { sleep } from "./utils/sleep";
 import { generateCollections } from "./generate-collections";
 import { generateRoutes } from "./generate-routes";
@@ -120,34 +119,48 @@ async function build_ts() {
 }
 
 async function complex_build(watch: boolean): Promise<void> {
-	let scss_build: BuildResult | null = null;
+	const loader = Object.fromEntries(
+		(<const>["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"]).map(
+			(ext) => <const>["." + ext, "file"]
+		)
+	);
+	console.log({ loader });
+	let css_build: BuildContext = await context({
+		entryPoints: ["./src/main.css"],
+		sourcemap: true,
+		bundle: true,
+		outdir: "./public/dist",
+		logLevel: "info",
+		// plugins: [sassPlugin()],
+		loader,
+	});
 	let ongoing_ts = false;
-	let ongoing_scss = false;
+	let ongoing_css = false;
 	if (watch) {
 		const watcher = chokidar.watch("src", { ignoreInitial: true });
 		watcher.on("all", async (_, path) => {
-			if (!scss_build) return;
+			if (!css_build) return;
 			if (path.includes(".#")) return;
-			if (path.endsWith(".scss") && !path.endsWith("/includes.scss")) {
-				if (ongoing_scss) {
+			if (path.endsWith(".css") && !path.endsWith("/includes.css")) {
+				if (ongoing_css) {
 					return;
 				}
-				ongoing_scss = true;
-				// refresh the list of all scss files in includes.scss
-				await generateScssIncludes();
+				ongoing_css = true;
+				// refresh the list of all css files in includes.css
+				await generate_css_includes();
 				try {
-					await scss_build?.rebuild?.();
-					console.log(`Built main.scss [on ${path}]`);
+					await css_build?.rebuild?.();
+					console.log(`Built main.css [on ${path}]`);
 				} catch (e) {
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 					console.error(e.message);
 					await sleep(200);
-					scss_build
+					css_build
 						?.rebuild?.()
 						// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 						.catch((e) => console.error(e?.message));
 				}
-				ongoing_scss = false;
+				ongoing_css = false;
 			}
 			if (
 				(path.endsWith(".ts") || path.endsWith(".tsx")) &&
@@ -165,17 +178,10 @@ async function complex_build(watch: boolean): Promise<void> {
 			}
 		});
 	}
-	await generateScssIncludes();
-	scss_build = await build({
-		entryPoints: ["./src/main.scss"],
-		sourcemap: true,
-		outfile: "./public/dist/style.css",
-		logLevel: "info",
-		incremental: watch,
-		plugins: [sassPlugin()],
-	});
-	await build_ts();
-	watch && scss_build?.rebuild?.();
+	await generate_css_includes();
+
+	await Promise.all([css_build.rebuild(), build_ts()]);
+	watch && css_build?.rebuild?.();
 }
 
 export async function buildProject({
@@ -190,7 +196,6 @@ export async function buildProject({
 			outfile: "./public/dist/bundle.js",
 			logLevel: "info",
 			bundle: true,
-			watch,
 		});
 		await complex_build(watch);
 	} catch (e) {

package/src/cli.ts

@@ -3,7 +3,7 @@ import { addCollection } from "./add-collection";
 import { addJDDComponent } from "./add-jdd-component";
 import { addRoute } from "./add-route";
 import { buildProject } from "./build";
-import { generateScssIncludes } from "./find-scss-includes";
+import { generate_css_includes } from "./find-css-includes";
 import { generateCollections } from "./generate-collections";
 import { generateComponents } from "./generate-components";
 import { generateRoutes } from "./generate-routes";
@@ -18,7 +18,7 @@ const actions: Record<
 	"generate-collections": generateCollections,
 	"generate-components": generateComponents,
 	"generate-routes": generateRoutes,
-	"generate-scss-includes": generateScssIncludes,
+	"generate-css-includes": generate_css_includes,
 	build: buildProject,
 	default: async function () {
 		console.log("Usage: `sealscript <action>`");

package/src/{find-scss-includes.ts → find-css-includes.ts}

@@ -5,16 +5,16 @@ import { walkDir } from "./utils/walk";
 
 const target_locreq = _locreq(process.cwd());
 
-export async function generateScssIncludes(): Promise<void> {
+export async function generate_css_includes(): Promise<void> {
 	const files = await Promise.all(
 		(await walkDir(target_locreq.resolve("src/")))
 			.filter(
 				(f) =>
-					f.endsWith(".scss") &&
-					!f.endsWith("/main.scss") &&
-					!f.endsWith("\\main.scss") &&
-					!f.endsWith("/includes.scss") &&
-					!f.endsWith("\\includes.scss") &&
+					f.endsWith(".css") &&
+					!f.endsWith("/main.css") &&
+					!f.endsWith("\\main.css") &&
+					!f.endsWith("/includes.css") &&
+					!f.endsWith("\\includes.css") &&
 					!f.includes(".#")
 			)
 			.map((fullpath) =>
@@ -23,13 +23,13 @@ export async function generateScssIncludes(): Promise<void> {
 	);
 
 	await fs.writeFile(
-		target_locreq.resolve("src/includes.scss"),
-		`// DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes
+		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.scss";
+@import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
 ${files.map((path) => `@import "${path.replaceAll("\\", "/")}";`).join("\n")}
 `
 	);
 	// eslint-disable-next-line no-console
-	console.log("Successfuly generated new src/includes.scss file");
+	console.log("Successfuly generated new src/includes.css file");
 }

package/src/forms/{forms.scss → forms.css}

@@ -3,14 +3,14 @@
 	border: 1px solid var(--color);
 	border-radius: 5px;
 	padding: 10px;
+}
 
-	&--error {
-		--color: #ff4136;
-	}
+.form-message--error {
+	--color: #ff4136;
+}
 
-	&--success {
-		--color: #2ecc40;
-	}
+.form-message--success {
+	--color: #2ecc40;
 }
 
 .form__error {