feat: added watch files functionality

desktop-app/src/main/browser-sync.ts

@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import BrowserSync, { BrowserSyncInstance } from 'browser-sync';
+import fs from 'fs-extra';
 
 export const BROWSER_SYNC_PORT = 12719;
 export const BROWSER_SYNC_HOST = `localhost:${BROWSER_SYNC_PORT}`;
@@ -7,6 +9,8 @@ export const BROWSER_SYNC_URL = `https://${BROWSER_SYNC_HOST}/browser-sync/brows
 const browserSyncEmbed: BrowserSyncInstance = BrowserSync.create('embed');
 
 let created = false;
+let filesWatcher: ReturnType<BrowserSyncInstance['watch']> | null = null;
+let cssWatcher: ReturnType<BrowserSyncInstance['watch']> | null = null;
 
 export async function initInstance(): Promise<BrowserSyncInstance> {
   if (created) {
@@ -32,3 +36,35 @@ export async function initInstance(): Promise<BrowserSyncInstance> {
     );
   });
 }
+
+export function watchFiles(filePath: string) {
+  if (filePath && fs.existsSync(filePath)) {
+    const fileDir = filePath.substring(0, filePath.lastIndexOf('/'));
+
+    filesWatcher = browserSyncEmbed
+      // @ts-expect-error
+      .watch([filePath, `${fileDir}/**/**.js`])
+      .on('change', browserSyncEmbed.reload);
+
+    cssWatcher = browserSyncEmbed.watch(
+      `${fileDir}/**/**.css`,
+      // @ts-expect-error
+      (event: string, file: string) => {
+        if (event === 'change') {
+          browserSyncEmbed.reload(file);
+        }
+      }
+    );
+  }
+}
+
+export async function stopWatchFiles() {
+  if (filesWatcher) {
+    // @ts-expect-error
+    await filesWatcher.close();
+  }
+  if (cssWatcher) {
+    // @ts-expect-error
+    await cssWatcher.close();
+  }
+}

desktop-app/src/main/main.ts

@@ -9,14 +9,19 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, screen } from 'electron';
+import { app, BrowserWindow, shell, screen, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import cli from './cli';
 import { PROTOCOL } from '../common/constants';
 import MenuBuilder from './menu';
-import { isValidCliArgURL, resolveHtmlPath } from './util';
-import { BROWSER_SYNC_HOST, initInstance } from './browser-sync';
+import { resolveHtmlPath } from './util';
+import {
+  BROWSER_SYNC_HOST,
+  initInstance,
+  stopWatchFiles,
+  watchFiles,
+} from './browser-sync';
 import store from '../store';
 import { initWebviewContextMenu } from './webview-context-menu/register';
 import { initScreenshotHandlers } from './screenshot';
@@ -197,6 +202,19 @@ const createWindow = async () => {
     return { action: 'deny' };
   });
 
+  ipcMain.on('start-watching-file', async (event, fileInfo) => {
+    let filePath = fileInfo.path.replace('file://', '');
+    if (process.platform === 'win32') {
+      filePath = filePath.replace(/^\//, '');
+    }
+    app.addRecentDocument(filePath);
+    await stopWatchFiles();
+    watchFiles(filePath);
+  });
+
+  ipcMain.on('stop-watcher', async () => {
+    await stopWatchFiles();
+  });
   // Remove this if your app does not use auto updates
   // eslint-disable-next-line
   new AppUpdater();