From 027702898c219dc651fa19c0b81bb6a96d4c9a1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Wed, 13 Sep 2017 08:47:06 +0200 Subject: [PATCH 1/5] Run afterreorder immediately --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index dcb7aaf..111ae63 100644 --- a/index.js +++ b/index.js @@ -115,7 +115,7 @@ Nanocomponent.prototype._ensureID = function (node) { Nanocomponent.prototype._handleLoad = function (el) { var self = this if (this._loaded) { - if (this.afterreorder) window.requestAnimationFrame(function () { self.afterreorder(el) }) + if (this.afterreorder) self.afterreorder(el) return // Debounce child-reorders } this._loaded = true From 1f6ce87642b906b310c06ef5b6dd3f871d1af1bc Mon Sep 17 00:00:00 2001 From: lrlna Date: Mon, 18 Sep 2017 19:08:38 +0200 Subject: [PATCH 2/5] remove RAF wraps around unload/load --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 81dbf1e..4234b93 100644 --- a/index.js +++ b/index.js @@ -119,14 +119,14 @@ Nanocomponent.prototype._handleLoad = function (el) { return // Debounce child-reorders } this._loaded = true - if (this.load) window.requestAnimationFrame(function () { self.load(el) }) + if (this.load) self.load(el) } Nanocomponent.prototype._handleUnload = function (el) { var self = this if (this.element) return // Debounce child-reorders this._loaded = false - if (this.unload) window.requestAnimationFrame(function () { self.unload(el) }) + if (this.unload) self.unload(el) } Nanocomponent.prototype.createElement = function () { From c083933892915c239e9499c1ba6a88cb6f7b0556 Mon Sep 17 00:00:00 2001 From: Bret Comnes Date: Mon, 18 Sep 2017 11:22:37 -0700 Subject: [PATCH 3/5] Fix load order and id changing bug --- index.js | 17 +++++++++-------- test/browser/index.js | 4 ++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 4234b93..dad8833 100644 --- a/index.js +++ b/index.js @@ -46,11 +46,12 @@ Nanocomponent.prototype.render = function () { timing() return el } else if (this.element) { + el = this.element // retain reference, as the ID might change on render var shouldUpdate = this._rerender || this.update.apply(this, args) if (this._rerender) this._render = false if (shouldUpdate) { - morph(this.element, this._handleRender(args)) - if (this.afterupdate) this.afterupdate(this.element) + morph(el, this._handleRender(args)) + if (this.afterupdate) this.afterupdate(el) } if (!this._proxy) { this._proxy = this._createProxy() } timing() @@ -60,7 +61,7 @@ Nanocomponent.prototype.render = function () { el = this._handleRender(args) if (this.beforerender) this.beforerender(el) if (this.load || this.unload || this.afterreorder) { - onload(el, self._handleLoad, self._handleUnload, self) + onload(el, self._handleLoad, self._handleUnload, self._ncID) } timing() return el @@ -109,24 +110,24 @@ Nanocomponent.prototype._brandNode = function (node) { Nanocomponent.prototype._ensureID = function (node) { if (node.id) this._id = node.id else node.id = this._id = this._ncID + // Update proxy node ID if it changed + if (this._proxy && this._proxy.id !== this._id) this._proxy.id = this._id return node } Nanocomponent.prototype._handleLoad = function (el) { - var self = this if (this._loaded) { - if (this.afterreorder) self.afterreorder(el) + if (this.afterreorder) this.afterreorder(el) return // Debounce child-reorders } this._loaded = true - if (this.load) self.load(el) + if (this.load) this.load(el) } Nanocomponent.prototype._handleUnload = function (el) { - var self = this if (this.element) return // Debounce child-reorders this._loaded = false - if (this.unload) self.unload(el) + if (this.unload) this.unload(el) } Nanocomponent.prototype.createElement = function () { diff --git a/test/browser/index.js b/test/browser/index.js index 7cfdcd0..60f1297 100644 --- a/test/browser/index.js +++ b/test/browser/index.js @@ -128,8 +128,8 @@ test('lifecycle tests', function (t) { } var comp = new LifeCycleComp() - comp.bus.on('load', onLoad) - comp.bus.on('unload', onUnload) + comp.bus.on('load', () => window.requestAnimationFrame(onLoad)) + comp.bus.on('unload', () => window.requestAnimationFrame(onUnload)) t.deepEqual(comp.testState, { 'create-element': 0, From aff3c90f169530206fb0b27f4f5e487be74a2c68 Mon Sep 17 00:00:00 2001 From: Bret Comnes Date: Mon, 18 Sep 2017 12:57:47 -0700 Subject: [PATCH 4/5] Copy data attributes --- index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index dad8833..70414d8 100644 --- a/index.js +++ b/index.js @@ -50,7 +50,11 @@ Nanocomponent.prototype.render = function () { var shouldUpdate = this._rerender || this.update.apply(this, args) if (this._rerender) this._render = false if (shouldUpdate) { - morph(el, this._handleRender(args)) + var newTree = this._handleRender(args) + Object.entries(el.dataset).forEach(entry => { + newTree.dataset[entry[0]] = entry[1] + }) + morph(el, newTree) if (this.afterupdate) this.afterupdate(el) } if (!this._proxy) { this._proxy = this._createProxy() } From 030cbdb27069e55ea85e21c8cad80f56d4494440 Mon Sep 17 00:00:00 2001 From: Bret Comnes Date: Mon, 18 Sep 2017 13:50:16 -0700 Subject: [PATCH 5/5] Preserve onloadid --- index.js | 12 +++++++----- package.json | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 70414d8..a852456 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,8 @@ var document = require('global/document') var nanotiming = require('nanotiming') var morph = require('nanomorph') var onload = require('on-load') +var OL_KEY_ID = onload.KEY_ID +var OL_ATTR_ID = onload.KEY_ATTR var assert = require('assert') module.exports = Nanocomponent @@ -14,6 +16,7 @@ function Nanocomponent (name) { this._hasWindow = typeof window !== 'undefined' this._id = null // represents the id of the root node this._ncID = null // internal nanocomponent id + this._olID = null this._proxy = null this._loaded = false // Used to debounce on-load when child-reordering this._rootNodeName = null @@ -50,11 +53,7 @@ Nanocomponent.prototype.render = function () { var shouldUpdate = this._rerender || this.update.apply(this, args) if (this._rerender) this._render = false if (shouldUpdate) { - var newTree = this._handleRender(args) - Object.entries(el.dataset).forEach(entry => { - newTree.dataset[entry[0]] = entry[1] - }) - morph(el, newTree) + morph(el, this._handleRender(args)) if (this.afterupdate) this.afterupdate(el) } if (!this._proxy) { this._proxy = this._createProxy() } @@ -66,6 +65,7 @@ Nanocomponent.prototype.render = function () { if (this.beforerender) this.beforerender(el) if (this.load || this.unload || this.afterreorder) { onload(el, self._handleLoad, self._handleUnload, self._ncID) + this._olID = el.dataset[OL_KEY_ID] } timing() return el @@ -101,6 +101,7 @@ Nanocomponent.prototype._createProxy = function () { Nanocomponent.prototype._reset = function () { this._ncID = makeID() + this._olID = null this._id = null this._proxy = null this._rootNodeName = null @@ -108,6 +109,7 @@ Nanocomponent.prototype._reset = function () { Nanocomponent.prototype._brandNode = function (node) { node.setAttribute('data-nanocomponent', this._ncID) + if (this._olID) node.setAttribute(OL_ATTR_ID, this._olID) return node } diff --git a/package.json b/package.json index 90efd2c..087c3e7 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "nanoassert": "^1.1.0", "nanomorph": "^5.1.2", "nanotiming": "^6.1.3", - "on-load": "^3.2.3" + "on-load": "^3.3.1" }, "devDependencies": { "@tap-format/spec": "^0.2.0",