nanocomponent - npm Package Compare versions

Comparing version 4.0.3 to 5.0.0

example/index.js

@@ -33,3 +33,3 @@ // adapted from https://github.com/timwis/choo-leaflet-demo/blob/master/src/index.js
       <main>
-        ${leaflet.render(state.coords)}
+        ${leaflet.render({ coords: state.coords })}
       </main>
@@ -36,0 +36,0 @@ </body>

example/leaflet.js

@@ -15,14 +15,11 @@ // // adapted from https://github.com/timwis/choo-leaflet-demo/blob/master/src/map.js
   this._log = nanologger('leaflet')
-  this._element = null
-  this._coords = null
-  this._map = null
-  this._zoom = 12
+  this.state.map = null
+  this.state.zoom = 12
 }
 Leaflet.prototype = Object.create(Nanocomponent.prototype)
 
-Leaflet.prototype._render = function (coords) {
+Leaflet.prototype._render = function () {
   var self = this
-  this._coords = coords
 
-  if (!this._map) {
+  if (!this.state.map) {
     this._element = html`<div style="height: 500px"></div>`
@@ -39,8 +36,9 @@ if (this._hasWindow) this._createMap()
 
-Leaflet.prototype._update = function (coords) {
-  return coords[0] !== this._coords[0] || coords[1] !== this._coords[1]
+Leaflet.prototype._update = function (props) {
+  return props.coords[0] !== this.props.coords[0] ||
+    props.coords[1] !== this.props.coords[1]
 }
 
 Leaflet.prototype._load = function () {
-  this._map.invalidateSize()
+  this.state.map.invalidateSize()
   this._log.info('load')
@@ -52,5 +50,4 @@ }
 
-  this._map.remove()
-  this._coords = null
-  this._map = null
+  this.state.map.remove()
+  this.state = {}
   this._element = null
@@ -61,4 +58,4 @@ }
   var element = this._element
-  var coords = this._coords
-  var zoom = this._zoom
+  var coords = this.props.coords
+  var zoom = this.state.zoom
 
@@ -75,9 +72,9 @@ this._log.info('create-map', coords)
   }).addTo(map)
-  this._map = map
+  this.state.map = map
 }
 
 Leaflet.prototype._updateMap = function () {
-  var coords = this._coords
+  var coords = this.props.coords
   this._log.info('update-map', coords)
-  this._map.setView(coords)
+  this.state.map.setView(coords)
 }

index.js

@@ -9,3 +9,3 @@ var onload = require('on-load')
 
-function Nanocomponent (val) {
+function Nanocomponent () {
   this._hasWindow = typeof window !== 'undefined'
@@ -17,2 +17,5 @@ this._ID = KEY + '-' + INDEX++
   this._loaded = false
+  this.props = {}
+  this.oldProps = null
+  this.state = {}
 }
@@ -27,3 +30,10 @@
 
-Nanocomponent.prototype.render = function () {
+Nanocomponent.prototype._rerender = function (props) {
+  this.oldProps = this.props
+  this.props = props
+  this._element = this._render()
+  this._ensureID()
+}
+
+Nanocomponent.prototype.render = function (props) {
   assert.equal(typeof this._render, 'function', 'nanocomponent: this._render should be implemented')
@@ -38,8 +48,6 @@ assert.equal(typeof this._update, 'function', 'nanocomponent: this._update should be implemented')
   if (!this._hasWindow) {
-    this._element = this._render.apply(this, args)
+    this._rerender(props)
     return this._element
   } else if (!this._element) {
-    this._element = this._render.apply(this, args)
-    this._ensureID()
-
+    this._rerender(props)
     this._onload(this._element, function () {
@@ -64,6 +72,5 @@ self._loaded = true
   } else {
-    var shouldUpdate = this._update.apply(this, args)
+    var shouldUpdate = this._update(props)
     if (shouldUpdate) {
-      this._element = this._render.apply(this, args)
-      this._ensureID()
+      this._rerender(props)
     }
@@ -70,0 +77,0 @@ if (!this._placeholder) this._placeholder = this._createPlaceholder()

package.json

 {
   "name": "nanocomponent",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "Create performant HTML elements",
@@ -9,3 +9,3 @@ "main": "index.js",
     "deps": "dependency-check . && dependency-check . --extra --no-dev -i yo-yoify",
-    "start": "bankai start example --optimize",
+    "start": "bankai start example",
     "test": "standard && npm run deps",
@@ -12,0 +12,0 @@ "test:cov": "standard && npm run deps"

README.md

@@ -20,8 +20,7 @@ # nanocomponent [![stability][0]][1]
 
-MyButton.prototype._render = function (color) {
-  this._color = color
+MyButton.prototype._render = function () {
   if (!this._element) {
     // initial render
     return html`
-      <button style="background-color: ${color}">
+      <button style="background-color: ${this.props.color}">
         Click Me
@@ -32,8 +31,8 @@ </button>
     // mutate this._element
-    this._element.style.backgroundColor = color
+    this._element.style.backgroundColor = this.props.color
   }
 }
 
-MyButton.prototype._update = function (newColor) {
-  return newColor !== this._color
+MyButton.prototype._update = function (props) {
+  return props.color !== this.props.color
 }
@@ -100,4 +99,7 @@ ```
 - `this._onload`: reference to the [on-load][on-load] library.
+- `this.props`: the current `props` passed to `render()`
+- `this.oldProps`: the previous `props`
+- `this.state`: any out of band state to be stored
 
-### `DOMNode|placeholder = Nanocomponent.prototype.render()`
+### `DOMNode|placeholder = Nanocomponent.prototype.render(props)`
 Create an instance of the component. Calls `prototype._render()` if
@@ -111,3 +113,3 @@ `prototype._update()` returns `true`. As long as the element is mounted on the
 
-### `Nanocomponent.prototype._render([arguments])`
+### `Nanocomponent.prototype._render(props)`
 __Must be implemented.__ Render an HTML node with arguments. For
@@ -118,3 +120,3 @@ `prototype._load()` and `prototype._unload()` to work, make sure you return the
 
-### `Nanocomponent.prototype._update([arguments])`
+### `Nanocomponent.prototype._update(props)`
 __Must be implemented.__ Return a boolean to determine if `prototype._render()`
@@ -121,0 +123,0 @@ should be called.  Not called on the first render.

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27605

increased by0.76%

Lines of code

766

increased by0.52%

Number of lines in readme file

166

increased by1.22%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes