Skip to content

Commit

Permalink
WIP: swapping out the custom live server with off the shelf browsersy…
Browse files Browse the repository at this point in the history 
…nc + 1st pass at wiring up the handlebars dev edition for easier UIKIt development
  • Loading branch information
@sghoweri
sghoweri committed Nov 14, 2019
1 parent 77411c1 commit 2cb663d
Show file tree
Hide file tree
Showing 10 changed files with 1,137 additions and 414 deletions.
4 changes: 4 additions & 0 deletions .patternlabrc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
buildDir:
__dirname + '/packages/development-edition-engine-handlebars/public',
};
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"nohoist": [
"@pattern-lab/engine-*",
"**/@pattern-lab/engine-*",
"**/@pattern-lab/uikit-workshop"
"**/@pattern-lab/uikit-workshop",
"**/@pattern-lab/starterkit-handlebars-vanilla"
]
},
"dependencies": {
Expand Down
2 changes: 2 additions & 0 deletions packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
"version": "5.3.0",
"main": "./src/index.js",
"dependencies": {
"better-opn": "^1.0.0",
"browser-sync": "^2.26.7",
"@pattern-lab/engine-mustache": "^5.0.0",
"@pattern-lab/live-server": "^5.0.0",
"chalk": "1.1.3",
Expand Down
63 changes: 48 additions & 15 deletions packages/core/src/lib/server.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
'use strict';

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

const events = require('./events');
const logger = require('./log');
Expand Down Expand Up @@ -48,10 +49,7 @@ const server = patternlab => {
//watch for builds to complete
patternlab.events.on(events.PATTERNLAB_BUILD_END, () => {
if (serverReady) {
_module.reload({
file: '',
action: 'reload',
});
browserSync.reload();
}
});
};
Expand All @@ -62,9 +60,42 @@ const server = patternlab => {
let resolveMsg = '';
setTimeout(() => {
try {
liveServer.start(liveServerConfig);
resolveMsg = `Pattern Lab is being served from http://127.0.0.1:${liveServerConfig.port}`;
logger.info(resolveMsg);
browserSync.init(
{
logLevel: 'info',
ui: false,
notify: false,
open: false,
logFileChanges: false,
reloadOnRestart: true,
port: liveServerConfig.port, // try to use this port but choose another if unavailable
server: liveServerConfig.root,
files: [
`${liveServerConfig.root}/**/*.css`,
`${liveServerConfig.root}/**/*.js`,
],
watchOptions: {
ignoreInitial: false,
},
},
function(err, bs) {
const port = bs.options.get('port');
serverReady = true; // so we only spin this up once Webpack has finished up initially

resolveMsg = `Pattern Lab is being served from http://127.0.0.1:${port}`;
opn(`http://127.0.0.1:${port}`);
logger.info(resolveMsg);
}
);

browserSync.watch(
`${liveServerConfig.root}/**.html`,
(event, file) => {
if (!patternlab.isBusy) {
browserSync.reload('**/*.html');
}
}
);
} catch (e) {
const err = `Pattern Lab serve failed to start: ${e}`;
logger.error(`Pattern Lab serve failed to start: ${e}`);
Expand All @@ -89,13 +120,15 @@ const server = patternlab => {
let action;
try {
if (!patternlab.isBusy) {
if (_data.file.indexOf('css') > -1 || _data.action === 'refresh') {
action = 'refreshed CSS';
liveServer.refreshCSS();
} else {
action = 'reloaded';
liveServer.reload();
}
// @todo: re-evaluate to see if this specific logic is still necessary
// if (_data.file.indexOf('css') > -1 || _data.action === 'refresh') {
// action = 'refreshed CSS';
// // browserSync.refreshCSS();
// } else {
// action = 'reloaded';
// // browserSync.reload();
// }
browserSync.reload();
resolve(`Server ${action} successfully`);
}
} catch (e) {
Expand Down
11 changes: 8 additions & 3 deletions packages/development-edition-engine-handlebars/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
"pl:help": "patternlab --help",
"pl:install": "patternlab install --config ./patternlab-config.json",
"pl:serve": "patternlab serve --config ./patternlab-config.json",
"pl:version": "patternlab --version"
"pl:version": "patternlab --version",
"setup": "yarn --force && npx patternlab add --starterkits '@pattern-lab/starterkit-handlebars-vanilla' && npm run pl:build && npm run uikit:build",
"start": "npm-run-all -p uikit:watch pl:serve",
"uikit:watch": "cd ../uikit-workshop && npm run watch",
"uikit:build": "cd ../uikit-workshop && npm run build"
},
"keywords": [
"Pattern Lab",
Expand All @@ -24,7 +28,7 @@
"url": "git://github.com/pattern-lab/patternlab-node.git"
},
"engines": {
"node": ">=10.0"
"node": ">=12.12.0"
},
"dependencies": {
"@pattern-lab/cli": "^5.3.0",
Expand All @@ -33,6 +37,7 @@
"@pattern-lab/engine-mustache": "^5.0.0",
"@pattern-lab/plugin-tab": "^5.3.0",
"@pattern-lab/starterkit-mustache-demo": "^5.0.0",
"@pattern-lab/uikit-workshop": "^5.3.1"
"@pattern-lab/uikit-workshop": "^5.3.1",
"npm-run-all": "^4.1.5"
}
}
92 changes: 43 additions & 49 deletions packages/uikit-workshop/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,38 +30,6 @@
"license": "MIT",
"repository": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/uikit-workshop",
"bugs": "https://github.com/pattern-lab/patternlab-node/issues",
"devDependencies": {
"@svgr/webpack": "^4.1.0",
"autoprefixer": "^9.1.0",
"babel-loader": "^8.0.2",
"clean-css-loader": "^1.0.1",
"clean-webpack-plugin": "0.1.19",
"copy-webpack-plugin": "^5.0.2",
"cosmiconfig": "^5.0.6",
"critical": "^1.3.4",
"critical-css-webpack-plugin": "^0.2.0",
"css-loader": "^1.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "github:jantimon/html-webpack-plugin#webpack-4",
"lit-element": "^2.2.1",
"mini-css-extract-plugin": "^0.4.1",
"no-emit-webpack-plugin": "^1.0.0",
"node-sass": "^4.9.3",
"node-sass-selector-importer": "^5.2.0",
"penthouse": "^1.6.2",
"postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1",
"sass-loader": "^7.1.0",
"style-loader": "^1.0.0",
"svg-sprite-loader": "^4.1.6",
"svg-transform-loader": "^2.0.8",
"svgo": "^1.3.0",
"svgo-loader": "^2.2.1",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "4.26.0",
"webpack-cli": "^3.1.2",
"workbox-build": "^3.4.1"
},
"dependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
Expand All @@ -78,56 +46,82 @@
"@skatejs/element-preact": "^0.0.1",
"@skatejs/renderer-lit-html": "^0.2.2",
"@skatejs/renderer-preact": "^0.3.3",
"@svgr/webpack": "^4.3.3",
"@ungap/url-search-params": "^0.1.2",
"@webcomponents/custom-elements": "^1.3.0",
"@webcomponents/shadydom": "^1.6.0",
"@webcomponents/template": "^1.4.0",
"@webcomponents/shadydom": "^1.6.1",
"@webcomponents/template": "^1.4.1",
"autoprefixer": "^9.6.5",
"babel-loader": "^8.0.6",
"classnames": "^2.2.6",
"clipboard": "^2.0.1",
"clean-css-loader": "^1.0.1",
"clean-webpack-plugin": "0.1.19",
"clipboard": "^2.0.4",
"copy-webpack-plugin": "^5.0.2",
"core-js": "^3.3.6",
"cosmiconfig": "^5.0.6",
"critical-css-webpack-plugin": "^0.2.0",
"critical": "^1.3.4",
"css-loader": "^3.2.0",
"deepmerge": "^2.1.1",
"document-register-element": "^1.14.3",
"document-register-element": "^1.13.3",
"element-closest": "2.0.2",
"es6-promise": "^4.2.4",
"es6-promise": "^4.2.8",
"fg-loadcss": "^2.1.0",
"fg-loadjs": "^1.1.0",
"fuse.js": "^3.2.1",
"get-own-property-symbols": "^0.9.2",
"fuse.js": "^3.4.5",
"get-own-property-symbols": "^0.9.4",
"hard-source-webpack-plugin-patch": "^0.13.3",
"hogan.js": "^3.0.2",
"htm": "^1.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "github:jantimon/html-webpack-plugin#webpack-4",
"iframe-resizer": "^3.6.5",
"lit-html": "^1.1.1",
"mousetrap": "^1.6.2",
"preact": "8.3.1",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"local-chrome": "^0.1.0",
"mini-css-extract-plugin": "^0.8.0",
"mousetrap": "^1.6.3",
"no-emit-webpack-plugin": "^1.0.0",
"node-sass-selector-importer": "^5.2.0",
"node-sass": "^4.13.0",
"penthouse": "^2.2.2",
"postcss-loader": "^3.0.0",
"preact-compat": "3.18.4",
"preact-context": "1.1.2",
"preact-render-to-string": "^4.1.0",
"preact": "8.3.1",
"preload-webpack-plugin": "^3.0.0-beta.3",
"prerender-spa-plugin": "^3.4.0",
"pretty": "^2.0.0",
"prismjs": "^1.15.0",
"pwa-helpers": "^0.9.0",
"react": "^16.8.6",
"react-animate-height": "^2.0.4",
"raw-loader": "^3.1.0",
"react-autosuggest": "^9.4.2",
"react-dom": "^16.8.6",
"react-html-parser": "^2.0.2",
"react-popper-tooltip": "^2.7.0",
"redux": "3.7.2",
"redux-thunk": "^2.3.0",
"redux": "3.7.2",
"reselect": "^3.0.1",
"sass-loader": "^8.0.0",
"scriptjs": "^2.5.8",
"scroll-js": "^2.2.0",
"skatejs": "^5.2.4",
"ts-loader": "^6.2.0",
"style-loader": "^1.0.0",
"svg-sprite-loader": "^4.1.6",
"svg-transform-loader": "^2.0.8",
"svgo-loader": "^2.2.1",
"svgo": "^1.3.0",
"ts-loader": "^6.2.1",
"url-search-params-polyfill": "^5.0.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-cli": "^3.3.9",
"webpack-merge": "^4.2.2",
"webpack": "^4.41.2",
"whendefined": "^0.0.1",
"wolfy87-eventemitter": "^5.2.6",
"yargs": "^13.3.0"
"workbox-build": "^3.4.1",
"yargs": "^14.2.0"
},
"browserslist": [
"last 2 version",
Expand Down
21 changes: 7 additions & 14 deletions packages/uikit-workshop/src/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,29 +20,22 @@
as="image"
href="styleguide/images/pattern-lab-logo--on-light.svg"
/>

<script src="styleguide/data/patternlab-data.js" defer></script>
<script src="annotations/annotations.js" defer></script>
<script
src="styleguide/js/patternlab-viewer.modern.js"
type="module"
></script>
</head>

<body class="pl-c-body">
<pl-layout>
<pl-header></pl-header>
<div class="pl-c-viewport-modal-wrapper">
<pl-iframe></pl-iframe>
<pl-drawer></pl-drawer>
</div>
</pl-layout>
<pl-layout></pl-layout>

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

<script src="styleguide/data/patternlab-data.js" defer></script>
<script src="annotations/annotations.js" defer></script>
<script
src="styleguide/js/patternlab-viewer.modern.js"
type="module"
></script>
<script>
// https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
(function() {
Expand Down
10 changes: 10 additions & 0 deletions packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,16 @@ class Layout extends BaseLitComponent {
this.iframeElement.contentWindow.postMessage(obj, this.targetOrigin);
}
}

render() {
return html`
<pl-header></pl-header>
<div class="pl-c-viewport-modal-wrapper">
<pl-iframe></pl-iframe>
<pl-drawer></pl-drawer>
</div>
`;
}
}

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

0 comments on commit 2cb663d

Please sign in to comment.