From 77411c1d9d7b999d53e7cc71751a15b8f6e7ff39 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Thu, 14 Nov 2019 09:02:09 -0500 Subject: [PATCH 01/10] chore: update nvm versions to the latest version of Node supported --- .nvmrc | 2 +- packages/development-edition-engine-handlebars/.nvmrc | 2 +- packages/uikit-workshop/.nvmrc | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.nvmrc b/.nvmrc index d581945ced..7f976a5ae4 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -12.9.0 +12.12.0 diff --git a/packages/development-edition-engine-handlebars/.nvmrc b/packages/development-edition-engine-handlebars/.nvmrc index 95c4e8d271..7f976a5ae4 100644 --- a/packages/development-edition-engine-handlebars/.nvmrc +++ b/packages/development-edition-engine-handlebars/.nvmrc @@ -1 +1 @@ -10.0.0 \ No newline at end of file +12.12.0 diff --git a/packages/uikit-workshop/.nvmrc b/packages/uikit-workshop/.nvmrc index 95c4e8d271..7f976a5ae4 100644 --- a/packages/uikit-workshop/.nvmrc +++ b/packages/uikit-workshop/.nvmrc @@ -1 +1 @@ -10.0.0 \ No newline at end of file +12.12.0 From 2cb663d053e004ab17eb5af606ce289834bb89fc Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Thu, 14 Nov 2019 11:44:46 -0500 Subject: [PATCH 02/10] 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 --- .patternlabrc.js | 4 + package.json | 3 +- packages/core/package.json | 2 + packages/core/src/lib/server.js | 63 +- .../package.json | 11 +- packages/uikit-workshop/package.json | 92 +- packages/uikit-workshop/src/html/index.html | 21 +- .../lit-components/pl-layout/pl-layout.js | 10 + packages/uikit-workshop/webpack.config.js | 89 +- yarn.lock | 1256 +++++++++++++---- 10 files changed, 1137 insertions(+), 414 deletions(-) create mode 100644 .patternlabrc.js diff --git a/.patternlabrc.js b/.patternlabrc.js new file mode 100644 index 0000000000..5256ab8104 --- /dev/null +++ b/.patternlabrc.js @@ -0,0 +1,4 @@ +module.exports = { + buildDir: + __dirname + '/packages/development-edition-engine-handlebars/public', +}; diff --git a/package.json b/package.json index ba17a302d3..fc0ad3f552 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/packages/core/package.json b/packages/core/package.json index 5e860802f8..6ad2a779d2 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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", diff --git a/packages/core/src/lib/server.js b/packages/core/src/lib/server.js index f5101c5a4b..3215e0bc75 100644 --- a/packages/core/src/lib/server.js +++ b/packages/core/src/lib/server.js @@ -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'); @@ -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(); } }); }; @@ -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}`); @@ -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) { diff --git a/packages/development-edition-engine-handlebars/package.json b/packages/development-edition-engine-handlebars/package.json index 181a8da794..23dd862b23 100644 --- a/packages/development-edition-engine-handlebars/package.json +++ b/packages/development-edition-engine-handlebars/package.json @@ -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", @@ -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", @@ -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" } } diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index 99314ab027..8e211b50a1 100644 --- a/packages/uikit-workshop/package.json +++ b/packages/uikit-workshop/package.json @@ -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", @@ -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", diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html index 075adf6287..de321a589b 100644 --- a/packages/uikit-workshop/src/html/index.html +++ b/packages/uikit-workshop/src/html/index.html @@ -20,29 +20,22 @@ as="image" href="styleguide/images/pattern-lab-logo--on-light.svg" /> - - - - - - -
- - -
- + + + +