Fixes (#36)

Fix devcontainer
Fix editor lazyloaded elements
Fix rollup
Fix hasChanged error

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "start",
+			"problemMatcher": [],
+			"label": "npm: start",
+			"detail": "rollup -c --watch"
+		}
+	]
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boilerplate-card",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "Lovelace boilerplate-card",
   "keywords": [
     "home-assistant",
@@ -24,7 +24,7 @@
     "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-decorators": "^7.4.0",
-    "@rollup/plugin-json": "^4.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^2.6.0",
     "@typescript-eslint/parser": "^2.6.0",
     "eslint": "^6.6.0",
@@ -44,9 +44,9 @@
     "typescript": "^3.6.4"
   },
   "scripts": {
-    "start": "rollup -c --watch",
+    "start": "rollup -c rollup.config.dev.js --watch",
     "build": "npm run lint && npm run rollup",
     "lint": "eslint src/*.ts",
     "rollup": "rollup -c"
   }
-}
+}

rollup.config.dev.js

@@ -0,0 +1,32 @@
+import resolve from "rollup-plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+import babel from "rollup-plugin-babel";
+import serve from "rollup-plugin-serve";
+import { terser } from "rollup-plugin-terser";
+import json from '@rollup/plugin-json';
+
+export default {
+  input: ["src/boilerplate-card.ts"],
+  output: {
+    dir: "./dist",
+    format: "es",
+  },
+  plugins: [
+    resolve(),
+    typescript(),
+    json(),
+    babel({
+      exclude: "node_modules/**",
+    }),
+    terser(),
+    serve({
+      contentBase: "./dist",
+      host: "0.0.0.0",
+      port: 5000,
+      allowCrossOrigin: true,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+      },
+    }),
+  ],
+};

src/boilerplate-card.ts

@@ -45,7 +45,7 @@ export class BoilerplateCard extends LitElement {
 
   // TODO Add any properities that should cause your element to re-render here
   @property() public hass!: HomeAssistant;
-  @property() private _config!: BoilerplateCardConfig;
+  @property() private config!: BoilerplateCardConfig;
 
   public setConfig(config: BoilerplateCardConfig): void {
     // TODO Check for required fields and that they are of the proper format
@@ -57,39 +57,43 @@ export class BoilerplateCard extends LitElement {
       getLovelace().setEditMode(true);
     }
 
-    this._config = {
+    this.config = {
       name: 'Boilerplate',
       ...config,
     };
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (!this.config) {
+      return false;
+    }
+
     return hasConfigOrEntityChanged(this, changedProps, false);
   }
 
   protected render(): TemplateResult | void {
     // TODO Check for stateObj or other necessary things and render a warning if missing
-    if (this._config.show_warning) {
+    if (this.config.show_warning) {
       return this.showWarning(localize('common.show_warning'));
     }
 
     return html`
       <ha-card
-        .header=${this._config.name}
+        .header=${this.config.name}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
-          hasHold: hasAction(this._config.hold_action),
+          hasHold: hasAction(this.config.hold_action),
-          hasDoubleClick: hasAction(this._config.double_tap_action),
+          hasDoubleClick: hasAction(this.config.double_tap_action),
         })}
         tabindex="0"
-        aria-label=${`Boilerplate: ${this._config.entity}`}
+        .label=${`Boilerplate: ${this.config.entity || 'No Entity Defined'}`}
       ></ha-card>
     `;
   }
 
   private _handleAction(ev: ActionHandlerEvent): void {
-    if (this.hass && this._config && ev.detail.action) {
+    if (this.hass && this.config && ev.detail.action) {
-      handleAction(this, this.hass, this._config, ev.detail.action);
+      handleAction(this, this.hass, this.config, ev.detail.action);
     }
   }
 
@@ -104,7 +108,7 @@ export class BoilerplateCard extends LitElement {
     errorCard.setConfig({
       type: 'error',
       error,
-      origConfig: this._config,
+      origConfig: this.config,
     });
 
     return html`

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.1.7';
+export const CARD_VERSION = '1.2.0';

src/editor.ts

@@ -49,9 +49,21 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
   @property() public hass?: HomeAssistant;
   @property() private _config?: BoilerplateCardConfig;
   @property() private _toggle?: boolean;
+  @property() private _helpers?: any;
+  private _initialized = false;
 
   public setConfig(config: BoilerplateCardConfig): void {
     this._config = config;
+
+    this.loadCardHelpers();
+  }
+
+  protected shouldUpdate(): boolean {
+    if (!this._initialized) {
+      this._initialize();
+    }
+
+    return true;
   }
 
   get _name(): string {
@@ -111,10 +123,13 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
   }
 
   protected render(): TemplateResult | void {
-    if (!this.hass) {
+    if (!this.hass || !this._helpers) {
       return html``;
     }
 
+    // The climate more-info has ha-switch and paper-dropdown-menu elements that are lazy loaded unless explicitly done here
+    this._helpers.importMoreInfoControl('climate');
+
     // You can restrict on domain type
     const entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'sun');
 
@@ -218,20 +233,20 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
                   @value-changed=${this._valueChanged}
                 ></paper-input>
                 <br />
-                <ha-switch
+                <ha-formfield .label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}>
-                  aria-label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}
+                  <ha-switch
-                  .checked=${this._show_warning !== false}
+                    .checked=${this._show_warning !== false}
-                  .configValue=${'show_warning'}
+                    .configValue=${'show_warning'}
-                  @change=${this._valueChanged}
+                    @change=${this._valueChanged}
-                  >Show Warning?</ha-switch
+                  ></ha-switch>
-                >
+                </ha-formfield>
-                <ha-switch
+                <ha-formfield .label=${`Toggle error ${this._show_error ? 'off' : 'on'}`}>
-                  aria-label=${`Toggle error ${this._show_error ? 'off' : 'on'}`}
+                  <ha-switch
-                  .checked=${this._show_error !== false}
+                    .checked=${this._show_error !== false}
-                  .configValue=${'show_error'}
+                    .configValue=${'show_error'}
-                  @change=${this._valueChanged}
+                    @change=${this._valueChanged}
-                  >Show Error?</ha-switch
+                  ></ha-switch>
-                >
+                </ha-formfield>
               </div>
             `
           : ''}
@@ -239,6 +254,17 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
     `;
   }
 
+  private _initialize(): void {
+    if (this.hass === undefined) return;
+    if (this._config === undefined) return;
+    if (this._helpers === undefined) return;
+    this._initialized = true;
+  }
+
+  private async loadCardHelpers(): Promise<void> {
+    this._helpers = await (window as any).loadCardHelpers();
+  }
+
   private _toggleAction(ev): void {
     this._toggleThing(ev, options.actions.options);
   }
@@ -301,8 +327,9 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
       .values {
         padding-left: 16px;
         background: var(--secondary-background-color);
+        display: grid;
       }
-      ha-switch {
+      ha-formfield {
         padding-bottom: 8px;
       }
     `;

src/localize/languages/en.json

@@ -4,4 +4,4 @@
     "invalid_configuration": "Invalid configuration",
     "show_warning": "Show Warning"
   }
-}
+}