@reflex-stack/tsp 0.1.0

package/src/commands/size-report.js

@@ -0,0 +1,132 @@
+import { execAsync } from "@zouloux/cli"
+import { Directory, File } from "@zouloux/files"
+import { statSync, writeFileSync } from 'node:fs'
+import brotliSize from "brotli-size"
+import { join, relative } from "node:path";
+import { naiveHumanFileSize } from "../utils.js";
+
+
+const keepClassNames = false;
+const keepFunctionNames = false;
+
+const defaultTerserOptions = [
+	// Compress and shorten names
+	'--compress', [
+		`ecma=2017`,
+		'passes=3',
+		`keep_classnames=${keepClassNames}`,
+		`keep_fnames=${keepFunctionNames}`,
+		'dead_code=true',
+		'unsafe_arrows=true',
+		'unsafe_methods=true',
+		'unsafe_undefined=true',
+		'keep_fargs=false',
+		'conditionals=false'
+	].join(","),
+	// Mangle variables and functions
+	'--mangle', [
+		'toplevel=true',
+		`keep_classnames=${keepClassNames}`,
+		`keep_fnames=${keepFunctionNames}`
+	].join(","),
+	// Mangle properties starting with an underscore
+	`--mangle-props`, [`regex=/^_/`].join(','),
+	// Set env as production for dead code elimination
+	`-d 'process.env.NODE_ENV="production"'`,
+	// Threat as module (remove "use strict")
+	'--module',
+	'--toplevel',
+];
+
+
+/**
+ * Compress and check brotli sizes
+ * @param bundles array [".", "./submodule"]
+ * @param config tsp config
+ * @returns {Promise<*[]>}
+ */
+export async function sizeReport ( bundles, config ) {
+	// Browse all bundles
+	// A bundle is defined by the "export" property of package.json
+	// The module resolution does not exist and all files in the bundle'e directory
+	// Is considered part of the bundle.
+	const allBundleSizes = []
+	for ( const bundlePath of bundles ) {
+		// Get all built JS files of this bundle directory
+		// Bundle directories are relative to dist
+		const bundleDirectory = new Directory( join( config.cwd, config.dist, bundlePath ) )
+		let allFiles = await bundleDirectory.children('file')
+		allFiles = allFiles
+			.filter( f => f.isFile() && f.extensions?.[0]?.toLowerCase() === "js" )
+			.map( f => f.path )
+		const bundleName = bundlePath.replace(/^\.\//, '')
+		const bundleSizes = {
+			name: bundleName === "." ? "main" : bundleName,
+			files: [],
+			sizes: [0, 0, 0],
+		}
+		for ( const filePath of allFiles ) {
+			const relativeFilePath = relative( join(config.cwd, config.dist), filePath )
+			const fileReport = {
+				path: relativeFilePath,
+				sizes: []
+			}
+			const output = `tmp/${relativeFilePath}`
+			// Weight original js file ( not compressed )
+			const size0 = statSync(filePath).size
+			// Minify using terser
+			const command = [ "terser", ...defaultTerserOptions, `-o ${output}`, `-- ${filePath}` ].join(" ")
+			await execAsync(command, 3)
+			// Weight minified file size
+			const size1 = statSync(output).size
+			// Weight compressed file size
+			const size2 = brotliSize.fileSync( output )
+			fileReport.sizes = [ size0, size1, size2 ]
+			// Count for total bundle size
+			bundleSizes.sizes[0] += size0
+			bundleSizes.sizes[1] += size1
+			bundleSizes.sizes[2] += size2
+			// Register this file report
+			bundleSizes.files.push( fileReport )
+		}
+		allBundleSizes.push(bundleSizes)
+	}
+	// Delete temp directory
+	const tmp = new Directory( join( config.cwd, config.tmp ) )
+	await tmp.delete()
+
+	return allBundleSizes
+}
+
+export async function cleanSizeReports ( config ) {
+	const dir = new Directory( join(config.cwd, config.reports) )
+	await dir.ensureParents()
+	await dir.clean()
+}
+
+export function generateJSON ( sizeReport, config ) {
+	writeFileSync(
+		join(config.cwd, config.reports, 'size-report.json'),
+		JSON.stringify( sizeReport ),
+		{ encoding: 'utf-8' }
+	)
+}
+
+export async function generateSVGs ( sizeReport, config ) {
+	for ( const bundle of sizeReport ) {
+		const size = bundle.sizes[2]
+		const sizeContent = naiveHumanFileSize( size )
+		for ( const scheme of ["light", "dark"] ) {
+			const bitPath = join( config.cwd, config.reports, `${bundle.name}-${scheme}.svg` )
+			const svgBitFile = new File( bitPath );
+			svgBitFile.content( () => [
+				`<svg width="${sizeContent.length * 10}" height="22" xmlns="http://www.w3.org/2000/svg">`,
+				`<style> text { fill: ${scheme === "dark" ? "white" : "black" }; font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; }</style>`,
+				`<text y="21">${sizeContent}</text>`,
+				`</svg>`,
+			].join(""))
+			await svgBitFile.ensureParents()
+			await svgBitFile.save();
+		}
+	}
+}

package/src/commands/test.js

@@ -0,0 +1,20 @@
+import { execAsync, newLine, nicePrint, oraTask } from "@zouloux/cli";
+
+
+export async function test ( config ) {
+	nicePrint(`Starting test sequence`)
+	newLine()
+	for ( const testFile of config["test-files"] ) {
+		const command = `${config.runtime} ${config.tests}/${testFile}`
+		nicePrint(`{d}$ ${command}`)
+		try {
+			await execAsync(command, 3)
+		}
+		catch ( error ) {
+			console.error(error)
+			nicePrint(`{b/g}Test ${testFile} failed`, { code: error.code })
+		}
+		newLine()
+	}
+	await oraTask(`All tests passed`, (t) => {t.success()})
+}

package/src/config.js

@@ -0,0 +1,18 @@
+
+export let getConfig = (userPackage) => {
+	return {
+		cwd: process.cwd(),
+		// Default config
+		runtime: "node",
+		src: './src',
+		dist: './dist',
+		tests: './tests',
+		"test-files": ['test.js'],
+		tmp: './tmp',
+		reports: './reports',
+		'generate-json-report': true,
+		'generate-svg-report': true,
+		// Override with package config
+		...((userPackage ?? {})['tsp'] ?? {})
+	}
+}

package/src/utils.js

@@ -0,0 +1,61 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync, readFileSync } from "node:fs";
+import { newLine, nicePrint } from "@zouloux/cli";
+import { getConfig } from "./config.js";
+import { execSync } from 'child_process'
+
+export const getScriptDirectoryName = (importMetaUrl) => dirname(fileURLToPath(importMetaUrl))
+
+export function getUserPackageJson ( noThrow = false ) {
+	// Get default config to have the cwd
+	const config = getConfig()
+	const filePath = join(`${config.cwd}/package.json`)
+	if (!existsSync(filePath)) {
+		if ( noThrow )
+			return null
+		nicePrint(`{b/r}File ${filePath} not found in ${config.cwd}.`, { code: 1 })
+	}
+	return readJsonFile( filePath )
+}
+
+export function getTSPPackageJson () {
+	const tspDirectory = getScriptDirectoryName(import.meta.url)
+	return readJsonFile( join(`${tspDirectory}/../package.json`), )
+}
+
+export function readJsonFile ( filePath ) {
+	const jsonAsText = readFileSync( filePath, { encoding: 'utf-8' } )
+	return JSON.parse( jsonAsText.toString() )
+}
+
+export function showIntroMessage ( noThrow = false ) {
+	// User package json
+	const userPackageJson = getUserPackageJson( noThrow )
+	if ( userPackageJson )
+		nicePrint(`{w}Working on {w/b}${userPackageJson.name}{d} {w}v${userPackageJson.version}`)
+	// tsp package json
+	const tspPackageJson = getTSPPackageJson()
+	nicePrint(`{w}Using {w/b}${tspPackageJson.name}{d} {w}v${tspPackageJson.version}`)
+	newLine()
+}
+
+/**
+ * Show bytes report as bytes or kilobytes.
+ * Very naive implementation.
+ */
+export function naiveHumanFileSize ( size ) {
+  if ( size > 1000 ) // is it base 10 or ^2 ?
+    size = ~~(size / 10) / 100 + 'k'
+  return size + 'b'
+}
+
+// Get git remote repo URL if in a git repo
+export function getGitRemoteUrl ( cwd ) {
+  try {
+    return execSync('git remote get-url origin', { stdio: 'pipe', cwd }).toString().trim();
+  }
+  catch {
+    return '';
+  }
+}

