UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline #915

sghoweri · 2018-07-29T12:13:24Z

Here’s the big one I’ve been waiting a long, long time to finally get into PL core 🎉

There’s a bunch of small, under the hood changes here (see commits for the specifics) but in a nutshell:

Migrate Pattern Lab’s UIKit away from Bower and fully onto NPM
Reorganize UIKit’s JavaScript into 3 main buckets to help with separating out the different concerns: the main JS entrypoints (which didn’t previously exist as physical files, based on how things had been set up), components, and utils.
Painstakingly go through every single JS file in PL and make sure every file properly pulls in and manages their own dependencies required
Fix a TON of broken JS code — undefined or improperly scoped variables and the like
Adds a very minimal Webpack build to bundle and minify the JS.

Lots more to come based off of this work but really just trying to start small to things keep things in working order + get us in a good spot to start working on some much more abitious work on the UI side of things!

Would love any help I can get to further test this out to make sure all the kinks and gotchas have been ironed out!

CC @pattern-lab/devs

…nger maintained jwerty library for very comparable Mousetrap library

…ariables being undefined.

…rs w/ required vars;

… how the viewport panel gets resized -- saving for a separate PR to limit scope of changes

…ned variables; refactor, clean up logic that opens/closes the active code panel

…ring panel animation to shift to using CSS vars + disable transitions temporarily when animating

…can pull in

…ic check to make sure typeahead's JS only gets initialized once

… components can pull in

…lab-viewer JS

…config that had been using Bower + script tags in the HTML

… JS logic that had been coming in from Bower + hard-coded HTML logic

… in other components

…esponding NPM dependencies

…kage.json

… auto-loaded.

sghoweri · 2018-07-29T13:53:47Z

By the way @bmuenzenmeyer, before you bring it up, I’d really love to run all these JS files through Prettier — I just wanted to wait till the overall code changes here were understood and OK’d first so we aren’t looking at 10x the number of JS changes 😉

…wport resizer

bmuenzenmeyer · 2018-07-29T14:56:30Z

Love it. Will provide a more comprehensive review ASAP.

bmuenzenmeyer · 2018-08-03T16:17:56Z

@sghoweri this is knock-down drag-out awesome work. Thank you so much for putting so much time and energy into it!

Am I testing this correctly:

from your branch...

$ npm install && npm run bootstrap
$ cd packages/uikit-workshop
$ npm run build

> @pattern-lab/uikit-workshop@1.0.0-alpha.7 build C:\src\patternlab-node-pr\packages\uikit-workshop
> gulp && npx webpack-cli --config webpack.config.js --progress

[10:27:52] Using gulpfile C:\src\patternlab-node-pr\packages\uikit-workshop\gulpfile.js[10:27:52] Starting 'build:css'...
[10:27:53] Starting 'clean:html'...
[10:27:53] Finished 'clean:html' after 46 ms
[10:27:53] Starting 'build:html'...
[10:27:53] Finished 'build:html' after 250 ms
Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead
[10:27:54] Finished 'build:css' after 1.99 s
[10:27:54] Starting 'default'...
[10:27:54] Finished 'default' after 58 μs
npx: installed 111 in 20.417s
Cannot find module 'webpack'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @pattern-lab/uikit-workshop@1.0.0-alpha.7 build: `gulp && npx webpack-cli --config webpack.config.js --progress`
npm ERR! Exit status 1

sghoweri · 2018-08-03T16:41:18Z

Hmm 🤔 that sounds about right.

I can take on look on my end once I’m back from lunch but off the top of my head I’m gonna guess that we might need to add webpack-cli as a dependency to our package.json file.

Maybe I had that globally installed?

…t to use locally installed version vs globally / temp version via npx

sghoweri · 2018-08-03T18:21:53Z

@bmuenzenmeyer - my latest push should fix that error you mentioned! Sorry about that -- totally missed that I hadn't wired that up to use a locally installed version of webpack-cli vs a globally installed version.

That part should now be good to go -- I'm now taking a quick peek at the merge conflicts on this.

