fix(wire-service): Fix wire-service es5 build and related integration…

… tests (#971)

* Fix wire-service es5 build and related integration tests

* Minor cleanup

* Move babel-preset config to root

packages/lwc-integration/package.json

@@ -24,6 +24,8 @@
     "sauce:prod_compat": "MODE=prod_compat yarn build && MODE=prod_compat wdio ./scripts/wdio.sauce.conf.js"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
     "deepmerge": "^1.5.2",
     "dotenv": "^4.0.0",
     "fs-extra": "^4.0.2",

packages/lwc-integration/scripts/build.js

@@ -1,8 +1,11 @@
 const fs = require('fs-extra');
 const path = require('path');
+const babel = require('babel-core');
 const rollup = require('rollup');
 const lwcCompilerPlugin = require('rollup-plugin-lwc-compiler');
+const compatPlugin = require('babel-plugin-transform-proxy-compat');
 const templates = require('../src/shared/templates.js');
+const { compatBrowsersPreset } = require('../../../scripts/babel-config-util');
 
 // -- Build Config -------------------------------------------
 const mode = process.env.MODE || 'compat';
@@ -43,6 +46,15 @@ function testCaseComponentResolverPlugin() {
     };
 }
 
+function getTodoApp(testBundle) {
+    return isCompat ?
+        babel.transform(templates.todoApp(testBundle), {
+            presets: [ compatBrowsersPreset ],
+            plugins: [[compatPlugin, { resolveProxyCompat: { global: 'window.Proxy' } }]]}
+        ).code
+        : templates.todoApp(testBundle);
+}
+
 function entryPointResolverPlugin() {
     return {
         name: 'entry-point-resolver',
@@ -54,7 +66,7 @@ function entryPointResolverPlugin() {
         load(id) {
             if (id.includes(testSufix)) {
                 const testBundle = getTestName(id);
-                return testBundle.startsWith('wired-') ? templates.todoApp(testBundle) : templates.app(testBundle);
+                return testBundle.startsWith('wired-') ? getTodoApp(testBundle) : templates.app(testBundle);
             }
         },
     }

packages/lwc-wire-service/package.json

@@ -17,6 +17,7 @@
     "test": "jest --coverage --maxWorkers=2"
   },
   "devDependencies": {
+    "babel-plugin-external-helpers": "^6.22.0",
     "concurrently": "^3.4.0",
     "cross-env": "^3.1.4",
     "deasync": "^0.1.10",
@@ -29,6 +30,7 @@
     "lwc-jest-transformer": "^0.17.1",
     "rimraf": "^2.6.1",
     "rollup": "0.50.0",
+    "rollup-plugin-babel": "^3.0.3",
     "rollup-plugin-lwc-compiler": "0.17.6",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-uglify": "^2.0.1",

packages/lwc-wire-service/rollup.config.es-and-cjs.js

@@ -1,10 +1,11 @@
 /* eslint-env node */
 
 const path = require('path');
-const typescript = require('rollup-plugin-typescript');
+const babel = require('rollup-plugin-babel');
 
 const { version } = require('./package.json');
 const { generateTargetName } = require('./rollup.config.util');
+const { compatBrowsersPreset } = require('../../scripts/babel-config-util');
 
 const entry = path.resolve(__dirname, 'src/main.js');
 const commonJSDirectory = path.resolve(__dirname, 'dist/commonjs');
@@ -16,25 +17,29 @@ const footer = `/** version: ${version} */`;
 
 function rollupConfig(config) {
     const { format, target } = config;
+    const isCompat = target === 'es5';
+
+    let plugins = [
+        isCompat && babel({
+            presets: [ compatBrowsersPreset ],
+            plugins: [ "external-helpers" ],
+            babelrc: false,
+        }),
+    ].filter((plugin) => plugin);
 
     const targetName = generateTargetName(config);
     const targetDirectory = (format === 'es' ? modulesDirectory : commonJSDirectory) + `/${target}`;
 
      return {
-        name: 'WireService',
-        banner: banner,
-        footer: footer,
         input: entry,
         output: {
             file: path.join(targetDirectory, targetName),
-            format: format,
+            name: 'WireService',
+            format,
+            banner,
+            footer,
         },
-        plugins: [
-            typescript({
-                target: target,
-                typescript: require('typescript'),
-            }),
-        ]
+        plugins,
     }
 }
 

packages/lwc-wire-service/rollup.config.umd.dev.js

@@ -2,10 +2,11 @@
 
 const path = require('path');
 const replace = require('rollup-plugin-replace');
-const typescript = require('rollup-plugin-typescript');
+const babel = require('rollup-plugin-babel');
 
 const { version } = require('./package.json');
 const { generateTargetName } = require('./rollup.config.util');
+const { compatBrowsersPreset } = require('../../scripts/babel-config-util');
 
 const input = path.resolve(__dirname, 'src/main.js');
 const outputDir = path.resolve(__dirname, 'dist/umd');
@@ -15,25 +16,31 @@ const footer = `/** version: ${version} */`;
 
 function rollupConfig(config) {
     const { format, target } = config;
+    const isCompat = target === 'es5';
+
+    let plugins = [
+        replace({
+            'process.env.NODE_ENV': JSON.stringify('development'),
+        }),
+        isCompat && babel({
+            presets: [ compatBrowsersPreset ],
+            plugins: [ "external-helpers" ],
+            babelrc: false,
+        }),
+    ].filter((plugin) => plugin);
+
     const targetName = generateTargetName(config);
+
     return {
         input: input,
-        name: "WireService",
-        banner: banner,
-        footer: footer,
         output: {
             file: path.join(outputDir + `/${target}`,  targetName),
-            format: format
+            name: "WireService",
+            format,
+            banner,
+            footer,
         },
-        plugins: [
-            typescript({
-                target: target,
-                typescript: require('typescript'),
-            }),
-            replace({
-                'process.env.NODE_ENV': JSON.stringify('development')
-            })
-        ]
+        plugins,
     }
 }
 

packages/lwc-wire-service/rollup.config.umd.prod.js

@@ -4,11 +4,12 @@
 const path = require('path');
 const uglify = require('rollup-plugin-uglify');
 const replace = require('rollup-plugin-replace');
-const typescript = require('rollup-plugin-typescript');
+const babel = require('rollup-plugin-babel');
 const { minify } = require('uglify-es');
 
 const { version } = require('./package.json');
 const { generateTargetName } = require('./rollup.config.util');
+const { compatBrowsersPreset } = require('../../scripts/babel-config-util');
 
 const entry = path.resolve(__dirname, 'src/main.js');
 const outputDir = path.resolve(__dirname, 'dist/umd');
@@ -18,31 +19,33 @@ const footer = `/** version: ${version} */`;
 
 function rollupConfig(config){
     const { format, target, prod } = config;
+    const isCompat = target === 'es5';
 
     let plugins = [
-        typescript({
-            target: target,
-            typescript: require('typescript'),
-        }),
         replace({
             'process.env.NODE_ENV': JSON.stringify('production'),
         }),
-        prod && uglify({}, code => minify(code))
+        prod && uglify({}, code => minify(code)),
+        isCompat && babel({
+            presets: [ compatBrowsersPreset ],
+            plugins: [ "external-helpers" ],
+            babelrc: false,
+        }),
     ].filter((plugin) => plugin);
 
     const targetName = generateTargetName(config);
 
     // sourceMap issue: https://github.com/mjeanroy/rollup-plugin-license/issues/6
     return {
-        name: "WireService",
-        banner: banner,
-        footer: footer,
         input: entry,
         output: {
             file: path.join(outputDir + `/${target}`,  targetName),
-            format: format,
+            name: "WireService",
+            format,
+            banner,
+            footer,
         },
-        plugins
+        plugins,
     }
 }
 

scripts/babel-config-util.js

@@ -0,0 +1,12 @@
+exports.compatBrowsersPreset = ["env", {
+    "modules": false,
+    "targets": {
+        "node": "8",
+        "browsers": [
+            "Explorer 11",
+            "Safari 9",
+            "Chrome 30",
+            "Firefox 45",
+        ]
+    }
+}];