From 2052163cc331c6566599a2bda2afb5146c727a4d Mon Sep 17 00:00:00 2001 From: Christian Garcia Date: Mon, 8 Jul 2024 18:51:08 +0000 Subject: [PATCH 1/2] watcher.js auto updates sub library modules for hot-reloading greatness (#393) * Added watcher.js with, when ran with `npm run watcher` will auto update sub library modules for hot-reloading greatness. * Moved watcher to scripts dir * Write errors to logs for faster debugging * watcher npm run dev --- lib/icicle-tapisui-extension/tsconfig.json | 3 +- lib/tapisui-api/tsconfig.json | 3 +- lib/tapisui-common/tsconfig.json | 3 +- lib/tapisui-extensions-core/tsconfig.json | 3 +- lib/tapisui-hooks/tsconfig.json | 3 +- package.json | 5 ++- scripts/watcher.js | 52 ++++++++++++++++++++++ 7 files changed, 66 insertions(+), 6 deletions(-) create mode 100644 scripts/watcher.js diff --git a/lib/icicle-tapisui-extension/tsconfig.json b/lib/icicle-tapisui-extension/tsconfig.json index c46cfd164..96795df42 100644 --- a/lib/icicle-tapisui-extension/tsconfig.json +++ b/lib/icicle-tapisui-extension/tsconfig.json @@ -10,7 +10,8 @@ "outDir": "dist", "lib": ["dom", "esnext", "dom.iterable"], "types": ["node"], - "typeRoots": ["./types", "node_modules/@types"] + "typeRoots": ["./types", "node_modules/@types"], + "incremental": true }, "include": ["src"], "exclude": ["node_modules", "dist", "bundle.ts", "tasks.ts"] diff --git a/lib/tapisui-api/tsconfig.json b/lib/tapisui-api/tsconfig.json index b1556029c..b0b129f6b 100644 --- a/lib/tapisui-api/tsconfig.json +++ b/lib/tapisui-api/tsconfig.json @@ -19,7 +19,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": false, - "jsx": "react-jsx" + "jsx": "react-jsx", + "incremental": true }, "include": ["src"], "exclude": ["node_modules", "dist"] diff --git a/lib/tapisui-common/tsconfig.json b/lib/tapisui-common/tsconfig.json index 07c32a0d3..9e15cc9da 100644 --- a/lib/tapisui-common/tsconfig.json +++ b/lib/tapisui-common/tsconfig.json @@ -17,7 +17,8 @@ "isolatedModules": true, "noEmit": false, "types": ["node"], - "outDir": "./dist" + "outDir": "./dist", + "incremental": true }, "exclude": [ "dist", diff --git a/lib/tapisui-extensions-core/tsconfig.json b/lib/tapisui-extensions-core/tsconfig.json index 1660e2397..28b6498aa 100644 --- a/lib/tapisui-extensions-core/tsconfig.json +++ b/lib/tapisui-extensions-core/tsconfig.json @@ -8,7 +8,8 @@ "outDir": "dist", "lib": ["es6", "dom"], "types": ["node"], - "typeRoots": ["./types", "node_modules/@types"] + "typeRoots": ["./types", "node_modules/@types"], + "incremental": true }, "include": ["src"], "exclude": ["node_modules", "dist"] diff --git a/lib/tapisui-hooks/tsconfig.json b/lib/tapisui-hooks/tsconfig.json index 834e07a01..80c2be78f 100644 --- a/lib/tapisui-hooks/tsconfig.json +++ b/lib/tapisui-hooks/tsconfig.json @@ -19,7 +19,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": false, - "jsx": "react-jsx" + "jsx": "react-jsx", + "incremental": true }, "include": ["src"], "exclude": ["node_modules", "dist"] diff --git a/package.json b/package.json index 67fc8c681..ab84a1830 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,10 @@ "homepage": "https://tapis-project.github.io/tapis-ui", "scripts": { "start": "vite --config ./vite/vite.local.config.mts", + "dev": "npm run watcher & npm run start", "deploy": "vite --config ./vite/vite.config.mts", - "build": "tsc && vite build", + "build": "tsc && vite build --config ./vite/vite.config.mts", + "watcher": "node ./scripts/watcher.js", "preview": "vite preview", "test": "chmod +x ./scripts/test-all.sh && ./scripts/test-all.sh", "lint": "eslint --max-warnings=0 . && prettier --single-quote --check src", @@ -111,6 +113,7 @@ "path": "^0.12.7", "prettier": "^2.3.2", "ts-jest": "^29.1.4", + "chokidar": "^3.6.0", "typescript": "^5.4.5" }, "jest": { diff --git a/scripts/watcher.js b/scripts/watcher.js new file mode 100644 index 000000000..cd797d756 --- /dev/null +++ b/scripts/watcher.js @@ -0,0 +1,52 @@ +/** + * Watcher which triggers incremental build for select libs via tsx + * Also copies changed css/scss files to the dist folder when needed + * All for hot-reloading. Run `npm run watcher` alongside `npm run start` to enable. + * **npm runs could be combined, idk how though ;) + */ +const chokidar = require('chokidar'); +const { exec } = require('child_process'); +const fs = require('fs'); +const path = require('path'); + +const libsToWatch = [ + 'lib/tapisui-hooks', + 'lib/tapisui-common', + 'lib/tapisui-extensions-core', + 'lib/tapisui-api', + 'lib/icicle-tapisui-extensions', + // Add other libraries you want watched and rebuilt here +]; + +libsToWatch.forEach((libPath) => { + console.log(`Watching: ${libPath}`); + const watcher = chokidar.watch(`${libPath}/src`, { ignoreInitial: true }); + + watcher.on('all', (event, filePath) => { + if (filePath.endsWith('.css') || filePath.endsWith('.scss')) { + // Handle CSS and SCSS files separately + const destPath = filePath.replace('/src/', '/dist/'); + fs.copyFile(filePath, destPath, (err) => { + if (err) { + console.error(`Error copying file ${filePath}: ${err}`); + return; + } + console.log(`Copying: ${filePath}`); + }); + } else { + // rebuild is incremental due to the lib/libname/tsconfig.json > compilerOptions + // > incremental: true, meaning only changed files are recompiled + console.log(`Rebuilding: ${libPath}`); + exec( + `cd ${libPath} && npx tsc --build ./tsconfig.json`, + (error, stdout, stderr) => { + if (error) { + console.error(`Error rebuilding ${libPath}: ${error}\n${stdout}`); + return; + } + console.log(`Changed: ${filePath}`); + } + ); + } + }); +}); From 1fd221f8fbaf4128d76f5b5f053fe85792b0387c Mon Sep 17 00:00:00 2001 From: "Christian R. Garcia" Date: Tue, 9 Jul 2024 08:23:18 -0700 Subject: [PATCH 2/2] icicle-tapisui-extension watcher fix. --- scripts/watcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/watcher.js b/scripts/watcher.js index cd797d756..a677aa95c 100644 --- a/scripts/watcher.js +++ b/scripts/watcher.js @@ -14,7 +14,7 @@ const libsToWatch = [ 'lib/tapisui-common', 'lib/tapisui-extensions-core', 'lib/tapisui-api', - 'lib/icicle-tapisui-extensions', + 'lib/icicle-tapisui-extension', // Add other libraries you want watched and rebuilt here ];