quickbundle 0.12.0 → 0.15.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Ayoub Adib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -12,10 +12,11 @@ Quickbundle allows you to bundle a library in a **quick**, **fast** and **easy**
 
 -   Fast build and watch mode thanks to [esbuild](https://esbuild.github.io/)
 -   Zero configuration: define the build artifacts in your `package.json` and you're all set!
--   JavaScript, TypeScript, JSX, CSS, JSON and Text support following [esbuild support](https://esbuild.github.io/content-types/)
+-   JavaScript, TypeScript, JSX, CSS, JSON, Image and Text support following [esbuild support](https://esbuild.github.io/content-types/)
 -   Support of multiple module formats including `cjs` & `esm`
 -   Bundling can be done for several platform targets including `browser` or `node`
 -   Optimized build such as `peerDependencies` not bundled in the final output
+-   Serve and live reload support for `html` entrypoint
 
 <br>
 
@@ -43,6 +44,7 @@ yarn add quickbundle
 	"scripts": {
 		"build": "quickbundle build", // Production mode (optimizes bundle)
 		"watch": "quickbundle watch", // Development mode (watches each file change)
+		"serve": "quickbundle watch --serve public/index.html", // Serve an html entrypoint with live reload capabilities (for more details, check examples folder)
 		"build:fast": "quickbundle build --no-check", // Production mode with fast transpilation time. This mode disables TypeScript type checking (ie. not using `tsc`) and, consequently, the `types` asset is no more managed by the tool
 		"watch:fast": "quickbundle watch --no-check" // Development mode with fast transpilation time
 	}
@@ -62,4 +64,19 @@ yarn prod
 
 ## 🤩 Used by
 
+-   [@adbayb/scripts](https://github.com/adbayb/stack) My opinionated toolbox for JavaScript/TypeScript projects
+
 Contribution welcomed! 🤗
+
+<br>
+
+## 💙 Acknowledgements
+
+-   The backend powered by [ESBuild](https://github.com/evanw/esbuild) to make blazing fast builds. A special shoutout to its author [Evan Wallace](https://github.com/evanw) and [all contributors](https://github.com/evanw/esbuild/graphs/contributors).
+-   The zero-configuration approach was inspired by [microbundle](https://github.com/developit/microbundle). A special shoutout to its author [Jason Miller](https://github.com/developit) and [all contributors](https://github.com/developit/microbundle/graphs/contributors).
+
+<br>
+
+## 📖 License
+
+[MIT](./LICENSE "License MIT")

package/bin/bundler/bundler.d.ts

@@ -1,11 +1,8 @@
 declare type BundleParameters = {
-	isProduction: boolean;
-	isFast: boolean;
-	onWatch?: (error: Error | null) => void;
+    isProduction: boolean;
+    isFast: boolean;
+    onWatch?: (error: Error | null) => void;
+    serveEntryPoint?: string;
 };
-export declare const bundle: ({
-	isProduction,
-	isFast,
-	onWatch,
-}: BundleParameters) => Promise<(string | null)[]>;
+export declare const bundle: ({ isProduction, isFast, onWatch, serveEntryPoint, }: BundleParameters) => Promise<(string | null)[]>;
 export {};

package/bin/bundler/bundler.js

@@ -1,126 +1,97 @@
 "use strict";
-var __awaiter =
-	(this && this.__awaiter) ||
-	function (thisArg, _arguments, P, generator) {
-		function adopt(value) {
-			return value instanceof P
-				? value
-				: new P(function (resolve) {
-						resolve(value);
-				  });
-		}
-		return new (P || (P = Promise))(function (resolve, reject) {
-			function fulfilled(value) {
-				try {
-					step(generator.next(value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function rejected(value) {
-				try {
-					step(generator["throw"](value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function step(result) {
-				result.done
-					? resolve(result.value)
-					: adopt(result.value).then(fulfilled, rejected);
-			}
-			step(
-				(generator = generator.apply(thisArg, _arguments || [])).next()
-			);
-		});
-	};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundle = void 0;
 const esbuild_1 = require("esbuild");
+const http_1 = require("http");
 const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
 const package_1 = require("./package");
 const plugins_1 = require("./plugins");
 const typescript_1 = require("./typescript");
-const bundle = ({ isProduction, isFast, onWatch }) =>
-	__awaiter(void 0, void 0, void 0, function* () {
-		const {
-			destination,
-			externalDependencies,
-			hasModule,
-			platform,
-			source,
-			types,
-		} = (0, package_1.getPackageMetadata)();
-		const isWatching = typeof onWatch === "function";
-		const isTypingRequested = typeof types === "string" && !isFast;
-		const tsConfig = yield (0, typescript_1.getTypeScriptConfiguration)();
-		const getType = () =>
-			__awaiter(void 0, void 0, void 0, function* () {
-				const outfile = types;
-				if (!outfile) return null;
-				yield (0, typescript_1.generateTypeScriptDeclaration)(outfile);
-				return outfile;
-			});
-		const getJavaScript = (format) =>
-			__awaiter(void 0, void 0, void 0, function* () {
-				const outfile = destination[format];
-				if (!outfile) return null;
-				yield (0, esbuild_1.build)({
-					absWorkingDir: constants_1.CWD,
-					bundle: Boolean(externalDependencies),
-					define: {
-						"process.env.NODE_ENV": isProduction
-							? '"production"'
-							: '"development"',
-					},
-					entryPoints: [source],
-					external: externalDependencies,
-					format,
-					logLevel: "silent",
-					metafile: true,
-					minify: isProduction,
-					outfile,
-					plugins: [(0, plugins_1.jsxPlugin)(tsConfig)],
-					platform,
-					sourcemap: true,
-					target:
-						(tsConfig === null || tsConfig === void 0
-							? void 0
-							: tsConfig.target) || "esnext",
-					treeShaking: true,
-					watch: isWatching && {
-						onRebuild(bundleError) {
-							return __awaiter(
-								this,
-								void 0,
-								void 0,
-								function* () {
-									let error = bundleError;
-									if (error) {
-										onWatch(error);
-										return;
-									}
-									if (isTypingRequested) {
-										try {
-											yield getType();
-										} catch (typingError) {
-											error = typingError;
-										}
-									}
-									onWatch(error);
-								}
-							);
-						},
-					},
-				});
-				return outfile;
-			});
-		const promises = [
-			...(isWatching
-				? [getJavaScript(hasModule ? "esm" : "cjs")]
-				: [getJavaScript("cjs"), getJavaScript("esm")]),
-			...(isTypingRequested ? [getType()] : []),
-		];
-		return Promise.all(promises);
-	});
+const bundle = ({ isProduction, isFast, onWatch, serveEntryPoint, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { destination, externalDependencies, hasModule, platform, source, types, } = (0, package_1.getPackageMetadata)();
+    const isWatching = typeof onWatch === "function";
+    const isLiveReloadable = serveEntryPoint && isWatching;
+    const isTypingRequested = typeof types === "string" && !isFast;
+    const tsConfig = yield (0, typescript_1.getTypeScriptConfiguration)();
+    const getType = () => __awaiter(void 0, void 0, void 0, function* () {
+        const outfile = types;
+        if (!outfile)
+            return null;
+        yield (0, typescript_1.generateTypeScriptDeclaration)(outfile);
+        return outfile;
+    });
+    const getJavaScript = (format) => __awaiter(void 0, void 0, void 0, function* () {
+        const outfile = destination[format];
+        if (!outfile)
+            return null;
+        yield (0, esbuild_1.build)(Object.assign(Object.assign({}, (isLiveReloadable && {
+            banner: {
+                js: `;new EventSource("http://0.0.0.0:${servePort}").onmessage = function() { location.reload(); }; console.log("Live reload ✅ (port: ${servePort})");`,
+            },
+        })), { absWorkingDir: constants_1.CWD, bundle: true, define: {
+                "process.env.NODE_ENV": isProduction
+                    ? '"production"'
+                    : '"development"',
+            }, entryPoints: [source], external: externalDependencies, format, loader: {
+                ".jpg": "file",
+                ".jpeg": "file",
+                ".png": "file",
+                ".gif": "file",
+                ".svg": "file",
+                ".webp": "file",
+            }, logLevel: "silent", metafile: true, minify: isProduction, outfile, plugins: [(0, plugins_1.jsxPlugin)(tsConfig)], platform, sourcemap: true, target: (tsConfig === null || tsConfig === void 0 ? void 0 : tsConfig.target) || "esnext", treeShaking: true, watch: isWatching && {
+                onRebuild(bundleError) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        let error = bundleError;
+                        if (isLiveReloadable) {
+                            clients.forEach((client) => {
+                                client.write("data: update\n\n");
+                            });
+                            clients = [];
+                        }
+                        if (!error && isTypingRequested) {
+                            try {
+                                yield getType();
+                            }
+                            catch (typingError) {
+                                error = typingError;
+                            }
+                        }
+                        onWatch(error);
+                    });
+                },
+            } }));
+        return outfile;
+    });
+    if (isLiveReloadable) {
+        servePort = yield (0, helpers_1.getAvailablePortFrom)(servePort);
+        (0, http_1.createServer)((_, res) => {
+            clients.push(res.writeHead(200, {
+                "Content-Type": "text/event-stream",
+                "Cache-Control": "no-cache",
+                "Access-Control-Allow-Origin": "*",
+            }));
+        }).listen(servePort);
+        (0, helpers_1.openBrowser)(serveEntryPoint);
+    }
+    const promises = [
+        ...(isWatching
+            ? [getJavaScript(hasModule ? "esm" : "cjs")]
+            : [getJavaScript("cjs"), getJavaScript("esm")]),
+        ...(isTypingRequested ? [getType()] : []),
+    ];
+    return Promise.all(promises);
+});
 exports.bundle = bundle;
+let clients = [];
+let servePort = 9000;

package/bin/bundler/index.js

@@ -2,9 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundle = void 0;
 var bundler_1 = require("./bundler");
-Object.defineProperty(exports, "bundle", {
-	enumerable: true,
-	get: function () {
-		return bundler_1.bundle;
-	},
-});
+Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundler_1.bundle; } });

package/bin/bundler/package.d.ts

@@ -1,11 +1,11 @@
 export declare const getPackageMetadata: () => {
-	readonly destination: {
-		readonly esm?: string | undefined;
-		readonly cjs: string;
-	};
-	readonly externalDependencies: string[];
-	readonly hasModule: boolean;
-	readonly platform: "node" | "browser";
-	readonly source: string;
-	readonly types: string | undefined;
+    readonly destination: {
+        readonly esm?: string | undefined;
+        readonly cjs: string;
+    };
+    readonly externalDependencies: string[];
+    readonly hasModule: boolean;
+    readonly platform: "node" | "browser";
+    readonly source: string;
+    readonly types: string | undefined;
 };

package/bin/bundler/package.js

@@ -5,34 +5,25 @@ const path_1 = require("path");
 const constants_1 = require("../constants");
 const helpers_1 = require("../helpers");
 const getPackageMetadata = () => {
-	const {
-		peerDependencies = {},
-		main,
-		module,
-		platform = "browser",
-		source,
-		types,
-	} = require((0, path_1.resolve)(constants_1.CWD, "package.json"));
-	const externalDependencies = Object.keys(peerDependencies);
-	(0, helpers_1.assert)(
-		main,
-		"A `main` field is required in `package.json`. Did you forget to add it?"
-	);
-	(0, helpers_1.assert)(
-		source,
-		"A `source` field is required in `package.json`. Did you forget to add it?"
-	);
-	(0, helpers_1.assert)(
-		["browser", "node"].includes(platform),
-		"The `platform` package field can only accept `browser` or `node` value."
-	);
-	return {
-		destination: Object.assign({ cjs: main }, module && { esm: module }),
-		externalDependencies,
-		hasModule: Boolean(module),
-		platform,
-		source,
-		types,
-	};
+    const { devDependencies = {}, peerDependencies = {}, dependencies = {}, main, module, platform = "browser", source, types, } = require((0, path_1.resolve)(constants_1.CWD, "package.json"));
+    (0, helpers_1.assert)(main, "A `main` field is required in `package.json`. Did you forget to add it?");
+    (0, helpers_1.assert)(source, "A `source` field is required in `package.json`. Did you forget to add it?");
+    (0, helpers_1.assert)(["browser", "node"].includes(platform), "The `platform` package field can only accept `browser` or `node` value.");
+    const peerDependencyNames = Object.keys(peerDependencies);
+    const externalDependencies = platform === "browser"
+        ? peerDependencyNames
+        : [
+            ...peerDependencyNames,
+            ...Object.keys(dependencies),
+            ...Object.keys(devDependencies),
+        ];
+    return {
+        destination: Object.assign({ cjs: main }, (module && { esm: module })),
+        externalDependencies,
+        hasModule: Boolean(module),
+        platform,
+        source,
+        types,
+    };
 };
 exports.getPackageMetadata = getPackageMetadata;

package/bin/bundler/plugins.d.ts

@@ -1,5 +1,3 @@
 import type { Plugin } from "esbuild";
 import type { TypeScriptConfiguration } from "./typescript";
-export declare const jsxPlugin: (
-	tsConfig: TypeScriptConfiguration | null
-) => Plugin;
+export declare const jsxPlugin: (tsConfig: TypeScriptConfiguration | null) => Plugin;

package/bin/bundler/plugins.js

@@ -1,63 +1,32 @@
 "use strict";
-var __awaiter =
-	(this && this.__awaiter) ||
-	function (thisArg, _arguments, P, generator) {
-		function adopt(value) {
-			return value instanceof P
-				? value
-				: new P(function (resolve) {
-						resolve(value);
-				  });
-		}
-		return new (P || (P = Promise))(function (resolve, reject) {
-			function fulfilled(value) {
-				try {
-					step(generator.next(value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function rejected(value) {
-				try {
-					step(generator["throw"](value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function step(result) {
-				result.done
-					? resolve(result.value)
-					: adopt(result.value).then(fulfilled, rejected);
-			}
-			step(
-				(generator = generator.apply(thisArg, _arguments || [])).next()
-			);
-		});
-	};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsxPlugin = void 0;
 const helpers_1 = require("../helpers");
 const jsxPlugin = (tsConfig) => ({
-	name: "jsx-runtime",
-	setup(build) {
-		build.onLoad({ filter: /\.(j|t)sx$/ }, ({ path }) =>
-			__awaiter(this, void 0, void 0, function* () {
-				if (!tsConfig || !tsConfig.hasJsxRuntime) return;
-				const module = tsConfig.jsxImportSource || "react";
-				if (
-					!(0, helpers_1.resolveModulePath)(`${module}/jsx-runtime`)
-				) {
-					throw new Error(
-						"Unable to find the JSX runtime.\nPotential solutions:\n1. If you rely on a non React runtime, set a valid `jsxImportSource` in your tsconfig\n2. Make sure that you've installed your project dependencies"
-					);
-				}
-				const content = yield (0, helpers_1.readFile)(path, "utf8");
-				return {
-					contents: `import * as React from "${module}";${content}`,
-					loader: "tsx",
-				};
-			})
-		);
-	},
+    name: "jsx-runtime",
+    setup(build) {
+        build.onLoad({ filter: /\.(j|t)sx$/ }, ({ path }) => __awaiter(this, void 0, void 0, function* () {
+            if (!tsConfig || !tsConfig.hasJsxRuntime)
+                return;
+            const module = tsConfig.jsxImportSource || "react";
+            if (!(0, helpers_1.resolveModulePath)(`${module}/jsx-runtime`)) {
+                throw new Error("Unable to find the JSX runtime.\nPotential solutions:\n1. If you rely on a non React runtime, set a valid `jsxImportSource` in your tsconfig\n2. Make sure that you've installed your project dependencies");
+            }
+            const content = yield (0, helpers_1.readFile)(path, "utf8");
+            return {
+                contents: `import * as React from "${module}";${content}`,
+                loader: "tsx",
+            };
+        }));
+    },
 });
 exports.jsxPlugin = jsxPlugin;

package/bin/bundler/typescript.d.ts

@@ -1,12 +1,8 @@
 export declare type TypeScriptConfiguration = {
-	target?: string;
-	jsxImportSource?: string;
-	hasJsxRuntime?: boolean;
+    target?: string;
+    jsxImportSource?: string;
+    hasJsxRuntime?: boolean;
 };
 export declare const getTypeScriptConfiguration: () => Promise<TypeScriptConfiguration | null>;
-export declare const generateTypeScriptDeclaration: (
-	outfile: string
-) => Promise<string>;
-export declare const hasTypeScript: (
-	tsConfig: TypeScriptConfiguration | null
-) => tsConfig is TypeScriptConfiguration;
+export declare const generateTypeScriptDeclaration: (outfile: string) => Promise<string>;
+export declare const hasTypeScript: (tsConfig: TypeScriptConfiguration | null) => tsConfig is TypeScriptConfiguration;