tweak default jinja vars, cleanup, and babel

.babelrc

@@ -1,13 +1,20 @@
 {
   "exclude": "node_modules/**",
   "sourceMaps": false,
-  "plugins": ["@babel/plugin-proposal-object-rest-spread"],
+  "plugins": [
+    ["@babel/plugin-proposal-object-rest-spread"],
+    ["@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ],
   "presets": [
     [
       "@babel/preset-env",
       {
         "targets": {
-          "browsers": [">2%", "Edge > 14", "Firefox > 63", "Chrome > 50"]
+          "browsers": [">2%", "edge > 14", "firefox > 63", "chrome > 50", "ios > 9"]
         }
       }
     ]

package.json

@@ -19,8 +19,10 @@
   "dependencies": {
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/plugin-transform-regenerator": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/polyfill": "^7.7.0",
     "@babel/preset-env": "^7.7.7",
+    "@babel/runtime": "^7.10.2",
     "@rollup/plugin-commonjs": "^11.0.1",
     "custom-card-helpers": "^1.4.0",
     "home-assistant-js-websocket": "^4.4.0",

rollup.config.js

@@ -1,40 +1,40 @@
-import nodeResolve from 'rollup-plugin-node-resolve';
-import typescript from 'rollup-plugin-typescript2';
-import babel from 'rollup-plugin-babel';
-import serve from 'rollup-plugin-serve';
-import json from '@rollup/plugin-json';
-import commonjs from '@rollup/plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-
-const dev = process.env.ROLLUP_WATCH;
-
-const serveopts = {
-  contentBase: ['./dist'],
-  host: '0.0.0.0',
-  port: 5000,
-  allowCrossOrigin: true,
-  headers: {
-    'Access-Control-Allow-Origin': '*',
-  },
-};
-
-const plugins = [
-  nodeResolve({}),
-  typescript(),
-  json(),
-  babel(),
-  commonjs(),
-  dev && serve(serveopts),
-  !dev && terser({ keep_fnames: true }),
-];
-
-export default [
-  {
-    input: 'src/custom-header.ts',
-    output: {
-      dir: 'dist',
-      format: 'es',
-    },
-    plugins: [...plugins],
-  },
-];
+import nodeResolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import babel from 'rollup-plugin-babel';
+import serve from 'rollup-plugin-serve';
+import json from '@rollup/plugin-json';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+
+const dev = process.env.ROLLUP_WATCH;
+
+const serveopts = {
+  contentBase: ['./dist'],
+  host: '0.0.0.0',
+  port: 5000,
+  allowCrossOrigin: true,
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+  },
+};
+
+const plugins = [
+  nodeResolve({}),
+  typescript(),
+  json(),
+  babel({ runtimeHelpers: true }),
+  commonjs(),
+  dev && serve(serveopts),
+  !dev && terser({ keep_fnames: true }),
+];
+
+export default [
+  {
+    input: 'src/custom-header.ts',
+    output: {
+      dir: 'dist',
+      format: 'es',
+    },
+    plugins: [...plugins],
+  },
+];

src/conditional-config.js

@@ -87,6 +87,5 @@ export const conditionalConfig = config => {
       delete config.hide_tabs;
     }
   }
-  window.customHeaderExceptionConfig = JSON.stringify(exceptionConfig);
   return { ...config, ...exceptionConfig };
 };

src/observers.js

@@ -28,7 +28,6 @@ export const observers = (config, ch, haElem) => {
     const headerType = config.split_mode ? ch.footer : ch.header;
     mutations.forEach(({ addedNodes, target }) => {
       if (mutations.length && mutations[0].target.nodeName == 'HTML') {
-        window.customHeaderExceptionConfig = 'init';
         CustomHeaderConfig.buildConfig(ch);
         mutations = [];
       }

src/template-variables.js

@@ -15,25 +15,13 @@ const _deviceID = () => {
   }
   return localStorage[ID_STORAGE_KEY];
 };
-
 export let deviceID = _deviceID();
 
 export const defaultVariables = locale => {
-  const hass = ha_elements().hass;
-  const lovelace = getLovelace();
   const d = new Date();
-  if (!lovelace || lovelace.config.views[lovelace.current_view] == undefined) return;
-  return {
-    hassVersion: hass.config.version,
+  let vars = {
     deviceID: deviceID,
-    isAdmin: hass.user.is_admin,
-    isOwner: hass.user.is_owner,
-    user: hass.user.name,
-    userID: hass.user.id,
     userAgent: navigator.userAgent,
-    viewTitle: lovelace.config.views[lovelace.current_view].title,
-    viewPath: lovelace.config.views[lovelace.current_view].path,
-    viewIndex: lovelace.current_view,
     url: window.location.href,
     time: d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }),
     date: d.toLocaleDateString(locale, {}),
@@ -56,4 +44,19 @@ export const defaultVariables = locale => {
     AMPM: d.getHours() >= 12 ? 'PM' : 'AM',
     ampm: d.getHours() >= 12 ? 'pm' : 'am',
   };
+
+  const hass = ha_elements().hass;
+  vars.hassVersion = hass ? hass.config.version : '';
+  vars.isAdmin = hass ? hass.user.is_admin : '';
+  vars.isOwner = hass ? hass.user.is_owner : '';
+  vars.user = hass ? hass.user.name : '';
+  vars.userID = hass ? hass.user.id : '';
+
+  const lovelace = getLovelace();
+  const current_view = lovelace && lovelace.config.views[lovelace.current_view] != undefined;
+  vars.viewIndex = lovelace ? lovelace.current_view : '';
+  vars.viewTitle = current_view ? lovelace.config.views[lovelace.current_view].title || '' : '';
+  vars.viewPath = current_view ? lovelace.config.views[lovelace.current_view].path || '' : '';
+
+  return vars;
 };