Hyperhtml: Adoption

Created on 7 Dec 2017 · 8Comments · Source: WebReflection/hyperHTML

Adoption was removed in v2 with a note that it "will be out in another release." I'm totally fine with this, but it'd help me & perhaps others to have an issue to track for the status of this capability. I hope you don't mind me opening a ticket, to stay abreast of what the status is? If you'd prefer not, that's fine, close away.

Thanks for the amazing work on domdiff & hyperhtml.

enhancement wontfix

Source

rektide

All 8 comments

I’m right on it ... basically it’s planned to be the next thing but I’ve just started adjusting viperHTML so it’s ok to keep this one open.

WebReflection on 7 Dec 2017

❤1

FYI: adopting the right way is very complicated. This might take a while and I'll be off during xmas/nye time so apologies in advance for any inconvenience but I don't want to go out with a rushed solution.

WebReflection on 12 Dec 2017

P.S. wires cannot adopt content yet but hyper.adopt(node) as opposite of hyper.bind(node) is already usable through this branch: https://github.com/WebReflection/hyperHTML/tree/adopt

This is an HTML example, the HTML is basically what viperHTML would generate with .adoptable = true feature.

<!doctype html>
<html>
  <head>
    <script defer src="../index.js"></script>
  </head>
  <body>
    <div test="before">
      <!--:4-->before<!--:4-->
      <ul>
        <!--:5--><li> lonely </li><!--:5-->
      </ul>
      <!--:6-->NO<!--:6-->
      <hr>
      <input value="test">
    </div>
  </body>
  <script>
  setTimeout(function () {
    update(
      hyperHTML.adopt(document.body),
      {
        test: 'after',
        text: 'after',
        list: [
          {name: 'first'},
          {name: 'second'}
        ],
        inBetween: 'YES'
      }
    );
    function update(render, model) {
      render`
      <div test="${model.test}">
        ${model.text}
        <ul>
          ${model.list.map(item => `<li> ${item.name} </li>`)}
        </ul>
        ${model.inBetween}
        <hr>
        <input value=${'test'}>
      </div>
      `;
    }
  }, 2000);
  </script>
</html>

WebReflection on 12 Dec 2017

The PR is almost ready to land https://github.com/WebReflection/hyperHTML/pull/185

WebReflection on 5 Feb 2018

👍1

I know this conversation is a year old now, just chiming in with a thought/question as I know this hasn't been merged into master yet.

Is there a way to have hyperHTML.adopt() inherit existing content within the node generated by viperHTML if the value supplied by model is undefined? If so, I believe that would cover all the concerns and use cases outlined in https://github.com/WebReflection/hyperHTML/issues/54, essentially allowing us to not have to send duplicate content twice over the network (once in the rendered HTML, secondly as state data), and instead only ship the templates and application logic aside from the initial page load.