Skip to content

Commit 2cb663d

Browse files
sghowerisghoweri
committed
WIP: swapping out the custom live server with off the shelf browsersync + 1st pass at wiring up the handlebars dev edition for easier UIKIt development
1 parent 77411c1 commit 2cb663d

File tree

10 files changed

+1137
-414
lines changed

10 files changed

+1137
-414
lines changed

‎.patternlabrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
buildDir:
3+
__dirname + '/packages/development-edition-engine-handlebars/public',
4+
};

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"nohoist": [
77
"@pattern-lab/engine-*",
88
"**/@pattern-lab/engine-*",
9-
"**/@pattern-lab/uikit-workshop"
9+
"**/@pattern-lab/uikit-workshop",
10+
"**/@pattern-lab/starterkit-handlebars-vanilla"
1011
]
1112
},
1213
"dependencies": {

‎packages/core/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"version": "5.3.0",
55
"main": "./src/index.js",
66
"dependencies": {
7+
"better-opn": "^1.0.0",
8+
"browser-sync": "^2.26.7",
79
"@pattern-lab/engine-mustache": "^5.0.0",
810
"@pattern-lab/live-server": "^5.0.0",
911
"chalk": "1.1.3",

‎packages/core/src/lib/server.js‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use strict';
22

33
const path = require('path');
4-
const liveServer = require('@pattern-lab/live-server');
4+
const browserSync = require('browser-sync').create();
5+
const opn = require('better-opn');
56

67
const events = require('./events');
78
const logger = require('./log');
@@ -48,10 +49,7 @@ const server = patternlab => {
4849
//watch for builds to complete
4950
patternlab.events.on(events.PATTERNLAB_BUILD_END, () => {
5051
if (serverReady) {
51-
_module.reload({
52-
file: '',
53-
action: 'reload',
54-
});
52+
browserSync.reload();
5553
}
5654
});
5755
};
@@ -62,9 +60,42 @@ const server = patternlab => {
6260
let resolveMsg = '';
6361
setTimeout(() => {
6462
try {
65-
liveServer.start(liveServerConfig);
66-
resolveMsg = `Pattern Lab is being served from http://127.0.0.1:${liveServerConfig.port}`;
67-
logger.info(resolveMsg);
63+
browserSync.init(
64+
{
65+
logLevel: 'info',
66+
ui: false,
67+
notify: false,
68+
open: false,
69+
logFileChanges: false,
70+
reloadOnRestart: true,
71+
port: liveServerConfig.port, // try to use this port but choose another if unavailable
72+
server: liveServerConfig.root,
73+
files: [
74+
`${liveServerConfig.root}/**/*.css`,
75+
`${liveServerConfig.root}/**/*.js`,
76+
],
77+
watchOptions: {
78+
ignoreInitial: false,
79+
},
80+
},
81+
function(err, bs) {
82+
const port = bs.options.get('port');
83+
serverReady = true; // so we only spin this up once Webpack has finished up initially
84+
85+
resolveMsg = `Pattern Lab is being served from http://127.0.0.1:${port}`;
86+
opn(`http://127.0.0.1:${port}`);
87+
logger.info(resolveMsg);
88+
}
89+
);
90+
91+
browserSync.watch(
92+
`${liveServerConfig.root}/**.html`,
93+
(event, file) => {
94+
if (!patternlab.isBusy) {
95+
browserSync.reload('**/*.html');
96+
}
97+
}
98+
);
6899
} catch (e) {
69100
const err = `Pattern Lab serve failed to start: ${e}`;
70101
logger.error(`Pattern Lab serve failed to start: ${e}`);
@@ -89,13 +120,15 @@ const server = patternlab => {
89120
let action;
90121
try {
91122
if (!patternlab.isBusy) {
92-
if (_data.file.indexOf('css') > -1 || _data.action === 'refresh') {
93-
action = 'refreshed CSS';
94-
liveServer.refreshCSS();
95-
} else {
96-
action = 'reloaded';
97-
liveServer.reload();
98-
}
123+
// @todo: re-evaluate to see if this specific logic is still necessary
124+
// if (_data.file.indexOf('css') > -1 || _data.action === 'refresh') {
125+
// action = 'refreshed CSS';
126+
// // browserSync.refreshCSS();
127+
// } else {
128+
// action = 'reloaded';
129+
// // browserSync.reload();
130+
// }
131+
browserSync.reload();
99132
resolve(`Server ${action} successfully`);
100133
}
101134
} catch (e) {

‎packages/development-edition-engine-handlebars/package.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
"pl:help": "patternlab --help",
99
"pl:install": "patternlab install --config ./patternlab-config.json",
1010
"pl:serve": "patternlab serve --config ./patternlab-config.json",
11-
"pl:version": "patternlab --version"
11+
"pl:version": "patternlab --version",
12+
"setup": "yarn --force && npx patternlab add --starterkits '@pattern-lab/starterkit-handlebars-vanilla' && npm run pl:build && npm run uikit:build",
13+
"start": "npm-run-all -p uikit:watch pl:serve",
14+
"uikit:watch": "cd ../uikit-workshop && npm run watch",
15+
"uikit:build": "cd ../uikit-workshop && npm run build"
1216
},
1317
"keywords": [
1418
"Pattern Lab",
@@ -24,7 +28,7 @@
2428
"url": "git://github.com/pattern-lab/patternlab-node.git"
2529
},
2630
"engines": {
27-
"node": ">=10.0"
31+
"node": ">=12.12.0"
2832
},
2933
"dependencies": {
3034
"@pattern-lab/cli": "^5.3.0",
@@ -33,6 +37,7 @@
3337
"@pattern-lab/engine-mustache": "^5.0.0",
3438
"@pattern-lab/plugin-tab": "^5.3.0",
3539
"@pattern-lab/starterkit-mustache-demo": "^5.0.0",
36-
"@pattern-lab/uikit-workshop": "^5.3.1"
40+
"@pattern-lab/uikit-workshop": "^5.3.1",
41+
"npm-run-all": "^4.1.5"
3742
}
3843
}

‎packages/uikit-workshop/package.json‎

Lines changed: 43 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -30,38 +30,6 @@
3030
"license": "MIT",
3131
"repository": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/uikit-workshop",
3232
"bugs": "https://github.com/pattern-lab/patternlab-node/issues",
33-
"devDependencies": {
34-
"@svgr/webpack": "^4.1.0",
35-
"autoprefixer": "^9.1.0",
36-
"babel-loader": "^8.0.2",
37-
"clean-css-loader": "^1.0.1",
38-
"clean-webpack-plugin": "0.1.19",
39-
"copy-webpack-plugin": "^5.0.2",
40-
"cosmiconfig": "^5.0.6",
41-
"critical": "^1.3.4",
42-
"critical-css-webpack-plugin": "^0.2.0",
43-
"css-loader": "^1.0.0",
44-
"html-loader": "^0.5.5",
45-
"html-webpack-plugin": "github:jantimon/html-webpack-plugin#webpack-4",
46-
"lit-element": "^2.2.1",
47-
"mini-css-extract-plugin": "^0.4.1",
48-
"no-emit-webpack-plugin": "^1.0.0",
49-
"node-sass": "^4.9.3",
50-
"node-sass-selector-importer": "^5.2.0",
51-
"penthouse": "^1.6.2",
52-
"postcss-loader": "^3.0.0",
53-
"raw-loader": "^0.5.1",
54-
"sass-loader": "^7.1.0",
55-
"style-loader": "^1.0.0",
56-
"svg-sprite-loader": "^4.1.6",
57-
"svg-transform-loader": "^2.0.8",
58-
"svgo": "^1.3.0",
59-
"svgo-loader": "^2.2.1",
60-
"uglifyjs-webpack-plugin": "^1.2.7",
61-
"webpack": "4.26.0",
62-
"webpack-cli": "^3.1.2",
63-
"workbox-build": "^3.4.1"
64-
},
6533
"dependencies": {
6634
"@babel/core": "^7.6.4",
6735
"@babel/plugin-proposal-class-properties": "^7.5.5",
@@ -78,56 +46,82 @@
7846
"@skatejs/element-preact": "^0.0.1",
7947
"@skatejs/renderer-lit-html": "^0.2.2",
8048
"@skatejs/renderer-preact": "^0.3.3",
49+
"@svgr/webpack": "^4.3.3",
8150
"@ungap/url-search-params": "^0.1.2",
8251
"@webcomponents/custom-elements": "^1.3.0",
83-
"@webcomponents/shadydom": "^1.6.0",
84-
"@webcomponents/template": "^1.4.0",
52+
"@webcomponents/shadydom": "^1.6.1",
53+
"@webcomponents/template": "^1.4.1",
54+
"autoprefixer": "^9.6.5",
55+
"babel-loader": "^8.0.6",
8556
"classnames": "^2.2.6",
86-
"clipboard": "^2.0.1",
57+
"clean-css-loader": "^1.0.1",
58+
"clean-webpack-plugin": "0.1.19",
59+
"clipboard": "^2.0.4",
60+
"copy-webpack-plugin": "^5.0.2",
8761
"core-js": "^3.3.6",
62+
"cosmiconfig": "^5.0.6",
63+
"critical-css-webpack-plugin": "^0.2.0",
64+
"critical": "^1.3.4",
65+
"css-loader": "^3.2.0",
8866
"deepmerge": "^2.1.1",
89-
"document-register-element": "^1.14.3",
67+
"document-register-element": "^1.13.3",
9068
"element-closest": "2.0.2",
91-
"es6-promise": "^4.2.4",
69+
"es6-promise": "^4.2.8",
9270
"fg-loadcss": "^2.1.0",
9371
"fg-loadjs": "^1.1.0",
94-
"fuse.js": "^3.2.1",
95-
"get-own-property-symbols": "^0.9.2",
72+
"fuse.js": "^3.4.5",
73+
"get-own-property-symbols": "^0.9.4",
9674
"hard-source-webpack-plugin-patch": "^0.13.3",
9775
"hogan.js": "^3.0.2",
9876
"htm": "^1.0.1",
77+
"html-loader": "^0.5.5",
78+
"html-webpack-plugin": "github:jantimon/html-webpack-plugin#webpack-4",
9979
"iframe-resizer": "^3.6.5",
100-
"lit-html": "^1.1.1",
101-
"mousetrap": "^1.6.2",
102-
"preact": "8.3.1",
80+
"lit-element": "^2.2.1",
81+
"lit-html": "^1.1.2",
82+
"local-chrome": "^0.1.0",
83+
"mini-css-extract-plugin": "^0.8.0",
84+
"mousetrap": "^1.6.3",
85+
"no-emit-webpack-plugin": "^1.0.0",
86+
"node-sass-selector-importer": "^5.2.0",
87+
"node-sass": "^4.13.0",
88+
"penthouse": "^2.2.2",
89+
"postcss-loader": "^3.0.0",
10390
"preact-compat": "3.18.4",
10491
"preact-context": "1.1.2",
10592
"preact-render-to-string": "^4.1.0",
93+
"preact": "8.3.1",
10694
"preload-webpack-plugin": "^3.0.0-beta.3",
10795
"prerender-spa-plugin": "^3.4.0",
10896
"pretty": "^2.0.0",
10997
"prismjs": "^1.15.0",
11098
"pwa-helpers": "^0.9.0",
111-
"react": "^16.8.6",
112-
"react-animate-height": "^2.0.4",
99+
"raw-loader": "^3.1.0",
113100
"react-autosuggest": "^9.4.2",
114101
"react-dom": "^16.8.6",
115102
"react-html-parser": "^2.0.2",
116103
"react-popper-tooltip": "^2.7.0",
117-
"redux": "3.7.2",
118104
"redux-thunk": "^2.3.0",
105+
"redux": "3.7.2",
119106
"reselect": "^3.0.1",
107+
"sass-loader": "^8.0.0",
120108
"scriptjs": "^2.5.8",
121109
"scroll-js": "^2.2.0",
122110
"skatejs": "^5.2.4",
123-
"ts-loader": "^6.2.0",
111+
"style-loader": "^1.0.0",
112+
"svg-sprite-loader": "^4.1.6",
113+
"svg-transform-loader": "^2.0.8",
114+
"svgo-loader": "^2.2.1",
115+
"svgo": "^1.3.0",
116+
"ts-loader": "^6.2.1",
124117
"url-search-params-polyfill": "^5.0.0",
125-
"webpack": "^4.35.3",
126-
"webpack-cli": "^3.3.5",
118+
"webpack-cli": "^3.3.9",
127119
"webpack-merge": "^4.2.2",
120+
"webpack": "^4.41.2",
128121
"whendefined": "^0.0.1",
129122
"wolfy87-eventemitter": "^5.2.6",
130-
"yargs": "^13.3.0"
123+
"workbox-build": "^3.4.1",
124+
"yargs": "^14.2.0"
131125
},
132126
"browserslist": [
133127
"last 2 version",

‎packages/uikit-workshop/src/html/index.html‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,22 @@
2020
as="image"
2121
href="styleguide/images/pattern-lab-logo--on-light.svg"
2222
/>
23-
24-
<script src="styleguide/data/patternlab-data.js" defer></script>
25-
<script src="annotations/annotations.js" defer></script>
26-
<script
27-
src="styleguide/js/patternlab-viewer.modern.js"
28-
type="module"
29-
></script>
3023
</head>
3124

3225
<body class="pl-c-body">
33-
<pl-layout>
34-
<pl-header></pl-header>
35-
<div class="pl-c-viewport-modal-wrapper">
36-
<pl-iframe></pl-iframe>
37-
<pl-drawer></pl-drawer>
38-
</div>
39-
</pl-layout>
26+
<pl-layout></pl-layout>
4027

4128
<!-- the template for the modal slider -->
4229
<script type="text/mustache" class="pl-js-panel-template-base">
4330
${require('./partials/base-template.html') }
4431
</script>
4532

33+
<script src="styleguide/data/patternlab-data.js" defer></script>
34+
<script src="annotations/annotations.js" defer></script>
35+
<script
36+
src="styleguide/js/patternlab-viewer.modern.js"
37+
type="module"
38+
></script>
4639
<script>
4740
// https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
4841
(function() {

‎packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,16 @@ class Layout extends BaseLitComponent {
6767
this.iframeElement.contentWindow.postMessage(obj, this.targetOrigin);
6868
}
6969
}
70+
71+
render() {
72+
return html`
73+
<pl-header></pl-header>
74+
<div class="pl-c-viewport-modal-wrapper">
75+
<pl-iframe></pl-iframe>
76+
<pl-drawer></pl-drawer>
77+
</div>
78+
`;
79+
}
7080
}
7181

7282
customElements.define('pl-layout', Layout);

0 commit comments

Comments
 (0)