custom-cards / boilerplate-card Goto Github PK

because @thomasloven is nitpicky 😜

Checklist:

• [ x ] I updated to the latest version available
• [ x ] I cleared the cache of my browser

Release with the issue:
Latest

Last working release (if known):
N/A

Browser and Operating System:
N/A

Description of problem:

The boilerplate card features an example for implementing translations (localize).
The example uses the localStorage object to get the language setting in HA.
This is not a reliable method, since in this object the language is only defined for in the browser that was used for updating the language setting (otherwise localStorage.getItem('selectedLanguage') returns null).
It would be better to take the language from hass.selectedLanguage instead, so the function is not device-dependent.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

• Ubuntu 20.04
• Chrome/Firefox

Description of problem:

Trying to run from devcontainer.
Forked and cloned the repo.
Opened in devcontainer.
Running npm start gives the following output:

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/@formatjs/intl-utils/lib/src/diff.js
1: var __assign = (this && this.__assign) || function () {
                   ^
2:     __assign = Object.assign || function(t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||

Javascript errors shown in the web inspector (if applicable):

Failed to load resource: the server responded with a status of 404 (Not Found)

Additional information:

This could very well be an issue on my side.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
As of HA 0.115, most custom elements are lazy loaded so using paper-dropdown-menu doesn't work anymore.
**Last working release (if known):0.114

Browser and Operating System:
chrome/windows 10

Description of problem:

• make a new panel with only this boilerplate card
• open editor - dropdown will be broken
• if something internal to HA loads the paper-dropdown-menu element (ie from state table) then this will work just fine since the js chuck will be loaded with the elements needed.

Additional information:
Need to find a way to trigger loading of custom elements from custom cards so we can use custom elements such as paper-dropdown-menu in custom cards again. Similar behavior for ha-checkbox, ha-color-picker, etc

I use the template to create a custom cards.

I needed the state icon functionality so I updated the custom-card-helpers to 1.5.0.

Now the card is complaining about action Handling ... some exports are not here anymore.

Please update the template and provide new way of handling actions (hold, dbl tap, ...)

This issue was generated by todo based on a TODO comment in 067e877 when #12 was merged. cc @custom-cards.

package.json requires [email protected], which throws on import type xxxx from 'xxx' statements (e.g boilerplate-card.ts#L24 )

Updating to latest ([email protected]) fixes it.

More tips and tricks and anything else we can think of

I don't get it. Cards are such an important part of Home Assistant!

But it looks like Home Assistant is not interested in helping users to build cards. To official documentation is not very verbose in this topic. Instead it points to user to this boilerplate card. If you follow the README, it doesn't even work, because it is outdated and not well maintained.

The learning curve of the boilerplate card is steep. On top of JS you have to learn typescript. Obviously most users give up here. There aren't even a lot of issues or pull requests. This is a real stopper for the whole Home Assistant project.

You can get the code running by using yarn.lock. This isn't even mentioned in the README. A plain npm install will run you into trouble. If you use yarn.lock you are nailed down to very old versions. There is no fun in this.

I tried to update all modules to the latest packages applying the npm-check-updates tool. Done this, I ran into a strange mixture of import and require statements within the rollup configuration. In the head imports are used. They break due to missing .js endings. In line 36 require is used within a closure. And so on ...

Likely the older versions are a little more tolerant. Once updated to the latest versions, it all breaks down. Something has to be changed to enable the users of Home Assistant to build their own cards.

Now you may say, send your own pull requests. I really tried. If everything is messed up that much with outdated versions, there isn't any point to start at all. I finally closed my pull requests, as there was always some update required to do before.

As long as the template is nailed down to a certain historical setup, any progress is impossible. You can't even expect ppl to send pull requests. So please bring this template into a contemporary state, to get things started again.

I've created a fresh new devcontainer within VSCode as described here:
https://github.com/custom-cards/boilerplate-card#starting-a-new-card-from-boilerplate-card-with-devcontainer

Creating the container itself and also retrieving the boilerplate-card.js works fine.

As per the suggestion here I tried to run a fresh/clean Home Assistant instance in the container, too, but this fails unfortunately:

container# container start
Copy configuration.yaml
Copy ui-lovelace.yaml
Start Home Assistant
Home Assistant is not installed, running installation.
Collecting git+git://github.com/home-assistant/home-assistant.git@dev
  Cloning git://github.com/home-assistant/home-assistant.git (to revision dev) to /tmp/pip-req-build-9zyq8_nt
ERROR: Command errored out with exit status 128: git clone -q git://github.com/home-assistant/home-assistant.git /tmp/pip-req-build-9zyq8_nt Check the logs for full command output.
WARNING: You are using pip version 20.2.4; however, version 22.3.1 is available.
You should consider upgrading via the '/usr/bin/python3 -m pip install --upgrade pip' command.
/usr/share/container/start: line 36: hass: command not found

Anything I'm doing wrong here?

I am having a first attempt at developing with your boilerplate card (and Home Assistant for that matter!).

I have used the devcontainer method as detailed here

Any changes I make are not being detected and redeployed. I have to manually stop and rerun with npm start.
The console just permanently says "waiting for changes..." with nothing changing when I make changes and save a file (boilerplate-card.ts).

Any suggestions?

Firstly thanks for the effort in putting this boilerplate together.

But as a new developer to Lovelace/LitElement etc. Step 4 in the readme is very underwhelming. Just telling people to update the bits labelled TODO in the code is fine, but in the code there is really no information on how to update each bit. It would be great if there was more of an explanation and an example included in the code.

Unless I am missing something somewhere I can't find any clear documentation anywhere that describes the process of creating a custom card in any detail (where prior knowledge isn't assumed).

When running npm start on my dev container, rather than a single .js file being created in the dist folder, I get three files, exactly as described #57

This is also an issue when trying to push the release - GitHub only creates the boilerplate-card.js file, which simply references one of the other files that is then missing from the release.

Is your feature request related to a problem? Please describe.
At present it doesn't appear to be possible to use a slider when using this boilerplate. Is it possible to add along with an example.

Describe the solution you'd like
I would like to be able to use a slider (0-100) in a card configuration.

Describe alternatives you've considered
Just using a text field is currently the only way to enter the data.

Additional context

The current visual editor was developed after the last version of the original card was released. It's based on Paper Elements, something that was removed in Home Assistant 2022.3 (see https://developers.home-assistant.io/blog/2022/02/18/paper-elements/). As such, it's broken and unusable in modern Home Assistant versions.

We'd like to have a new visual editor based on the suggested approach in the above link - any volunteers?

In the mean time, I will disable it is a temporary workaround.

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The "Bonus" part fails for me:

  Running command git clone --filter=blob:none --quiet git://github.com/home-assistant/home-assistant.git /tmp/pip-req-build-xptkl65j
  fatal: unable to connect to github.com:
  github.com[0: 140.82.121.3]: errno=Connection refused

Github requires Use a password-protected SSH key. when using the git protocol. The HTTPS protocol should be less restrictive.

The changes you made to start using the scoped custom element registry (according to https://developers.home-assistant.io/blog/2022/02/18/paper-elements/ and https://developers.home-assistant.io/blog/2020/10/02/lazymoreinfo/#what-about-external-elements) are not bulletproof just yet. The idea is that your card relies entirely on its own bundled elements in order to work and here it is violated.

Let's take for example the mwc-list-item custom element you added. This element, internally, renders mwc-ripple. Since you didn't define your custom class as a ScopedRegistryHost, the internal mwc-ripple element, will only be rendered if the global registry defines it (which is currently being done by HA). If HA suddenly drops the support for MWC, the element will not be rendered properly.
This happens because ScopedRegistryHost is not recursive, and only applies to the elements directly rendered by it.

The solution I applied in other cards (artem-sedykh/mini-climate-card#67 for example), is to define each custom element as ScopedRegistryHost as well while setting its used elements as well (https://github.com/regevbr/mini-climate-card/blob/f61364816c5667370eebc5a44168713e5c36ea02/src/components/mwc/list-item.js#L7-L17)
If you are willing, I don't mind drafting a PR.

Another issue, that also relates to how HA sees custom cards - Custom Cards using the elements used in the Home Assistant Frontend have never been supported (taken verbatim from the above-mentioned blog posts). So it seems that using `ha-card- here should also be removed.

@iantrich I would appreciate your input on the matter (I hope I was clear enough)

rollup.config.dev.js and rollup.config.js with prod having terser() for minifying

The card currently is using lit-element and lit-html, but both have been deprecated in favor of lit.

Unless upgrading them would break anything within the boilerplate, I think it would be great to use the new version and update the code to use the new import names.

Provide a UI Editor that is bundled in the final release

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: 1.3.2

Last working release (if known):

Description of problem:

An error is thrown when trying to remove a properties. Example when you remove the name for the boilerplate-card ...

You can see that it keeps the last removed character as current value for the property

an error Uncaught TypeError: property "name" is non-configurable and can't be deleted is thrown

I have tried to dig into it but did not found why the error is thrown and how to fix this ...

I'm having the same issue with my custom card which use the repo as template.

Javascript errors shown in the web inspector (if applicable):

Uncaught TypeError: property "name" is non-configurable and can't be deleted
    _valueChanged boilerplate-card.js:290
    handleEvent boilerplate-card.js:82
    __boundHandleEvent boilerplate-card.js:82
    x app.c5d13434.js:10291
    E app.c5d13434.js:10291
    w app.c5d13434.js:10291
    _propertiesChanged app.c5d13434.js:10291
    _propertiesChanged app.c5d13434.js:10291
    _flushProperties app.c5d13434.js:10291
    _flushProperties app.c5d13434.js:10291
    _invalidateProperties app.c5d13434.js:10291
    M app.c5d13434.js:10291
    M app.c5d13434.js:10291
    fire app.c5d13434.js:10291
    _bindValueChanged chunk.0a259816609a91ec31fc.js:242
    R app.c5d13434.js:10291
    w app.c5d13434.js:10291
    _ app.c5d13434.js:10291
    _propertiesChanged app.c5d13434.js:10291
    _flushProperties app.c5d13434.js:10291
    _flushProperties app.c5d13434.js:10291
    _invalidateProperties app.c5d13434.js:10291
    _setProperty app.c5d13434.js:10291
    set app.c5d13434.js:10291
    _onInput chunk.0a259816609a91ec31fc.js:242
    n app.c5d13434.js:10291
    _addEventListenerToNode app.c5d13434.js:10291
    _addEventListenerToNode app.c5d13434.js:10291
    _addMethodEventListenerToNode app.c5d13434.js:10291
    _applyListeners app.c5d13434.js:10291
    i app.c5d13434.js:10291
    r app.c5d13434.js:10291
    r app.c5d13434.js:10291
    _stampTemplate app.c5d13434.js:10291
    _stampTemplate app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    ready app.c5d13434.js:10291
    _enableProperties app.c5d13434.js:10291
    connectedCallback app.c5d13434.js:10291
    connectedCallback app.c5d13434.js:10291
    connectedCallback app.c5d13434.js:10291
    connectedCallback app.c5d13434.js:10291
    __insert boilerplate-card.js:82
    __commitNode boilerplate-card.js:82
    __commitTemplateResult boilerplate-card.js:82
    commit boilerplate-card.js:82
    update boilerplate-card.js:56
    __commitTemplateResult boilerplate-card.js:82
    commit boilerplate-card.js:82
    render boilerplate-card.js:186
    render boilerplate-card.js:186
    update boilerplate-card.js:186
    performUpdate boilerplate-card.js:148
    _enqueueUpdate boilerplate-card.js:148
    requestUpdateInternal boilerplate-card.js:148
    set boilerplate-card.js:148
    _toggleThing boilerplate-card.js:290
    _toggleOption boilerplate-card.js:290
    handleEvent boilerplate-card.js:82
    __boundHandleEvent boilerplate-card.js:82
    commit boilerplate-card.js:82
    update boilerplate-card.js:56
    __commitTemplateResult boilerplate-card.js:82
    commit boilerplate-card.js:82
    render boilerplate-card.js:186
    render boilerplate-card.js:186
    update boilerplate-card.js:186
    performUpdate boilerplate-card.js:148
    _enqueueUpdate boilerplate-card.js:148
    requestUpdateInternal boilerplate-card.js:148
    set boilerplate-card.js:148
    loadCardHelpers boilerplate-card.js:290
    setConfig boilerplate-card.js:186
    value chunk.004ca47d7fae03aacbfc.js:980
    value chunk.004ca47d7fae03aacbfc.js:614
    value chunk.004ca47d7fae03aacbfc.js:614
    commit app.c5d13434.js:10291
    commit app.c5d13434.js:10291
    update app.c5d13434.js:10291
    __commitTemplateResult app.c5d13434.js:10291
    commit app.c5d13434.js:10291
    a app.c5d13434.js:10291
    render app.c5d13434.js:10291
    update app.c5d13434.js:10291
boilerplate-card.js:290:534

Additional information:

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):
Latest

Browser and Operating System:
MacOs
Latest version of Chrome

Description of problem:
I have followed the guide to the point and HA is able to find the custom card but when it tries to load it this is show

Javascript errors shown in the web inspector (if applicable):

index.m.js:1 Uncaught (in promise) TypeError: Cannot read property 'entity' of undefined
    at Y (index.m.js:1)
    at HTMLElement.shouldUpdate (index.m.js:1)
    at HTMLElement.performUpdate (updating-element.js:552)
    at HTMLElement._enqueueUpdate (updating-element.js:507)

Additional information:

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!

No name was provided for external module 'lit-element' in output.globals – guessing 'litElement'

This is a rollup error, but I'm not sure how to get rid of it via microbundle.

I've tried --externals lit-element and --globals lit-element as arguments to microbundle