Simplify build process

Author: JoviDeCroock

build.mjs

@@ -0,0 +1,259 @@
+#!/usr/bin/env node
+
+import * as esbuild from 'esbuild';
+import { transformAsync } from '@babel/core';
+import { minify } from 'terser';
+import fs from 'node:fs/promises';
+import { readFileSync, existsSync } from 'node:fs';
+import path from 'node:path';
+
+// Load mangle configuration
+const mangleConfig = JSON.parse(readFileSync('./mangle.json', 'utf8'));
+
+// Create rename mapping for Babel plugin
+const rename = {};
+for (let prop in mangleConfig.props.props) {
+	let name = prop;
+	if (name[0] === '$') {
+		name = name.slice(1);
+	}
+	rename[name] = mangleConfig.props.props[prop];
+}
+
+// Build configurations for different packages
+const buildConfigs = [
+	{
+		name: 'preact',
+		entry: 'src/index.js',
+		outDir: 'dist',
+		filename: 'preact',
+		globalName: 'preact'
+	},
+	{
+		name: 'preact/debug',
+		entry: 'debug/src/index.js',
+		outDir: 'debug/dist',
+		external: ['preact'],
+		filename: 'debug',
+		globalName: 'preactDebug'
+	},
+	{
+		name: 'preact/devtools',
+		entry: 'devtools/src/index.js',
+		outDir: 'devtools/dist',
+		external: ['preact'],
+		filename: 'devtools',
+		globalName: 'preactDevtools'
+	},
+	{
+		name: 'preact/hooks',
+		entry: 'hooks/src/index.js',
+		outDir: 'hooks/dist',
+		external: ['preact'],
+		filename: 'hooks',
+		globalName: 'preactHooks'
+	},
+	{
+		name: 'preact/test-utils',
+		entry: 'test-utils/src/index.js',
+		external: ['preact'],
+		outDir: 'test-utils/dist',
+		filename: 'testUtils',
+		globalName: 'preactTestUtils'
+	},
+	{
+		name: 'preact/compat',
+		entry: 'compat/src/index.js',
+		outDir: 'compat/dist',
+		filename: 'compat',
+		globalName: 'preactCompat',
+		external: ['preact/hooks', 'preact'],
+		globals: { 'preact/hooks': 'preactHooks' }
+	},
+	{
+		name: 'preact/jsx-runtime',
+		entry: 'jsx-runtime/src/index.js',
+		outDir: 'jsx-runtime/dist',
+		filename: 'jsxRuntime',
+		external: ['preact'],
+		globalName: 'preactJsxRuntime'
+	}
+];
+
+// Formats to build for each package
+const formats = ['cjs', 'esm', 'umd'];
+
+// Function to apply Babel transformations
+async function applyBabelTransform(code, filename) {
+	try {
+		const result = await transformAsync(code, {
+			filename,
+			configFile: false,
+			babelrc: false,
+			presets: [],
+			plugins: [['babel-plugin-transform-rename-properties', { rename }]]
+		});
+		return result.code;
+	} catch (error) {
+		console.error(`Babel transform failed for ${filename}:`, error);
+		throw error;
+	}
+}
+
+// Function to minify with Terser
+async function minifyWithTerser(code, filename) {
+	try {
+		const result = await minify(code, {
+			...mangleConfig.minify,
+			compress: {
+				keep_infinity: true,
+				pure_getters: true,
+				passes: 10
+			},
+			format: {
+				wrap_func_args: false,
+				comments: /^\s*([@#]__[A-Z]+__\s*$|@cc_on)/,
+				preserve_annotations: true
+			},
+			ecma: 2017,
+			sourceMap: true,
+			safari10: true,
+			module: filename.endsWith('.mjs'),
+			toplevel: true
+		});
+		return result;
+	} catch (error) {
+		console.error(`Terser minification failed for ${filename}:`, error);
+		throw error;
+	}
+}
+
+// Function to build a single package in a specific format
+async function buildPackage(config, format) {
+	const {
+		name,
+		entry,
+		outDir,
+		filename,
+		globalName,
+		external = [],
+		globals = {}
+	} = config;
+
+	if (!existsSync(entry)) {
+		console.warn(`⚠️  Entry file ${entry} not found, skipping ${name}`);
+		return;
+	}
+
+	console.log(`📦 Building ${name} (${format})...`);
+
+	// Determine output extension and format
+	const extensions = {
+		cjs: '.js',
+		esm: '.mjs',
+		umd: '.umd.js'
+	};
+
+	const outputFile = path.join(outDir, `${filename}${extensions[format]}`);
+	const mapFile = path.join(outDir, `${filename}.map${extensions[format]}`);
+
+	// ESBuild configuration
+	const esbuildConfig = /** @type {import('esbuild').BuildOptions} */ {
+		entryPoints: [entry],
+		bundle: true,
+		format: format === 'cjs' ? 'cjs' : format === 'esm' ? 'esm' : 'iife',
+		platform: 'browser',
+		target: ['es2015'],
+		jsx: 'transform',
+		jsxFactory: 'h',
+		jsxFragment: 'Fragment',
+		external: external,
+		sourcemap: true,
+		globalName: format === 'umd' ? globalName : undefined,
+		plugins: [],
+		write: false, // We'll handle writing ourselves
+		minify: false, // We'll handle minification with Terser
+		treeShaking: true
+	};
+
+	// Add globals for UMD builds
+	if (format === 'umd' && Object.keys(globals).length > 0) {
+		esbuildConfig.globalName = globalName;
+		// ESBuild doesn't support globals directly, we'll need to handle externals differently
+	}
+
+	try {
+		// Build with ESBuild
+		// @ts-expect-error
+		const result = await esbuild.build(esbuildConfig);
+		let code = result.outputFiles[0].text;
+
+		// Apply Babel transformations
+		code = await applyBabelTransform(code, outputFile);
+
+		// Ensure output directory exists
+		await fs.mkdir(path.dirname(outputFile), { recursive: true });
+
+		// Write unminified version
+		const minified = await minifyWithTerser(code, outputFile);
+		await fs.writeFile(outputFile, minified.code);
+		if (typeof minified.map === 'string')
+			await fs.writeFile(mapFile, minified.map);
+		console.log(`✅ Built ${outputFile}`);
+
+		// Create minified version for UMD builds
+		if (format === 'umd') {
+			const minifiedCode = await minifyWithTerser(code, outputFile);
+			const minifiedFile = path.join(outDir, `${filename}.min.js`);
+			await fs.writeFile(minifiedFile, minifiedCode.code);
+			console.log(`✅ Minified ${minifiedFile}`);
+		}
+	} catch (error) {
+		console.error(`❌ Failed to build ${name} (${format}):`, error);
+		throw error;
+	}
+}
+
+// Main build function
+async function build() {
+	console.log('🚀 Starting Preact build with ESBuild + Babel + Terser...\n');
+
+	const startTime = Date.now();
+	let successful = 0;
+	let failed = 0;
+
+	// Build each package in each format
+	for (const config of buildConfigs) {
+		for (const format of formats) {
+			try {
+				await buildPackage(config, format);
+				successful++;
+			} catch (error) {
+				console.error(`❌ Build failed for ${config.name} (${format})`);
+				failed++;
+			}
+		}
+		console.log(); // Empty line between packages
+	}
+
+	const endTime = Date.now();
+	const duration = ((endTime - startTime) / 1000).toFixed(2);
+
+	console.log(`\n🎉 Build completed in ${duration}s`);
+	console.log(`✅ Successful: ${successful}`);
+	if (failed > 0) {
+		console.log(`❌ Failed: ${failed}`);
+		process.exit(1);
+	}
+}
+
+// Run the build if this script is executed directly
+// @ts-expect-error
+if (import.meta.url === `file://${process.argv[1]}`) {
+	build().catch(error => {
+		console.error('❌ Build failed:', error);
+		process.exit(1);
+	});
+}
+
+export { build, buildPackage };

package.json

@@ -121,7 +121,8 @@
   "types": "src/index.d.ts",
   "scripts": {
     "prepare": "husky && run-s build",
-    "build": "npm-run-all --parallel 'build:*'",
+    "build": "node build.mjs && node ./config/compat-entries.js",
+    "build:microbundle": "npm-run-all --parallel 'build:*'",
     "build:core": "microbundle build --raw --no-generateTypes -f cjs,esm,umd",
     "build:debug": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd debug",
     "build:devtools": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd devtools",

src/index.js

@@ -11,3 +11,5 @@ export { cloneElement } from './clone-element';
 export { createContext } from './create-context';
 export { toChildArray } from './diff/children';
 export { default as options } from './options';
+
+// Build