From dc29b2d4667d912fab313685a8e3e0f6b8ab469b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 17 Jun 2017 17:06:51 -0400 Subject: [PATCH] fix component hydration --- .../dom/visitors/Component/Component.ts | 7 +++++-- src/shared/dom.js | 1 - .../samples/component-in-element/Nested.html | 1 + .../samples/component-in-element/_after.html | 3 +++ .../samples/component-in-element/_before.html | 3 +++ .../samples/component-in-element/_config.js | 21 +++++++++++++++++++ .../samples/component-in-element/main.html | 13 ++++++++++++ 7 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 test/hydration/samples/component-in-element/Nested.html create mode 100644 test/hydration/samples/component-in-element/_after.html create mode 100644 test/hydration/samples/component-in-element/_before.html create mode 100644 test/hydration/samples/component-in-element/_config.js create mode 100644 test/hydration/samples/component-in-element/main.html diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts index 8bcd52e6ca..a0616bc587 100644 --- a/src/generators/dom/visitors/Component/Component.ts +++ b/src/generators/dom/visitors/Component/Component.ts @@ -113,7 +113,6 @@ export default function visitComponent( } const componentInitProperties = [ - `target: ${!isTopLevel ? state.parentNode : 'null'}`, `_root: ${block.component}._root`, ]; @@ -123,7 +122,7 @@ export default function visitComponent( const childBlock = node._block; - node.children.forEach(child => { + node.children.forEach((child: Node) => { visit(generator, childBlock, childState, child); }); @@ -224,8 +223,12 @@ export default function visitComponent( block.builders.init.addBlock(local.create); + const targetNode = state.parentNode || block.target; + const anchorNode = state.parentNode ? 'null' : 'anchor'; + block.builders.create.addLine(`${name}._fragment.create();`); block.builders.claim.addLine(`${name}._fragment.claim( ${state.parentNodes} );`); + block.builders.mount.addLine(`${name}._fragment.mount( ${targetNode}, ${anchorNode} );` ); if (!local.update.isEmpty()) block.builders.update.addBlock(local.update); } diff --git a/src/shared/dom.js b/src/shared/dom.js index f87bdd8bdd..ffdecf5730 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -83,7 +83,6 @@ export function claimElement (nodes, name, attributes) { } } - console.trace('creating', name); return createElement(name); } diff --git a/test/hydration/samples/component-in-element/Nested.html b/test/hydration/samples/component-in-element/Nested.html new file mode 100644 index 0000000000..70bf63ad9d --- /dev/null +++ b/test/hydration/samples/component-in-element/Nested.html @@ -0,0 +1 @@ +

nested

\ No newline at end of file diff --git a/test/hydration/samples/component-in-element/_after.html b/test/hydration/samples/component-in-element/_after.html new file mode 100644 index 0000000000..b96db6ffc8 --- /dev/null +++ b/test/hydration/samples/component-in-element/_after.html @@ -0,0 +1,3 @@ +
+

nested

+
\ No newline at end of file diff --git a/test/hydration/samples/component-in-element/_before.html b/test/hydration/samples/component-in-element/_before.html new file mode 100644 index 0000000000..b96db6ffc8 --- /dev/null +++ b/test/hydration/samples/component-in-element/_before.html @@ -0,0 +1,3 @@ +
+

nested

+
\ No newline at end of file diff --git a/test/hydration/samples/component-in-element/_config.js b/test/hydration/samples/component-in-element/_config.js new file mode 100644 index 0000000000..790b026400 --- /dev/null +++ b/test/hydration/samples/component-in-element/_config.js @@ -0,0 +1,21 @@ +export default { + snapshot(target) { + const div = target.querySelector('div'); + const p = target.querySelector('p'); + + return { + div, + p, + text: p.childNodes[0] + }; + }, + + test(assert, target, snapshot) { + const div = target.querySelector('div'); + const p = target.querySelector('p'); + + assert.equal(div, snapshot.div); + assert.equal(p, snapshot.p); + assert.equal(p.childNodes[0], snapshot.text); + } +}; \ No newline at end of file diff --git a/test/hydration/samples/component-in-element/main.html b/test/hydration/samples/component-in-element/main.html new file mode 100644 index 0000000000..d639570c56 --- /dev/null +++ b/test/hydration/samples/component-in-element/main.html @@ -0,0 +1,13 @@ +
+ +
+ + \ No newline at end of file