Added per mimetype reload strategies and stylesheet live reloading.

src/live-reload.js

@@ -14,21 +14,6 @@ import 'rxjs/add/operator/mergeMap';
 import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/timeout';
 
-export function enableLiveReload(options={}) {
-  let { strategy } = options;
-
-  if (process.type !== 'browser' || !global.globalCompilerHost) throw new Error("Call this from the browser process, right after initializing electron-compile");
-
-  switch(strategy) {
-  case 'react-hmr':
-    enableReactHMR();
-    break;
-  case 'naive':
-  default:
-    enableLiveReloadNaive();
-  }
-}
-
 let BrowserWindow;
 if (process.type === 'browser') {
   BrowserWindow = require('electron').BrowserWindow;
@@ -47,38 +32,78 @@ function reloadAllWindows() {
   return Promise.all(ret);
 }
 
-function enableLiveReloadNaive() {
-  let filesWeCareAbout = global.globalCompilerHost.listenToCompileEvents()
-    .filter(x => !FileChangedCache.isInNodeModules(x.filePath));
-
-  let weShouldReload = filesWeCareAbout
-    .mergeMap(x => watchPath(x.filePath).map(() => x))
-    .guaranteedThrottle(1*1000);
+function triggerHMRInRenderers() {
+  BrowserWindow.getAllWindows().forEach((window) => {
+    window.webContents.send('__electron-compile__HMR');
+  });
 
-  return weShouldReload
-    .switchMap(() => Observable.defer(() => Observable.fromPromise(reloadAllWindows()).timeout(5*1000).catch(() => Observable.empty())))
-    .subscribe(() => console.log("Reloaded all windows!"));
+  return Promise.resolve(true);
 }
 
-function triggerHMRInRenderers() {
+function triggerAssetReloadInRenderers(filePath) {
   BrowserWindow.getAllWindows().forEach((window) => {
-    window.webContents.send('__electron-compile__HMR');
+    window.webContents.send('__electron-compile__stylesheet_reload', filePath);
   });
 
   return Promise.resolve(true);
 }
 
-function enableReactHMR() {
-  global.__electron_compile_hmr_enabled__ = true;
+const defaultOptions = {
+  'strategy': {
+    'text/html': 'naive',
+    'text/tsx': 'react-hmr',
+    'text/jsx': 'react-hmr',
+    'application/javascript': 'react-hmr',
+    'text/stylus': 'hot-stylesheets',
+    'text/sass': 'hot-stylesheets',
+    'text/scss': 'hot-stylesheets',
+    'text/css' : 'hot-stylesheets'
+  }
+}
 
-  let filesWeCareAbout = global.globalCompilerHost.listenToCompileEvents()
-    .filter(x => !FileChangedCache.isInNodeModules(x.filePath));
+function setupWatchHMR(filePath) {
+  watchPath(filePath).subscribe(() => triggerHMRInRenderers())
+}
 
-  let weShouldReload = filesWeCareAbout
-    .mergeMap(x => watchPath(x.filePath).map(() => x))
-    .guaranteedThrottle(1*1000);
+function setWatchHotAssets(filePath) {
+  watchPath(filePath).subscribe(() => triggerAssetReloadInRenderers(filePath))
+}
 
-  return weShouldReload
-    .switchMap(() => Observable.defer(() => Observable.fromPromise(triggerHMRInRenderers()).catch(() => Observable.empty())))
-    .subscribe(() => console.log("HMR sent to all windows!"));
+function setupWatchNaive(filePath) {
+  watchPath(filePath).subscribe(() => reloadAllWindows())
 }
+
+export function enableLiveReload(options=defaultOptions) {
+  let { strategy } = options;
+
+  if (process.type !== 'browser' || !global.globalCompilerHost) throw new Error("Call this from the browser process, right after initializing electron-compile");
+
+  // Enable the methods described in the reload strategy
+  for (let mime of Object.keys(strategy)) { 
+    switch(strategy[mime]) {
+    case 'react-hmr':
+      global.__electron_compile_hmr_enabled__ = true;
+      break;
+    case 'hot-stylesheets':
+      global.__electron_compile_stylesheet_reload_enabled__ = true;
+      break;
+    }
+  }
+
+  // Find all the files compiled by electron-compile and setup watchers
+  let filesWeCareAbout = global.globalCompilerHost.listenToCompileEvents()
+    .filter(x => !FileChangedCache.isInNodeModules(x.filePath))
+    .subscribe(x => {
+      switch(strategy[x.mimeType]) {
+      case 'react-hmr':
+        setupWatchHMR(x.filePath)
+        break;
+      case 'hot-stylesheets':
+        setWatchHotAssets(x.filePath)
+        break;
+      case 'naive':
+      default:
+        setupWatchNaive(x.filePath)
+      }
+    });
+}

src/require-hook.js

@@ -1,6 +1,7 @@
 import mimeTypes from '@paulcbetts/mime-types';
 
 let HMR = false;
+let stylesheetReload = false;
 
 const d = require('debug')('electron-compile:require-hook');
 let electron = null;
@@ -9,6 +10,7 @@ if (process.type === 'renderer') {
   window.__hot = [];
   electron = require('electron');
   HMR = electron.remote.getGlobal('__electron_compile_hmr_enabled__');
+  stylesheetReload = electron.remote.getGlobal('__electron_compile_stylesheet_reload_enabled__');
 
   if (HMR) {
     electron.ipcRenderer.on('__electron-compile__HMR', () => {
@@ -25,6 +27,30 @@ if (process.type === 'renderer') {
       window.__hot.forEach(fn => fn());
     });
   }
+
+  if (stylesheetReload) {
+    electron.ipcRenderer.on('__electron-compile__stylesheet_reload', (e, path) => {
+      /*if (path.match(/.(jpg|jpeg|png|gif)$/i)) {
+        let images = document.getElementsByTagName('img');
+
+        for (let img of images) {
+          let uri = img.src
+          if (uri.includes(path)) {
+            img.src = img.src; // trigger an update
+          }
+        }
+      } else {*/
+        let links = document.getElementsByTagName('link');
+
+        for (let link of links) {
+          let uri = link.href
+          if (uri.includes(path)) {
+            link.href = link.href; // trigger a reload for this stylesheet
+          }
+        }
+      //}
+    });
+  }
 }
 
 /**