Introduce object rest spread (#1763)

config/babel.js

@@ -0,0 +1,34 @@
+module.exports.babelLoaderConfig = ({ latestBuild }) => {
+  if (latestBuild === undefined) {
+    throw Error("latestBuild not defined for babel loader config");
+  }
+  return {
+    test: /\.m?js$/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: [
+          !latestBuild && [
+            require("@babel/preset-env").default,
+            { modules: false },
+          ],
+        ].filter(Boolean),
+        plugins: [
+          // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+          [
+            "@babel/plugin-proposal-object-rest-spread",
+            { loose: true, useBuiltIns: true },
+          ],
+          // Only support the syntax, Webpack will handle it.
+          "@babel/syntax-dynamic-import",
+          [
+            "@babel/transform-react-jsx",
+            {
+              pragma: "h",
+            },
+          ],
+        ],
+      },
+    },
+  };
+};

gallery/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { babelLoaderConfig } = require("../config/babel.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
@@ -15,24 +16,7 @@ module.exports = {
   entry: "./src/entrypoint.js",
   module: {
     rules: [
-      {
+      babelLoaderConfig({ latestBuild: true }),
-        test: /\.js$/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            plugins: [
-              // Only support the syntax, Webpack will handle it.
-              "@babel/syntax-dynamic-import",
-              [
-                "@babel/transform-react-jsx",
-                {
-                  pragma: "h",
-                },
-              ],
-            ],
-          },
-        },
-      },
       {
         test: /\.(html)$/,
         use: {

hassio/webpack.config.js

@@ -1,6 +1,7 @@
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const CompressionPlugin = require("compression-webpack-plugin");
 const config = require("./config.js");
+const { babelLoaderConfig } = require("../config/babel.js");
 
 const isProdBuild = process.env.NODE_ENV === "production";
 const chunkFilename = isProdBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
@@ -13,21 +14,7 @@ module.exports = {
   },
   module: {
     rules: [
-      {
+      babelLoaderConfig({ latestBuild: false }),
-        test: /\.m?js$/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            presets: [
-              [require("@babel/preset-env").default, { modules: false }],
-            ],
-            plugins: [
-              // Only support the syntax, Webpack will handle it.
-              "@babel/syntax-dynamic-import",
-            ],
-          },
-        },
-      },
       {
         test: /\.(html)$/,
         use: {

package.json

@@ -91,6 +91,7 @@
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-env": "^7.1.0",

src/panels/lovelace/cards/hui-entity-filter-card.js

@@ -37,7 +37,7 @@ class HuiEntitiesCard extends PolymerElement {
       this._element = null;
     }
 
-    const card = "card" in config ? Object.assign({}, config.card) : {};
+    const card = "card" in config ? { ...config.card } : {};
     if (!card.type) card.type = "entities";
     card.entities = [];
 
@@ -66,9 +66,7 @@ class HuiEntitiesCard extends PolymerElement {
     }
 
     this.style.display = "block";
-    element.setConfig(
+    element.setConfig({ ...element._filterRawConfig, entities: entitiesList });
-      Object.assign({}, element._filterRawConfig, { entities: entitiesList })
-    );
     element.isPanel = this.isPanel;
     element.hass = this.hass;
 

src/panels/lovelace/cards/hui-gauge-card.js

@@ -121,7 +121,7 @@ class HuiGaugeCard extends EventsMixin(PolymerElement) {
   setConfig(config) {
     if (!config || !config.entity)
       throw new Error("Invalid card configuration");
-    this._config = Object.assign({ min: 0, max: 100 }, config);
+    this._config = { min: 0, max: 100, ...config };
   }
 
   _computeStateObj(states, entityId) {

src/panels/lovelace/cards/hui-glance-card.js

@@ -154,11 +154,7 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(LitElement)) {
         break;
       case "call-service": {
         const [domain, service] = config.service.split(".", 2);
-        const serviceData = Object.assign(
+        const serviceData = { entity_id: entityId, ...config.service_data };
-          {},
-          { entity_id: entityId },
-          config.service_data
-        );
         this.hass.callService(domain, service, serviceData);
         break;
       }

src/panels/lovelace/cards/hui-sensor-card.js

@@ -37,17 +37,15 @@ class HuiSensorCard extends EventsMixin(LitElement) {
       throw new Error("Specify an entity from within the sensor domain.");
     }
 
-    const cardConfig = Object.assign(
+    const cardConfig = {
-      {
+      icon: false,
-        icon: false,
+      hours_to_show: 24,
-        hours_to_show: 24,
+      accuracy: 10,
-        accuracy: 10,
+      height: 100,
-        height: 100,
+      line_width: 5,
-        line_width: 5,
+      line_color: "var(--accent-color)",
-        line_color: "var(--accent-color)",
+      ...config,
-      },
+    };
-      config
-    );
     cardConfig.hours_to_show = Number(cardConfig.hours_to_show);
     cardConfig.accuracy = Number(cardConfig.accuracy);
     cardConfig.height = Number(cardConfig.height);

webpack.config.js

@@ -8,6 +8,7 @@ const CompressionPlugin = require("compression-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const zopfli = require("@gfx/zopfli");
 const translationMetadata = require("./build-translations/translationMetadata.json");
+const { babelLoaderConfig } = require("./config/babel.js");
 
 const version = fs.readFileSync("setup.py", "utf8").match(/\d{8}[^']*/);
 if (!version) {
@@ -61,30 +62,7 @@ function createConfig(isProdBuild, latestBuild) {
     entry,
     module: {
       rules: [
-        {
+        babelLoaderConfig({ latestBuild }),
-          test: /\.m?js$/,
-          use: {
-            loader: "babel-loader",
-            options: {
-              presets: [
-                !latestBuild && [
-                  require("@babel/preset-env").default,
-                  { modules: false },
-                ],
-              ].filter(Boolean),
-              plugins: [
-                // Only support the syntax, Webpack will handle it.
-                "@babel/syntax-dynamic-import",
-                [
-                  "@babel/transform-react-jsx",
-                  {
-                    pragma: "h",
-                  },
-                ],
-              ],
-            },
-          },
-        },
         {
           test: /\.(html)$/,
           use: {