Skip to content
This repository was archived by the owner on Jun 27, 2019. It is now read-only.

Commit c696a6a

Browse files
raphaelokonraphaelokon
committed
Adding watch flag to serve command. Beautify help.js
1 parent 7323635 commit c696a6a

File tree

9 files changed

+159
-123
lines changed

9 files changed

+159
-123
lines changed

‎bin/cli-actions/help.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use strict';
22
module.exports = () => {
33
/* eslint-disable */
4-
console.log(' Examples:');
5-
console.log('');
6-
console.log(' $ patternlab init # Initialize a PatternLab project.');
7-
console.log(' $ patternlab <cmd> # Builds the PatternLab from the current dir');
8-
console.log(' $ patternlab <cmd> --config <path/to/patternlab-config> # PatternLab from a config in a specified directory');
9-
console.log('');
4+
console.log(`
5+
Examples:
6+
$ patternlab init # Initialize a PatternLab project.');
7+
$ patternlab <cmd> # Builds the PatternLab from the current dir');
8+
$ patternlab <cmd> --config <path/to/patternlab-config> # PatternLab from a config in a specified directory');`
9+
);
1010
/* eslint-enable */
1111
};

‎bin/cli-actions/serve.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use strict';
22
const resolveConfig = require('../resolve-config');
3-
const preview = require('../preview');
3+
const servePatterns = require('../serve');
44
const wrapAsync = require('../utils').wrapAsync;
55

66
const serve = options => wrapAsync(function*() {
7-
const config = yield resolveConfig(options.parent.config);
8-
preview(config);
7+
const config = yield resolveConfig(options.parent.config);
8+
servePatterns(config, options.watch);
99
});
1010

1111
module.exports = serve;

‎bin/patternlab.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ cli
7373
.command('serve')
7474
.alias('browse')
7575
.description('Starts a server to inspect files in browser')
76+
.option('-w, --watch', 'Start watching for changes')
7677
.action(serve);
7778

7879
// Show additional help

‎bin/preview.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎bin/serve.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
'use strict';
2+
const bs = require('browser-sync').create('PatternLab');
3+
const buildPatterns = require('./build');
4+
const patternlab = require('patternlab-node');
5+
const htmlInjector = require('bs-html-injector');
6+
const path = require('path');
7+
const _ = require('lodash');
8+
const isValidConfig = require('./validate-config');
9+
const copyWithPattern = require('./utils').copyWithPattern;
10+
const wrapAsync = require('./utils').wrapAsync;
11+
const error = require('./utils').error;
12+
13+
/**
14+
* @func serve
15+
* @desc Start a browser-sync server in the PatternLab public dir
16+
* @param {object} config - The passed PatternLab config
17+
* @param {boolean} watch - Whether to set up watches
18+
*/
19+
function serve(config, watch) {
20+
if (!isValidConfig) throw new TypeError('serve: Expects config not to be empty and of type object.');
21+
22+
if (!_.has(config, 'paths.public.root') || _.isEmpty(config.paths.public.root)) {
23+
throw new TypeError('serve: config.paths.public.root is empty or does not exist. Please check your PatternLab config.');
24+
}
25+
if (!_.has(config, 'paths.source.root') || _.isEmpty(config.paths.source.root)) {
26+
throw new TypeError('serve: config.paths.source.root is empty or does not exist. Please check your PatternLab config.');
27+
}
28+
29+
try {
30+
const pl = patternlab();
31+
const src = config.paths.source;
32+
const publicDir = path.resolve(config.paths.public.root);
33+
const sourceCSS = path.join(path.resolve(src.css), '/**/*.css');
34+
const sourceStyleguide = path.join(path.resolve(src.styleguide), '/**/*.*');
35+
const patterns = pl.getSupportedTemplateExtensions().map(dotExtension => path.join(path.resolve(src.patterns), `/**/*${dotExtension}`));
36+
37+
// The browser-sync config
38+
const bsConfig = {
39+
server: publicDir,
40+
snippetOptions: {
41+
blacklist: ['/index.html', '/', '/?*'] // Ignore all HTML files within the templates folder
42+
},
43+
notify: {
44+
styles: [
45+
'display: none',
46+
'padding: 15px',
47+
'font-family: sans-serif',
48+
'position: fixed',
49+
'font-size: 1em',
50+
'z-index: 9999',
51+
'bottom: 0px',
52+
'right: 0px',
53+
'border-top-left-radius: 5px',
54+
'background-color: #1B2032',
55+
'opacity: 0.4',
56+
'margin: 0',
57+
'color: white',
58+
'text-align: center'
59+
]
60+
}
61+
};
62+
63+
/**
64+
* @func copyAndReloadCSS
65+
*/
66+
const copyAndReloadCSS = () => wrapAsync(function *() {
67+
yield copyWithPattern(path.resolve(src.css), '**/*.css', path.resolve(config.paths.public.css));
68+
bs.reload('*.css');
69+
});
70+
71+
/**
72+
* @func copyAndReloadStyleguide
73+
*/
74+
const copyAndReloadStyleguide = () => wrapAsync(function *() {
75+
yield copyWithPattern(path.resolve(src.styleguide), '**/!(*.css)', path.resolve(config.paths.public.styleguide));
76+
yield copyWithPattern(path.resolve(src.styleguide), '**/*.css', path.resolve(config.paths.public.styleguide));
77+
bs.reload('*.css');
78+
});
79+
80+
/**
81+
* @func reload
82+
* @desc Calls browser-sync's reload method to tell browsers to refresh their page
83+
*/
84+
const buildAndReload = function () {
85+
buildPatterns(config);
86+
bs.reload();
87+
};
88+
89+
// Register plugins
90+
bs.use(htmlInjector, {
91+
files: [publicDir + '/index.html', publicDir + '../styleguide/styleguide.html']
92+
});
93+
94+
if (watch) {
95+
/**
96+
* 1. Watch source css, then copy css and callreloadCSS
97+
* 2. Watch source styleguide, then copy styleguide and css and call reloadCSS
98+
* 3. Watch pattern-specific and engine-specific extensions, run build and reload
99+
*/
100+
bs.watch(sourceCSS).on('change', copyAndReloadCSS); // 1
101+
bs.watch(sourceStyleguide).on('change', copyAndReloadStyleguide); // 2
102+
const patternWatches = [
103+
path.join(path.resolve(src.patterns), '**/*.json'),
104+
path.join(path.resolve(src.patterns), '**/*.md'),
105+
path.join(path.resolve(src.data), '*.json'),
106+
path.join(path.resolve(src.fonts), '*'),
107+
path.join(path.resolve(src.images), '*'),
108+
path.join(path.resolve(src.meta), '*'),
109+
path.join(path.resolve(src.annotations), '*')
110+
].concat(patterns); // 3
111+
112+
bs.watch(patternWatches).on('change', buildAndReload);
113+
}
114+
115+
// Init browser-sync
116+
bs.init(bsConfig);
117+
} catch (err) {
118+
error(err);
119+
}
120+
}
121+
122+
module.exports = serve;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "patternlab-node-cli",
33
"description": "Command-line interface (CLI) for the patternlab-node core.",
4-
"version": "0.0.1-alpha.3",
4+
"version": "0.0.1-alpha.4",
55
"bin": {
66
"patternlab": "bin/patternlab.js"
77
},