package/tests/example-package/README.md

@@ -0,0 +1,13 @@
+# ecma-build test package
+
+Main bundle is only
+<picture style="display: inline-block">
+  <source media="(prefers-color-scheme: dark)" srcset="./reports/main-dark.svg">
+  <img src="./reports/main-light.svg">
+</picture>
+
+Optional sub-module is only 
+<picture style="display: inline-block">
+  <source media="(prefers-color-scheme: dark)" srcset="./reports/submodule-dark.svg">
+  <img src="./reports/submodule-light.svg">
+</picture>

package/tests/example-package/dist/common-dep.d.ts

@@ -0,0 +1 @@
+export declare const commonDep = "common dependency";

package/tests/example-package/dist/common-dep.js

@@ -0,0 +1 @@
+export const commonDep = "common dependency";

package/tests/example-package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./root-dep.js";
+export { doStuff } from "./stuff.js";

package/tests/example-package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./root-dep.js";
+export { doStuff } from "./stuff.js";

package/tests/example-package/dist/root-dep.d.ts

@@ -0,0 +1 @@
+export declare const rootDep = "root dependency";

package/tests/example-package/dist/root-dep.js

@@ -0,0 +1 @@
+export const rootDep = "root dependency";

package/tests/example-package/dist/stuff.d.ts

@@ -0,0 +1 @@
+export declare function doStuff(): void;

package/tests/example-package/dist/stuff.js

@@ -0,0 +1,4 @@
+import { commonDep } from "./common-dep.js";
+export function doStuff() {
+    console.log("Do stuff", commonDep);
+}

package/tests/example-package/dist/submodule/index.d.ts

@@ -0,0 +1 @@
+export declare function doSubmoduleStuff(): void;

package/tests/example-package/dist/submodule/index.js

@@ -0,0 +1,5 @@
+import { submoduleDep } from "./submodule-dep.js";
+import { commonDep } from "../common-dep.js";
+export function doSubmoduleStuff() {
+    console.log("Do submodule stuff", submoduleDep, commonDep);
+}

package/tests/example-package/dist/submodule/submodule-dep.d.ts

@@ -0,0 +1 @@
+export declare const submoduleDep = "submodule dependency";

package/tests/example-package/dist/submodule/submodule-dep.js

@@ -0,0 +1 @@
+export const submoduleDep = "submodule dependency";