Fix yaml name collision in card editor (#4079)

* Fix `yaml` name collision

* Add types for js-yaml change to named imports

gallery/src/components/demo-card.js

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import JsYaml from "js-yaml";
+import { safeLoad } from "js-yaml";
 
 import { createCardElement } from "../../../src/panels/lovelace/common/create-card-element";
 
@@ -62,7 +62,7 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
+    const el = createCardElement(safeLoad(config.config)[0]);
     el.hass = this.hass;
     card.appendChild(el);
   }

package.json

@@ -119,6 +119,7 @@
     "@types/chromecast-caf-sender": "^1.0.1",
     "@types/codemirror": "^0.0.78",
     "@types/hls.js": "^0.12.3",
+    "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^5.2.6",

src/panels/config/js/yaml_textarea.tsx

@@ -1,5 +1,5 @@
 import { h, Component } from "preact";
-import yaml from "js-yaml";
+import { safeDump, safeLoad } from "js-yaml";
 import "../../../components/ha-code-editor";
 
 const isEmpty = (obj: object) => {
@@ -19,7 +19,7 @@ export default class YAMLTextArea extends Component<any, any> {
     try {
       value =
         props.value && !isEmpty(props.value)
-          ? yaml.safeDump(props.value)
+          ? safeDump(props.value)
           : undefined;
     } catch (err) {
       alert(`There was an error converting to YAML: ${err}`);
@@ -40,7 +40,7 @@ export default class YAMLTextArea extends Component<any, any> {
 
     if (value) {
       try {
-        parsed = yaml.safeLoad(value);
+        parsed = safeLoad(value);
         isValid = true;
       } catch (err) {
         // Invalid YAML

src/panels/developer-tools/event/developer-tools-event.js

@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import yaml from "js-yaml";
+import { safeLoad } from "js-yaml";
 
 import "../../../components/ha-code-editor";
 import "../../../resources/ha-style";
@@ -138,7 +138,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _computeParsedEventData(eventData) {
     try {
-      return eventData.trim() ? yaml.safeLoad(eventData) : {};
+      return eventData.trim() ? safeLoad(eventData) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }

src/panels/developer-tools/service/developer-tools-service.js

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import yaml from "js-yaml";
+import { safeDump, safeLoad } from "js-yaml";
 
 import { ENTITY_COMPONENT_DOMAINS } from "../../../data/entity";
 import "../../../components/entity/ha-entity-picker";
@@ -266,7 +266,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
 
   _computeParsedServiceData(serviceData) {
     try {
-      return serviceData.trim() ? yaml.safeLoad(serviceData) : {};
+      return serviceData.trim() ? safeLoad(serviceData) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }
@@ -310,18 +310,18 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
       if (attribute.example) {
         let value = "";
         try {
-          value = yaml.safeLoad(attribute.example);
+          value = safeLoad(attribute.example);
         } catch (err) {
           value = attribute.example;
         }
         example[attribute.key] = value;
       }
     });
-    this.serviceData = yaml.safeDump(example);
+    this.serviceData = safeDump(example);
   }
 
   _entityPicked(ev) {
-    this.serviceData = yaml.safeDump({
+    this.serviceData = safeDump({
       ...this.parsedJSON,
       entity_id: ev.target.value,
     });

src/panels/developer-tools/state/developer-tools-state.js

@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import yaml from "js-yaml";
+import { safeDump, safeLoad } from "js-yaml";
 
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-code-editor";
@@ -235,14 +235,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     var state = ev.model.entity;
     this._entityId = state.entity_id;
     this._state = state.state;
-    this._stateAttributes = yaml.safeDump(state.attributes);
+    this._stateAttributes = safeDump(state.attributes);
     ev.preventDefault();
   }
 
   entityIdChanged() {
     var state = this.hass.states[this._entityId];
     this._state = state.state;
-    this._stateAttributes = yaml.safeDump(state.attributes);
+    this._stateAttributes = safeDump(state.attributes);
   }
 
   entityMoreInfo(ev) {
@@ -363,7 +363,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _computeParsedStateAttributes(stateAttributes) {
     try {
-      return stateAttributes.trim() ? yaml.safeLoad(stateAttributes) : {};
+      return stateAttributes.trim() ? safeLoad(stateAttributes) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }

src/panels/lovelace/cards/hui-error-card.ts

@@ -7,7 +7,7 @@ import {
   css,
   CSSResult,
 } from "lit-element";
-import yaml from "js-yaml";
+import { safeDump } from "js-yaml";
 
 import { LovelaceCard } from "../types";
 import { HomeAssistant } from "../../../types";
@@ -46,7 +46,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
 
     return html`
       ${this._config.error}
-      <pre>${yaml.safeDump(this._config.origConfig)}</pre>
+      <pre>${safeDump(this._config.origConfig)}</pre>
     `;
   }
 

src/panels/lovelace/editor/card-editor/hui-card-editor.ts

@@ -8,7 +8,7 @@ import {
   property,
 } from "lit-element";
 
-import yaml from "js-yaml";
+import { safeDump, safeLoad } from "js-yaml";
 
 import "@material/mwc-button";
 import { HomeAssistant } from "../../../../types";
@@ -63,7 +63,7 @@ export class HuiCardEditor extends LitElement {
   public set yaml(_yaml: string) {
     this._yaml = _yaml;
     try {
-      this._config = yaml.safeLoad(this.yaml);
+      this._config = safeLoad(this.yaml);
       this._updateConfigElement();
       this._error = undefined;
     } catch (err) {
@@ -80,7 +80,7 @@ export class HuiCardEditor extends LitElement {
   }
   public set value(config: LovelaceCardConfig | undefined) {
     if (JSON.stringify(config) !== JSON.stringify(this._config || {})) {
-      this.yaml = yaml.safeDump(config);
+      this.yaml = safeDump(config);
     }
   }
 

src/panels/lovelace/hui-editor.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, TemplateResult, CSSResult, css } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
-import yaml from "js-yaml";
+import { safeDump, safeLoad } from "js-yaml";
 
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
@@ -96,7 +96,7 @@ class LovelaceFullConfigEditor extends LitElement {
   }
 
   protected firstUpdated() {
-    this.yamlEditor.value = yaml.safeDump(this.lovelace!.config);
+    this.yamlEditor.value = safeDump(this.lovelace!.config);
   }
 
   static get styles(): CSSResult[] {
@@ -183,7 +183,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
     let value;
     try {
-      value = yaml.safeLoad(this.yamlEditor.value);
+      value = safeLoad(this.yamlEditor.value);
     } catch (err) {
       alert(`Unable to parse YAML: ${err}`);
       this._saving = false;

yarn.lock

@@ -1863,6 +1863,11 @@
   resolved "https://registry.yarnpkg.com/@types/is-windows/-/is-windows-0.2.0.tgz#6f24ee48731d31168ea510610d6dd15e5fc9c6ff"
   integrity sha1-byTuSHMdMRaOpRBhDW3RXl/Jxv8=
 
+"@types/js-yaml@^3.12.1":
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.1.tgz#5c6f4a1eabca84792fbd916f0cb40847f123c656"
+  integrity sha512-SGGAhXLHDx+PK4YLNcNGa6goPf9XRWQNAUUbffkwVGGXIxmDKWyGGL4inzq2sPmExu431Ekb9aEMn9BkPqEYFA==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"