‎readme.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Usage: patternlab <cmd> [options]
2222
build|compile [options] Build the PatternLab. Optionally (re-)build only the patterns
2323
export Export a PatternLab patterns into a compressed format
2424
init [options] Initialize a PatternLab project from scratch or import an edition and/or starterkit
25-
serve|browse Starts a server to inspect files in browser
25+
serve|browse [options] Starts a server to inspect files in browser
2626
2727
Options:
2828
-h, --help output usage information
@@ -54,7 +54,7 @@ Passing no options starts the init in interactive mode
5454
-h, --help output usage information
5555
-p, --project-dir <path> Specify a project directory. Default: ./
5656
-e, --edition <name> Specify an edition to install. Default: edition-node
57-
-k, --starterkit <name> Specify a starterkit to install. Default: starterkit-mustache-demo
57+
-k, --starterkit <name> Specify a starterkit to install. Default: starterkit-mustache-base
5858
```
5959

6060
### Serve PatternLab
@@ -65,7 +65,8 @@ Starts a server to inspect files in browser
6565
6666
6767
Options:
68-
-h, --help output usage information
68+
-h, --help output usage information
69+
-w, --watch Start watching for changes
6970
```
7071

7172
### Export PatternLab

‎test/preview.test.js‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎test/serve.test.js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
const serve = require('../bin/cli-actions/serve');
1+
const proxyquire = require('proxyquire');
22
const tap = require('tap');
3+
const _ = require('lodash');
4+
const resolveConfig = require('../bin/resolve-config');
5+
const browserSyncMock = require('./mocks/browsersync.mock.js');
36
const wrapAsync = require('../bin/utils').wrapAsync;
47

5-
tap.test('Serve ->', t => {
6-
t.plan(2)
7-
t.test('with options empty', t => wrapAsync(function*() {
8-
try {
9-
yield serve()
10-
} catch (err) {
11-
t.type(err, TypeError, 'throws when options are empty');
12-
t.end();
13-
}
14-
}));
15-
t.test('with options not an object', t => wrapAsync(function*() {
16-
try {
17-
yield serve(123)
18-
} catch (err) {
19-
t.type(err, TypeError, 'throws when passed options are not of type object');
20-
t.end();
21-
}
22-
}));
23-
});
8+
// Require preview but mock patternlab so that we only test the module behavior
9+
const preview = proxyquire('../bin/serve', {'browser-sync': browserSyncMock});
10+
11+
tap.test('Serve ->', t => wrapAsync(function*() {
12+
const config = yield resolveConfig('./test/fixtures/patternlab-config.json');
13+
config.paths.source.root = undefined;
14+
t.throws(() => { preview(); }, {}, 'throws when config is empty');
15+
t.throws(() => { preview(123); }, {}, 'throws when config is not of type object');
16+
t.throws(() => {
17+
_.unset(config, 'paths.source.root');
18+
preview(config);
19+
}, {}, 'throws when no source root dir is set on config');
20+
t.throws(() => {
21+
_.unset(config, 'paths.public.root');
22+
preview(config);
23+
}, {}, 'throws when no public root dir is set on config');
24+
t.end();
25+
}));

0 commit comments

Comments
 (0)