Support for templating

[Savjee]

Is your feature request related to a problem? Please describe.
Currently, this boilerplate card has no support for templating

Describe the solution you'd like
Support for templating or guidance on how to implement it. I would be happy to work on a pull request, but I need some pointers on how to proceed.

Describe alternatives you've considered
Right now I'm using the following code:

  private _renderTemplate(template: string | undefined): Promise<string> {
    return new Promise(resolve => {
      if (!template) {
        return resolve('');
      }
      if (template.indexOf('{') == -1) {
        return resolve(template);
      }

      if (this.hass) {
        this.hass.connection.subscribeMessage(
          (output: any) => {
            if (output.result !== null) {
              return resolve(output.result || '');
            } else {
              return resolve('Could not render template');
            }
          },

          {
            type: 'render_template',
            template: template,
          },
        );
      }
    });
  }

It sends render_template messages over the HASS Websocket. While this does work, it creates a ton of these requests. After a while, I start getting the following error:

2020-03-09 23:22:31 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140215949133904] Client exceeded max pending messages [2]: 512

Anyone have experience with this and can point me in the right direction?

Thanks!

[iantrich]

I don't think I'll add it as I don't think you should really be doing it in the frontend. Easy to get some big performance issues. You can check out https://github.com/thomasloven/lovelace-template-entity-row/blob/master/src/main.js for ideas on how to implement it though.

The main thing is that you want to restrict when you call it so that you only re-evaluate when necessary.

[Savjee]

Thanks for the feedback!

Am I correct to say that performance impact could be limited if you only render the template when the entity has changed state?

[iantrich]

yes

[Savjee]

Thank you for the feedback. I've implemented it like this.

[Savjee]

Sorry to reopen this issue.

I want to reiterate the notion of having templating support in this boilerplate card. I recently found that button-card has support for Javascript-based templates. These are executed in the front-end and have no performance impact.

I implemented it into my own card (button-text-card) and I feel like this way of templating is very powerful. I can't shake the thought that it would be nice to offer a standard way of front-end templating.

What are your thoughts? I can open a PR if you think it's a good idea to include in this project.

[iantrich]

I don't think the boilerplate-card is the place to do it, first off. I think this would be better suited for something in a node module, like custom-card-helpers