From 706c6bef98c1b87578d794681792f6035fd55e39 Mon Sep 17 00:00:00 2001 From: Andrea Giammarchi Date: Mon, 5 Feb 2018 19:40:31 +0100 Subject: [PATCH 1/2] almost there --- cjs/hyper/render.js | 19 +- cjs/index.js | 11 +- cjs/objects/Path.js | 2 +- cjs/objects/Updates.js | 77 +- coverage/coverage.json | 2 +- .../lcov-report/hyperHTML/index.c.js.html | 570 ++++--- coverage/lcov-report/hyperHTML/index.html | 28 +- coverage/lcov-report/index.html | 28 +- coverage/lcov.info | 1377 +++++++++-------- esm/hyper/render.js | 19 +- esm/index.js | 12 +- esm/objects/Path.js | 2 +- esm/objects/Updates.js | 77 +- index.js | 92 +- min.js | 2 +- test/adopt.html | 48 +- test/ie/test/test.js | 28 +- test/test.js | 48 + 18 files changed, 1489 insertions(+), 953 deletions(-) diff --git a/cjs/hyper/render.js b/cjs/hyper/render.js index 376ae28f..51fd110b 100644 --- a/cjs/hyper/render.js +++ b/cjs/hyper/render.js @@ -8,7 +8,7 @@ const { unique } = require('../shared/utils.js'); -const {selfClosing} = require('../shared/re.js'); +const {selfClosing: SC_RE} = require('../shared/re.js'); // a weak collection of contexts that // are already known to hyperHTML @@ -39,14 +39,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 @@ -73,7 +81,6 @@ function createTemplate(template) { // some node could be special though, like a custom element // with a self closing tag, which should work through these changes. -const SC_RE = selfClosing; const SC_PLACE = ($0, $1, $2) => { return VOID_ELEMENTS.test($1) ? $0 : ('<' + $1 + $2 + '>'); }; diff --git a/cjs/index.js b/cjs/index.js index 0a05cd07..3d4fc04b 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; 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..7b9e851e 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