Using wires

[robhicks]

I have been using hyperHTML for over a year now.

Due to curiosity, I recently looked at lit-html. I liked the way it supported separating out certain parts of the html into separate functions, each of which returns a templateResult.

So, having spent a lot of time with hyperHTML, I thought "you can do that with hyperHTML using a wire."

So I tried something simple:

// template.js
const imageViewer = c => wire()`<odz-orchestration id="image-viewer" project-id="${c.projectId}"></odz-orchestration>`;

export default function(c) {
  if (typeof c.t === 'function') {
    return wire()`
    <style>${css}</style>
    <div id="wrapper">
      ${imageViewer(c)}
    </div>
    `;
  }
}

And part of the web component:

import template from './template.js';
const { bind } = window.hyperHTML;

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.projectId = 'foo';
    this.attachShadow({ mode: 'open' });
    this.html = bind(this.shadowRoot);
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.html`${template(this)}`;
  }
}

With some added functionality, I allowed the user to change some values the app which embedded the web component.

I noted that every time an upstream change was made, which triggered a re-render of the web component, that the odz-orchestration component got removed and then added again to the DOM.

I was surprised by this behavior. So I have concluded I may not yet understand how wire works.

Can someone enlighten me?

[pinguxx]

in a wire you can pass an object and an id wire(obj, ":someid"), hyper will make a relationship between that object and the wire so its not re-rendering every time, if you pass wire(c) for example, then it shouldn't recreate those parts and just update what is necessary, hope that makes sense

[robhicks]

@pinguxx thanks!

[WebReflection]

@robhicks I also suggest you have a look at lighterhtml which is the best from all worlds:

• it's simpler than lit-html
• it's as powerful as hyperHTML
• it abstracts away any usage for the render or, when render is used, for the bind or the wire

Yesterday evening I've solved one major caveat of the library, tonight I'll hopefully manage to put up a README with basic infos.

Playground here: https://codepen.io/WebReflection/pen/REqbjQ?editors=0010