nanocomponent - npm Package Compare versions

Comparing version 6.3.0 to 6.4.0

CHANGELOG.md

		@@ -5,2 +5,8 @@ # nanocomponent Change Log

		## 6.4.0 - 2017-09-04

		- Added: `.rerender()` method to allow re-rendering with the last rendered arguments if internal state changes.
		- Updated docs for `rerender`.
		- Add a few more pitfall pointers in the lifecycle API docs around rerendering in `beforerender`.

		## 6.3.0 - 2017-08-24
		@@ -7,0 +13,0 @@

index.js

		@@ -21,2 +21,3 @@ var document = require('global/document')
		this._name = name \|\| 'nanocomponent'
		this._rerender = false

		@@ -26,2 +27,4 @@ this._handleLoad = this._handleLoad.bind(this)

		this._arguments = []

		var self = this
		@@ -48,3 +51,4 @@
		} else if (this.element) {
		var shouldUpdate = this.update.apply(this, args)
		var shouldUpdate = this._rerender \|\| this.update.apply(this, args)
		if (this._rerender) this._render = false
		if (shouldUpdate) {
		@@ -69,2 +73,8 @@ morph(this.element, this._handleRender(args))

		Nanocomponent.prototype.rerender = function () {
		assert(this.element, 'nanocomponent: cant rerender on an unmounted dom node')
		this._rerender = true
		this.render.apply(this, this._arguments)
		}

		Nanocomponent.prototype._handleRender = function (args) {
		@@ -75,2 +85,3 @@ var el = this.createElement.apply(this, args)
		assert.equal(this._rootNodeName, el.nodeName, 'nanocomponent: root node types cannot differ between re-renders')
		this._arguments = args
		return this._brandNode(this._ensureID(el))
		@@ -77,0 +88,0 @@ }

package.json

		{
		"name": "nanocomponent",
		"version": "6.3.0",
		"version": "6.4.0",
		"description": "Native DOM components that pair nicely with DOM diffing algorithms",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -241,3 +241,3 @@ # nanocomponent [![stability][0]][1]
		Nanocomponent was written to work well with [choo][choo], but it also works well
		with DOM diffing engines that check `.isSamNode()` like [nanomorph][nm] and
		with DOM diffing engines that check `.isSameNode()` like [nanomorph][nm] and
		[morphdom][md]. It is designed and documented in isolation however, so it also
		@@ -302,4 +302,7 @@ works well on it's own if you are careful. You can even embed it in other SPA
		Render the component. Returns a proxy node if already mounted on the DOM. Proxy
		nodes make it so DOM diffing algorithms leave the element alone when diffing.
		nodes make it so DOM diffing algorithms leave the element alone when diffing. Call this when `arguments` have changed.

		### `component.rerender()`
		Re-run `.render` using the last `arguments` that were passed to the `render` call. Useful for triggering component renders if internal state has change. Arguments are automatically cached under `this._arguments` (🖐 hands off, buster! 🖐). The `update` method is bypassed on re-render.

		### `component.element`
		@@ -325,3 +328,3 @@ A [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)
		element is returned to the `render` caller. Run any first render hooks here. The `load` and
		`unload` hooks are added at this stage.
		`unload` hooks are added at this stage. Do not attempt to `rerender` in `beforerender` as the component may not be in the DOM yet.

		@@ -328,0 +331,0 @@ ### `Nanocomponent.prototype.load(el)`

test/browser/index.js

		@@ -23,6 +23,6 @@ var test = require('tape')
		// Create instance and mount
		var comp = new SimpleComponent('Bob')
		var comp = new SimpleComponent('yosh')
		testRoot.appendChild(comp.render('green'))
		t.ok(comp.element, 'component created and mounted in page')
		t.equal(comp.element.querySelector('.name').innerText, 'Bob', 'instance options correctly rendered')
		t.equal(comp.element.querySelector('.name').innerText, 'yosh', 'instance options correctly rendered')
		t.equal(comp.element.querySelector('.color').innerText, 'green', 'arguments correctly rendered')
		@@ -45,2 +45,9 @@ t.equal(comp.element.dataset.proxy, undefined, 'not a proxy element')

		comp.name = 'lrlna' // Update internal state
		comp.rerender()
		t.ok(comp.element, 'component is still mounted in page')
		t.equal(comp.element.querySelector('.name').innerText, 'lrlna', 'instance options correctly rerendered')
		t.equal(comp.element.querySelector('.color').innerText, 'red', 'internal state reflected in rerender')
		t.equal(comp.element.dataset.proxy, undefined, 'mounted node isn\'t a proxy')

		t.end()
		@@ -47,0 +54,0 @@ })

test/browser/simple.js

		@@ -26,4 +26,3 @@ var Nanocomponent = require('../../')
		SimpleComponent.prototype.update = function (color) {
		if (this.color !== color) return true
		return false
		return this.color !== color
		}

nanocomponent - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics