Convert common dir to TS (#2580)

* Convert common dir to TS

* Lint

* Update setup-leaflet-map.ts

src/common/dom/apply_themes_on_element.ts

@@ -19,11 +19,11 @@ export default function applyThemesOnElement(
   if (localTheme === "default" || (localTheme && themes.themes[localTheme])) {
     themeName = localTheme;
   }
-  const styles = Object.assign({}, element._themes);
+  const styles = { ...element._themes };
   if (themeName !== "default") {
-    var theme = themes.themes[themeName];
+    const theme = themes.themes[themeName];
     Object.keys(theme).forEach((key) => {
-      var prefixedKey = "--" + key;
+      const prefixedKey = "--" + key;
       element._themes[prefixedKey] = "";
       styles[prefixedKey] = theme[key];
     });
@@ -35,12 +35,14 @@ export default function applyThemesOnElement(
     window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ (element), styles);
   }
 
-  if (!updateMeta) return;
+  if (!updateMeta) {
+    return;
+  }
 
   const meta = document.querySelector("meta[name=theme-color]");
   if (meta) {
     if (!meta.hasAttribute("default-content")) {
-      meta.setAttribute("default-content", meta.getAttribute("content"));
+      meta.setAttribute("default-content", meta.getAttribute("content")!);
     }
     const themeColor =
       styles["--primary-color"] || meta.getAttribute("default-content");

src/common/dom/load_resource.ts

@@ -1,9 +1,13 @@
 // Load a resource and get a promise when loading done.
 // From: https://davidwalsh.name/javascript-loader
 
-function _load(tag, url, type) {
+const _load = (
+  tag: "link" | "script" | "img",
+  url: string,
+  type?: "module"
+) => {
   // This promise will be used by Promise.all to determine success or failure
-  return new Promise(function(resolve, reject) {
+  return new Promise((resolve, reject) => {
     const element = document.createElement(tag);
     let attr = "src";
     let parent = "body";
@@ -15,14 +19,14 @@ function _load(tag, url, type) {
     // Need to set different attributes depending on tag type
     switch (tag) {
       case "script":
-        element.async = true;
+        (element as HTMLScriptElement).async = true;
         if (type) {
-          element.type = type;
+          (element as HTMLScriptElement).type = type;
         }
         break;
       case "link":
-        element.type = "text/css";
-        element.rel = "stylesheet";
+        (element as HTMLLinkElement).type = "text/css";
+        (element as HTMLLinkElement).rel = "stylesheet";
         attr = "href";
         parent = "head";
     }
@@ -31,9 +35,9 @@ function _load(tag, url, type) {
     element[attr] = url;
     document[parent].appendChild(element);
   });
-}
+};
 
-export const loadCSS = (url) => _load("link", url);
-export const loadJS = (url) => _load("script", url);
-export const loadImg = (url) => _load("img", url);
-export const loadModule = (url) => _load("script", url, "module");
+export const loadCSS = (url: string) => _load("link", url);
+export const loadJS = (url: string) => _load("script", url);
+export const loadImg = (url: string) => _load("img", url);
+export const loadModule = (url: string) => _load("script", url, "module");

src/common/dom/scroll-to-target.ts

@@ -11,23 +11,23 @@ export default function scrollToTarget(element, target) {
   // the scroll event will trigger _updateScrollState directly,
   // However, _updateScrollState relies on the previous `scrollTop` to update the states.
   // Calling _updateScrollState will ensure that the states are synced correctly.
-  var top = 0;
-  var scroller = target;
-  var easingFn = function easeOutQuad(t, b, c, d) {
+  const top = 0;
+  const scroller = target;
+  const easingFn = function easeOutQuad(t, b, c, d) {
     /* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
     t /= d;
     return -c * t * (t - 2) + b;
     /* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
   };
-  var animationId = Math.random();
-  var duration = 200;
-  var startTime = Date.now();
-  var currentScrollTop = scroller.scrollTop;
-  var deltaScrollTop = top - currentScrollTop;
+  const animationId = Math.random();
+  const duration = 200;
+  const startTime = Date.now();
+  const currentScrollTop = scroller.scrollTop;
+  const deltaScrollTop = top - currentScrollTop;
   element._currentAnimationId = animationId;
   (function updateFrame() {
-    var now = Date.now();
-    var elapsedTime = now - startTime;
+    const now = Date.now();
+    const elapsedTime = now - startTime;
     if (elapsedTime > duration) {
       scroller.scrollTop = top;
     } else if (element._currentAnimationId === animationId) {

src/common/dom/setup-leaflet-map.ts

@@ -1,5 +1,6 @@
 // Sets up a Leaflet map on the provided DOM element
 export const setupLeafletMap = async (mapElement) => {
+  // tslint:disable-next-line
   const Leaflet = (await import(/* webpackChunkName: "leaflet" */ "leaflet"))
     .default;
   Leaflet.Icon.Default.imagePath = "/static/images/leaflet";

src/common/preact/event.ts

@@ -1,11 +1,18 @@
-export function onChangeEvent(prop, ev) {
+interface OnChangeComponent {
+  props: {
+    index: number;
+    onChange(index: number, data: object);
+  };
+}
+
+export function onChangeEvent(this: OnChangeComponent, prop, ev) {
   const origData = this.props[prop];
 
   if (ev.target.value === origData[ev.target.name]) {
     return;
   }
 
-  const data = Object.assign({}, origData);
+  const data = { ...origData };
 
   if (ev.target.value) {
     data[ev.target.name] = ev.target.value;

src/common/preact/unmount.ts

@@ -1,5 +1,9 @@
 import { render } from "preact";
 
 export default function unmount(mountEl) {
-  render(() => null, mountEl);
+  render(
+    // @ts-ignore
+    () => null,
+    mountEl
+  );
 }

src/common/util/debounce.ts

@@ -7,14 +7,20 @@
 export default function debounce(func, wait, immediate) {
   let timeout;
   return function(...args) {
+    // tslint:disable:no-this-assignment
+    // @ts-ignore
     const context = this;
     const later = () => {
       timeout = null;
-      if (!immediate) func.apply(context, args);
+      if (!immediate) {
+        func.apply(context, args);
+      }
     };
     const callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
+    if (callNow) {
+      func.apply(context, args);
+    }
   };
 }

src/panels/lovelace/hui-root.ts

@@ -93,7 +93,8 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
     // web components have been loaded.
     this._debouncedConfigChanged = debounce(
       () => this._selectView(this._curView, true),
-      100
+      100,
+      false
     );
   }
 

src/types.ts

@@ -16,6 +16,20 @@ declare global {
   var __VERSION__: string;
 }
 
+declare global {
+  interface Window {
+    ShadyCSS: {
+      nativeCss: boolean;
+      nativeShadow: boolean;
+      prepareTemplate(templateElement, elementName, elementExtension);
+      styleElement(element);
+      styleSubtree(element, overrideProperties);
+      styleDocument(overrideProperties);
+      getComputedStyleValue(element, propertyName);
+    };
+  }
+}
+
 export interface WebhookError {
   code: number;
   message: string;