Take out UpdateMoreInfo, move to legacy

BREAKING BREAKING

This is just a resource name change, but an important one. We have had 2 resources in this repo for some time now:

• custom-ui (with updateMoreInfo functionality built in)
• custom-ui-only (without updateMoreInfo)

Reason was we developed a new Plugin Custom-more-info that supersedes the functionally in the former custom-ui, and has many extra features.
Because the new Custom-more-info not only has more features, but also performs much better, we took out the updateMoreInfo functionality of the legacy custom-ui plugin, and release the new version in this release.

With this release we change the resource names:

• custom-ui (the new default plugin of this repo, now without the updateMoreInfo functionality)
• custom-ui-legacy (the former plugin, now only here for reference to the legacy of this plugin, not to be used anymore! )

From now on, It is advised to use the new Custom-ui (so the one without the UpdateMoreInfo functionality) alongside Custom-more-info for full functionality in modern Home Assistant.

If you don't need or want template functionality, please see our now Custom-icon-color plugin. Ofc this can also be combined with the new Custom-more-info.

There is no reason anymore to use the now called custom-ui-legacy, which we only have for historical reasons, and probably will take out soon to prevent confusion.

What's Changed

• Update caveats and exceptions by @Mariusthvdb in #134
• Add note to readme about development by @Mariusthvdb in #135
• add TileCard styling by @Mariusthvdb in #137
• rename resources to custom-ui.js and custom-ui-legacy.js by @Mariusthvdb in #138

Full Changelog: 2024011...2024011

Add support for entity and button card

Major new features are support for core type: button and type: entity cards. Thanks to @elchininet for expanding the functionality we long time sought.

@bratanon introduced Deep equal, preventing many unnecessary updates.

---

Strategy forward

This will be the final update in its current state, still including the UpdateMoreInfo functionality.

We developed a new Plugin Custom-more-info that supersedes the functionally in custom-ui, and has many extra features. It is advised to use the available Custom-ui-only (without the UpdateMoreInfo functionality) alongside Custom-more-info for full functionality in modern Home Assistant.

If you don't need or want template functionality, please see our now Custom-icon-color plugin. Ofc this can also be combined with the new Custom-more-info.

What's Changed

• new minimized icon_color only by @Mariusthvdb in #114
• Deep equal check on state hooks by @bratanon in #122
• edit custom-icon-color link by @Mariusthvdb in #124
• Delete custom-ui-gpt.js by @Mariusthvdb in #125
• Delete update_more_info.js by @Mariusthvdb in #126
• Delete custom-ui-icon-color.js by @Mariusthvdb in #127
• announce strategy forward by @Mariusthvdb in #129
• did you know by @Mariusthvdb in #130
• Update EXAMPLES.md by @Mariusthvdb in #131
• refactor custom-ui-only by @Mariusthvdb in #132
• add hooks for entity and button card by @Mariusthvdb in #133

Full Changelog: 2023112...2024011

UpdateMoreInfo()

What's Changed

• Update UpdateMoreInfo() to be compatible with 2023.9 and remain backwards compatible
  thanks to @elchininet from the amazing Kiosk-mode custom card for fixing this

• Update custom-ui.js by @Mariusthvdb in #91

• Update README.md by @Mariusthvdb in #93

• Update README.md by @Mariusthvdb in #94

• Update README.md by @Mariusthvdb in #95

• Create update_more_info.js by @Mariusthvdb in #96

• Update EXAMPLES.md by @Mariusthvdb in #97

• take out () on ternary in Examples by @Mariusthvdb in #98

• fix more-info with 2023.9 by @Mariusthvdb in #100

• Update custom-ui.js with new UpdateMoreInfo() by @Mariusthvdb in #101

Full Changelog: 2023.06.19...2023090

Modernize

What's Changed

Full Changelog: 2023010...2023.06.19

• Removed the "use strict"; directive because strict mode is enabled by default in ECMAScript modules.
• Replaced var declarations with let or const declarations for better scoping and to follow modern JavaScript practices.
• Refactored the updateMoreInfo function to use for...of loops instead of for loops. This simplifies the code and makes it more readable.
• Simplified the installStatesHook and installStateBadge functions by using optional chaining (?.) and nullish coalescing (??) operators.
• Cleaned up the init function by using optional chaining and nullish coalescing operators.
• Replaced the deprecated async keyword in function declarations with arrow function expressions.
• Removed unnecessary continue statement in the maybeApplyTemplateAttributes function.
• Removed the document parameter from the lightOrShadow function since document is already available globally.
• Replaced string concatenation with template literals for better readability.

Assign the result of document.querySelector("home-assistant").shadowRoot.querySelector("ha-more-info-dialog").shadowRoot.querySelector("ha-dialog").getElementsByClassName("content")[0].querySelector("ha-more-info-info") to a variable to avoid repeating the same query multiple times.

extra optimizations (by GPT)

What's Changed

• Extra GPT optimization and prettier by @Mariusthvdb in #83

Full Changelog: 2023010...2023010

In the original code, a new object is created on every iteration with the spread
operator (...). This can be inefficient if the number of iterations is large.
By creating the newAttributes object before the loop and then updating it inside the loop,
you only create a single object, which can be more efficient.

The original code also uses the Object.keys() function to get an array of the keys in
entity.attributes.templates, and then uses the forEach() function to iterate over the
array. This is an additional step that can add some overhead. In the optimized code,
the for loop is used instead, which can be a more efficient way to iterate over an array.

