Add watch

Author: rublag-hs

packages/react-components/biome.json

@@ -16,7 +16,8 @@
 			"tsconfig.app.json",
 			"tsconfig.json",
 			"tsconfig.node.json",
-			"vite.config.ts"
+			"vite.config.ts",
+			"scripts/**"
 		],
 		"ignoreUnknown": false
 	},

packages/react-components/package.json

@@ -19,7 +19,7 @@
 	},
 	"scripts": {
 		"build": "rm -rf dist && mkdir -p dist && copyfiles -e '**/*.ts' -e '**/*.tsx' 'src/**' dist && tsc -b --force && tailwindcss --cwd ./src -i ./full.css -o ../dist/bundle.css && echo success",
-		"build:watch": "rm -rf dist && mkdir -p dist && copyfiles -e '**/*.ts' -e '**/*.tsx' 'src/**' dist && tsc -b --force --watch & tailwindcss --watch --cwd ./src -i ./full.css -o ../dist/bundle.css ; wait",
+		"build:watch": "tsx scripts/watch.node.ts",
 		"build-storybook": "storybook build",
 		"format": "biome format",
 		"format:check": "biome format",
@@ -99,6 +99,7 @@
 		"copyfiles": "^2.4.1",
 		"storybook": "^9.1.1",
 		"tailwindcss": "^4.1.11",
+		"tsx": "^4.20.4",
 		"tw-animate-css": "^1.3.6",
 		"typescript": "~5.8.3",
 		"vite": "^7.0.4"

packages/react-components/scripts/copy.node.ts

@@ -0,0 +1,64 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const EXTENSIONS = ["css"];
+
+function makeGlob(extension: string): string {
+	return `**/*.${extension}`;
+}
+
+function makeGlobs(extensions: string[]): string[] {
+	return extensions.map(makeGlob);
+}
+
+if (!fs.existsSync("dist")) {
+	fs.mkdirSync("dist");
+}
+
+const suffixes = fs
+	.globSync(makeGlobs(EXTENSIONS), {
+		cwd: "./src",
+		withFileTypes: true,
+	})
+	.filter((entry) => entry.isFile())
+	.map((entry) =>
+		path.join(
+			"src",
+			path.relative("src", path.join(entry.parentPath, entry.name)),
+		),
+	);
+
+for (const srcPath of suffixes) {
+	const dstPath = path.join("dist", srcPath);
+
+	const dstBasePath = path.dirname(dstPath);
+
+	if (!fs.existsSync(dstBasePath)) {
+		console.log(`Create ${dstBasePath}`);
+		fs.mkdirSync(dstBasePath, { recursive: true });
+	}
+
+	if (!fs.existsSync(dstPath)) {
+		console.log(`Copy ${srcPath} to ${dstPath}`);
+		fs.copyFileSync(srcPath, dstPath);
+		continue;
+	}
+
+	const srcStat = fs.statSync(srcPath, { bigint: true });
+	const dstStat = fs.statSync(dstPath, { bigint: true });
+
+	let shouldCopy = true;
+
+	if (!dstStat.isFile()) {
+		console.log(`Remove non-file ${dstPath}`);
+		fs.rmSync(dstPath, { recursive: true, force: true });
+	} else if (dstStat.mtimeNs >= srcStat.mtimeNs) {
+		console.log(`File up-to-date ${dstPath}`);
+		shouldCopy = false;
+	}
+
+	if (shouldCopy) {
+		console.log(`Copy ${srcPath} to ${dstPath}`);
+		fs.copyFileSync(srcPath, dstPath);
+	}
+}

packages/react-components/scripts/watch.node.ts

@@ -0,0 +1,44 @@
+import { type ChildProcessWithoutNullStreams, spawn } from "node:child_process";
+
+function spawnWithDecorations(
+	command: string,
+	args: string[],
+	decorationOut: string,
+	decorationErr: string,
+): ChildProcessWithoutNullStreams {
+	const subprocess = spawn(command, args);
+	subprocess.stdout.on("data", (data: Buffer) => {
+		data
+			.toString()
+			.split("\n")
+			.forEach((line) => console.log(decorationOut, line));
+	});
+	subprocess.stderr.on("data", (data: Buffer) => {
+		data
+			.toString()
+			.split("\n")
+			.forEach((line) => console.log(decorationErr, line));
+	});
+	return subprocess;
+}
+
+spawnWithDecorations(
+	"tsc",
+	["-b", "--force", "--watch", "--preserveWatchOutput", "--pretty", "false"],
+	"     tsc> ",
+	"     tsc! ",
+);
+
+spawnWithDecorations(
+	"tailwindcss",
+	["--watch", "--cwd", "./src", "-i", "./full.css", "-o", "../dist/bundle.css"],
+	"tailwind> ",
+	"tailwind! ",
+);
+
+spawnWithDecorations(
+	"tsx",
+	["--watch-path=./src", "./scripts/copy.node.ts"],
+	"    copy> ",
+	"    copy! ",
+);

packages/react-components/tsconfig.node.json

@@ -24,5 +24,5 @@
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true
 	},
-	"include": ["vite.config.ts"]
+	"include": ["vite.config.ts", "scripts/*"]
 }