Bring back babel for ES5 builds

build-scripts/babel.js

@@ -0,0 +1,36 @@
+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",
+          [
+            require("@babel/plugin-proposal-decorators").default,
+            { decoratorsBeforeExport: true },
+          ],
+          [
+            require("@babel/plugin-proposal-class-properties").default,
+            { loose: true },
+          ],
+        ],
+      },
+    },
+  };
+};

build-scripts/webpack.js

@@ -7,6 +7,7 @@ const CompressionPlugin = require("compression-webpack-plugin");
 const zopfli = require("@gfx/zopfli");
 const ManifestPlugin = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
+const { babelLoaderConfig } = require("./babel.js");
 
 let version = fs
   .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
@@ -42,7 +43,7 @@ const resolve = {
 
 const tsLoader = (latestBuild) => ({
   test: /\.ts|tsx$/,
-  exclude: /node_modules/,
+  exclude: [path.resolve(paths.polymer_dir, "node_modules")],
   use: [
     {
       loader: "ts-loader",
@@ -126,12 +127,17 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     "hass-icons": "./src/entrypoints/hass-icons.ts",
   };
 
+  const rules = [tsLoader(latestBuild), cssLoader, htmlLoader];
+  if (!latestBuild) {
+    rules.push(babelLoaderConfig({ latestBuild }));
+  }
+
   return {
     mode: genMode(isProdBuild),
     devtool: genDevTool(isProdBuild),
     entry,
     module: {
-      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+      rules,
     },
     optimization: optimization(latestBuild),
     plugins: [
@@ -191,6 +197,11 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
 };
 
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  const rules = [tsLoader(latestBuild), cssLoader, htmlLoader];
+  if (!latestBuild) {
+    rules.push(babelLoaderConfig({ latestBuild }));
+  }
+
   return {
     mode: genMode(isProdBuild),
     devtool: genDevTool(isProdBuild),
@@ -199,7 +210,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
       compatibility: "./src/entrypoints/compatibility.ts",
     },
     module: {
-      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+      rules,
     },
     optimization: optimization(latestBuild),
     plugins: [
@@ -241,12 +252,17 @@ const createCastConfig = ({ isProdBuild, latestBuild }) => {
     entry.receiver = "./cast/src/receiver/entrypoint.ts";
   }
 
+  const rules = [tsLoader(latestBuild), cssLoader, htmlLoader];
+  if (!latestBuild) {
+    rules.push(babelLoaderConfig({ latestBuild }));
+  }
+
   return {
     mode: genMode(isProdBuild),
     devtool: genDevTool(isProdBuild),
     entry,
     module: {
-      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+      rules,
     },
     optimization: optimization(latestBuild),
     plugins: [

gallery/webpack.config.js

@@ -1,49 +1,59 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const webpackBase = require("../build-scripts/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
 const buildPath = path.resolve(__dirname, "dist");
 const publicPath = isProd ? "./" : "http://localhost:8080/";
 const latestBuild = true;
 
+const rules = [
+  {
+    exclude: [path.resolve(__dirname, "../node_modules")],
+    test: /\.ts$/,
+    use: [
+      {
+        loader: "ts-loader",
+        options: {
+          compilerOptions: latestBuild
+            ? { noEmit: false }
+            : {
+                target: "es5",
+                noEmit: false,
+              },
+        },
+      },
+    ],
+  },
+  {
+    test: /\.css$/,
+    use: "raw-loader",
+  },
+  {
+    test: /\.(html)$/,
+    use: {
+      loader: "html-loader",
+      options: {
+        exportAsEs6Default: true,
+      },
+    },
+  },
+];
+
+if (!latestBuild) {
+  rules.push(babelLoaderConfig({ latestBuild }));
+}
+
 module.exports = {
   mode: isProd ? "production" : "development",
   // Disabled in prod while we make Home Assistant able to serve the right files.
   // Was source-map
   devtool: isProd ? "none" : "inline-source-map",
   entry: "./src/entrypoint.js",
   module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: "ts-loader",
-            options: {
-              compilerOptions: latestBuild
-                ? { noEmit: false }
-                : { target: "es5", noEmit: false },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        use: "raw-loader",
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
-          },
-        },
-      },
-    ],
+    rules,
   },
   optimization: webpackBase.optimization(latestBuild),
   plugins: [

hassio/config.js

@@ -3,6 +3,7 @@ const path = require("path");
 module.exports = {
   // Target directory for the build.
   buildDir: path.resolve(__dirname, "build"),
+  nodeDir: path.resolve(__dirname, "../node_modules"),
   // Path where the Hass.io frontend will be publicly available.
   publicPath: "/api/hassio/app",
 };

hassio/webpack.config.js

@@ -4,44 +4,54 @@ const zopfli = require("@gfx/zopfli");
 
 const config = require("./config.js");
 const webpackBase = require("../build-scripts/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
 
 const isProdBuild = process.env.NODE_ENV === "production";
 const isCI = process.env.CI === "true";
 const chunkFilename = isProdBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
 const latestBuild = false;
 
+const rules = [
+  {
+    exclude: [config.nodeDir],
+    test: /\.ts$/,
+    use: [
+      {
+        loader: "ts-loader",
+        options: {
+          compilerOptions: latestBuild
+            ? { noEmit: false }
+            : {
+                target: "es5",
+                noEmit: false,
+              },
+        },
+      },
+    ],
+  },
+  {
+    test: /\.(html)$/,
+    use: {
+      loader: "html-loader",
+      options: {
+        exportAsEs6Default: true,
+      },
+    },
+  },
+];
+
+if (!latestBuild) {
+  rules.push(babelLoaderConfig({ latestBuild }));
+}
+
 module.exports = {
   mode: isProdBuild ? "production" : "development",
   devtool: isProdBuild ? "source-map" : "inline-source-map",
   entry: {
     entrypoint: "./src/entrypoint.js",
   },
   module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: "ts-loader",
-            options: {
-              compilerOptions: latestBuild
-                ? { noEmit: false }
-                : { target: "es5", noEmit: false },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
-          },
-        },
-      },
-    ],
+    rules,
   },
   optimization: webpackBase.optimization(latestBuild),
   plugins: [

package.json

@@ -106,6 +106,13 @@
     "xss": "^1.0.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.4.0",
     "@gfx/zopfli": "^1.0.11",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^3.0.12",
@@ -114,6 +121,7 @@
     "@types/leaflet": "^1.4.3",
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^5.2.6",
+    "babel-loader": "^8.0.5",
     "chai": "^4.2.0",
     "compression-webpack-plugin": "^2.0.0",
     "copy-webpack-plugin": "^5.0.2",