[added] the livereload helper function

Author: thealjey

interfaces/webcompiler.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import type {ProgramData, ProgramDataCallback, StringOrErrorCallback, ResultOrErrorCallback,
+import type {ProgramData, ProgramDataCallback, StringOrErrorCallback, ResultOrErrorCallback, LiveReloadTrigger,
   ObjectOrErrorCallback, DevServerConfig, LintError, LintCallback, PostCSSWarning, NodeSassError} from '../src/typedef';
 
 declare module 'webcompiler' {
@@ -31,6 +31,7 @@ declare module 'webcompiler' {
   declare function watch(dir: string, type: string, callback: () => void): void;
   declare function yaml(filename: string, callback: ObjectOrErrorCallback): void;
   declare function findBinary(name: string, callback: ResultOrErrorCallback): void;
+  declare function livereload(): LiveReloadTrigger;
 
   declare class Message {}
 

src/DevServer.js

@@ -3,14 +3,13 @@
 import type {DevServerConfig} from './typedef';
 import {SASSCompiler} from './SASSCompiler';
 import {logError, log, consoleStyles} from './logger';
+import {livereload} from './livereload';
 import {watch} from './watch';
 import {getServer} from './webpack';
-import tinylr from 'tiny-lr';
 import {join} from 'path';
 import noop from 'lodash/noop';
 
-const LIVERELOAD_PORT = 35729,
-  WEB_PORT = 3000,
+const WEB_PORT = 3000,
   cwd = process.cwd(),
   {green} = consoleStyles,
   defaultOptions = {
@@ -124,12 +123,11 @@ export class DevServer {
     }
 
     const sass = new SASSCompiler(false),
-      lr = tinylr(),
+      lr = livereload(),
       compileSASS = sass.fe.bind(sass, style, join(contentBase, 'style.css'), () => {
-        lr.changed({body: {files: ['style.css']}});
+        lr('/style.css');
       });
 
-    lr.listen(LIVERELOAD_PORT);
     compileSASS();
     watch(cwd, 'scss', compileSASS);
   }

src/Documentation.js

@@ -4,12 +4,11 @@ import type {NativeProcess} from './NativeProcess';
 import {join} from 'path';
 import noop from 'lodash/noop';
 import {logError, logSequentialSuccessMessage} from './logger';
+import {livereload} from './livereload';
 import {findBinary} from './findBinary';
 import {watch} from './watch';
-import tinylr from 'tiny-lr';
 
-const LIVERELOAD_PORT = 35729,
-  cwd = process.cwd(),
+const cwd = process.cwd(),
   defaultOptions = {
     inputDir: join(cwd, 'src'),
     outputDir: join(cwd, 'docs'),
@@ -99,14 +98,12 @@ export class Documentation {
    * @param {Function} [callback=function () {}] - a callback function
    */
   watch(callback: () => void = noop) {
-    const lr = tinylr();
-
-    lr.listen(LIVERELOAD_PORT);
+    const lr = livereload();
 
     watch(this.options.inputDir, 'js', () => {
       this.run(() => {
         callback();
-        lr.changed({body: {files: '*'}});
+        lr();
       });
     });
     this.run(callback);

src/index.js

@@ -6,6 +6,7 @@ export {Documentation} from './Documentation';
 export {watch} from './watch';
 export {yaml} from './yaml';
 export {findBinary} from './findBinary';
+export {livereload} from './livereload';
 export {consoleStyles, log, logError, logPostCSSWarnings, logSASSError, logLintingErrors,
   logSequentialSuccessMessage} from './logger';
 export {isNode, isProduction, babelBEOptions, babelFEOptions} from './util';

src/livereload.js

@@ -0,0 +1,46 @@
+/* @flow */
+
+import type {LiveReloadTrigger} from './typedef';
+import tinylr from 'tiny-lr';
+
+const LIVERELOAD_PORT = 35729;
+
+let reloadFn;
+
+/**
+ * Starts a LiveReload server and returns a function that triggers the reload.
+ *
+ * @function livereload
+ * @return {LiveReloadTrigger} the trigger function
+ * @example
+ * <link rel="stylesheet" href="css/style.css">
+ * @example
+ * import {livereload} from 'webcompiler';
+ * // or - import {livereload} from 'webcompiler/lib/livereload';
+ * // or - var livereload = require('webcompiler').livereload;
+ * // or - var livereload = require('webcompiler/lib/livereload').livereload;
+ *
+ * // initialize the server
+ * const lr = livereload();
+ *
+ * // only reload the styles
+ * lr('css/style.css');
+ *
+ * // refresh the whole page
+ * lr('*');
+ * // or simply
+ * lr();
+ */
+export function livereload(): LiveReloadTrigger {
+  if (!reloadFn) {
+    const lr = tinylr();
+
+    lr.listen(LIVERELOAD_PORT);
+
+    reloadFn = (file: string = '*') => {
+      lr.changed({body: {files: [file]}});
+    };
+  }
+
+  return reloadFn;
+}

src/typedef.js

@@ -214,3 +214,10 @@ export type WatchmanResponse = {
  * @param {WatchmanResponse} response - a watchman response object
  */
 export type WatchCallback = (response: WatchmanResponse) => void;
+
+/**
+ * @callback LiveReloadTrigger
+ * @param {string} [file="*"] - a file to reload (same path as written in the HTML document that includes it) or `"*"`
+ *                              for a full page refresh
+ */
+export type LiveReloadTrigger = (file?: string) => void;