PLAT-40726 & ENYO-4798: Support babel-preset-env with dynamic targetted babel-polyfill usage (#102)

* Removed babel-plugin-syntax-dynamic-import as it's already included via stage-0 preset.
Removed babel-plugin-transform-react-constant-elements due to known issues (see facebook/create-react-app#553)

* PLAT-40726: Support babel-preset-env with dynamic targetted babel-polyfill usage.

* ENYO-4798: Babel improvements via additional plugins

* Remove blank comment line

* Exclude transform-regenerator to avoid regenerator runtime as that's not a supported feature anyway.

* Disable web.dom.iterable polyfill as its window/DOM-related and not a strict js polyfill. Unneeded for context of Enact app.

* Remove webOS build option. Instead, for webOS,set target browser or BROWSERSLIST env var to "Chrome 53"

* Remove webOS alias option


Reviewed-By: Roy Sutton ([email protected])
Integrated-By: Aaron Tam ([email protected])

Author: JayCanuck

config/.babelrc

@@ -1,9 +1,3 @@
 {
-	"presets": [["es2015", {"modules": false}], "stage-0", "react"],
-	"plugins": ["dev-expression", "syntax-dynamic-import"],
-	"env": {
-		"production": {
-			"plugins": ["transform-react-inline-elements","transform-react-constant-elements"]
-		}
-	}
+	"presets": ["./.babelrc.js"]
 }

config/.babelrc.js

@@ -0,0 +1,30 @@
+/*
+ *  .babelrc.js
+ *
+ *  A forward-compatible Babel javascript configuration dynamically setup
+ *  for Enact development environment on target platforms.
+ */
+
+const app = require('@enact/dev-utils/option-parser');
+const env = process.env.BABEL_ENV || process.env.NODE_ENV;
+
+module.exports = {
+	presets: [
+		['env', {
+			targets: Object.assign({uglify:true},
+					app.browsers && {browsers:app.browsers},
+					app.node && {node: app.node}),
+			exclude: ['transform-regenerator', 'web.dom.iterable', 'web.timers', 'web.immediate'],
+			useBuiltIns: true,
+			modules: false
+		}],
+		'stage-0',
+		'react'
+	],
+	plugins: [
+		'dev-expression',
+		env !== 'production' && 'transform-react-jsx-self',
+		env !== 'production' && 'transform-react-jsx-source',
+		env === 'production' && 'transform-react-inline-elements'
+	].filter(Boolean)
+};

config/karma.conf.js

@@ -96,7 +96,14 @@ module.exports = function(karma) {
 							babelrc: false,
 							extends: path.join(__dirname, '.babelrc'),
 							// @remove-on-eject-end
-							cacheDirectory: true
+							cacheDirectory: true,
+							// Generate a unique identifier string based off versons of components and app config.
+							cacheIdentifier: JSON.stringify({
+								'babel-loader': require('babel-loader/package.json').version,
+								'babel-core': require('babel-core/package.json').version,
+								browsers: app.browsers,
+								node: app.node
+							})
 						}
 					},
 					{

config/polyfills.js

@@ -1,40 +1,17 @@
-/* global global */
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
+/* eslint no-var: off */
+/*
+ *  polyfills.js
  *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ *  A collections of polyfills required prior to loading the app.
  */
-// @remove-on-eject-end
 
-if (typeof global !== 'undefined') {
-	if (typeof Promise === 'undefined') {
-		// Rejection tracking prevents a common issue where React gets into an
-		// inconsistent state due to an error, but it gets swallowed by a Promise,
-		// and the user has no idea what causes React's erratic future behavior.
-		require('promise/lib/rejection-tracking').enable();
-		global.Promise = require('promise/lib/es6-extensions');
-	}
+// Temporarily remap [Array].toLocaleString to [Array].toString.
+// Fixes an issue with loading the polyfills within the v8 snapshot environment 
+// where toLocaleString() within the TypedArray polyfills causes snapshot failure.
+var origToLocaleString = Array.prototype.toLocaleString;
+Array.prototype.toLocaleString = Array.prototype.toString;
 
-	// fetch() polyfill for making API calls.
-	require('whatwg-fetch');
-}
+require('babel-polyfill');
 
-if (!Math.sign) {
-	Math.sign = function(x) {
-		// If -0, must return -0.
-		return isNaN(x) ? NaN : x < 0 ? -1 : x > 0 ? 1 : +x;
-	}
-}
-
-// Common String ES6 functionalities for character values.
-// Used by Enact's Moonstone library.
-require('string.fromcodepoint');
-require('string.prototype.codepointat');
-
-// Object.assign() is commonly used with Enact and React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
+// Restore real [Array].toLocaleString for runtime usage.
+Array.prototype.toLocaleString = origToLocaleString;

config/webpack.config.dev.js

@@ -132,7 +132,14 @@ module.exports = {
 					// This is a feature of `babel-loader` for webpack (not Babel itself).
 					// It enables caching results in ./node_modules/.cache/babel-loader/
 					// directory for faster rebuilds.
-					cacheDirectory: true
+					cacheDirectory: true,
+					// Generate a unique identifier string based off versons of components and app config.
+					cacheIdentifier: JSON.stringify({
+						'babel-loader': require('babel-loader/package.json').version,
+						'babel-core': require('babel-core/package.json').version,
+						browsers: app.browsers,
+						node: app.node
+					})
 				}
 			},
 			// Multiple styling-support features are used together.

package.json

@@ -22,11 +22,11 @@
     "babel-eslint": "~8.0.1",
     "babel-loader": "~7.1.2",
     "babel-plugin-dev-expression": "~0.2.1",
-    "babel-plugin-syntax-dynamic-import": "~6.18.0",
     "babel-plugin-transform-es2015-modules-commonjs": "~6.26.0",
-    "babel-plugin-transform-react-constant-elements": "~6.23.0",
     "babel-plugin-transform-react-inline-elements": "~6.22.0",
-    "babel-preset-es2015": "~6.24.1",
+    "babel-plugin-transform-react-jsx-self": "~6.22.0",
+    "babel-plugin-transform-react-jsx-source": "~6.22.0",
+    "babel-preset-env": "~1.6.0",
     "babel-preset-react": "~6.24.1",
     "babel-preset-stage-0": "~6.24.1",
     "case-sensitive-paths-webpack-plugin": "~2.1.1",