The optimized code also uses the optional chaining operator (?.[]) to access properties
of entity.untemplated_attributes, which can be more concise and readable than the
original code.

Overall, these changes can make the maybeApplyTemplateAttributes() function more
efficient, particularly if it is called frequently or if entity.attributes.templates
has a large number of keys.

This revised version of the updateMoreInfo function does not use requestAnimationFrame at
all.(.....) Instead, it selects all the necessary elements directly in a single call to
querySelectorAll. This can potentially be faster and more efficient than making multiple
querySelector calls and using getElementsByClassName, because it only requires the DOM to
be traversed once.

By wrapping the function in a requestAnimationFrame call, you can ensure that the browser
is able to optimize the rendering of the page and minimize the impact of the function on
the main thread. This can help improve the performance of the code and provide a smoother
user experience. However, if the updateMoreInfo function is not modifying the DOM, then
there may not be a need to use requestAnimationFrame. It would be up to you to determine
whether using requestAnimationFrame is necessary in this case.

Additionally, by eliminating the checkElements function and the use of
requestAnimationFrame, the revised version of the code is simpler and easier to read. r
equestAnimationFrame is a way to execute a function just before the browser is about to
repaint the page, and it is generally used to improve performance by allowing the browser
to handle DOM manipulation in an optimal way. However, in this case, the checkElements
function was being used to repeatedly check for the existence of certain DOM elements,
which is not the intended use of requestAnimationFrame. By selecting all the necessary
elements in a single call, the revised version of the code avoids the need to use
requestAnimationFrame for this purpose.

By storing the selected DOM elements in variables outside of the updateMoreInfo function,
they will only be selected once and then be referenced from the cached variables in
subsequent calls to the function, which should improve the performance of the code.

Avoid using .innerText to get the text of an element. Instead, use .textContent as it is
faster.

Instead of using Array.from(attributesEl.querySelectorAll(".data-entry")), you can
use [...attributesEl.querySelectorAll(".data-entry")] to create an array.
This is faster and more concise.

using the spread operator (...) is faster than Array.from() when creating an array from a
DOM collection. This is because Array.from() has to call the Array() constructor and has
to perform additional checks and operations, whereas the spread operator simply creates
a new array with the same elements as the original DOM collection

happy new year with some extra tweaks and prettier code

ran it through https://babeljs.io/ after some extra optimizations by GPT

What's Changed

Full Changelog: 2022122...2023010

Further improvements by GPT

Changes

Optimized the lightOrShadow function to use a ternary operator to perform the check for the shadow root. This simplifies the code and makes it easier to read and understand.
Rewrote the updateMoreInfo function to use requestAnimationFrame to wait until the DOM elements are available. This ensures that the code will always wait for the elements to be available before attempting to access them, rather than waiting for a fixed amount of time as in the original implementation.
Modified the updateMoreInfo function to use the for...of loop to iterate over the t array, and also preserve the original behavior of scheduling another check if the elements are not yet available.
Added an init function to the customUI object, which is called at the end of the script.
Updated the computeTemplate function to handle both SyntaxError and ReferenceError exceptions, and added a console.warn message to report the error in these cases.

Notes

This version of the script is optimized for use with Home Assistant version 2022.4 and later. It may not work correctly with earlier versions of Home Assistant.
This version of the script is based on the original script from https://github.com/Mariusthvdb/custom-ui/blob/master/custom-ui-gpt.js, with modifications to improve performance and reliability.

What's Changed

• Chatbot GPT optimized by @Mariusthvdb in #78

Full Changelog: 2022121...2022122

Custom-ui optimized by GPT

Release Notes for Custom-ui 20221227-GPT

ChatbotGPT even generated the release notes ....

Changes

Adapted the code for compatibility with Home Assistant 2022.4 and higher.
Optimized the installStatesHook function by removing the Object.values call and iterating over the obj.states object directly.
Changed the updateMoreInfo function to clear the interval after the first successful iteration, instead of after two iterations.

Known Issues

The updateMoreInfo function still uses a setInterval loop to wait for the necessary DOM elements to be available. It would be better to use a more efficient mechanism, such as a Promise or MutationObserver, to wait for the elements to appear.
The updateMoreInfo function uses several nested querySelector calls and getElementsByClassName calls to access nested DOM elements. It would be more efficient to use a single querySelector call with a compound selector to access these elements.
The updateMoreInfo function uses innerText to get the text content of DOM elements, which can be slow and may not work correctly with some internationalized text. It would be better to use the textContent property to get the text content of DOM elements.

What's Changed

• fix date by @Mariusthvdb in #67
• Add experimental functionality on Jinja templates by @Mariusthvdb in #70
• Update EXAMPLES.md by @Mariusthvdb in #71
• Update EXAMPLES.md by @Mariusthvdb in #72
• add news flash on jinja templates by @Mariusthvdb in #73
• Update HISTORY.md by @Mariusthvdb in #74
• Update README.md by @Mariusthvdb in #75

Full Changelog: 2022111...2022121

Hide_attributes restored

What's Changed

• Update HACS URL by @wrt54g in #63
• Fixed DOM walk for 2022.11 by @alexarch21 in #66

New Contributors

• @wrt54g made their first contribution in #63
• @alexarch21 made their first contribution in #66

Full Changelog: 20220419.1...2022111

20220419.1

Follow up on 20220419 which had some text right in the source js files. Sorry for that, my bad (@bratanon).

Make sure to read about the BREAKING CHANGES in 20220419