Framework: Add lerna to publish `@automattic/simple-components` #16782

ockham · 2017-08-01T09:57:33Z

Updated -- no longer requires lerna to be installed globally!

Add lerna (a monorepo tool) to Calypso, and use it to publish @automattic/simple-components as a separate npm.

This involves adding a package.json, .gitignore, and .npmignore to client/components, and an alias field to Calypso's webpack configs.

Since we want Calypso (and possibly other consumers) to continue to use untranspiled code (to benefit from features such as tree-shaking), the npms we produce should contain both transpiled and untranspiled versions of the code. See http://2ality.com/2017/07/npm-packages-via-babel.html, and for more information, http://2ality.com/2017/04/transpiling-dependencies-babel.html and http://2ality.com/2017/06/pkg-esnext.html.

Please note #16782 (comment)!

To test:

Run npm run distclean && npm start
Verify that Calypso works
Note that node_modules/@automattic/simple-components is a symlink to client/components/!
Also verify that building (npm run build-docker) and running (npm run docker) the Docker container still works (see PCYsg-5XR-p2).

(To publish, run lerna publish --skip-git (but don't unless you know what you're doing!) When asked for version, select Prerelease for @automattic/simple-components!)

Related (but no longer required for this PR!): #16870.

matticbot · 2017-08-01T09:57:39Z

Test live: https://calypso.live/?branch=add/lerna-to-publish-form-components-repo

ockham · 2017-08-03T10:14:20Z

client/components/package.json

