Simplify UIKit Development Experience / Workflow #1098

sghoweri · 2019-11-14T16:52:43Z

1st pass at making Pattern Lab's UIKit development process a bit more streamlined and repeatable for awesome folks like @bradfrost.

There's still definitely some kinks I'm still working out with the CLI (especially when exiting out of the watch task — might need to hit the control + c keys twice grumble grumble) but with these updates, Getting up and running for local UIKit development should be as simple as running the following:

Update: this should be in a much better spot! Updated TLDR instructions below:

yarn setup
yarn preview:hbs
cd packages/development-edition-engine-handlebars
yarn dev

…nc + 1st pass at wiring up the handlebars dev edition for easier UIKIt development

bmuenzenmeyer · 2019-11-14T16:59:41Z

Side note 3 (for @bmuenzenmeyer): thoughts on us swapping out the original live server for browsersync? Wiring that up for this POC was a piece of cake!

as we have discussed elsewhere - I am game for this but it has not been a current priority (versus clearing the PR backlog). I dont think the idea of managing our own fork of a live server if BS serves all of our needs. at the time, a contributor weighed the pros and cons and thought we should go our own way. many circumstances have changes since then

… method to get the config PL is using

…lder to remotely compile the Handlebars demo

bmuenzenmeyer · 2019-11-17T19:16:02Z

started reviewing this instead of #1034 - as I was seeing some similar odd behavior. more to come

bmuenzenmeyer · 2019-11-20T04:36:10Z

seeing this:

$ yarn setup
yarn run v1.19.1
$ yarn
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.0: The platform "win32" is incompatible with this module.
info "fsevents@2.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @babel/plugin-proposal-decorators@7.6.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/plugin-proposal-decorators > @babel/helper-create-class-features-plugin@7.6.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@babel/plugin-proposal-decorators > @babel/plugin-syntax-decorators@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @babel/plugin-syntax-jsx@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > @reach/visually-hidden@0.1.4" has unmet peer dependency "react@^16.8.0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > @skatejs/renderer-lit-html@0.2.2" has incorrect peer dependency "lit-html@^0.11.0-dev.1".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > no-emit-webpack-plugin@1.0.0" has incorrect peer dependency "webpack@^3.1.0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-autosuggest@9.4.3" has unmet peer dependency "react@>=0.14.7".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-dom@16.10.2" has unmet peer dependency "react@^16.0.0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-html-parser@2.0.2" has unmet peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0-0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-popper-tooltip@2.9.1" has unmet peer dependency "react@^16.6.0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > ts-loader@6.2.1" has unmet peer dependency "typescript@*".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-autosuggest > react-autowhatever@10.2.0" has unmet peer dependency "react@>=0.14.7".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-popper-tooltip > react-popper@1.3.4" has unmet peer dependency "react@0.14.x || ^15.0.0 || ^16.0.0".
warning "workspace-aggregator-132cca30-361b-4c0f-844a-507c7621377d > @pattern-lab/uikit-workshop > react-popper-tooltip > react-popper > create-react-context@0.3.0" has unmet peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0
.0".
[4/4] Building fresh packages...
success Saved lockfile.
$ lerna run postbootstrap
lerna notice cli v3.17.0
lerna info Executing command in 1 package: "yarn run postbootstrap"
lerna ERR! yarn run postbootstrap exited 1 in '@pattern-lab/uikit-workshop'
lerna ERR! yarn run postbootstrap stdout:
$ npm run build
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run postbootstrap stderr:
'npm' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.

lerna ERR! yarn run postbootstrap exited 1 in '@pattern-lab/uikit-workshop'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

switching to npm?

EDIT: nevermind, I figured it out.... Windows problem

this was failing on Windows

bmuenzenmeyer · 2019-11-20T07:00:56Z

as an aside, I got a "workflow" functional by running yarn pl:serve within packages/development-edition-engine-handlebars and then in a second terminal, running yarn watch in packages/uikit-workshop

