Fixes (#36)

Fix devcontainer Fix editor lazyloaded elements Fix rollup Fix hasChanged error
2020-10-20 21:10:17 -05:00
parent 07103ec8f4
commit 396e90b451
7 changed files with 107 additions and 32 deletions
@@ -0,0 +1,12 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "start",
+			"problemMatcher": [],
+			"label": "npm: start",
+			"detail": "rollup -c --watch"
+		}
+	]
+}
@@ -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"
  }
-}
+}
@@ -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": "*",
+      },
+    }),
+  ],
+};
@@ -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),
-          hasDoubleClick: hasAction(this._config.double_tap_action),
+          hasHold: hasAction(this.config.hold_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) {
-      handleAction(this, this.hass, this._config, ev.detail.action);
+    if (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`
@@ -1 +1 @@
-export const CARD_VERSION = '1.1.7';
+export const CARD_VERSION = '1.2.0';
@@ -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
-                  aria-label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}
-                  .checked=${this._show_warning !== false}
-                  .configValue=${'show_warning'}
-                  @change=${this._valueChanged}
-                  >Show Warning?</ha-switch
-                >
-                <ha-switch
-                  aria-label=${`Toggle error ${this._show_error ? 'off' : 'on'}`}
-                  .checked=${this._show_error !== false}
-                  .configValue=${'show_error'}
-                  @change=${this._valueChanged}
-                  >Show Error?</ha-switch
-                >
+                <ha-formfield .label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}>
+                  <ha-switch
+                    .checked=${this._show_warning !== false}
+                    .configValue=${'show_warning'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                <ha-formfield .label=${`Toggle error ${this._show_error ? 'off' : 'on'}`}>
+                  <ha-switch
+                    .checked=${this._show_error !== false}
+                    .configValue=${'show_error'}
+                    @change=${this._valueChanged}
+                  ></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;
      }
    `;
@@ -4,4 +4,4 @@
    "invalid_configuration": "Invalid configuration",
    "show_warning": "Show Warning"
  }
-}
+}