Yarn & Babel 7 (magento#753)

* Switch to Yarn and Babel 7
* Update documentation

.circleci/config.yml

@@ -17,26 +17,19 @@ workflows:
 common_settings:
   docker: &docker_setup
     - image: 'circleci/node:10.14.1'
-  # Cache a bunch of stuff
-  # - npm's local tarball cache
   save_cache: &savecache
+    name: Save yarn package cache
+    key: 'yarn-packages-{{ checksum "yarn.lock" }}'
     paths:
-      - ~/.ssh
-      - ~/.npm
-      - /root/.npm
-    key: 'v3-npm-cache-{{ checksum "package-lock.json" }}'
-
-  install_latest_npm: &install_latest_npm
-    name: Ensure NPM is up to date
-    command: sudo npm install -g npm@latest
-
+      - ~/.cache/yarn
   install_packages: &install_packages
-    name: Install NPM packages from lockfile
-    command: npm ci --ignore-scripts && npx lerna bootstrap --hoist --no-ci
+    name: Install packages from lockfile
+    # Don't ignore scripts. Bundlesize needs to build iltorb on install.
+    command: yarn install --frozen-lockfile
 
   full_build: &full_build
-    name: Full Build
-    command: 'cp packages/venia-concept/.env.dist packages/venia-concept/.env && npm run build'
+    name: Full build
+    command: 'cp packages/venia-concept/.env.dist packages/venia-concept/.env && yarn run clean:dist && yarn run build'
 
   test_result_path: &test_result_path
     path: "test-results"
@@ -49,14 +42,13 @@ jobs:
     docker: *docker_setup
     steps:
       - checkout
-      - run: *install_latest_npm
       - run: *install_packages
       - run:
-          name: Test Suites
-          command: 'npm run test:ci'
+          name: Test suites
+          command: 'yarn run test:ci'
       - run:
-          name: Coveralls Coverage Analysis
-          command: npm run coveralls
+          name: Coveralls coverage analysis
+          command: yarn run coveralls
       - run: *full_build
       - store_test_results: *test_result_path
       - store_artifacts: *artifact_storage_path
@@ -66,21 +58,20 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - 'v3-npm-cache-{{ checksum "package-lock.json" }}'
-      - run: *install_latest_npm
+            - 'yarn-packages-{{ checksum "yarn.lock" }}'
       - run: *install_packages
       - save_cache: *savecache
       - run:
-          name: Test Suites and Coverage
+          name: Test suites and coverage
           # Test failures should not stop Danger, so hide the exit code.
-          command: 'npm run test:ci && npm run coveralls || true'
+          command: 'yarn run test:ci && yarn run coveralls || true'
       - run: *full_build
       - run:
           name: DangerCI
-          command: npm run danger
+          command: yarn run danger
       - run:
           name: Bundle size analysis
-          command: npm run bundlesize
+          command: yarn run bundlesize
 
       - store_test_results: *test_result_path
       - store_artifacts: *artifact_storage_path

.gitignore

@@ -11,3 +11,4 @@ test-report.xml
 test-results.json
 lerna-debug.log
 .env
+yarn-error.log

.prettierignore

@@ -1,4 +1,3 @@
 coverage
-package-lock.json
 dist
 pwa-devdocs

README.md

@@ -36,28 +36,25 @@ For more information about contributing to this repository, see the [Contributio
 
 ## About this repository
 
-To ease local development, testing, and versioning, the PWA Studio project uses a monorepo, with package management orchestrated by [lerna](https://github.com/lerna/lerna#about).
-All packages are versioned in a single repo, but released to `npm` as independent packages.
+To facilitate local development, testing, and versioning, PWA Studio is structured as a monorepo using [Yarn Workspaces][]. Packages in this repository are independently published to [NPM][]; rather than installing `pwa-studio` as a dependency of your project, you should install just the individual packages your project needs.
 
-## Lerna Packages
+## Workspaces
 
-This repository includes the following packages managed by lerna:
+This repository includes the following packages as workspaces:
 
 * [venia-concept](packages/venia-concept) - Reference/Concept Storefront
 * [pwa-buildpack](packages/pwa-buildpack/README.md) - Build tooling
 * [peregrine](packages/peregrine/README.md) - eCommerce Component Library
 * [upward-js](packages/upward-js) - Reference implementation of the UPWARD specification
 * [upward-spec](packages/upward-spec) - UPWARD specification and test suite
 
-## Other Packages
+## Other packages
 
-This repository also includes modules that are not managed by Lerna, because
-they are not meant to be distributed via NPM, and/or they should not have their
-dependencies centrally managed by Lerna.
+This repository also includes unpublished modules that are not managed by Yarn Workspaces. They are not configured as workspaces, so their dependencies are not hoisted and must be installed separately.
 
 * [pwa-devdocs](pwa-devdocs) - Project source for the [documentation site]
 
-## Quick Setup
+## Quick setup
 
 See the [Venia storefront setup][] topic for instructions on installing this project's dependencies and running the Venia storefront on top of an existing Magento backend. 
 
@@ -67,23 +64,25 @@ See our [Troubleshooting][] guide if you run into any problems.
 
 If you have an issue that cannot be resolved, please [create an issue][].
 
-## Things not to do
+## Tips
 
-* Our monorepo is set up so that `npm install` can cross-link dependencies (such as Venia's dependency on Buildpack) without any extra tools. Do not run `lerna bootstrap`.
-* All devDependencies are installed in the repository root. This means that **all scripts must be run from repository root**; otherwise, the locally installed CLI commands they use will not be available.
-* Production dependencies are sometimes installed in child packages, but for some projects, such as Venia, it makes no sense to have production dependencies, because of bundling.
-* Don't check in a big change to `package-lock.json`, and don't check in any `package-lock.json` files but the root one.
-* Make sure to run `npm run prettier` and `npm run lint` before any commit you intend to push. You may want to set up a [Git hook] for this.
+* Don't run `npm install`! Since this project has been configured with [Yarn Workspaces][], run `yarn install` to properly install, hoist, and cross-link dependencies.
+* Don't check in `package-lock.json`. There is only one lockfile, `yarn.lock`, and it's in the root directory.
+* To add a dependency, use [workspace commands][] (e.g., `yarn workspace @magento/venia-concept add my-module`). This will associate the dependency with the right package.
+* Before pushing a commit, `yarn run prettier` and `yarn run lint` to format and inspect the source code. (There is also a git hook that will do this automatically.)
 
-[documentation site]: https://magento-research.github.io/pwa-studio/
 [CircleCI]: https://circleci.com/gh/magento-research/pwa-studio.svg?style=svg
-[Coverage Status]: https://coveralls.io/repos/github/magento-research/pwa-studio/badge.svg?branch=master
-[Greenkeeper badge]: https://badges.greenkeeper.io/magento-research/pwa-studio.svg
 [Contribution guide]: .github/CONTRIBUTING.md
+[Coverage Status]: https://coveralls.io/repos/github/magento-research/pwa-studio/badge.svg?branch=master
+[create an issue]: https://github.com/magento-research/pwa-studio/issues/new
+[documentation site]: https://magento-research.github.io/pwa-studio/
 [Git hook]: <https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks>
-[Venia storefront setup]: https://magento-research.github.io/pwa-studio/venia-pwa-concept/setup/
+[Greenkeeper badge]: https://badges.greenkeeper.io/magento-research/pwa-studio.svg
+[NPM]: https://www.npmjs.com/org/magento
 [Troubleshooting]: https://magento-research.github.io/pwa-studio/pwa-buildpack/troubleshooting/
-[create an issue]: https://github.com/magento-research/pwa-studio/issues/new
+[Venia storefront setup]: https://magento-research.github.io/pwa-studio/venia-pwa-concept/setup/
+[Yarn Workspaces]: https://yarnpkg.com/en/docs/workspaces/
+[yarn workspace]: https://yarnpkg.com/en/docs/cli/workspace
 
 [mage2pratik]: https://github.com/mage2pratik
 [mage2pratik-image]: https://avatars0.githubusercontent.com/u/33807558?s=120&v=4

babel.config.js

@@ -0,0 +1,50 @@
+const browsers = require('./browserslist');
+
+const plugins = [
+    ['@babel/plugin-proposal-class-properties'],
+    ['@babel/plugin-proposal-object-rest-spread'],
+    ['@babel/plugin-syntax-dynamic-import'],
+    ['@babel/plugin-syntax-jsx'],
+    ['@babel/plugin-transform-react-jsx'],
+    ['babel-plugin-graphql-tag']
+];
+
+const targets = {
+    dev: 'last 2 Chrome versions',
+    prod: browsers,
+    test: 'node 10'
+};
+
+const config = {
+    env: {
+        development: {
+            plugins,
+            presets: [
+                ['@babel/preset-env', { modules: false, targets: targets.dev }]
+            ]
+        },
+        production: {
+            plugins: [
+                ...plugins,
+                [
+                    '@babel/plugin-transform-runtime',
+                    { helpers: true, regenerator: true }
+                ]
+            ],
+            presets: [
+                ['@babel/preset-env', { modules: false, targets: targets.prod }]
+            ]
+        },
+        test: {
+            plugins,
+            presets: [
+                [
+                    '@babel/preset-env',
+                    { modules: 'commonjs', targets: targets.test }
+                ]
+            ]
+        }
+    }
+};
+
+module.exports = config;

browserslist.js

@@ -0,0 +1,29 @@
+/*
+ * Precise browser targeting reduces the amount of transpilation we do.
+ * Dropping IE 11 support would have the greatest impact.
+ * Read more: https://twitter.com/jamiebuilds/status/1022568923726639104
+ */
+
+const browsers = [
+    '> 0.05%',
+    'not dead',
+    // "not ie 11",
+    'not android 4.1',
+    'not android 4.2',
+    'not android 4.4',
+    'not android 4.4.3',
+    'not chrome 29',
+    'not chrome 43',
+    'not chrome 49',
+    'not chrome 54',
+    'not firefox 47',
+    'not firefox 48',
+    'not firefox 51',
+    'not firefox 52',
+    'not ios 8.1',
+    'not ios 9.3',
+    'not safari 5.1',
+    'not safari 9.1'
+];
+
+module.exports = browsers;

lerna.json

@@ -7,5 +7,6 @@
         "packages/upward-spec",
         "packages/venia-concept"
     ],
-    "npmClient": "npm"
+    "npmClient": "yarn",
+    "useWorkspaces": true
 }

now.json

@@ -1,6 +1,9 @@
 {
-    "version": 1,
     "name": "magento-venia",
     "alias": "magento-venia",
-    "public": true
+    "engines": {
+        "node": "10.x.x"
+    },
+    "public": true,
+    "version": 1
 }