custom-cards / boilerplate-card Goto Github PK
View Code? Open in Web Editor NEWA community driven blueprint for best practices
License: MIT License
A community driven blueprint for best practices
License: MIT License
Checklist:
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:
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.
because @thomasloven is nitpicky ๐
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!
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)
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).
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?
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.
Checklist:
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:
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
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.
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, ...)
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.
Provide a UI Editor that is bundled in the final 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
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.
Checklist:
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:
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
Lines 64 to 69 in 067e877
TODO
comment in 067e877 when #12 was merged. cc @custom-cards.rollup.config.dev.js
and rollup.config.js
with prod having terser()
for minifying
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 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.
More tips and tricks and anything else we can think of
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.
Checklist:
Release with the issue:
Last working release (if known):
Browser and Operating System:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.