diff --git a/cjs/hyper/render.js b/cjs/hyper/render.js index cbfdc826..262eddb5 100644 --- a/cjs/hyper/render.js +++ b/cjs/hyper/render.js @@ -37,14 +37,22 @@ function render(template) { // to the current context, and render it after cleaning the context up function upgrade(template) { template = unique(template); + const adopt = render.adopt; const info = templates.get(template) || createTemplate.call(this, template); - const fragment = importNode(this.ownerDocument, info.fragment); - const updates = Updates.create(fragment, info.paths); + let fragment, updates; + if (adopt) { + updates = Updates.create(this, info.paths, adopt); + } else { + fragment = importNode(this.ownerDocument, info.fragment); + updates = Updates.create(fragment, info.paths, adopt); + } bewitched.set(this, {template, updates}); update.apply(updates, arguments); - this.textContent = ''; - this.appendChild(fragment); + if (!adopt) { + this.textContent = ''; + this.appendChild(fragment); + } } // an update simply loops over all mapped DOM operations diff --git a/cjs/index.js b/cjs/index.js index e9743f72..5d6ccfc8 100644 --- a/cjs/index.js +++ b/cjs/index.js @@ -13,10 +13,18 @@ const diff = (m => m.__esModule ? m.default : m)(require('./shared/domdiff.js')) // you can do the following // const {bind, wire} = hyperHTML; // and use them right away: bind(node)`hello!`; -const bind = context => render.bind(context); +const adopt = context => function () { + render.adopt = true; + return render.apply(context, arguments); +}; +const bind = context => function () { + render.adopt = false; + return render.apply(context, arguments); +}; const define = Intent.define; hyper.Component = Component; +hyper.adopt = adopt; hyper.bind = bind; hyper.define = define; hyper.diff = diff; @@ -30,6 +38,7 @@ setup(content); // everything is exported directly or through the // hyperHTML callback, when used as top level script exports.Component = Component; +exports.adopt = adopt; exports.bind = bind; exports.define = define; exports.diff = diff; @@ -48,7 +57,7 @@ function hyper(HTML) { ('raw' in HTML ? content('html')(HTML) : ('nodeType' in HTML ? - render.bind(HTML) : + bind(HTML) : weakly(HTML, 'html') ) ) diff --git a/cjs/objects/Path.js b/cjs/objects/Path.js index aef883cf..af79b848 100644 --- a/cjs/objects/Path.js +++ b/cjs/objects/Path.js @@ -53,6 +53,6 @@ Object.defineProperty(exports, '__esModule', {value: true}).default = { for (let i = 0; i < length; i++) { node = node.childNodes[path[i]]; } - return node; + return {node, childNodes: []}; } } diff --git a/cjs/objects/Updates.js b/cjs/objects/Updates.js index 5aee0a35..ba987e81 100644 --- a/cjs/objects/Updates.js +++ b/cjs/objects/Updates.js @@ -54,27 +54,54 @@ value instanceof Component; // Updates can be related to any kind of content, // attributes, or special text-only cases such