Template contents are not replaced on merge

[caleb]

I'm trying to merge two nodes that contain a <template> and after the merge the template contains the contents from the old node.

Does it make sense to just replace template node's contents with the new version?

Here's a sandbox showing the issue:

https://codesandbox.io/s/immutable-tdd-mk7mtk?file=/src/index.mjs

Click the button and then use dev tools to inspect the DOM of the result panel.

[caleb]

For anybody who runs into this, I am using this callback and it seems to fix the problem for me:

Idiomorph.morph(e, this.templateContent, {
    callbacks: {
      afterNodeMorphed: (oldEl, newEl) => {
        if (oldEl instanceof HTMLTemplateElement && newEl instanceof HTMLTemplateElement) {
          oldEl.content.replaceChildren(...newEl.content.children);
        }
      }
    }
})

[1cg]

hey caleb, would you mind contributing a test for this so I can see what you think should work?

[caleb]

Sure thing, let me come up with a test.

[davegaeddert]

I'm running into a similar question with <template> tags on the page. Unfortunately I'm having trouble getting the tests to run... I think this is a really basic test for it? I'll keep trying but @1cg if you know of any tricks to running the tests, let me know!

it('can morph a template tag properly', function()
{
    let initial = parseHTML("<div><template>Foo</template></div>");
    let finalSrc = '<div><template>Bar</template></div>';
    let final = parseHTML(finalSrc);
    Idiomorph.morph(initial.content, final.content);
    initial.content.outerHTML.should.equal(finalSrc);
});

edit: This is what I get when I run try to run the tests:

Promise Rejection:  Error: connect ECONNREFUSED ::1:58371
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 58371
}

[seanpdoyle]

I've opened https://github.com/bigskysoftware/idiomorph/pull/49 to try and resolve this issue.