# Conflicts: # packages/uikit-workshop/dist/index.html # packages/uikit-workshop/dist/styleguide/bower_components/EventEmitter.min.js # packages/uikit-workshop/dist/styleguide/bower_components/hogan-3.0.2.min.js # packages/uikit-workshop/dist/styleguide/bower_components/jquery.min.js # packages/uikit-workshop/dist/styleguide/bower_components/jwerty.min.js # packages/uikit-workshop/dist/styleguide/bower_components/prism.min.js # packages/uikit-workshop/dist/styleguide/bower_components/script.min.js # packages/uikit-workshop/dist/styleguide/bower_components/typeahead.bundle.min.js # packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js # packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.min.js # packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js # packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.min.js # packages/uikit-workshop/gulpfile.js # packages/uikit-workshop/package.json # packages/uikit-workshop/src/html/index.html # packages/uikit-workshop/src/scripts/components/modal-styleguide.js

sghoweri · 2018-08-03T19:06:03Z

@bmuenzenmeyer OK - I've gone in and resolved the couple of merge conflicts to get this up to date with the latest changes on dev, plus adjusted a couple small things in the JS based on some additional testing I've done on this.

There's a few CSS-related UI issues I'm aware of that I'll try to tackle this weekend (not yet sure if they're related to this PR itself or if they just existing issues -- if they're new it's almost certainly just a CleanCSS config to turn things down a little) but I'm pretty good about the JavaScript changes here all in all + how much better we'll be off once we start tackling some even more ambitious UI work 😉

bmuenzenmeyer · 2018-08-03T20:24:26Z

@sghoweri this is building now and looks good on a quick glance on the 🚌
going to give it a closer look this tonight / weekend though.

nice work man! 💃 🕺 🌮 🍺 🎺 🥁 🎸

bmuenzenmeyer · 2018-08-08T15:34:02Z

@sghoweri I've been travelling so this is taking a bit longer. Appreciate the patience!

sghoweri · 2018-08-08T19:32:39Z

@bmuenzenmeyer no worries - appreciate the update!

bmuenzenmeyer

Amazing body of work Salem. Thanks for this.

bmuenzenmeyer · 2018-08-14T07:24:53Z

packages/uikit-workshop/package.json

@@ -18,6 +17,11 @@
      "name": "Brian Muenzenmeyer",
      "homepage": "http://brianmuenzenmeyer.com",
      "role": "Developer"
