From 3d29bb545351216fcd275af3c0a73cce23b6e5d2 Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 10:15:54 -0600 Subject: [PATCH 01/11] Add shadowRoot nodes --- index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index cf8a006..5d82b43 100644 --- a/index.js +++ b/index.js @@ -36,14 +36,23 @@ var createNode = (vdom, isSvg) => { ? document.createTextNode(vdom.tag) : (isSvg = isSvg || vdom.tag === "svg") ? document.createElementNS(SVG_NS, vdom.tag, { is: props.is }) - : document.createElement(vdom.tag, { is: props.is }) + : document.createElement(vdom.tag, { is: props.is }), + slot = node, + mode = props['shadow-root'] + + if (mode) { + const root = document.createElement('div') + node.attachShadow({ mode }).appendChild(root) + props['shadow-root'] = null + slot = root + } for (var k in props) { patchProperty(node, k, null, props[k], isSvg) } for (var i = 0; i < vdom.children.length; i++) { - node.appendChild( + slot.appendChild( createNode((vdom.children[i] = vdomify(vdom.children[i])), isSvg) ) } From 7308f597e4ad6f6a3b460bd709869339bad9e2ea Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 11:10:29 -0600 Subject: [PATCH 02/11] Update index.js Rename `slot` to `attach` Add `children` variable A root element is required inside `shadow-root` vnodes --- index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 5d82b43..fba84b7 100644 --- a/index.js +++ b/index.js @@ -37,23 +37,28 @@ var createNode = (vdom, isSvg) => { : (isSvg = isSvg || vdom.tag === "svg") ? document.createElementNS(SVG_NS, vdom.tag, { is: props.is }) : document.createElement(vdom.tag, { is: props.is }), - slot = node, + attach = node, + children = vdom.children, mode = props['shadow-root'] if (mode) { - const root = document.createElement('div') + const rootVNode = vdom.children[0] + const root = document.createElement(rootVNode.tag) + node.attachShadow({ mode }).appendChild(root) props['shadow-root'] = null - slot = root + + attach = root + children = rootVNode.children } for (var k in props) { patchProperty(node, k, null, props[k], isSvg) } - for (var i = 0; i < vdom.children.length; i++) { - slot.appendChild( - createNode((vdom.children[i] = vdomify(vdom.children[i])), isSvg) + for (var i = 0; i < children.length; i++) { + attach.appendChild( + createNode((children[i] = vdomify(children[i])), isSvg) ) } From bdf803add524bf32a14039d3949c5d736bbe83ad Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 11:36:17 -0600 Subject: [PATCH 03/11] Treat `shadow-root` prop similar to `key` --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index fba84b7..6dd81b0 100644 --- a/index.js +++ b/index.js @@ -12,6 +12,7 @@ var getKey = (vdom) => (vdom == null ? vdom : vdom.key) var patchProperty = (node, key, oldValue, newValue, isSvg) => { if (key === "key") { + } if (key ==="shadow-root") { } else if (key[0] === "o" && key[1] === "n") { if ( !((node.events || (node.events = {}))[(key = key.slice(2))] = newValue) @@ -39,14 +40,12 @@ var createNode = (vdom, isSvg) => { : document.createElement(vdom.tag, { is: props.is }), attach = node, children = vdom.children, - mode = props['shadow-root'] - if (mode) { + if (vdom.shadow) { const rootVNode = vdom.children[0] const root = document.createElement(rootVNode.tag) - node.attachShadow({ mode }).appendChild(root) - props['shadow-root'] = null + node.attachShadow({ mode: vdom.shadow }).appendChild(root) attach = root children = rootVNode.children @@ -250,6 +249,7 @@ var createVNode = (tag, props, children, type, node) => ({ tag, props, key: props.key, + shadow: props['shadow-root'], children, type, node, From bc4b99627011bb5f4abc5c878638bb627f9e6725 Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 11:43:52 -0600 Subject: [PATCH 04/11] Forgot else if --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 6dd81b0..8729483 100644 --- a/index.js +++ b/index.js @@ -12,7 +12,7 @@ var getKey = (vdom) => (vdom == null ? vdom : vdom.key) var patchProperty = (node, key, oldValue, newValue, isSvg) => { if (key === "key") { - } if (key ==="shadow-root") { + } else if (key ==="shadow-root") { } else if (key[0] === "o" && key[1] === "n") { if ( !((node.events || (node.events = {}))[(key = key.slice(2))] = newValue) @@ -39,7 +39,7 @@ var createNode = (vdom, isSvg) => { ? document.createElementNS(SVG_NS, vdom.tag, { is: props.is }) : document.createElement(vdom.tag, { is: props.is }), attach = node, - children = vdom.children, + children = vdom.children if (vdom.shadow) { const rootVNode = vdom.children[0] From b2ef880465a7ce97aaa7bb3d497165877dc5862a Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 12:14:51 -0600 Subject: [PATCH 05/11] Add a space --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 8729483..3da4db8 100644 --- a/index.js +++ b/index.js @@ -12,7 +12,7 @@ var getKey = (vdom) => (vdom == null ? vdom : vdom.key) var patchProperty = (node, key, oldValue, newValue, isSvg) => { if (key === "key") { - } else if (key ==="shadow-root") { + } else if (key === "shadow-root") { } else if (key[0] === "o" && key[1] === "n") { if ( !((node.events || (node.events = {}))[(key = key.slice(2))] = newValue) From 08ee4f19abc2569b1a38becc98dbab2b1310015c Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 12:15:13 -0600 Subject: [PATCH 06/11] Apply props on shadow-root root node --- index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 3da4db8..823b89a 100644 --- a/index.js +++ b/index.js @@ -42,8 +42,13 @@ var createNode = (vdom, isSvg) => { children = vdom.children if (vdom.shadow) { - const rootVNode = vdom.children[0] - const root = document.createElement(rootVNode.tag) + var rootVNode = vdom.children[0], + rootProps = rootVNode.props, + root = document.createElement(rootVNode.tag) + + for (var k in rootProps) { + patchProperty(root, k, null, rootProps[k], isSvg) + } node.attachShadow({ mode: vdom.shadow }).appendChild(root) From 16a3d130ac0fbecdf0e93d75a4899d6af166c05b Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 12:54:18 -0600 Subject: [PATCH 07/11] Patch nodes inside shadowRoot I think this is ok --- index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/index.js b/index.js index 823b89a..8f01c87 100644 --- a/index.js +++ b/index.js @@ -86,6 +86,17 @@ var patchNode = (parent, node, oldVNode, newVNode, isSvg) => { parent.removeChild(oldVNode.node) } } else { + if (parent.shadowRoot) { + patchNode( + parent.shadowRoot, + parent.shadowRoot.firstChild, + oldVNode, + newVNode, + isSvg + ) + return // idk + } + var tmpVKid, oldVKid, oldKey, From 7a3d31f8b5611ef799cd9c05189b1ff1f5939a2b Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 13:05:01 -0600 Subject: [PATCH 08/11] Maybe just return what patchNode returns --- index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.js b/index.js index 8f01c87..f3429a2 100644 --- a/index.js +++ b/index.js @@ -87,14 +87,13 @@ var patchNode = (parent, node, oldVNode, newVNode, isSvg) => { } } else { if (parent.shadowRoot) { - patchNode( + return patchNode( parent.shadowRoot, parent.shadowRoot.firstChild, oldVNode, newVNode, isSvg ) - return // idk } var tmpVKid, From 47bef01fc7058e8e52cb3888d29082dea4a527e3 Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 13:23:31 -0600 Subject: [PATCH 09/11] This is the correct spot for the shadow-root patching --- index.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index f3429a2..262c234 100644 --- a/index.js +++ b/index.js @@ -77,6 +77,14 @@ var patchNode = (parent, node, oldVNode, newVNode, isSvg) => { newVNode.type === TEXT_NODE ) { if (oldVNode.tag !== newVNode.tag) node.nodeValue = newVNode.tag + } else if (parent && parent.shadowRoot) { + return patchNode( + null, + parent.shadowRoot.firstChild, + oldVNode, + newVNode, + isSvg + ) } else if (oldVNode == null || oldVNode.tag !== newVNode.tag) { node = parent.insertBefore( createNode((newVNode = vdomify(newVNode)), isSvg), @@ -86,16 +94,6 @@ var patchNode = (parent, node, oldVNode, newVNode, isSvg) => { parent.removeChild(oldVNode.node) } } else { - if (parent.shadowRoot) { - return patchNode( - parent.shadowRoot, - parent.shadowRoot.firstChild, - oldVNode, - newVNode, - isSvg - ) - } - var tmpVKid, oldVKid, oldKey, From 991ea17b499d734ca57fba6b737b2f1fb69173a3 Mon Sep 17 00:00:00 2001 From: Whaley Date: Tue, 1 Feb 2022 13:26:38 -0600 Subject: [PATCH 10/11] Remove extra prop loop --- index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/index.js b/index.js index 262c234..59b88b0 100644 --- a/index.js +++ b/index.js @@ -43,13 +43,8 @@ var createNode = (vdom, isSvg) => { if (vdom.shadow) { var rootVNode = vdom.children[0], - rootProps = rootVNode.props, root = document.createElement(rootVNode.tag) - for (var k in rootProps) { - patchProperty(root, k, null, rootProps[k], isSvg) - } - node.attachShadow({ mode: vdom.shadow }).appendChild(root) attach = root @@ -57,7 +52,7 @@ var createNode = (vdom, isSvg) => { } for (var k in props) { - patchProperty(node, k, null, props[k], isSvg) + patchProperty(attach, k, null, props[k], isSvg) } for (var i = 0; i < children.length; i++) { From 125a7bf42fd79e0cc9e03fcb7d0d467869d4eafc Mon Sep 17 00:00:00 2001 From: whaaaley Date: Mon, 15 Aug 2022 22:08:21 -0500 Subject: [PATCH 11/11] Update PR to the syntax currently implemented in Chrome --- index.js | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/index.js b/index.js index 59b88b0..2297f3c 100644 --- a/index.js +++ b/index.js @@ -12,7 +12,6 @@ var getKey = (vdom) => (vdom == null ? vdom : vdom.key) var patchProperty = (node, key, oldValue, newValue, isSvg) => { if (key === "key") { - } else if (key === "shadow-root") { } else if (key[0] === "o" && key[1] === "n") { if ( !((node.events || (node.events = {}))[(key = key.slice(2))] = newValue) @@ -30,34 +29,34 @@ var patchProperty = (node, key, oldValue, newValue, isSvg) => { } } -var createNode = (vdom, isSvg) => { +var createNode = (vdom, isSvg, shadowRoot) => { var props = vdom.props, node = vdom.type === TEXT_NODE ? document.createTextNode(vdom.tag) : (isSvg = isSvg || vdom.tag === "svg") ? document.createElementNS(SVG_NS, vdom.tag, { is: props.is }) - : document.createElement(vdom.tag, { is: props.is }), - attach = node, - children = vdom.children + : document.createElement(vdom.tag, { is: props.is }) - if (vdom.shadow) { - var rootVNode = vdom.children[0], - root = document.createElement(rootVNode.tag) - - node.attachShadow({ mode: vdom.shadow }).appendChild(root) - - attach = root - children = rootVNode.children + if (shadowRoot) { + node = node.attachShadow({ mode: shadowRoot }) } for (var k in props) { - patchProperty(attach, k, null, props[k], isSvg) + patchProperty(node, k, null, props[k], isSvg) } - for (var i = 0; i < children.length; i++) { - attach.appendChild( - createNode((children[i] = vdomify(children[i])), isSvg) + for (var i = 0; i < vdom.children.length; i++) { + var child = vdom.children[i], + shadowRoot = child.props.shadowroot + + if (child.tag === "template" && shadowRoot) { + vdom.children = child.children + return createNode(vdom, isSvg, shadowRoot) + } + + node.appendChild( + createNode((vdom.children[i] = vdomify(vdom.children[i])), isSvg) ) } @@ -72,10 +71,10 @@ var patchNode = (parent, node, oldVNode, newVNode, isSvg) => { newVNode.type === TEXT_NODE ) { if (oldVNode.tag !== newVNode.tag) node.nodeValue = newVNode.tag - } else if (parent && parent.shadowRoot) { + } else if (node.shadowRoot) { return patchNode( null, - parent.shadowRoot.firstChild, + node.shadowRoot, oldVNode, newVNode, isSvg @@ -257,7 +256,6 @@ var createVNode = (tag, props, children, type, node) => ({ tag, props, key: props.key, - shadow: props['shadow-root'], children, type, node,