UIKit Refactor Part 8: Nav, Viewport, Header & More!

[sghoweri]

Builds off of #960 -- with this PR we're almost completely moved into the new UIKit codebase!

In a nutshell, this PR:

1. Adds a workaround to a strange Webpack (and possibly Preact) bug when compiling in production mode causing some UI components to not show up as expected. While that bug is still present (fix TBD), the build process updates here significantly optimize what we have -- shaving nearly 1.5MBs off the compiled CSS and JS!
2. Ports over most of the remaining Pattern Lab UI components over to the new refactored codebase.

• This including refactoring the navigation / dropdown menu, viewport / iframe, viewport controls, the header, and the contextual menu to all now be rendered as standalone web components (using Preact and SkateJS)

3. Starts the process of breaking apart the massive chunk of styleguide.js logic to start to have things live with the associated component and/or be pulled out into a shared JS utility function that components pull in as a shared dependency
4. Removes most of the remaining Hogan.js templating logic / HTML includes and inline templates since Pattern Lab's UI components can now render their own markup themselves 😉

More to come -- we're almost at the finish line!! 🎉

[bradfrost]

@sghoweri Thanks so much for this! What needs to happen in order for this to get merged in?

[sghoweri]

@sghoweri Thanks so much for this! What needs to happen in order for this to get merged in?

Thanks @bradfrost! That’s a really good question... the biggest thing blocking this from getting merged in is probably #960 not yet being merged in (which I’m also not 100% clear on what’s needed — if anything — before we merge that in).

My gut tells me to merge this and #960 and cut another UIKit beta ASAP so we can focus on wrapping up any potential bugs and remaining updates (CSS Variables for theming!!), especially if there’s really isn’t a ton of added risk (beta release FTW).

@bmuenzenmeyer thoughts?

[bmuenzenmeyer]

@bmuenzenmeyer thoughts?

Our last communication still stands, IMO. #960 (comment)

We were hoping to fix #890 before #960. I left some breadcrumbs after having limited time to debug it the last couple weeks. #890 (comment)

[stale]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[sghoweri]

Also bump. I also owe @bradfrost some PR review info on this one as well #drupalcon

[stale]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[bmuenzenmeyer]

seeing some odd behavior in Firefox where the nav renders differently

chome:

not going to let that stop us

[bradfrost]

@bmuenzenmeyer I can take a look at that bug, but would need a refresher on how to fire this up to deal with it!

[bmuenzenmeyer]

👋
I think this will get you there:

git checkout dev
npm install && npm run bootstrap
cd packages/uikit-workshop
npm run build //npm run watch may work too but havent tried it
cd ../development-edition-engine-handlebars
npm run pl:serve

any changes require rebuilding the workshop - may be easier to open two terminals.