Adding watch flag to serve command. Beautify help.js

packages/patternlab-node-cli/bin/cli-actions/help.js

@@ -1,11 +1,11 @@
 'use strict';
 module.exports = () => {
 	/* eslint-disable */
-	console.log('  Examples:');
-	console.log('');
-	console.log('    $ patternlab init # Initialize a PatternLab project.');
-	console.log('    $ patternlab <cmd> # Builds the PatternLab from the current dir');
-	console.log('    $ patternlab <cmd> --config <path/to/patternlab-config> # PatternLab from a config in a specified directory');
-	console.log('');
+	console.log(`
+  Examples:
+    $ patternlab init # Initialize a PatternLab project.');
+    $ patternlab <cmd> # Builds the PatternLab from the current dir');
+    $ patternlab <cmd> --config <path/to/patternlab-config> # PatternLab from a config in a specified directory');`
+	);
 	/* eslint-enable */
 };

packages/patternlab-node-cli/bin/cli-actions/serve.js

@@ -1,11 +1,11 @@
 'use strict';
 const resolveConfig = require('../resolve-config');
-const preview = require('../preview');
+const servePatterns = require('../serve');
 const wrapAsync = require('../utils').wrapAsync;
 
 const serve = options => wrapAsync(function*() {
-	const config = yield resolveConfig(options.parent.config);
-	preview(config);
+  const config = yield resolveConfig(options.parent.config);
+  servePatterns(config, options.watch);
 });
 
 module.exports = serve;

packages/patternlab-node-cli/bin/patternlab.js

@@ -73,6 +73,7 @@ cli
 	.command('serve')
 	.alias('browse')
 	.description('Starts a server to inspect files in browser')
+	.option('-w, --watch', 'Start watching for changes')
 	.action(serve);
 
 // Show additional help

packages/patternlab-node-cli/bin/serve.js

@@ -0,0 +1,122 @@
+'use strict';
+const bs = require('browser-sync').create('PatternLab');
+const buildPatterns = require('./build');
+const patternlab = require('patternlab-node');
+const htmlInjector = require('bs-html-injector');
+const path = require('path');
+const _ = require('lodash');
+const isValidConfig = require('./validate-config');
+const copyWithPattern = require('./utils').copyWithPattern;
+const wrapAsync = require('./utils').wrapAsync;
+const error = require('./utils').error;
+
+/**
+ * @func serve
+ * @desc Start a browser-sync server in the PatternLab public dir
+ * @param {object} config - The passed PatternLab config
+ * @param {boolean} watch - Whether to set up watches
+ */
+function serve(config, watch) {
+	if (!isValidConfig) throw new TypeError('serve: Expects config not to be empty and of type object.');
+
+	if (!_.has(config, 'paths.public.root') || _.isEmpty(config.paths.public.root)) {
+		throw new TypeError('serve: config.paths.public.root is empty or does not exist. Please check your PatternLab config.');
+	}
+	if (!_.has(config, 'paths.source.root') || _.isEmpty(config.paths.source.root)) {
+		throw new TypeError('serve: config.paths.source.root is empty or does not exist. Please check your PatternLab config.');
+	}
+
+	try {
+		const pl = patternlab();
+		const src = config.paths.source;
+		const publicDir = path.resolve(config.paths.public.root);
+		const sourceCSS = path.join(path.resolve(src.css), '/**/*.css');
+		const sourceStyleguide = path.join(path.resolve(src.styleguide), '/**/*.*');
+		const patterns = pl.getSupportedTemplateExtensions().map(dotExtension => path.join(path.resolve(src.patterns), `/**/*${dotExtension}`));
+
+		// The browser-sync config
+		const bsConfig = {
+			server: publicDir,
+			snippetOptions: {
+				blacklist: ['/index.html', '/', '/?*'] // Ignore all HTML files within the templates folder
+			},
+			notify: {
+				styles: [
+					'display: none',
+					'padding: 15px',
+					'font-family: sans-serif',
+					'position: fixed',
+					'font-size: 1em',
+					'z-index: 9999',
+					'bottom: 0px',
+					'right: 0px',
+					'border-top-left-radius: 5px',
+					'background-color: #1B2032',
+					'opacity: 0.4',
+					'margin: 0',
+					'color: white',
+					'text-align: center'
+				]
+			}
+		};
+
+		/**
+		 * @func copyAndReloadCSS
+		 */
+		const copyAndReloadCSS = () => wrapAsync(function *() {
+			yield copyWithPattern(path.resolve(src.css), '**/*.css', path.resolve(config.paths.public.css));
+			bs.reload('*.css');
+		});
+
+		/**
+		 * @func copyAndReloadStyleguide
+		 */
+		const copyAndReloadStyleguide = () => wrapAsync(function *() {
+			yield copyWithPattern(path.resolve(src.styleguide), '**/!(*.css)', path.resolve(config.paths.public.styleguide));
+			yield copyWithPattern(path.resolve(src.styleguide), '**/*.css', path.resolve(config.paths.public.styleguide));
+			bs.reload('*.css');
+		});
+
+		/**
+		 * @func reload
+		 * @desc Calls browser-sync's reload method to tell browsers to refresh their page
+		 */
+		const buildAndReload = function () {
+			buildPatterns(config);
+			bs.reload();
+		};
+
+		// Register plugins
+		bs.use(htmlInjector, {
+			files: [publicDir + '/index.html', publicDir + '../styleguide/styleguide.html']
+		});
+
+		if (watch) {
+			/**
+			 * 1. Watch source css, then copy css and callreloadCSS
+			 * 2. Watch source styleguide, then copy styleguide and css and call reloadCSS
+			 * 3. Watch pattern-specific and engine-specific extensions, run build and reload
+			 */
+			bs.watch(sourceCSS).on('change', copyAndReloadCSS); // 1
+			bs.watch(sourceStyleguide).on('change', copyAndReloadStyleguide); // 2
+			const patternWatches = [
+				path.join(path.resolve(src.patterns), '**/*.json'),
+				path.join(path.resolve(src.patterns), '**/*.md'),
+				path.join(path.resolve(src.data), '*.json'),
+				path.join(path.resolve(src.fonts), '*'),
+				path.join(path.resolve(src.images), '*'),
+				path.join(path.resolve(src.meta), '*'),
+				path.join(path.resolve(src.annotations), '*')
+			].concat(patterns); // 3
+
+			bs.watch(patternWatches).on('change', buildAndReload);
+		}
+
+		// Init browser-sync
+		bs.init(bsConfig);
+	} catch (err) {
+		error(err);
+	}
+}
+
+module.exports = serve;