i had to restart my PL instance to see changes, but it's not a blocker

I understand why getting hot module reloading working across all this would be beneficial.

testing the PR, I get a blankscreen at localhost:3000 with no noticeable errors

if I visit http://127.0.0.1:3000 instead - i see this instead

this is the console output:

$ yarn start
yarn run v1.19.1
$ node ./build-tools.js
Pattern Lab Node v5.3.0
Pattern Engine mustache: good to go
Pattern Engine handlebars: good to go
Pattern Engine mustache: already loaded, skipping.
Could not find uikit with name uikit-polyfills defined within patternlab-config.json, or it is not enabled.    
Found plugin: @pattern-lab/plugin-tab
Attempting to load and initialize plugin.
(node:19300) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, symlink 'D:\src\patternla
b-node\packages\uikit-workshop' -> 'D:\src\patternlab-node\packages\uikit-workshop\node_modules\@pattern-lab\ui
kit-workshop'
(node:19300) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by thr
owing inside of an async function without a catch block, or by rejecting a promise which was not handled with .
catch(). (rejection id: 1)
(node:19300) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise 
rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Pattern Lab is watching for changes to files under ..\development-edition-engine-handlebars\source/
[Browsersync] Proxying: http://127.0.0.1:3000
[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:3000
 External: http://192.168.0.114:3000
 -----------------------------------
[Browsersync] Watching files...
{ app: undefined }
(node:19300) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Could not find uikit with name uikit-polyfills defined within patternlab-config.json, or it is not enabled. is going to keep happening because of the unfortunately collision of the name with our parser. this happened with plugins a while back too. I think this is a red herring for now though.

the symlink error (node:19300) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, symlink 'D:\src\patternla b-node\packages\uikit-workshop' -> 'D:\src\patternlab-node\packages\uikit-workshop\node_modules\@pattern-lab\ui kit-workshop' looks worse and more suspect

I see that build-tools.js is doing some symlink work, and that it has some path strings that are not using path.sep. I am going to try changing those

edit:

it looks to me as if www does not have everything it may need. i wonder if build/webpack-server` needs path.sep work too

vs the edition....

another day

sghoweri · 2019-11-20T12:36:46Z

Hey thanks for taking a look at this @bmuenzenmeyer!

Just doing a gut check here, does it make sense what I’m trying to get to with this PR?

Specifically, I want to call out the new build-tools.js file added to the root of the UIKit folder + the couple of Core changes related to resolving paths. What I’m really trying to do with this entire file is “just” three things.

From the UIKit folder (aka from a folder outside of where PL was installed / source files exist), I want to:

Use the PL Node API to compile / watch for changes in the Handebars Dev edition
Use our local UIKit files in whatever gets compiled
Spin up my custom Webpack server (custom loading screen, easier to read console output, smart live reloads when there’s any PL or UI files change using Browsersync, etc)

If you comment out this last line in the build tools file, what’s left in this file is basically all of the patch code to work around all the problems I kept running into several different problems:

Compiling anything from another folder
Registering the correct template engines when run from another folder
Having the watch task register any file changes when run from another folder
Working our PL requiring UIKit files to exist inside the node_modules folder of the current working directory

sghoweri · 2019-11-20T12:45:59Z

it looks to me as if www does not have everything it may need. i wonder if build/webpack-server` needs path.sep work too

Ignore Webpack entirely for a sec: I think a symptom of the problem here is that the Handlebars dev edition code isn’t compiling the HTML and data to the www temp folder when run from outside of the packages/development-edition-engine-handlebars folder.

I believe all the UIKit errors from your screenshot are related to not having any UI or data in the served folder that UIKit is expecting to find...

I can totally adjust paths from the UIKit side of things if need be — really could use your help figuring out why getting PL’s Node API to compile and watch for changes (if your current directory isn’t the same folder as your source files) is so finicky + the Windows aliasing issues... 🤪

bmuenzenmeyer · 2019-11-20T21:00:39Z

Yes I think conceptually this should be possible. Turns out it's a good gut check of this theory! I'll have more time later this week

…

On Wed, Nov 20, 2019, 6:46 AM Salem Ghoweri ***@***.***> wrote: it looks to me as if www does not have everything it may need. i wonder if build/webpack-server` needs path.sep work too Ignore Webpack entirely for a sec: I think a symptom of the problem here is that the Handlebars dev edition code isn’t compiling the HTML and data to the www temp folder when run from outside of the packages/development-edition-engine-handlebars folder. I believe all the UIKit errors from your screenshot are related to not having any UI or data in the served folder that UIKit is expecting to find... I can totally adjust paths from the UIKit side of things if need be — really could use your help figuring out why getting PL’s Node API to compile and watch for changes (if your current directory isn’t the same folder as your source files) is so finicky + the Windows aliasing issues... 🤪 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1098?email_source=notifications&email_token=AACI3Q4WZ536T2GMM4RQXI3QUUWQRA5CNFSM4JNOSCV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEER3MSA#issuecomment-555988552>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACI3Q4GHV4B5547ZDNPUE3QUUWQRANCNFSM4JNOSCVQ> .

…script is called!

sghoweri · 2019-11-22T18:14:23Z

Updated with a much simpler config required + wired up the development-edition-engine-handlebars and edition-twig folders to now easily launch everything by running yarn dev in either of these packages (works elsewhere too as long as there's a patternlab config)

bmuenzenmeyer · 2019-11-22T19:04:57Z

this works outstanding!

made a simple sass change in the uikit and it showed up in the running development edition

HUZZAH!

bradfrost · 2019-11-22T21:30:56Z

@sghoweri gonna play with that this weekend, thanks!

bradfrost · 2019-11-23T19:03:17Z

@sghoweri Just letting you know I was able to follow the instructions and have things working. Thanks a ton for this!

sghoweri · 2019-11-23T20:15:48Z

@bradfrost awesome, glad to hear it!!

Just keep in mind that while the UI is largely refactored at this point, there’s still at least a few things on my radar to clean up. Namely:

the Nav’s CSS / JS (lots of code to delete still)
swapping out some of the Sass vars for user-customizable CSS custom properties
reorganizing some of the components / folders

Looking forward to what you come up with!

bmuenzenmeyer · 2019-11-23T23:18:29Z

Ship it!

…

On Sat, Nov 23, 2019, 1:03 PM Brad Frost ***@***.***> wrote: @sghoweri <https://github.com/sghoweri> Just letting you know I was able to follow the instructions and have things working. Thanks a ton for this! [image: Screen Shot 2019-11-23 at 2 02 58 PM] <https://user-images.githubusercontent.com/383701/69483813-fd8b3d00-0df9-11ea-8b1a-21feeb8328e0.png> — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1098?email_source=notifications&email_token=AACI3QYSYE5S7OI4A6JOKU3QVF47NA5CNFSM4JNOSCV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE73RCA#issuecomment-557824136>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACI3Q7DTAR7DYOXLOYFLJTQVF47NANCNFSM4JNOSCVQ> .

…-uikit-dx RFC: Simplify UIKit Development Experience / Workflow

sghoweri added 2 commits November 14, 2019 09:02

chore: update nvm versions to the latest version of Node supported

77411c1

WIP: swapping out the custom live server with off the shelf browsersy…

2cb663d

…nc + 1st pass at wiring up the handlebars dev edition for easier UIKIt development

sghoweri requested a review from bradfrost November 14, 2019 16:52

sghoweri added 7 commits November 16, 2019 13:16

Merge branch 'dev' into feature/simplify-uikit-dx

ab7fc92

fix: add a new method to check if PL is currently compiling + add new…

26e886c

… method to get the config PL is using

refactor: improve UIKit Webpack output

58bc6b3

feat: major improvements to local UIKit workflow

4dc9173

chore: remove console log

c56ff20

chore: revert file changes not required for this round of updates

9d6be82

chore: minor cleanup + adding dependencies needed for the workshop fo…

9416975

…lder to remotely compile the Handlebars demo

fix: check if dependency graph file exists before trying to remove

f9af6a9

fix(script): remove quotes around starterkit

e4897fb

this was failing on Windows

bmuenzenmeyer and others added 2 commits November 22, 2019 10:22

Merge branch 'dev' into feature/simplify-uikit-dx

01c6311

refactor: update UIKit build to work in whatever PL folder the build …

7136c8c

…script is called!

bmuenzenmeyer merged commit b78b3b4 into dev Nov 22, 2019

bmuenzenmeyer deleted the feature/simplify-uikit-dx branch November 22, 2019 19:05

bmuenzenmeyer mentioned this pull request Nov 22, 2019

Feature: Add The Ability To Hide Viewall Links #1034

Merged

sghoweri changed the title ~~RFC: Simplify UIKit Development Experience / Workflow~~ Simplify UIKit Development Experience / Workflow Nov 22, 2019

sghoweri added uikit enhancement ✨ labels Nov 22, 2019

sghoweri added this to the v5.4.0 milestone Nov 22, 2019

antonia-rose pushed a commit to quelltexterin/nemo-uikit-workshop that referenced this pull request Apr 12, 2023

Merge pull request pattern-lab#1098 from pattern-lab/feature/simplify…

78a5a4a

…-uikit-dx RFC: Simplify UIKit Development Experience / Workflow

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Simplify UIKit Development Experience / Workflow #1098

Simplify UIKit Development Experience / Workflow #1098

Uh oh!

sghoweri commented Nov 14, 2019 •

edited

Loading

Uh oh!

bmuenzenmeyer commented Nov 14, 2019

Uh oh!

bmuenzenmeyer commented Nov 17, 2019 •

edited

Loading

Uh oh!

bmuenzenmeyer commented Nov 20, 2019 •

edited

Loading

Uh oh!

bmuenzenmeyer commented Nov 20, 2019 •

edited

Loading

Uh oh!

sghoweri commented Nov 20, 2019 •

edited

Loading

Uh oh!

sghoweri commented Nov 20, 2019

Uh oh!

bmuenzenmeyer commented Nov 20, 2019 via email

Uh oh!

sghoweri commented Nov 22, 2019

Uh oh!

bmuenzenmeyer commented Nov 22, 2019

Uh oh!

bradfrost commented Nov 22, 2019

Uh oh!

bradfrost commented Nov 23, 2019

Uh oh!

sghoweri commented Nov 23, 2019

Uh oh!

bmuenzenmeyer commented Nov 23, 2019 via email

Uh oh!

Uh oh!

Simplify UIKit Development Experience / Workflow #1098

Simplify UIKit Development Experience / Workflow #1098

Uh oh!

Conversation

sghoweri commented Nov 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer commented Nov 14, 2019

Uh oh!

bmuenzenmeyer commented Nov 17, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer commented Nov 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer commented Nov 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sghoweri commented Nov 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sghoweri commented Nov 20, 2019

Uh oh!

bmuenzenmeyer commented Nov 20, 2019 via email

Uh oh!

sghoweri commented Nov 22, 2019

Uh oh!

bmuenzenmeyer commented Nov 22, 2019

Uh oh!

bradfrost commented Nov 22, 2019

Uh oh!

bradfrost commented Nov 23, 2019

Uh oh!

sghoweri commented Nov 23, 2019

Uh oh!

bmuenzenmeyer commented Nov 23, 2019 via email

Uh oh!

Uh oh!

sghoweri commented Nov 14, 2019 •

edited

Loading

bmuenzenmeyer commented Nov 17, 2019 •

edited

Loading

bmuenzenmeyer commented Nov 20, 2019 •

edited

Loading

bmuenzenmeyer commented Nov 20, 2019 •

edited

Loading

sghoweri commented Nov 20, 2019 •

edited

Loading