tagged template needs `diff` in front of it

[robdodson]

I could be holding diffhtml wrong, so apologies in advance if this is just user error :)

I'm including diffhtml as a script tag in my page

<script src="node_modules/diffhtml/dist/diffhtml.js"></script>

To use the tagged template I need to access the method on the diff object itself.

diff.outerHTML(fixture, diff.html`
  <div onclick=${showUnixTime}>
    <button>Show current unix time</button>
    <span>${Date.now()}</span>
  </div>
`);

instead of

diff.outerHTML(fixture, html`
  <div onclick=${showUnixTime}>
    <button>Show current unix time</button>
    <span>${Date.now()}</span>
  </div>
`);

Otherwise I get a reference error that html is not defined. Maybe the docs could be updated to mention this?

[tbranyen]

Hey @robdodson glad to see you're checking out diffHTML! It's nearly at 1.0 and I've been busy working on the last PR #86 (taking forever since I'm attempting some optimizations)... and the website: https://diffhtml.org/. I'd use the website docs for now: https://diffhtml.org/#html over the README since it's going to be emptied and deprecated in favor of the site once I tag 1.0.

[tbranyen]

I'll leave this open until I ship 1.0 though.

[robdodson]

I see thanks Tim! Really enjoying diffhtml. One question I had... What do you think would be the best way to handle children inside a Custom Element. I was thinking of calling a function from my template string that returns the contents of this.children

On Aug 20, 2016 9:58 AM, "Tim Branyen" notifications@github.com wrote:

I'll leave this open until I ship 1.0 though.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tbranyen/diffhtml/issues/94#issuecomment-241211053, or mute the thread https://github.com/notifications/unsubscribe-auth/ABBFDZAabLWEsXfLTBJcr5LqHoiWboXCks5qhzIagaJpZM4Jo_Hu .

[tbranyen]

Can you give me an example? Are you thinking for something that accepts arbitrary children, like Angular's transclusion? Or are these static nested components?

[robdodson]

Accepting arbitrary children.

e.g.:

<x-gallery>
  <img src="foo.jpg">
  <img src="bar.jpg">
  <img src="baz.jpg">
</x-gallery>

I'd want to make sure that the image tag doesn't get replaced by the template x-gallery stamps out for itself. Instead I'm imagining something like:

// inside of x-gallery.js
diff.innerHTML(this, html`
  <div class="fancy-gallery-frame">
    ${expand(this.children)}
  </div>
`);

where expand is just a function that returns the children as an HTML string

[tbranyen]

Oh! You should be able to nest DOM nodes arbitrarily (not documented), like this:

diff.innerHTML(this, html`
  <div class="fancy-gallery-frame">
    ${this.children}
  </div>
`);

or

diff.innerHTML(this, html`
  <div class="fancy-gallery-frame">
    ${diff.createElement(this.children)}
  </div>
`);

[robdodson]

nice! ok I'll give that a shot. I'd like to submit a PR to add it to the docs, where would be the best place to do so?

[tbranyen]

Good question, still trying to decide if nested values (like DOM Nodes or plain text) should be automatically converted to Virtual Trees, or if that should just be a known restriction requiring you to convert via diff.createElement first. For now it's ambiguous since it's not formally documented.

I haven't written much about tagged template functions: https://diffhtml.org/#tagged-templates, but this section would be the correct place to formally describe the behavior.

Give me till Wednesday and I'll open source the website repo.

[tbranyen]

So Wednesday came and went, got wrapped up in work stuff. I've just opened up the diffhtml-website repo: https://github.com/tbranyen/diffhtml-website and I'll be working on the documentation today.

[robdodson]

Great, thanks for keeping me in the loop :)

I noticed the diffhtml-dox dependency is missing from the install on the site. Is that something you still need to publish?

[tbranyen]

My mistake, here it is: https://github.com/tbranyen/diffhtml-dox

[tbranyen]

Documented in the README now in two places. Safe to close out I feel:

• Intro: https://github.com/tbranyen/diffhtml/tree/master/packages/diffhtml#tagged-template-literals

• More info: https://github.com/tbranyen/diffhtml/tree/master/packages/diffhtml#html