packages/patternlab-node-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "patternlab-node-cli",
   "description": "Command-line interface (CLI) for the patternlab-node core.",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "bin": {
     "patternlab": "bin/patternlab.js"
   },

packages/patternlab-node-cli/readme.md

@@ -22,7 +22,7 @@ Usage: patternlab <cmd> [options]
 		build|compile [options]   Build the PatternLab. Optionally (re-)build only the patterns
 		export                    Export a PatternLab patterns into a compressed format
 		init [options]            Initialize a PatternLab project from scratch or import an edition and/or starterkit
-		serve|browse              Starts a server to inspect files in browser
+		serve|browse [options]    Starts a server to inspect files in browser
 	
 	Options:
 		-h, --help           output usage information
@@ -54,7 +54,7 @@ Passing no options starts the init in interactive mode
 		-h, --help                output usage information
 		-p, --project-dir <path>  Specify a project directory. Default: ./
 		-e, --edition <name>      Specify an edition to install. Default: edition-node
-		-k, --starterkit <name>   Specify a starterkit to install. Default: starterkit-mustache-demo
+		-k, --starterkit <name>   Specify a starterkit to install. Default: starterkit-mustache-base
 ```
 
 ### Serve PatternLab
@@ -65,7 +65,8 @@ Starts a server to inspect files in browser
 
 
 	Options:
-		-h, --help  output usage information
+		-h, --help   output usage information
+		-w, --watch  Start watching for changes
 ```
 
 ### Export PatternLab

packages/patternlab-node-cli/test/serve.test.js

@@ -1,23 +1,25 @@
-const serve = require('../bin/cli-actions/serve');
+const proxyquire = require('proxyquire');
 const tap = require('tap');
+const _ = require('lodash');
+const resolveConfig = require('../bin/resolve-config');
+const browserSyncMock = require('./mocks/browsersync.mock.js');
 const wrapAsync = require('../bin/utils').wrapAsync;
 
-tap.test('Serve ->', t => {
-	t.plan(2)
-	t.test('with options empty', t => wrapAsync(function*() {
-		try {
-			yield serve()
-		} catch (err) {
-			t.type(err, TypeError, 'throws when options are empty');
-			t.end();
-		}
-	}));
-	t.test('with options not an object', t => wrapAsync(function*() {
-		try {
-			yield serve(123)
-		} catch (err) {
-			t.type(err, TypeError, 'throws when passed options are not of type object');
-			t.end();
-		}
-	}));
-});
+// Require preview but mock patternlab so that we only test the module behavior
+const preview = proxyquire('../bin/serve', {'browser-sync': browserSyncMock});
+
+tap.test('Serve ->', t => wrapAsync(function*() {
+	const config = yield resolveConfig('./test/fixtures/patternlab-config.json');
+	config.paths.source.root = undefined;
+	t.throws(() => { preview(); }, {}, 'throws when config is empty');
+	t.throws(() => { preview(123); }, {}, 'throws when config is not of type object');
+	t.throws(() => {
+		_.unset(config, 'paths.source.root');
+		preview(config);
+	}, {}, 'throws when no source root dir is set on config');
+	t.throws(() => {
+		_.unset(config, 'paths.public.root');
+		preview(config);
+	}, {}, 'throws when no public root dir is set on config');
+	t.end();
+}));