viperHTML | Isomorphic hyperHTML

In case it helps, you can read viperHTML tests to see how components can be used.

The thing here is that without explicitly calling render() I get no output.

Components are meant to be used to render layout, either on the server or on the client side. This means if you pass a component instance to a hyper/viperHTML view, you don't have to worry about calling anything, it's done for you.

Sorry for the delay (I was on vacation) but the answer is simple: if you provide, as interpolation, an array of strings, you have the equivalent of an unsafe, and always new, innerHTML operation, which is both possible but not suggested.

What you need to do, when you have real world data and items, usually as objects, is to relate each item with the piece of DOM it represent.

This is done with wire(...) which accepts a reference, as object, and optionally an id.

Since the reference must be weak, for memory reasons, to recreate your demo you can relate all items to a single source as list could be, and use each item value as unique id.

update there is now a workaround provided by the hypermorphic module.

The ideal case scenario is that you have as dependency only viperhtml, which in turns brings in hyperhtml automatically, as you can see by the index.js file.

At that point, the client bundler should, if capable, tree shake unused code for you but you have a very good point that's not immediately clear.

I am also not fully sure if bundlers can be that smart, assuming that a check like typeof document === "object" would always be true and target browsers only.

One way to try that, is to

The main problem in your question is the example itself: a list of primitives, in this case numbers, used as generic element content.

This is not a so common real-world use case, where numbers comes from data and data is weakly referenciable.

However, if it's exactly a list of few numbers that you want inject as LI elements, hyperHTML lets you do that, and if that's all you need, just go for it.

Now let me try to explain your question:

Why is wire better?

hyperHTML gives you a way to define various kind of content, including:

1. text, which is automatically sanitized for you
2. attributes, including events
3. partial portions of the element that could be resolved lazily

You might want/need to use hyperHTML features to create elements as one-off operation.

A form, an input, a button, an image, if you want to quickly create a DOM element, you can do that via hyperHTML because it doesn't lock you in, it's rather an opt-in abstraction/library.

That is why you could relate a specific data object to a wire, but you could also simply use wires without references: it's OK for quick prototyping or small amount of changes.

Now let me show you few examples from that (reduced) list of features.

Point 1: text

If instead of plain numbers you have a list of book titles, what will your unwired code produce?

This is something I've worked on in the past via https://github.com/joshgillies/hypercomponent

The implementation is actually quite trivial.