+  "version": "0.1.0-alpha.1",
+  "description": "React components, as used on WordPress.com",
+  "scripts": {
+    "build": "babel ./index.js --out-dir cjs && babel ./button --out-dir cjs/button && babel ./main --out-dir cjs/main",


Noting here that I also tried

babel --only ./index.js,./button/,./main/ --out-dir cjs .

but that is unfortunately evaluated as a glob (and apparently broken) since it includes e.g. every path that ends in button/ or main/, and every index.js[x] (as opposed to just top-level ones).

Babel 7 changes --only and --ignore args to be evaluated as relative paths instead of globs.

We might want to consider moving components that are supposed to go into simple-components into a separate subfolder, e.g. client/components/simple. This is going to save us a lot of hassle.

Also, I should probably file an issue against Babel 6, since this behavior doesn't seem right.

Also, I should probably file an issue against Babel 6, since this behavior doesn't seem right.

babel/babel#6067

ockham · 2017-08-07T13:40:21Z

Okay, I'd say this is ready for review!

nb · 2017-08-08T12:53:42Z

package.json

@@ -250,6 +251,7 @@
    "glob": "7.0.3",
    "husky": "0.13.3",
    "jscodeshift": "0.3.30",
+    "lerna": "^2.0.0",


Why the ^s?

Ah, good spot. Comes from running lerna init. I'll remove the caret.

Same for @automattic/simple-components.

samouri · 2017-08-10T22:30:51Z

@gwwar: you need to run npm install -g lerna

gwwar · 2017-08-10T22:41:01Z

Summary says:

Updated -- no longer requires lerna to be installed globally!

sirreal · 2017-08-11T07:09:55Z

I'd be happy to make lerna a local dep. I'm able to clone the repo fresh and run npm start, everything boots and runs correctly 🎉

Running this locally for me, it can't find lerna

It's normal that when lerna isn't installed distclean won't work. Similar to how npm run distclean && npm run distclean will complete on the first and fail on the second after deps have been installed via npm start. Looks like we need another solution for that one.

sirreal · 2017-08-11T07:12:01Z

package.json

@@ -194,12 +195,13 @@
    "clean:public": "npm run -s rm -- public .css .css.map .js .js.map",
    "predashboard": "npm run -s install-if-deps-outdated",
    "dashboard": "cross-env DASHBOARD=1 webpack-dashboard -- npm start",
-    "distclean": "npm run -s clean && npm run -s rm -- node_modules",
+    "distclean": "npm run -s clean && lerna clean --yes && npm run -s rm -- node_modules",


This is problematic as lerna is not global and nothing guarantees it will be present.

No problem here, npm is adding node_modules/.bin when running scripts.

Well, there is a problem if it’s not present, of course.

ockham · 2017-08-11T09:37:57Z

Fixed by replacing the && with a ;. Think that's a good enough solution?

sirreal

I think this is in a good place and ready to move forward. Thanks for your work on it and patience 🙂

sirreal · 2017-08-14T09:48:26Z

I just realized something and wanted to share it here. When we get to Node 8 LTS (mid-october) it will include npm@^5.2 which includes npx, which will automagially local-install required binaries, and we won't have to worry about whether lerna is present locally/globall in these scripts, just s/npm/npx/ 🎉

DanReyLop · 2017-08-29T12:22:58Z

package.json

@@ -194,12 +195,13 @@
    "clean:public": "npm run -s rm -- public .css .css.map .js .js.map",
    "predashboard": "npm run -s install-if-deps-outdated",
    "dashboard": "cross-env DASHBOARD=1 webpack-dashboard -- npm start",
-    "distclean": "npm run -s clean && npm run -s rm -- node_modules",
+    "distclean": "npm run -s clean && lerna clean --yes ; npm run -s rm -- node_modules",


~~Please use && instead of ;, unless for some reason lerna clean returns a non-zero status on completion.~~

Nevermind, I've just read the PR comments. Sorry for the noise.

alisterscott · 2017-10-31T05:01:17Z

Is this one still going ahead? Thanks

ockham · 2017-10-31T20:30:53Z

Still relevant/being discussed, yeah. Would prefer to keep it open for another while.

Add `lerna` (a monorepo tool) to Calypso, and use it to publish [`@automattic/simple-components`](https://www.npmjs.com/package/@automattic/simple-components) as a separate npm. This involves adding a `package.json`, `.gitignore`, and `.npmignore` to `client/components`, and an `alias` field to Calypso's webpack configs. Since we want Calypso (and possibly other consumers) to continue to use untranspiled code (to benefit from features such as tree-shaking), the npms we produce should contain both transpiled and untranspiled versions of the code. See http://2ality.com/2017/07/npm-packages-via-babel.html, and for more information, http://2ality.com/2017/04/transpiling-dependencies-babel.html and http://2ality.com/2017/06/pkg-esnext.html.

apeatling · 2017-11-13T17:45:46Z

@ockham Let's give this another 2-3 weeks, if there's no movement I think it's time to move on.

kwight · 2017-12-06T20:45:13Z

Any verdict here @ockham of how or whether to proceed?

ockham · 2017-12-07T17:32:05Z

Sigh, I haven't found time in the past weeks to reinvigorate the conversation around this idea. So I guess I'll close it 🙁

ockham added Components Framework [Status] In Progress labels Aug 1, 2017

ockham self-assigned this Aug 1, 2017

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Aug 1, 2017

ockham force-pushed the add/lerna-to-publish-form-components-repo branch 2 times, most recently from 454ed82 to b78e15a Compare August 1, 2017 14:56

ockham commented Aug 3, 2017

View reviewed changes

ockham mentioned this pull request Aug 3, 2017

Form Components: Modularize #16872

Closed

ockham force-pushed the add/lerna-to-publish-form-components-repo branch from 3c15803 to 481c294 Compare August 3, 2017 15:11

ockham requested review from blowery, ehg, gziolo, gwwar, aduth and samouri August 3, 2017 15:12

ockham mentioned this pull request Aug 3, 2017

Calypso & wp-admin isomorphic extensions #15243

Closed

ockham force-pushed the add/lerna-to-publish-form-components-repo branch 3 times, most recently from b827025 to 152a883 Compare August 7, 2017 10:36

ockham changed the title ~~Framework: Add lerna~~ Framework: Add lerna to publish @automattic/simple-components Aug 7, 2017

ockham force-pushed the add/lerna-to-publish-form-components-repo branch from 5724135 to 94cd250 Compare August 7, 2017 13:39

ockham requested review from nb and coderkevin August 7, 2017 13:40

ockham added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Aug 7, 2017

ockham mentioned this pull request Aug 8, 2017

Babel transpiles any folder containing strings specified using --only babel/babel#6067

Closed

nb reviewed Aug 8, 2017

View reviewed changes

sirreal reviewed Aug 11, 2017

View reviewed changes

sirreal approved these changes Aug 11, 2017

View reviewed changes

DanReyLop reviewed Aug 29, 2017

View reviewed changes

ockham force-pushed the add/lerna-to-publish-form-components-repo branch from 875d43e to 9b0f1b8 Compare October 31, 2017 20:46

ockham added 5 commits October 31, 2017 21:46

Revert install-if-* changes

69684f3

Boostrap lerna during postinstall

3043454

Remove root package from lerna.json

00897a6

Have distclean cover root dir

b67f4cb

Don't abort distclean if lerna isn't found

e0a31d1

ockham force-pushed the add/lerna-to-publish-form-components-repo branch from 9b0f1b8 to e0a31d1 Compare October 31, 2017 20:46

sirreal mentioned this pull request Nov 1, 2017

Build: update Node to version 8 LTS (carbon) #19317

Merged

8 tasks

ockham mentioned this pull request Nov 13, 2017

Framework: Transpile untranspiled node_modules #16870

Merged

apeatling added the Marked for Review Day label Nov 13, 2017

ockham closed this Dec 7, 2017

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 7, 2017

alisterscott deleted the add/lerna-to-publish-form-components-repo branch February 1, 2018 06:37

ockham restored the add/lerna-to-publish-form-components-repo branch May 10, 2018 10:36

ockham deleted the add/lerna-to-publish-form-components-repo branch May 10, 2018 11:13

ockham mentioned this pull request May 10, 2018

Framework: Add lerna to publish @automattic/simple-components (Take Two) #24788

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Framework: Add lerna to publish `@automattic/simple-components` #16782

Framework: Add lerna to publish `@automattic/simple-components` #16782

ockham commented Aug 1, 2017 •

edited

Loading

matticbot commented Aug 1, 2017

ockham Aug 3, 2017 •

edited

Loading

ockham Aug 3, 2017

ockham Aug 7, 2017

ockham Aug 8, 2017

ockham commented Aug 7, 2017

nb Aug 8, 2017

ockham Aug 8, 2017

nb Aug 8, 2017

samouri commented Aug 10, 2017

gwwar commented Aug 10, 2017

sirreal commented Aug 11, 2017

sirreal Aug 11, 2017

nb Aug 11, 2017

nb Aug 11, 2017

ockham commented Aug 11, 2017

sirreal left a comment

sirreal commented Aug 14, 2017

DanReyLop Aug 29, 2017 •

edited

Loading

alisterscott commented Oct 31, 2017

ockham commented Oct 31, 2017

apeatling commented Nov 13, 2017

kwight commented Dec 6, 2017

ockham commented Dec 7, 2017

Framework: Add lerna to publish @automattic/simple-components #16782

Framework: Add lerna to publish @automattic/simple-components #16782

Conversation

ockham commented Aug 1, 2017 • edited Loading

matticbot commented Aug 1, 2017

ockham Aug 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ockham commented Aug 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samouri commented Aug 10, 2017

gwwar commented Aug 10, 2017

sirreal commented Aug 11, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ockham commented Aug 11, 2017

sirreal left a comment

Choose a reason for hiding this comment

sirreal commented Aug 14, 2017

DanReyLop Aug 29, 2017 • edited Loading

Choose a reason for hiding this comment

alisterscott commented Oct 31, 2017

ockham commented Oct 31, 2017

apeatling commented Nov 13, 2017

kwight commented Dec 6, 2017

ockham commented Dec 7, 2017

Framework: Add lerna to publish `@automattic/simple-components` #16782

Framework: Add lerna to publish `@automattic/simple-components` #16782

ockham commented Aug 1, 2017 •

edited

Loading

ockham Aug 3, 2017 •

edited

Loading

DanReyLop Aug 29, 2017 •

edited

Loading