nanocomponent - npm Package Compare versions

Comparing version 6.3.0 to 6.4.0-hotfix

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-hotfix",
   "description": "Native DOM components that pair nicely with DOM diffing algorithms",
@@ -47,3 +47,3 @@ "main": "index.js",
     "nanotiming": "^6.1.3",
-    "on-load": "^3.2.0"
+    "@bret/on-load": "^3.2.1"
   },
@@ -50,0 +50,0 @@ "devDependencies": {

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 changed.  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
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

233887

increased by0.63%

Lines of code

462

increased by3.13%

Number of lines in readme file

394

increased by0.77%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@bret/on-load@^3.2.1

• + Added@bret/on-load@3.2.1(transitive)

• - Removedon-load@^3.2.0

• - Removedon-load@3.4.1(transitive)