tbranyen/diffhtml

tagged template needs `diff` in front of it

robdodson opened this issue · 12 comments

robdodson commented

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 commented

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 commented

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

robdodson commented

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
#94 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABBFDZAabLWEsXfLTBJcr5LqHoiWboXCks5qhzIagaJpZM4Jo_Hu
.

tbranyen commented

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 commented

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 commented

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 commented

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 commented

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.

  • 👍1
tbranyen commented

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 commented

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?