add create helper functions for custom cards

[iantrich]

Breaking change

Proposed change

Exposing the create helpers functions so that custom cards can use them. Will add this to the dev docs as they are added.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Simple custom card implementation to use it

/* eslint-disable @typescript-eslint/no-explicit-any */
import { LitElement, html, customElement, property, CSSResult, TemplateResult, css, PropertyValues } from 'lit-element';
import { HomeAssistant, hasConfigOrEntityChanged } from 'custom-card-helpers';
import deepClone from 'deep-clone-simple';

import { CustomCardConfig } from './types';
import { CARD_VERSION } from './const';

import { localize } from './localize/localize';

/* eslint no-console: 0 */
console.info(
  `%c  custom-card \n%c  ${localize('common.version')} ${CARD_VERSION}    `,
  'color: orange; font-weight: bold; background: black',
  'color: white; font-weight: bold; background: dimgray',
);

@customElement('custom-card')
export class CustomCard extends LitElement {
  @property() public hass?: HomeAssistant;
  @property() private _config?: CustomCardConfig;
  @property() private _helpers?: any;

  public setConfig(config: CustomCardConfig): void {
    if (!config) {
      throw new Error(localize('common.invalid_configuration'));
    }

    this._config = {
      ...config,
    };

    this.loadCardHelpers();
  }

  protected shouldUpdate(changedProps: PropertyValues): boolean {
    return hasConfigOrEntityChanged(this, changedProps, false);
  }

  protected render(): TemplateResult | void {
    if (!this._config || !this.hass || !this._helpers) {
      return html``;
    }

    const config = deepClone(this._config);
    delete config['type'];
    const element = this._helpers.createRowElement(config);

    if (this.hass) {
      element.hass = this.hass;
    }

    return html`
      <div>${element}</div>
    `;
  }

  private async loadCardHelpers(): Promise<void> {
    this._helpers = await (window as any).loadCardHelpers();
  }

  static get styles(): CSSResult {
    return css``;
  }
}

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[balloob]

This looks good.

In a future PR, we should break up importing the components from the createXElement functions. That way we can tweak performance and loading a bit more . -> #4857

[thomasloven]

I like how this is not polluting window like anything I would have come up with.

Agree with Bram about deferred exports. That's a neat feature.

[iantrich]

thoughts on exposing action handler? That's another thing that keeps changing

[balloob]

Makes sense I think. But let's discuss it in a new PR and get this merged so we can do a dev UI release so people can start testing their custom cards against it .

[bramkragten]

Does this PR already have documentation?

[iantrich]

No