+    },
+    {
+      "name": "Salem Ghoweri",


Well deserved!

bmuenzenmeyer · 2018-08-14T07:29:55Z

packages/uikit-workshop/views/partials/general-footer.mustache

@@ -46,11 +46,12 @@
 </script>

 <script id="pl-js-insert-{{ cacheBuster }}">
+  /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */


…-refactor-js UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline

sghoweri added 26 commits July 28, 2018 21:34

refactor: port over urlHandler

9266edf

refactor: port over postmessage.js, fix issues with patternData scope.

b0b8f66

refactor: port over data-saver.js; add required dependencies.

9859bc7

refactor: port over styleguide.js; add required deps + swap out no lo…

9d8fe9b

…nger maintained jwerty library for very comparable Mousetrap library

refactor: migrate layout.js; add mustache template deps

a64c283

refactor: port over modal-styleguide; add deps + fix JS errors with v…

e490a03

…ariables being undefined.

refactor: port over modal-viewer.js; add necessary deps + fix JS erro…

9daa9a5

…rs w/ required vars;

refactor: temporarily disable WIP code refactor for updating logic in…

ceff63e

… how the viewport panel gets resized -- saving for a separate PR to limit scope of changes

refactor: add required deps to panels-util; fix JS errors from undefi…

f7b4080

…ned variables; refactor, clean up logic that opens/closes the active code panel

refactor: add necessary deps to panels-viewer; fix broken JS; refacto…

e51e3be

…ring panel animation to shift to using CSS vars + disable transitions temporarily when animating

refactor: port panels JS over; add necessary deps

2656efc

refactor: port over plugin loader; export module so other components …

05d3589

…can pull in

refactor: port over pattern-finder; add deps, fix JS errors + add bas…

f0b77ac

…ic check to make sure typeahead's JS only gets initialized once

refactor: port over prism-languages JS plugin; export module so other…

dfd6d07

… components can pull in

chore: remove clipboard.min.js -- dependency now pulled in via NPM

23a216e

refactor: add new entrypoint files for patternlab-pattern and pattern…

464ee47

…lab-viewer JS

refactor: add new typeahead component -- replaces original typeahead …

fd3b5a2

…config that had been using Bower + script tags in the HTML

refactor: add new eventemitter util library -- replaces event emitter…

d094e30

… JS logic that had been coming in from Bower + hard-coded HTML logic

chore: add index.js to utils to simplify pulling in utility libraries…

98a47ba

… in other components

refactor: remove bower-specific config files and gulp tasks; add corr…

2ed013f

…esponding NPM dependencies

chore: remove old JS build scripts from Gulp; add missing deps to pac…

87dd04e

…kage.json

refactor: add minified loadJS script loader to PL footer; fix JS path…

02e3fc5

… auto-loaded.

fix: fix JS paths imported

1d7dec8

refactor: remove bower components shipped in the dist folder

b8a7283

refactor: consolidate built JS bundles

fec1147

refactor: add barebones basic Webpack build config

0219880

sghoweri added 3 commits July 29, 2018 10:29

chore: revert adding UIkit-specific deps to root package.json file

71c7a30

chore: temporarily disable in-progress UI updates relating to the vie…

94888d4

…wport resizer

fix: update PrismJS import

564da7a

bmuenzenmeyer self-requested a review August 3, 2018 14:59

fix: add webpack-cli as a uikit-workshop dependency; update npm scrip…

812efe9

…t to use locally installed version vs globally / temp version via npx

sghoweri mentioned this pull request Aug 13, 2018

UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

Merged

bmuenzenmeyer approved these changes Aug 14, 2018

View reviewed changes

bmuenzenmeyer merged commit 4adce73 into pattern-lab:dev Aug 14, 2018

sghoweri mentioned this pull request Aug 14, 2018

What’s Next for Pattern Lab’s UI? Epic Brainstorming + Next Steps #909

Open

15 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline #915

UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline #915

Uh oh!

sghoweri commented Jul 29, 2018 •

edited

Loading

Uh oh!

sghoweri commented Jul 29, 2018

Uh oh!

bmuenzenmeyer commented Jul 29, 2018

Uh oh!

bmuenzenmeyer commented Aug 3, 2018

Uh oh!

sghoweri commented Aug 3, 2018

Uh oh!

sghoweri commented Aug 3, 2018

Uh oh!

sghoweri commented Aug 3, 2018

Uh oh!

bmuenzenmeyer commented Aug 3, 2018

Uh oh!

bmuenzenmeyer commented Aug 8, 2018

Uh oh!

sghoweri commented Aug 8, 2018

Uh oh!

bmuenzenmeyer left a comment

Uh oh!

bmuenzenmeyer Aug 14, 2018

Uh oh!

bmuenzenmeyer Aug 14, 2018

Uh oh!

Uh oh!

UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline #915

UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline #915

Uh oh!

Conversation

sghoweri commented Jul 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sghoweri commented Jul 29, 2018

Uh oh!

bmuenzenmeyer commented Jul 29, 2018

Uh oh!

bmuenzenmeyer commented Aug 3, 2018

Uh oh!

sghoweri commented Aug 3, 2018

Uh oh!

sghoweri commented Aug 3, 2018

Uh oh!

sghoweri commented Aug 3, 2018

Uh oh!

bmuenzenmeyer commented Aug 3, 2018

Uh oh!

bmuenzenmeyer commented Aug 8, 2018

Uh oh!

sghoweri commented Aug 8, 2018

Uh oh!

bmuenzenmeyer left a comment

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer Aug 14, 2018

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer Aug 14, 2018

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sghoweri commented Jul 29, 2018 •

edited

Loading