UIKit Refactor Part 5: Redux + SkateJS + Preact-Powered Web Components

[sghoweri]

At a high level, this PR further chips away at the UIKit Refactor work that's going on over the past couple months.

Some of the worthwhile changes worth pointing out include:

1. Cleaning up and polishing a bunch of UIKit code from the past couple UIKit refactor PR's
2. Squashing a bunch of cross-browser bugs (especially in IE 11 and Firefox)
3. Adding in basic cosmic config support to the Webpack build (allowing for more customizable UIKit builds moving forward) and
4. The addition of a few new Web Component-based components (powered by Preact, JSX, Redux with localstorage caching, and SkateJS) to get some feedback on how I’m imagining PL's UI can further get extended and customized moving forward, while still being as framework-agnostic as possible.

For now, this PR is trying to start off really small by only including 3 new custom elements: <pl-toggle-theme> and <pl-toggle-layout> that handle toggling the layout and theme options in PL, plus another <pl-layout> component that listens for state changes and adds the appropriate classnames automatically.

Also worth mentioning is this PR also takes care of all the upfront build tool, Babel config, and cross-browser polyfilling work required to make sure these changes work across the board (IE 11 included)

Side note: I've already got some juicer refactored components on the back-burner as well (Typeahead Search, refactored Modal Viewer, etc) that are almost all ready to go as well but I want to make sure the initial upfront work is understood so we can tackle this next phase of evolving Pattern Lab’s UI one step at a time. 🙂

[bmuenzenmeyer]

Hey @sghoweri ! 👋

Thanks so much for this. Apologies for the slower reply. I will take a look ASAP

[sghoweri]

Hey thanks @bmuenzenmeyer, no worries!

Let me know if there’s anything else I can do to help get this out the door (any changes, questions, etc) — really excited about this one!

We’ve already got a version of the code for this up on staging which, except for the one unrelated Search-related bug I mentioned in #949 (probably something silly I messsd up at the last minute) the updates from both of these PR are working beautifully!

[bmuenzenmeyer]

@sghoweri Hoping to review this proper soon

[sghoweri]

@bmuenzenmeyer given the importance of getting an MVP version of v3.0 shipped, I'd be totally OK if you think it makes more sense to review but not necessarily release these UI updates till after we get past the initial 3.0 release.

Personally, I think the community would be PUMPED to see visible progress towards making Pattern Lab's UI more modern and extendable in the initial v3.0 release (even if there's still some ongoing UI refactor work) -- hence why I've been doing my best to try and make these refactor updates as incremental and non-backward breaking as possible.

That said, I also want to be mindful that these updates aren't a surprise bottleneck holding everything back either!

[bmuenzenmeyer]

@sghoweri

I am having trouble testing this.

I've pulled it down, bootstrapped the monorepo again, and rebuilt the uikit just in case
When I try to run npm run pl:serve within packages/development-edition-engine-handlebars I get the following:

[sghoweri]

@bmuenzenmeyer oh - that error was from a file change in Google’s community-maintained polyfills upstream.

I already went in and fixed this in the other PRs by updating the package.json file + updating one line in the polyfills.js file — I’ll need to go in and do the same for this one.

sghoweri@72c0168#diff-d93f7a4be35cabaf5729f725702a9280

sghoweri@72c0168#diff-e756faf6983689c170147ebe05d614d4

[sghoweri]

@bmuenzenmeyer take another look at this when you get a sec!

I found a dependency was missing from uikit on this older branch (which explains why the build was mysteriously failing) so I also fixed that + tweaked the NPM scripts so uikit builds on Travis early on + bails more consistently

[bmuenzenmeyer]

@sghoweri gave this another go

pulled branch
npm run bootstrap
cd packages/uikit-workshop
npm run build
cd ../development-edition-engine-handlebars
npm run pl:serve

[sghoweri]

@bmuenzenmeyer besides the handlebars dev edition you tried running (which I’ll troubleshoot tonight and run through those testing steps — it’s crazy I didn’t run into these issues running these UIKit updates in Pattern Lab PHP 2), are there other testing commands / testing steps for other engines I should be running through in PL Node locally to confirm this works everywhere as expected?

[sghoweri]

^ this particular issue sounds like it could be unescaped opening / closing HTML tags that handlebars doesn’t know how to deal with

[bmuenzenmeyer]

Perhaps. I don't recall in what shape those patterns are. Will investigate

…

On Fri, Oct 26, 2018, 4:57 PM Salem Ghoweri ***@***.***> wrote: ^ this particular issue sounds like it could be unescaped opening / closing HTML tags that handlebars doesn’t know how to deal with — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#946 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASNwwdjBr2RJ1LcYt5Hq3w41WbuRI3oks5uo4VFgaJpZM4WqcY9> .

[sghoweri]

@bmuenzenmeyer figured out the problem.... I put in the wrong public path in the Webpack config. 🤦‍♂️

[bmuenzenmeyer]

@sghoweri

are there other testing commands / testing steps for other engines I should be running through in PL Node locally to confirm this works everywhere as expected?

I am focusing most of my testing to this edition going forward, while we should also test major releases against the starterkit-mustache-demo.

My hope is that we can eventually pivot to a more robust handlebars demo that is both useful in it's own right (my development-edition is sorta the makings of a styletile) and demonstrates handlebars features. When this solidifies, it'd be stellar to cover rendering of those templates all the way to the UI as functional tests in CI and netlify/now

hope this helps

[bmuenzenmeyer]

it’s crazy I didn’t run into these issues running these UIKit updates in Pattern Lab PHP 2

you likely didnt because of differences in how we package up some of the assets or place them in the finished public folder. I've always aimed for feature parity, but not to an identical extent.

[bmuenzenmeyer]

@sghoweri

Tested in IE11 and Chrome.
This is amazing work Salem! Thanks for being patient with me!