lilact 0.8.4 → 0.9.1

package/README.md

@@ -6,16 +6,24 @@
 
 ---
 
-[Docs on GitHub Pages](https://arashkazemi.github.io/lilact/) — [Demos on GitHub Pages](https://arashkazemi.github.io/lilact/static)
-
-[Lilact repo on GitHub](https://github.com/arashkazemi/lilact) — [Lilact on npm](https://www.npmjs.com/package/lilact)
-
-[Lilact/Node/Express Demo Project](https://github.com/arashkazemi/lilact-express) — [Lilact/PHP Demo Project](https://github.com/arashkazemi/lilact-php-demo) — [Lilact/Python Demo Project](https://github.com/arashkazemi/lilact-python-demo)
+[Docs on GitHub Pages](https://arashkazemi.github.io/lilact/) 
+|| 
+[Demos on GitHub Pages](https://arashkazemi.github.io/lilact/static) 
+|| 
+[Official Repository](https://github.com/arashkazemi/lilact) 
+|| 
+[npm Package](https://www.npmjs.com/package/lilact) 
+|| 
+[Lilact/Node/Express Demo](https://github.com/arashkazemi/lilact-express) 
+|| 
+[Lilact/PHP Demo](https://github.com/arashkazemi/lilact-php-demo) 
+|| 
+[Lilact/Python Demo](https://github.com/arashkazemi/lilact-python-demo)
 
 ---
 
 If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance, performance improvements, and new features.  
-[Sponsor me on GitHub](github.com/sponsors/arashkazemi)
+[Sponsor me on GitHub](https://github.com/sponsors/arashkazemi)
 
 ---
 
@@ -76,16 +84,22 @@ A `webpack` based bundler is available in the `bin` directory. It can be used li
 npx lilact-bundle --entry client/App.jsx --mode production --name bundle.js --out public/dist
 ```
 
+If you add a `--watch` argument, the bundler will not exit and keep watching the input file(s),
+and update the bundle if any file is changed.
+
 ---
 
 ## Using Lilact Outside Node.js (Browser / Script Tag Integration)
 
 `Lilact` runs in the browser, so if you use `Lilact` outside Node, it uses `eval` to run the transpiled scripts, so it cannot use `import`/`export` the same way as a module.
 
-Import the functions using this convention:
+Import the `Lilact` functions using this convention. There is also a `require` function that you can use
+to load other JSX or JS files.
 
 ```js
-const { useState, useRef, render } = Lilact;
+const { useState, useRef, render, require } = Lilact;
+
+const App = require('./App.jsx');
 ```
 
 To export:

package/bin/bundle.cjs

@@ -32,18 +32,19 @@
 const path = require("path");
 const webpack = require("webpack");
 
-
 function parseArgs(argv) {
-	// Simple args:
-	// bundler --entry ./src/index.js --out ./dist/bundle
 	const args = {};
 	for (let i = 2; i < argv.length; i++) {
 		const k = argv[i];
 		if (!k.startsWith("--")) continue;
 		const key = k.slice(2);
-		const v = argv[i + 1];
-		i++;
-		args[key] = v;
+		if(key==='watch') {
+			args[key] = true;
+		}
+		else {
+			const v = argv[++i];
+			args[key] = v;
+		}
 	}
 	return args;
 }
@@ -52,22 +53,20 @@ async function run() {
 	const args = parseArgs(process.argv);
 
 	const userProjectRoot = process.cwd(); // MUST be user's project root
-	const userEntry = args.entry
-		? path.resolve(userProjectRoot, args.entry)
-		: null;
+	const userEntry = args.entry ? path.resolve(userProjectRoot, args.entry) : null;
 
 	if (!userEntry) {
-		console.error("Usage: lilact-bundler --entry ./path/to/entry.js --mode production --out ./dist/out --name bundle.js");
+		console.error(
+			"Usage: lilact-bundler --watch --entry ./path/to/entry.js --mode production --out ./dist/out --name bundle.js"
+		);
 		process.exit(1);
 	}
 
 	const name = args.name ?? "bundle.js";
 	const mode = args.mode ?? "production";
+	const watch = args?.watch===true;
 
-	// Locate lilact root reliably (where this CLI is installed)
 	const lilactRoot = path.dirname(require.resolve("lilact/package.json"));
-
-	// Load config factory from your package
 	const configFactoryPath = path.join(lilactRoot, "webpack.config.factory.cjs");
 	const configFactory = require(configFactoryPath);
 
@@ -75,44 +74,54 @@ async function run() {
 		? path.resolve(userProjectRoot, args.out)
 		: path.resolve(userProjectRoot, "dist");
 
-	// Build config using a factory, then override resolution for user's project
 	const baseConfig = configFactory({
 		entry: userEntry,
 		outputPath: userOutDir,
 		userProjectRoot,
-		mode, name
+		mode,
+		name
 	});
 
 	// ---- Critical: ensure resolution happens from user's project ----
 	baseConfig.context = userProjectRoot;
 	baseConfig.resolve = baseConfig.resolve || {};
-	baseConfig.resolve.modules = [
-		path.join(userProjectRoot, "node_modules"),
-		"node_modules"
-	];
+	baseConfig.resolve.modules = [path.join(userProjectRoot, "node_modules"), "node_modules"];
 
 	const compiler = webpack(baseConfig);
 
-	compiler.run((err, stats) => {
-		// webpack keeps resources; close when available
-		compiler.close(() => {});
-
-		if (err) {
-			console.error(err);
-			process.exit(1);
-		}
-
-		if (stats?.hasErrors?.()) {
-			console.error(stats.toString("errors-only"));
-			process.exit(1);
+	const watching = compiler.watch(
+		{
+			// You can tweak these; leaving as defaults usually works.
+			// aggregateTimeout: 300,
+			// poll: 1000
+		},
+		(err, stats) => {
+			if (err) {
+				console.error(err);
+				return; // keep watching
+			}
+
+			if (stats?.hasErrors?.()) {
+				console.error(stats.toString("errors-only"));
+				return; // keep watching
+			}
+
+			console.log(
+				stats?.toString?.({
+					colors: true,
+					chunks: false
+				}) || "Build finished."
+			);
+
+			if(!watch) process.exit(1);
 		}
+	);
 
-		console.log(
-			stats?.toString?.({
-				colors: true,
-				chunks: false
-			}) || "Build finished."
-		);
+	process.on("SIGINT", () => {
+		watching.close(() => process.exit(0));
+	});
+	process.on("SIGTERM", () => {
+		watching.close(() => process.exit(0));
 	});
 }