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": [