feat(server): beginning of refator

Author: bmuenzenmeyer

packages/core/src/index.js

@@ -25,7 +25,7 @@ let fs = require('fs-extra'); // eslint-disable-line
 let ui_builder = require('./lib/ui_builder'); // eslint-disable-line
 let copier = require('./lib/copier'); // eslint-disable-line
 let pattern_exporter = new pe(); // eslint-disable-line
-let serve = require('./lib/serve'); // eslint-disable-line
+let serverModule = require('./lib/server'); // eslint-disable-line
 
 //bootstrap update notifier
 updateNotifier({
@@ -46,7 +46,9 @@ const patternlab_module = function(config) {
   const PatternLabClass = require('./lib/patternlab');
   const patternlab = new PatternLabClass(config);
 
-  return {
+  const self = this;
+
+  const _api = {
     /**
      * Returns current version
      *
@@ -90,10 +92,15 @@ const patternlab_module = function(config) {
               .then(() => {
                 patternlab.isBusy = false;
                 // only wire up this listener and the one inside serve.js
+                // figure out how to detect if serve was called. we should not assume it was
                 if (
-                  this.events.listenerCount(
-                    events.PATTERNLAB_PATTERN_CHANGE
-                  ) === 1
+                  patternlab.serverReady //check for server presence
+                    ? this.events.listenerCount(
+                        events.PATTERNLAB_PATTERN_CHANGE
+                      ) === 1 //if the server is started, it has already setup one listener
+                    : !this.events.listenerCount(
+                        events.PATTERNLAB_PATTERN_CHANGE
+                      ) // else, check for the presnce of none
                 ) {
                   this.events.on(events.PATTERNLAB_PATTERN_CHANGE, () => {
                     if (!patternlab.isBusy) {
@@ -212,16 +219,30 @@ const patternlab_module = function(config) {
      * @param {bool} options.watch **ALWAYS OVERRIDDEN to `true`** whether or not Pattern Lab should watch configured `source/` directories for changes to rebuild
      * @returns {Promise} a promise fulfilled when build is complete
      */
-    serve: function(options) {
-      options.watch = true;
-      return this.build(options).then(function() {
-        serve(patternlab);
-        return Promise.resolve();
-      });
+    server: {
+      serve: function(options) {
+        console.log(self);
+        options.watch = true;
+        return self
+          .build(options)
+          .then(() => serverModule.serve(patternlab))
+          .then(() => Promise.resolve())
+          .catch(e =>
+            logger.error(`error inside core index.js server serve: ${e}`)
+          );
+      },
+      reload: function() {
+        return serverModule.reload(); //TODO - will this work, or does the promise need to be setup here?
+      },
+      refreshCSS: function() {
+        return serverModule.refreshCSS(); //TODO - see above
+      },
     },
 
     events: patternlab.events,
   };
+
+  return _api;
 };
 
 patternlab_module.getDefaultConfig = getDefaultConfig;

packages/core/src/lib/serve.js

@@ -0,0 +1,132 @@
+'use strict';
+const path = require('path');
+const liveServer = require('@pattern-lab/live-server');
+
+const events = require('./events');
+const logger = require('./log');
+
+// initialize serverReady outside of the serve method
+
+let serverReady = false;
+
+// this would be a private init to manage stuff for all exposed module methods
+const getServerReady = () => serverReady;
+const setServerReady = bool => {
+  serverReady = bool;
+};
+
+const serve = patternlab => {
+  //externalize the serverReady flag
+  //let serverReady = false;
+  setServerReady(false);
+
+  // our default liveserver config
+  const defaults = {
+    root: patternlab.config.paths.public.root,
+    open: true,
+    ignore: path.join(path.resolve(patternlab.config.paths.public.root)),
+    file: 'index.html',
+    logLevel: 0, // errors only
+    wait: 1000,
+    port: 3000,
+  };
+
+  return Promise.all(
+    _.map(patternlab.uikits, uikit => {
+      defaults.root = path.resolve(
+        path.join(
+          process.cwd(),
+          uikit.outputDir,
+          patternlab.config.paths.public.root
+        )
+      );
+      defaults.ignore = path.resolve(
+        path.join(
+          process.cwd(),
+          uikit.outputDir,
+          patternlab.config.paths.public.root
+        )
+      );
+
+      // allow for overrides should they exist inside patternlab-config.json
+      const liveServerConfig = Object.assign(
+        {},
+        defaults,
+        patternlab.config.serverOptions
+      );
+
+      // watch for asset changes, and reload appropriately
+      patternlab.events.on(events.PATTERNLAB_PATTERN_ASSET_CHANGE, data => {
+        if (getServerReady()) {
+          const reload = setInterval(() => {
+            if (!patternlab.isBusy) {
+              if (data.file.indexOf('css') > -1) {
+                liveServer.refreshCSS();
+              } else {
+                liveServer.reload();
+              }
+              clearInterval(reload);
+            }
+          }, 1000);
+        }
+      });
+
+      //watch for pattern changes, and reload
+      patternlab.events.on(events.PATTERNLAB_PATTERN_CHANGE, () => {
+        if (getServerReady()) {
+          const reload = setInterval(() => {
+            if (!patternlab.isBusy) {
+              liveServer.reload();
+              clearInterval(reload);
+            }
+          }, 1000);
+        }
+      });
+
+      return new Promise((resolve, reject) => {
+        //start!
+        setTimeout(() => {
+          try {
+            liveServer.start(liveServerConfig);
+            logger.info(
+              `Pattern Lab is being served from http://127.0.0.1:${
+                liveServerConfig.port
+              }`
+            );
+            setServerReady(true);
+            resolve('Server started!');
+          } catch (e) {
+            reject(e);
+          }
+        }, liveServerConfig.wait);
+      });
+    })
+  );
+};
+
+const reload = () => {
+  return new Promise((resolve, reject) => {
+    if (!getServerReady()) {
+      reject('Cannot reload because server is not ready');
+    }
+    liveServer.reload();
+    resolve('Server reloaded');
+  });
+};
+
+const refreshCSS = () => {
+  return new Promise((resolve, reject) => {
+    if (!getServerReady()) {
+      reject('Cannot reload because server is not ready');
+    }
+    liveServer.refreshCSS();
+    resolve('CSS refreshed');
+  });
+};
+
+//expose as 'server' module with methods serve, reload, and refreshCSS
+module.exports = {
+  serve,
+  reload,
+  refreshCSS,
+};