add debug logging utility

Author: ngocjohn

package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@mdi/js": "^7.4.47",
+    "debug": "^4.4.3",
     "home-assistant-js-websocket": "^9.5.0",
     "home-assistant-styles-manager": "^3.1.0",
     "lit": "^3.3.1",
@@ -34,7 +35,9 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.2",
+    "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
+    "@types/debug": "^4.1.12",
     "@types/leaflet": "^1.9.20",
     "@types/leaflet-providers": "^1.2.5",
     "@types/lodash": "^4.17.20",
@@ -66,6 +69,7 @@
   "scripts": {
     "start": "rollup -c rollup.config.js --bundleConfigAsCjs --watch",
     "dev": "pnpm run start",
+    "debug": "cross-env DEBUG=true pnpm run dev",
     "build": "pnpm run lint && pnpm run rollup",
     "lint": "eslint src/**/*.ts",
     "rollup": "rollup -c rollup.config.js --bundleConfigAsCjs",

pnpm-lock.yaml

@@ -31,7 +31,7 @@ export function logCardInfo(version) {
 }
 
 export const defaultPlugins = [
-  nodeResolve({ preferBuiltins: false }),
+  nodeResolve(),
   commonjs(),
   babel({
     babelHelpers: 'bundled',

rollup.config.helper.mjs

@@ -1,12 +1,16 @@
 import typescript from 'rollup-plugin-typescript2';
 import terser from '@rollup/plugin-terser';
+import replace from '@rollup/plugin-replace';
 import serve from 'rollup-plugin-serve';
+
 import { logCardInfo, defaultPlugins } from './rollup.config.helper.mjs';
 
 import { version } from './package.json';
 
 const dev = process.env.ROLLUP_WATCH;
 const port = process.env.PORT || 8235;
+const debug = process.env.DEBUG;
+
 const currentVersion = dev ? 'DEVELOPMENT' : `v${version}`;
 const custombanner = logCardInfo(currentVersion);
 
@@ -29,12 +33,17 @@ const terserOpt = {
   },
 };
 
+const replaceOpts = {
+  preventAssignment: true,
+  'process.env.DEBUG': JSON.stringify(debug),
+};
+
 const plugins = [
   dev && serve(serveopts),
   !dev && terser(terserOpt),
   typescript({
     sourceMap: dev,
-    outputToFilesystem: true,
+    outputToFilesystem: false,
   }),
 ];
 
@@ -47,13 +56,13 @@ export default [
         format: 'es',
         inlineDynamicImports: true,
         sourcemap: dev,
-        banner: !dev ? custombanner : undefined,
+        banner: custombanner,
       },
     ],
     watch: {
       exclude: 'node_modules/**',
     },
-    plugins: [...defaultPlugins, ...plugins],
+    plugins: [replace(replaceOpts), ...defaultPlugins, ...plugins],
     moduleContext: (id) => {
       const thisAsWindowForModules = [
         'node_modules/@formatjs/intl-utils/lib/src/diff.js',

rollup.config.js

@@ -1,28 +1,53 @@
+// debugger
+import { debug } from '../utils/debuglog';
+
+const debuglog = debug.extend('mini-map');
+
 import L from 'leaflet';
 import 'leaflet-providers/leaflet-providers.js';
 import mapstyle from 'leaflet/dist/leaflet.css';
 import { css, CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { COMPONENT } from '../constants/const';
 import { Address, MapData, MiniMapConfig } from '../types/config';
 import { SECTION } from '../types/section';
+import { isSafari } from '../utils';
 import { BaseElement } from '../utils/base-element';
 import { _getMapAddress } from '../utils/lovelace/create-map-card';
 import { showHaMapDialog } from '../utils/lovelace/show-map-dialog';
 
 export const DEFAULT_HOURS_TO_SHOW = 0;
 export const DEFAULT_ZOOM = 14;
 
+export const CARD_MAP_POSITION = ['default', 'top', 'bottom', 'single'] as const;
+export type CardMapPosition = (typeof CARD_MAP_POSITION)[number];
+
+const MAP_FILTER: Record<CardMapPosition, string> = {
+  default: 'linear-gradient(to bottom, transparent 0%, black 15%, black 90%, transparent 100%)',
+  top: 'linear-gradient(to bottom, black 90%, transparent 100%)',
+  bottom: 'linear-gradient(to bottom, transparent 0%, black 10%)',
+  single: 'linear-gradient(to bottom, transparent 0%, black 0%, black 100%, transparent 100%)',
+};
+
+const DEBUG_NO_FETCH = process.env.DEBUG === 'true' && true;
+const DEV_ADDRESS = {
+  streetName: '123 Example St',
+  sublocality: 'Example Suburb',
+  city: 'Example City',
+};
+
 @customElement(COMPONENT.MINI_MAP)
 export class MiniMapBox extends BaseElement {
   constructor() {
     super(SECTION.MINI_MAP);
   }
 
-  @property({ attribute: false }) mapConfig!: MiniMapConfig;
+  @property({ attribute: false }) public mapConfig!: MiniMapConfig;
   @property({ attribute: 'is-dark', type: Boolean, reflect: true })
   isDark!: boolean;
+  @property({ type: String, reflect: true, attribute: 'map-position' }) public mapPosition: CardMapPosition = 'default';
   @state() private mapData?: MapData;
 
   @state() private map: L.Map | null = null;
@@ -144,9 +169,20 @@ export class MiniMapBox extends BaseElement {
     return true;
   }
 
+  protected firstUpdated(): void {
+    this.mapPosition = this._computeMapPosition();
+  }
+
   private async _getAddress(): Promise<void> {
+    // Avoid fetching address in debug mode
+    if (DEBUG_NO_FETCH) {
+      this._addressReady = true;
+      this._address = DEV_ADDRESS;
+      return;
+    }
+
     const { lat, lon } = this.mapData!;
-    // console.log('Getting adress...');
+    debuglog('Getting adress...');
     const address = await _getMapAddress(this.mapConfig, lat, lon);
     if (address) {
       this._address = address;
@@ -237,9 +273,13 @@ export class MiniMapBox extends BaseElement {
   }
 
   protected render(): TemplateResult {
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const mapStyle = {
+      '--vic-map-mask-image': MAP_FILTER[this.mapPosition] || MAP_FILTER['default'],
+      height: `${this.mapConfig?.map_height || 150}px`,
+    };
+
     return html`
-      <div class="map-wrapper" ?safari=${isSafari} style=${`height: ${this.mapConfig?.map_height || 150}px;`}>
+      <div class="map-wrapper" ?safari=${isSafari} style=${styleMap(mapStyle)}>
         <div id="overlay-container">
           <div class="reset-button" @click=${this.resetMap} .hidden=${this._locateIconVisible}>
             <ha-icon icon="mdi:compass"></ha-icon>
@@ -294,6 +334,24 @@ export class MiniMapBox extends BaseElement {
     showHaMapDialog(this, params);
   }
 
+  private _computeMapPosition = (): CardMapPosition => {
+    const mapSec = this.parentNode as HTMLElement | null;
+    if (!mapSec) return 'default';
+    const { previousElementSibling, nextElementSibling } = mapSec;
+
+    let position: CardMapPosition = 'default';
+    if (!previousElementSibling && !nextElementSibling) {
+      position = 'single';
+    } else if (!previousElementSibling && nextElementSibling) {
+      position = 'top';
+    } else if (previousElementSibling && !nextElementSibling) {
+      position = 'bottom';
+    } else {
+      position = 'default';
+    }
+    return position;
+  };
+
   static get styles(): CSSResultGroup {
     return [
       super.styles,

src/components/vsc-mini-map.ts

@@ -3,4 +3,6 @@ declare module '*.css';
 declare module '*.png';
 declare module '*.jpg';
 declare module 'tinycolor2';
-declare module 'debug-es/src/browser.js';
+declare module 'debug/src/browser.js';
+declare module 'object-hash';
+declare module 'object-hash/dist/object_hash.js';

src/types/declarations.d.ts

@@ -0,0 +1,4 @@
+import Debug from 'debug/src/browser.js';
+
+const DEBUG_NAME = 'vsc';
+export const debug = Debug(DEBUG_NAME);

src/utils/debuglog.ts

@@ -11,5 +11,5 @@ export * from './editor/process-config-entities';
 export * from './loader_extra_map';
 export * from './mdi-icons';
 export * from './lovelace/create-custom-card';
-
 export * from './base-button';
+export * from './debuglog';