@totallyinformation/web-components: v1.2.0 release 2025-06-01

Share Your Projects
1

Please note that I will continue to add to this thread with new releases. Please check the title and the end of the thread to see the updates.

Hi all, I am pleased to announce the arrival of the first full release of my package of vanilla HTML web components.

They also have their very own website which contains all of the documentation and a demo/test page for each component.

These have been hanging around in various forms for a couple of years now but I've finally managed to get them to a point where I'm happy with enough of them to make them worth publishing on npm.

As it says in the package, these are not specific to Node-RED or to UIBUILDER and all of the components will work without either. However, some of them do have UIBUILDER enhancements. But you should be able to equally use them with http-in/template/http-response nodes and even with either version of Dashboard.

If you want to use them with UIBUILDER, simply add @totallyinformation/web-components via uibuilder's library manager. If you want to use them without installation, they can be used direct from JSDELIVR.

Every component can be used either by loading the script file or by importing in an ES Module.

<script src="https://cdn.jsdelivr.net/npm/@totallyinformation/web-components@1.1.0/dist/call-out.iife.min.js"></script>

import https://cdn.jsdelivr.net/npm/@totallyinformation/web-components@1.1.0/dist/call-out.esm.min.js

Most of the components have no dependencies.

Here are the initial components worth really playing with. There are a bunch of others that are in development and may or may not work. See the documentation for details.

Live

These are fully usable in their current form. They may still evolve but are considered relatively stable.

These components can be considered live and ready for extended use.

Component Description Class Name
button-send A simple button that outputs key info either via a custom document event. When used with UIBUILDER for Node-RED, will send a message back to Node-RED. Also allows block contents on the button. ButtonSend
call-out Displays nicely formatted GitHub/Obsidian style call-out information boxes. Colour coded with an icon and over-ridable default title. CallOut
collapsible-headings Turns a section of Hn headings and block contents into collapsible content around the heading levels. CollapsibleHeadings
data-list Create a list from a data object. DataList
html-include Dynamically load external HTML content very easily without needing an iFrame. HtmlInclude
led-gauge A simple LED-style gauge widget with easily controlled colours and responsive layout. LedGauge

Beta

These components can be considered beta quality or better. They may not be fully comprehensive but they have basic usefulness.

Name Description Class Name
labelled-value A simple label and value pair with easy styling. LabelledValue
syntax-highlight Show JSON or JavaScript object data as highlighted HTML. SyntaxHighlight
visible-console Reflects (clones) browser console log outputs to an on-screen visible block. Useful if needing to debug web apps on mobile devices with no access to the dev tools console. VisibleConsole

Do check out the Roadmap and Ideas pages in addition to the demo pages and if you want something different or think I should prioritise something, please do give me a shout.

3 Likes
2

And on an even happier note!

I had completely forgotten that I had already built into the base class a standard method of remote-controlling my web components from Node-RED - via UIBUILDER of course.

You can send a message to your uibuilder controlled web page with a msg.topic in the form: component-name::instance-id and then the msg.payload must be an object where each property matches a property or attribute name in the component.

A simple example using the data-list component would be, if you have <data-list id="dl1"></data-list> on your page, you could send a message like this:

{
  // The specific topic format routes the msg to the correct component
  // where `id` is the id of the component to control.
  "topic": "data-list::dl1",
  // The payload is the data to set for the component.
  "payload": {
    // Each property of the payload must match a property or attribute name of the component.
    "keyvalueseparator": " 💠 ",
    "liststyle": "'😎 '",
    "data": {
      "xxx": "Triple x",
      "yyy": "Triple y",
      "zzz": "triple z"
    },
    "style": "background-color: var(--surface4);"
  }
}

Which might give you something like this:

image
image519×331 17 KB

(Except that no JavaScript was actually used at all!) :smiley:

The list would be dynamically rebuilt with the new settings and data.

I will, of course, be producing some proper examples.

1 Like
3

Should that be component-name::instance-id

4

Depends how you read it. :smiley:

The component name always has to have a dash in it, that is a W3C standard that can't be avoided.

5

Look again :joy:

6

Doh! OK, you got me, trying to rush as always. :frowning:

Don't know what you are talking about - it is perfectly correct! :smiling_face_with_sunglasses:

1 Like
8

I am already working on the next release.

That will mostly expand on the data-list component.

  • Allowing for nested lists
  • Moving from shadow dom to light dom (presents some challenges around styling)
  • Adding a custom event so that your own code can track when the list gets rebuilt

Moving to the light DOM (the main page DOM that is) means that you will be able to better style nested lists. But it does present some interesting challenges regarding scoped styles.

To deal with that, the base component is likely to be updated with a new function that will allow easy inserting of new styles before the static styles you insert in your HTML.

Before - because that allows you to override all the styles with your own styling.

Adding to the base component will mean that all new and updated components in the package will inherit the feature.

Because of that, you will be able to specify a loading priority in case of clashes.

This is only useful for components that don't use the Shadow DOM but it is good practice to not use that if you don't have to.

9

Welcome to June and a new release of the web-components.

v1.2.0 Changes

  • Lots of ESLINT fixes.

  • Tidy up and rationalise the docs home page, roadmap and ideas pages.

  • Start to document the standard Node-RED/UIBUILDER to browser remote-control integration.

  • A few minor documentation fixes.

  • Website homepage correction - thanks to Paul Reed for spotting the issue.

data-list Component

  • No longer uses the shadow DOM. Specific styles prepended to the head.

    This now makes it possible to style the inner parts of nested lists.

  • For nested lists, sub-lists are given a class of nested-list and a data-depth attribute so that they can be styled separately.

Base Component

  • NEW - prependStylesheet(styletext, order) method added. This allows you to prepend a stylesheet for the component to the web page. This is useful for adding styles that need to be applied before the page's own styles. Especially useful for components that don't use the Shadow DOM.

Component Template

  • Added comment to constructor to remind that this.prependStylesheet can be used to add styles before the page's own styles. when the component does not use the Shadow DOM.
1 Like