feat: remove esm mid-compilation and add babel preset (magento#1404)

* feat: remove esm mid-compilation and add babel preset

* fixup babel circular dep

* chore: update zeit to node 10

* fixup venia calls buildpack by path

* refactor: remove buildpack build

* fixup remove CI cache rule

* fixup exclude babel preset in babel build

* Update pwa-devdocs/scripts/create-reference-docs/config/peregrine/index.js

Co-Authored-By: James Calcaben <[email protected]>

* fixup now deploy new upward file

* fix: fix now.json to a version

Author: James Zetlen

.eslintignore

@@ -2,7 +2,5 @@
 __fixtures__
 # Minified build assets
 dist
-# Babelified ES modules for NPM dependents
-esm
 # Devdocs is a separate project
 pwa-devdocs

.gitignore

@@ -14,5 +14,4 @@ lerna-debug.log
 .env
 yarn-error.log
 # Packages that build partially transpiled ES modules put them here
-packages/*/esm/*
 docker/certs

.nowignore

@@ -1,7 +1,6 @@
 node_modules
 dist
 coverage
-esm
 pwa-devdocs
 storybook*
 __test*

.prettierignore

@@ -3,8 +3,6 @@ coverage
 # Minified build assets
 dist
 storybook-dist
-# Babelified ES modules for NPM dependents
-esm
 # Devdocs is a separate project
 pwa-devdocs
 

Dockerfile.dev

@@ -11,15 +11,17 @@ RUN apk --no-cache --virtual add \
     python \
     make \
     g++ \
-    yarn 
+    yarn
 
 # copy just the dependency files and configs needed for install
+COPY packages/babel-preset-peregrine/package.json ./packages/babel-preset-peregrine/package.json
+COPY packages/graphql-cli-validate-magento-pwa-queries/package.json ./packages/graphql-cli-validate-magento-pwa-queries/package.json
 COPY packages/peregrine/package.json ./packages/peregrine/package.json
 COPY packages/pwa-buildpack/package.json ./packages/pwa-buildpack/package.json
 COPY packages/upward-js/package.json ./packages/upward-js/package.json
 COPY packages/upward-spec/package.json ./packages/upward-spec/package.json
 COPY packages/venia-concept/package.json ./packages/venia-concept/package.json
-COPY package.json yarn.lock babel.config.js browserslist.js magento-compatibility.js ./
+COPY package.json yarn.lock babel.config.js magento-compatibility.js ./
 
 # install dependencies with yarn
 RUN yarn install --frozen-lockfile
@@ -36,7 +38,7 @@ COPY ${ENVFILEPATH} ./packages/venia-concept/.env
 RUN yarn install --frozen-lockfile
 
 # build the app
-RUN yarn run build 
+RUN yarn run build
 
 # MULTI-STAGE BUILD
 FROM node:10.14.1-alpine

Dockerfile.prod

@@ -10,12 +10,14 @@ RUN apk --no-cache --virtual add \
     yarn
 
 # copy just the dependency files and configs needed for install
+COPY packages/babel-preset-peregrine/package.json ./packages/babel-preset-peregrine/package.json
+COPY packages/graphql-cli-validate-magento-pwa-queries/package.json ./packages/graphql-cli-validate-magento-pwa-queries/package.json
 COPY packages/peregrine/package.json ./packages/peregrine/package.json
 COPY packages/pwa-buildpack/package.json ./packages/pwa-buildpack/package.json
 COPY packages/upward-js/package.json ./packages/upward-js/package.json
 COPY packages/upward-spec/package.json ./packages/upward-spec/package.json
 COPY packages/venia-concept/package.json ./packages/venia-concept/package.json
-COPY package.json yarn.lock babel.config.js browserslist.js magento-compatibility.js ./
+COPY package.json yarn.lock babel.config.js magento-compatibility.js ./
 
 # install dependencies with yarn
 RUN yarn install --frozen-lockfile

babel.config.js

@@ -1,96 +1,11 @@
-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 = api => {
-    const envConfigs = {
-        /**
-         * Watch mode and build:esm partial transpilation mode.
-         * The module-resolver plugin makes Babel recognize import paths from
-         * package root, like 'src/classify'.
-         *
-         * BUT VENIA SHOULD NOT USE THEM, because it makes Venia less portable
-         * and Venia should be more portable than an average PWA Studio app.
-         */
-        development: {
-            // Ignore everything with underscores except stories
-            ignore: [/\/__(tests?|mocks|fixtures|helpers|dist)__\//],
-            plugins: [
-                ...plugins,
-                [
-                    'module-resolver',
-                    {
-                        root: ['./'],
-                        /**
-                         * Exported modules will be consumed by other projects
-                         * which import Venia. Those projects will need to
-                         * override the 'src/drivers' dependency so Venia
-                         * modules will run outside the Venia app. This alias
-                         * exports the modules so the drivers dependency is
-                         * a unique string '@magento/venia-drivers', which is
-                         * less likely to collide with an existing dependency
-                         * than 'src/drivers' is.
-                         *
-                         * In webpack (or any build system) config for a project
-                         * using Venia modules, you must write an override for
-                         * '@magento/venia-drivers' and make an alias to that
-                         * module in your build configuration, e.g.:
-                         *
-                         *     alias: {
-                         *       '@magento/venia-drivers': './src/veniaDrivers'
-                         *     }
-                         *
-                         * to map from this virtual string to your replacement.
-                         */
-                        alias: {
-                            '^src/drivers$': '@magento/venia-drivers'
-                        },
-                        /**
-                         * Suppress console warning about missing dependencies.
-                         */
-                        loglevel: 'silent'
-                    }
-                ]
-            ],
-            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: [...plugins, ['babel-plugin-dynamic-import-node']],
-            presets: [
-                [
-                    '@babel/preset-env',
-                    { modules: 'commonjs', targets: targets.test }
-                ]
-            ]
-        }
+module.exports = api => {
+    const config = {
+        presets: ['@magento/peregrine'],
+        exclude: [/packages\/babel\-preset\-peregrine\//]
     };
-    return envConfigs[api.env() || 'development'];
+    if (api.env() === 'development') {
+        // Ignore everything with underscores except stories in dev mode
+        config.exclude.push(/\/__(tests?|mocks|fixtures|helpers|dist)__\//);
+    }
+    return config;
 };
-
-module.exports = config;

docker-compose.yml

@@ -29,13 +29,11 @@ services:
     # this enables hot reloading from the container to detect changes made on the host file system
     volumes:
       - ./packages/peregrine/.storybook:/usr/src/app/packages/peregrine/.storybook:rw
-      - ./packages/peregrine/esm:/usr/src/app/packages/peregrine/esm:rw
       - ./packages/peregrine/scripts:/usr/src/app/packages/peregrine/scripts:rw
-      - ./packages/peregrine/src:/usr/src/app/packages/peregrine/src:rw
-      - ./packages/pwa-buildpack/src:/usr/src/app/packages/pwa-buildpack/src:rw
+      - ./packages/peregrine/lib:/usr/src/app/packages/peregrine/lib:rw
+      - ./packages/pwa-buildpack/lib:/usr/src/app/packages/pwa-buildpack/lib:rw
       - ./packages/upward-js/lib:/usr/src/app/packages/upward-js/lib:rw
       - ./packages/venia-concept/.storybook:/usr/src/app/packages/venia-concept/.storybook:rw
-      - ./packages/venia-concept/esm:/usr/src/app/packages/venia-concept/esm:rw
       - ./packages/venia-concept/src:/usr/src/app/packages/venia-concept/src:rw
       - ./packages/venia-concept/static:/usr/src/app/packages/venia-concept/static:rw
     links:

jest.config.js

@@ -163,7 +163,6 @@ const jestConfig = {
     // Don't look for test files in these directories.
     testPathIgnorePatterns: [
         'dist',
-        'esm',
         'node_modules',
         '__fixtures__',
         '__helpers__',

now.json

@@ -26,14 +26,14 @@
                 "includeFiles": [
                     "package.json",
                     ".env",
-                    "venia-upward.yml",
+                    "upward.yml",
                     "static/*",
                     "templates/*"
                 ],
                 "maxLambdaSize": "20mb"
             },
             "src": "packages/venia-concept/server-lambda.js",
-            "use": "@now/node"
+            "use": "@now/node@0.11.1"
         }
     ],
     "routes": [

package.json

@@ -3,6 +3,7 @@
   "version": "3.0.0",
   "private": true,
   "workspaces": [
+    "packages/babel-preset-peregrine",
     "packages/graphql-cli-validate-magento-pwa-queries",
     "packages/peregrine",
     "packages/pwa-buildpack",
@@ -17,15 +18,13 @@
     "url": "https://github.com/magento-research/pwa-studio/issues"
   },
   "scripts": {
-    "build": "yarn workspaces run build",
-    "build:ci": "yarn workspaces run build:ci",
-    "build:dev": "yarn workspaces run build:dev",
-    "clean:all": "yarn workspaces run clean && rimraf ./node_modules",
+    "build": "yarn workspace @magento/venia-concept run build",
+    "clean:all": "yarn workspaces run -s clean && rimraf ./node_modules",
     "clean:dist": "yarn workspaces run clean",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "danger": "danger-ci",
     "lint": "eslint '@(packages|scripts)/**/{*.js,package.json}' --ignore-pattern node_modules --ignore-pattern storybook-dist",
-    "postbuild": "rimraf \"./packages/*/{esm,dist}/{,**/}__*__\"",
+    "postbuild": "rimraf \"./packages/*/dist/{,**/}__*__\"",
     "prettier": "prettier --write '@(packages|scripts)/**/*.@(js|css)' '*.js'",
     "prettier:validate": "prettier-check '@(packages|scripts)/**/*.@(js|css)' '*.js'",
     "prettier:check": "prettier --list-different '@(packages|scripts)/**/*.@(js|css)' '*.js'",
@@ -38,14 +37,12 @@
     "test:dev": "jest --watch",
     "validate-queries": "yarn workspace @magento/venia-concept run validate-queries",
     "watch:all": "node scripts/watch-all.js",
-    "watch:buildpack": "yarn workspace @magento/pwa-buildpack run watch; cd - >/dev/null",
-    "watch:peregrine": "yarn workspace @magento/peregrine run watch; cd - >/dev/null",
     "watch:venia": "yarn workspace @magento/venia-concept run watch; cd - >/dev/null"
   },
   "devDependencies": {
+    "@magento/babel-preset-peregrine": "~2.1.0",
     "@magento/eslint-config": "~1.4.1",
     "babel-eslint": "~10.0.1",
-    "babel-plugin-module-resolver": "~3.2.0",
     "chalk": "~2.4.2",
     "chokidar": "~2.1.2",
     "concurrently": "^4.1.0",
@@ -66,21 +63,19 @@
     "jest-fetch-mock": "~2.1.1",
     "jest-junit": "~6.3.0",
     "jest-transform-graphql": "~2.1.0",
-    "keypress": "~0.2.1",
     "lerna": "~3.13.0",
     "lodash.debounce": "~4.0.8",
-    "multispinner": "~0.2.1",
     "prettier": "~1.16.4",
     "prettier-check": "~2.0.0",
-    "stream-snitch": "~0.0.3",
+    "rimraf": "~2.6.3",
     "wait-for-expect": "~1.1.0"
   },
   "optionalDependencies": {
     "bundlesize": "~0.17.1",
     "sharp": "~0.22.1"
   },
   "engines": {
-    "node": "8.10.0 || >=10.7.0",
+    "node": "10.x",
     "yarn": ">=1.12.0"
   },
   "husky": {

packages/babel-preset-peregrine/README.md

@@ -0,0 +1 @@
+Documentation for Magento PWA Studio packages is located at [https://pwastudio.io](https://pwastudio.io).

packages/babel-preset-peregrine/index.js

@@ -0,0 +1,3 @@
+const plugin = require('./lib/index.js');
+
+module.exports = plugin;

packages/babel-preset-peregrine/lib/__tests__/index.spec.js

@@ -0,0 +1,64 @@
+const preset = require('../');
+
+const babelConfigApi = {
+    env: jest.fn().mockName('api.env')
+};
+
+const findBabelModule = (list, module) =>
+    list.find(item => {
+        const moduleName = Array.isArray(item) ? item[0] : item;
+        return moduleName === module;
+    });
+
+const pluginsAndPresets = {
+    plugins: [],
+    presets: []
+};
+
+beforeEach(() => babelConfigApi.env.mockReset());
+
+test('returns dev config if api.env() returns nil', () => {
+    babelConfigApi.mockReturnValueOnce(undefined);
+    expect(config).toMatchObject(pluginsAndPresets);
+    expect(findBabelModule(config.presets, '@babel/preset-env')).toBeTruthy();
+    expect(babelConfigApi.env).toHaveBeenCalled();
+});
+
+test('returns dev config if api.env() returns "development"', () => {
+    babelConfigApi.mockReturnValueOnce('development');
+    expect(config).toMatchObject(pluginsAndPresets);
+    expect(findBabelModule(config.presets, '@babel/preset-env')).toBeTruthy();
+    expect(babelConfigApi.env).toHaveBeenCalled();
+});
+
+test('accepts options', () => {
+    babelConfigApi.mockReturnValueOnce(undefined);
+    const config = preset(babelConfigApi, {
+        targets: {
+            dev: 'Nokia WAP'
+        }
+    });
+    const presetEnv = findBabelModule(config.presets, '@babel/preset-env');
+    expect(presetEnv[1].targets).toBe('Nokia WAP');
+    expect(babelConfigApi.env).toHaveBeenCalled();
+});
+
+test('returns test config if api.env() returns "test"', () => {
+    babelConfigApi.mockReturnValueOnce('test');
+    expect(config).toMatchObject(pluginsAndPresets);
+    expect(
+        findBabelModule(config.plugins, 'babel-plugin-dynamic-import-node')
+    ).toBeTruthy();
+    expect(babelConfigApi.env).toHaveBeenCalled();
+});
+
+test('returns production config if api.env() returns "production"', () => {
+    babelConfigApi.mockReturnValueOnce('production');
+    const config = preset(babelConfigApi);
+    expect(config).toMatchObject(pluginsAndPresets);
+    expect(
+        findBabelModule(config.plugins, '@babel/plugin-transform-runtime')
+    ).toBeTruthy();
+    expect(findBabelModule(config.presets, '@babel/preset-env')).toBeTruthy();
+    expect(babelConfigApi.env).toHaveBeenCalled();
+});