Merge pull request #18 from BretHudson/v0.4.0

v0.4.0

Author: BretHudson

.github/workflows/playwright.yml

@@ -1,39 +1,40 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
 jobs:
   test:
     env:
       NODE_ENV: development
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: lts/*
-    - name: Install dependencies
-      run: npm ci --include=dev
-    # adapted from https://github.com/liam-hq/liam/pull/716/files
-    - name: Cache Playwright Browsers
-      id: playwright-cache
-      uses: actions/cache@v4
-      with:
-        path: ~/.cache/ms-playwright
-        key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          playwright-${{ runner.os }}-
-    - name: Install Playwright Browsers
-      if: steps.playwright-cache.outputs.cache-hit != 'true'
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - uses: pnpm/action-setup@v4
+      - name: Install dependencies
+        run: pnpm i
+      # adapted from https://github.com/liam-hq/liam/pull/716/files
+      - name: Cache Playwright Browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            playwright-${{ runner.os }}-
+      - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 *.bat
 
+package-lock.json
+
 .env
 
 # Playwright

README.md

@@ -1,6 +1,6 @@
 # Web Hot Reloader
 
-Automatically update your CSS in real-time, without having to add a single line of code to your project's codebase.
+Automatically reload your HTML, CSS, and image resources within the browsre in real-time, without having to add a single line of code to your project's codebase.
 
 - 🪶 Lightweight
 - 🌻 Works with vanilla JS
@@ -12,7 +12,7 @@ Automatically update your CSS in real-time, without having to add a single line
 
 Frameworks like [React](https://github.com/facebook/react) have spoiled us with features like HMR (hot module reload), reducing developer friction when making small, incremental changes. Wouldn't it be nice to have a lightweight solution for vanilla JS projects, without having to use a framework?
 
-And so, Web Hot Reloader was born. It consists of two parts: a Node.js process that lists to a directory for CSS file changes, and a script to inject websocket code into your web page.
+And so, Web Hot Reloader was born. It consists of two parts: a Node.js process that watches to a directory for file changes, and a script to inject WebSocket code into your web page.
 
 ## Setup
 
@@ -23,21 +23,23 @@ Prerequisites:
 - [Node.js](https://nodejs.org/en/download)
 - Clone the repo
 
-### Running the program
+Ensure `node_modules` are installed with `pnpm i` (`npm i` will also work, but will generate a `package-lock.json` file)
 
-In my project, there is a `/css` folder containing all the CSS files. (See: [Current limitations](#current-limitations))
+### Running the program
 
-To initialize the hot reloader for this directory, we can type the following:
+To initialize the hot reloader for this project, we can type the following:
 
 ```cmd
-node app C:\xampp\app\brethudson\css
+node app C:\xampp\app\brethudson
 ```
 
 Tip: You can override `PORT` (default `3008`) and `NODE_ENV` (default `production`) in your environment variables.
 
 ### Getting your browser to listen
 
-Now, while you _could_ copy/paste [public/reloader.js](public/reloader.js) into your project and include it in every page that you want to use it on, that doesn't scale well, and also means that you would need to ensure it gets removed for the production/live site.
+(Coming soon: built-in proxy server)
+
+Now, while you _could_ copy/paste [public/reloader.js](public/reloader.js) into your project and include it in every page that you want to use it on, that doesn't scale well, and also means that you would need to ensure it gets removed in the production/live site.
 
 What I suggest is grabbing a browser extension such as [Tampermonkey](https://www.tampermonkey.net/), which will allow us to run scripts on certain pages!
 
@@ -47,16 +49,19 @@ Within this file, every `@match` line will correspond to a URL path to match. Fo
 
 ## Current limitations
 
-- Only CSS files are supported
-- No recursive folder watching
+- Only HTML, CSS, and image files are supported
+- ~~No recursive folder watching~~
 - JS support is not currently on the roadmap
+- No automatic script injection
 
 ## Future plans
 
 There really aren't any specific ones! Some things I would like to add:
 
-- Recursive listening (`C:/project/css` would be able to listen to `C:/project/css/sub-folder` as well - meaning it would be possible to just use `C:/project` as the directory)
-- <img> support
-- JS support
-- Project configuration files (`reloader.json` or `reloader.config.js`)
-- Publish to `npm`
+- [x] ~~Recursive listening (`C:/project/css` would be able to listen to `C:/project/css/sub-folder` as well - meaning it would be possible to just use `C:/project` as the directory)~~
+- [x] ~~HTML reloading support~~
+- [x] ~~`<img>`/favicon reloading support~~
+- [ ] Proxy server with hot reloader injection magic
+- [ ] Project configuration files (`reloader.json` or `reloader.config.js`)
+- [ ] Publish to `npm`
+- [ ] JS support (maybe?)

app/index.js

@@ -4,6 +4,7 @@ import http from 'node:http';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { default as ignore } from 'ignore';
 import { Server } from 'socket.io';
 import { instrument } from '@socket.io/admin-ui';
 
@@ -22,6 +23,93 @@ const [_nodePath, _scriptPath, ...args] = process.argv;
 const [_watchPath] = args;
 const watchPath = path.join(_watchPath);
 
+const pathsToIgnore = [
+	'.git',
+	'.log',
+	'.nyc_output',
+	'.sass-cache',
+	'.yarn',
+	'bower_components',
+	'coverage',
+	'node_modules',
+];
+
+const getKeyFromPath = (curPath) => {
+	const dirPath = path.join(watchPath, path.relative(watchPath, curPath));
+	return path.relative(watchPath, dirPath);
+};
+
+const dirIgnoreMap = new Map();
+const dirGitignoreMap = new Map();
+const addGitignore = (curPath) => {
+	const dirPath = path.join(watchPath, path.relative(watchPath, curPath));
+	const filePath = path.join(dirPath, '.gitignore');
+
+	const key = getKeyFromPath(dirPath);
+	if (dirIgnoreMap.has(key)) return;
+
+	let content = null;
+	const ig = ignore();
+	if (fs.existsSync(filePath)) {
+		content = [...pathsToIgnore, fs.readFileSync(filePath, 'utf-8')].join('\n');
+		ig.add(content);
+	}
+	dirIgnoreMap.set(key, ig);
+	dirGitignoreMap.set(key, content);
+	return Boolean(content);
+};
+
+const ignores = (_filePath) => {
+	const filePath = path.join(watchPath, path.relative(watchPath, _filePath));
+
+	const dirPath = path.dirname(filePath);
+	const baseName = path.basename(filePath);
+	const key = getKeyFromPath(dirPath + path.sep);
+
+	if (key === '') {
+		const ig = dirIgnoreMap.get(key);
+		const result = ig?.ignores(baseName) ?? false;
+		return result;
+	} else {
+		const dirs = [''].concat(key.split(path.sep));
+		for (let d = 0; d < dirs.length - 1; ++d) {
+			const ig = dirIgnoreMap.get(dirs[d]);
+			if (ig?.ignores(dirs[d + 1])) return true;
+		}
+		const ig = dirIgnoreMap.get(dirs.at(-1));
+		if (ig?.ignores(baseName)) return true;
+	}
+
+	return false;
+};
+
+const scanForGitignore = (dir) => {
+	const dirPath = path.join(watchPath, dir);
+
+	// scan for .gitignore first!
+	if (addGitignore(dirPath)) {
+		console.log(
+			`\tParsed "${path.join(
+				path.relative(watchPath, dirPath),
+				'.gitignore',
+			)}"`,
+		);
+	}
+
+	const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+	for (const entry of entries) {
+		if (entry.name === '.gitignore') continue;
+
+		const parentPath = path.relative(watchPath, entry.parentPath);
+		const filePath = path.join(parentPath, entry.name);
+		if (ignores(path.join(watchPath, filePath))) continue;
+
+		if (!entry.isFile()) scanForGitignore(filePath);
+	}
+};
+
+scanForGitignore('');
+
 const publicPath = path.join(__dirname, '../public');
 const server = http.createServer((req, res) => {
 	res.setHeader('Access-Control-Allow-Origin', '*');
@@ -63,7 +151,7 @@ instrument(io, { auth: false });
 
 let lastJsUpdate = Date.now();
 io.on('connection', (client) => {
-	const { origin: clientOrigin, pathName, assets } = client.handshake.query;
+	const { origin: clientOrigin, pathName } = client.handshake.query;
 
 	// TODO(bret): What about .php? or other files?
 	const paths = [
@@ -123,16 +211,16 @@ const imageExtensions = [
 ];
 
 const fileToEventMap = {
-	'.css': 'css-update',
 	'.html': 'html-update',
-	...Object.fromEntries(imageExtensions.map((e) => [e, 'image-update'])),
+	'.css': 'asset-update',
+	...Object.fromEntries(imageExtensions.map((e) => [e, 'asset-update'])),
 };
 
 const supportedFileExt = Object.keys(fileToEventMap);
 
 const sendUpdate = (eventType, fileName, contents) => {
 	const ext = path.extname(fileName);
-	const event = fileToEventMap[ext];
+	let event = fileToEventMap[ext];
 	if (!event) return;
 	const room = path.join(fileName);
 	io.sockets.to(room).emit(event, { fileName, contents });
@@ -177,14 +265,15 @@ const retry = async (callback) => {
 	throw error;
 };
 
-// TODO(bret): Do not commit recursive!!!
 fs.watch(watchPath, { recursive: true }, async (eventType, fileName) => {
 	if (!fileName) return;
 	if (eventType === 'rename') return;
 
 	if (!supportedFileExt.includes(path.extname(fileName))) return;
 
 	const filePath = path.join(watchPath, fileName);
+	if (ignores(filePath)) return;
+
 	if (!fs.existsSync(filePath)) return;
 
 	await retry(async () => {