Bring back babel

build-scripts/babel.js

@@ -3,7 +3,7 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
     throw Error("latestBuild not defined for babel loader config");
   }
   return {
-    test: /\.m?js$/,
+    test: /\.m?js$|\.tsx?$/,
     use: {
       loader: "babel-loader",
       options: {
@@ -12,6 +12,12 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
             require("@babel/preset-env").default,
             { modules: false },
           ],
+          [
+            require("@babel/preset-typescript").default,
+            {
+              jsxPragma: "h",
+            },
+          ],
         ].filter(Boolean),
         plugins: [
           // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
@@ -21,6 +27,12 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
           ],
           // Only support the syntax, Webpack will handle it.
           "@babel/syntax-dynamic-import",
+          [
+            "@babel/transform-react-jsx",
+            {
+              pragma: "h",
+            },
+          ],
           [
             require("@babel/plugin-proposal-decorators").default,
             { decoratorsBeforeExport: true },

build-scripts/webpack.js

@@ -41,20 +41,6 @@ const resolve = {
   },
 };
 
-const tsLoader = (latestBuild) => ({
-  test: /\.ts|tsx$/,
-  exclude: [path.resolve(paths.polymer_dir, "node_modules")],
-  use: [
-    {
-      loader: "ts-loader",
-      options: {
-        compilerOptions: latestBuild
-          ? { noEmit: false }
-          : { target: "es5", noEmit: false },
-      },
-    },
-  ],
-});
 const cssLoader = {
   test: /\.css$/,
   use: "raw-loader",
@@ -127,17 +113,12 @@ 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,
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
     },
     optimization: optimization(latestBuild),
     plugins: [
@@ -197,11 +178,6 @@ 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),
@@ -210,7 +186,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
       compatibility: "./src/entrypoints/compatibility.ts",
     },
     module: {
-      rules,
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
     },
     optimization: optimization(latestBuild),
     plugins: [
@@ -252,17 +228,12 @@ 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,
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
     },
     optimization: optimization(latestBuild),
     plugins: [

gallery/webpack.config.js

@@ -9,51 +9,29 @@ 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,
+    rules: [
+      babelLoaderConfig({ latestBuild }),
+      {
+        test: /\.css$/,
+        use: "raw-loader",
+      },
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: "html-loader",
+          options: {
+            exportAsEs6Default: true,
+          },
+        },
+      },
+    ],
   },
   optimization: webpackBase.optimization(latestBuild),
   plugins: [

hassio/webpack.config.js

@@ -11,47 +11,25 @@ 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,
+    rules: [
+      babelLoaderConfig({ latestBuild }),
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: "html-loader",
+          options: {
+            exportAsEs6Default: true,
+          },
+        },
+      },
+    ],
   },
   optimization: webpackBase.optimization(latestBuild),
   plugins: [

package.json

@@ -110,7 +110,9 @@
     "@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",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-typescript": "^7.4.0",
     "@gfx/zopfli": "^1.0.11",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^3.0.12",
@@ -158,7 +160,6 @@
     "require-dir": "^1.2.0",
     "sinon": "^7.3.1",
     "terser-webpack-plugin": "^1.2.3",
-    "ts-loader": "^6.1.1",
     "ts-mocha": "^6.0.0",
     "tslint": "^5.14.0",
     "tslint-config-prettier": "^1.18.0",

src/mixins/lit-localize-lite-mixin.ts

@@ -22,8 +22,8 @@ export const litLocalizeLiteMixin = <T extends LitElement>(
 ): Constructor<T & LitLocalizeLiteMixin> =>
   // @ts-ignore
   class extends localizeLiteBaseMixin(superClass) {
-    public localize: LocalizeFunc;
-
+    // Decorators not possible in anonymous classes
+    // And also, we cannot declare the variable without overriding the Lit setter.
     static get properties(): PropertyDeclarations {
       return {
         localize: {},

src/mixins/subscribe-mixin.ts

@@ -5,7 +5,6 @@ import {
   PropertyDeclarations,
 } from "lit-element";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { HomeAssistant } from "../types";
 
 export interface HassSubscribeElement {
   hassSubscribe(): UnsubscribeFunc[];
@@ -17,10 +16,11 @@ export const SubscribeMixin = <T extends LitElement>(
 ): Constructor<T & HassSubscribeElement> =>
   // @ts-ignore
   class extends superClass {
-    private hass?: HomeAssistant;
     /* tslint:disable-next-line */
     private __unsubs?: UnsubscribeFunc[];
 
+    // Decorators not possible in anonymous classes
+    // And also, we cannot declare the variable without overriding the Lit setter.
     static get properties(): PropertyDeclarations {
       return {
         hass: {},
@@ -50,14 +50,14 @@ export const SubscribeMixin = <T extends LitElement>(
     }
 
     protected hassSubscribe(): UnsubscribeFunc[] {
-      super.hassSubscribe();
       return [];
     }
 
     private __checkSubscribed(): void {
       if (
         this.__unsubs !== undefined ||
         !((this as unknown) as Element).isConnected ||
+        // @ts-ignore
         this.hass === undefined
       ) {
         return;

src/state/hass-base-mixin.ts

@@ -29,14 +29,13 @@ export default <T>(superClass: Constructor<T>): Constructor<T & HassBaseEl> =>
     private __provideHass: HTMLElement[] = [];
 
     // Decorators not possible in anonymous classes
+    // And also, we cannot declare the variable without overriding the Lit setter.
     static get properties(): PropertyDeclarations {
       return {
         hass: {},
       };
     }
 
-    protected hass!: HomeAssistant;
-
     // Exists so all methods can safely call super method
     protected hassConnected() {
       // tslint:disable-next-line
@@ -62,14 +61,17 @@ export default <T>(superClass: Constructor<T>): Constructor<T & HassBaseEl> =>
 
     public provideHass(el) {
       this.__provideHass.push(el);
+      // @ts-ignore
       el.hass = this.hass;
     }
 
     protected async _updateHass(obj: Partial<HomeAssistant>) {
+      // @ts-ignore
       if (!this.hass) {
         this._pendingHass = { ...this._pendingHass, ...obj };
         return;
       }
+      // @ts-ignore
       this.hass = { ...this.hass, ...obj };
     }
   };

tsconfig.json

@@ -12,7 +12,6 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "strict": true,
-    "sourceMap": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
     "resolveJsonModule": true,