Hyperhtml: Standalone Diff Module

[ilyaigpetrov]

Hi.
How about splitting out DOM morphing module from HyperHTML that will have interface compatible with [nanomorph] (used in [choo]) and [morphdom] (used in [yo-yo]) so:

1. We will be able to compare morphing modules between each other.
2. We will be able to swap one for another easily if needed in higher level frameworks.

Thanks for your work,
Ilya.

[WebReflection]

sorry ... which morphing module are you talking about?

[WebReflection]

trying to understand what you are looking for but let me clarify first:

1. hyperHTML doesn't diff a thing, it maps 1:1 dom/attributes/fragments via same template literal
2. loking at those examples, you can think of hyperHTML like bel except same template literal (beside its interpolations) bound to a node or a wire will always use the same node.
3. the only "diffing" check is done in case you have a wire with an array of nodes and it's different from the list that was already there before ... this is like an indexOf operation, nothing fancy so far

The mapping is done only once, every consecutive call will be simply:

// `this` is a node bound as hyperHTML context
// used to tag a generic literal template
function update(statics, ...values) {
  const updates = this[EXPANDO].updates;
  values.forEach((value, i) =>
    updates[i](value));
}

Maybe the DEEPDIVE.md file would clarify what is hyperHTML and how it works (same concepts applies to viperHTML for the backend)

[joshgillies]

@ilyaigpetrov I think it's worth noting that nanomorph/morhpdom are designed to work with DOM builders where node recycling isn't considered. morph(fromNode, toNode) : Node.

Consider the following as an example, and @WebReflection correct me if I'm wrong:

const hyperHTML = require('hyperhtml')
const bel = require('bel')

// bel will always return a new node, this is by design.
bel`<div>${'test'}</div>` === 
bel`<div>${'test'}</div>` // false

// Unbound wires, will always return new nodes, even for the same template.
// Note: this is an anti-pattern in hyperHTML and should be avoided.
hyperHTML.wire()`<div>${'test'}</div>` ===
hyperHTML.wire()`<div>${'test'}</div>` // false

// A bound wire given the same template will always return the same node. 👌
const render = hyperHTML.wire()

render`<div>${'test'}</div>` ===
render`<div>${'hello'}</div>` // true

Still as mentioned the GETTING_STARTED.md and DEEPDIVE.md docs are an excellent resource, and well worth a look over.

[WebReflection]

thanks @joshgillies , I just wish I had more time to create a better site with documentations and examples.

Closing this since there's no action to take but happy to answer to any other question.