nanocomponent
Advanced tools
nanocomponent - npm Package Compare versions
Comparing version 6.0.0-1 to 6.0.0
@@ -5,3 +5,3 @@ # nanocomponent Change Log | ||
| ## 6.0.0 - DATE HERE | ||
| ## 6.0.0 - 2017-08-09 | ||
@@ -8,0 +8,0 @@ 🎉 nanocomponent and [cache-component][cc] are merged into one module: `nanocomponent@6.0.0` 🎉. |
15
index.js
@@ -43,3 +43,3 @@ var document = require('global/document') | ||
| morph(this.element, this._handleRender(args)) | ||
| if (this.afterupdate) window.requestAnimationFrame(function () { self.afterupdate(self.element) }) | ||
| if (this.afterupdate) this.afterupdate(this.element) | ||
| } | ||
@@ -49,8 +49,7 @@ if (!this._proxy) { this._proxy = this._createProxy() } | ||
| } else { | ||
| this._ncID = makeID() | ||
| this._proxy = null | ||
| this._reset() | ||
| var el = this._handleRender(args) | ||
| if (this.beforerender) this.beforerender(el) | ||
| if (this.load || this.unload) { | ||
| onload(el, this._handleLoad, this._handleUnload, this) | ||
| onload(el, self._handleLoad, self._handleUnload, self) | ||
| } | ||
@@ -74,2 +73,3 @@ return el | ||
| proxy.id = this._id | ||
| proxy.setAttribute('data-proxy', '') | ||
| proxy.isSameNode = function (el) { | ||
@@ -81,2 +81,9 @@ return (el && el.dataset.nanocomponent === self._ncID) | ||
| Nanocomponent.prototype._reset = function () { | ||
| this._ncID = makeID() | ||
| this._id = null | ||
| this._proxy = null | ||
| this._rootNodeName = null | ||
| } | ||
| Nanocomponent.prototype._brandNode = function (node) { | ||
@@ -83,0 +90,0 @@ node.setAttribute('data-nanocomponent', this._ncID) |
| { | ||
| "name": "nanocomponent", | ||
| "version": "6.0.0-1", | ||
| "version": "6.0.0", | ||
| "description": "Native DOM components that pair nicely with DOM diffing algorithms", | ||
@@ -10,3 +10,3 @@ "main": "index.js", | ||
| "test:node": "NODE_ENV=test node test/node.js | tap-format-spec", | ||
| "test:browser": "browserify test/browser.js | tape-run | tap-format-spec", | ||
| "test:browser": "browserify test/browser/index.js | tape-run | tap-format-spec", | ||
| "test:lint": "standard *.js", | ||
@@ -56,2 +56,3 @@ "start": "bankai start example" | ||
| "microbounce": "^1.0.0", | ||
| "nanobus": "^4.2.0", | ||
| "nanologger": "^1.2.0", | ||
@@ -58,0 +59,0 @@ "npm-run-all": "^4.0.2", |
@@ -15,2 +15,3 @@ # nanocomponent [![stability][0]][1] | ||
| - Works well with [bel][bel] and [yoyoify][yoyoify] | ||
| - Combines the best of `nanocomponent@5` and [`cache-component@5`](https://github.com/hypermodules/cache-component). | ||
@@ -233,6 +234,8 @@ ## Usage | ||
| ### Where does this run? | ||
| Make sure you're running a diffing engine that checks for `.isSameNode()`, if | ||
| it doesn't you'll end up with super weird results because proxy nodes will | ||
| probably be rendered which is not what should happen. Probably make sure you're | ||
| using [morphdom][md] or [nanomorph][nm]. Seriously. | ||
| 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 | ||
| [morphdom][md]. It is designed and documented in isolation however, so it also | ||
| works well on it's own if you are careful. You can even embed it in other SPA | ||
| frameworks like React or Preact with the use of [nanocomponent-adapters][nca] which | ||
| enable framework-free components! 😎 | ||
@@ -265,3 +268,3 @@ ### What's a proxy node? | ||
| ### How does it work? | ||
| [Morphdom][md] is a diffing engine that diffs real DOM trees. It runs a series | ||
| [`nanomorph`][nm] is a diffing engine that diffs real DOM trees. It runs a series | ||
| of checks between nodes to see if they should either be replaced, removed, | ||
@@ -271,3 +274,3 @@ updated or reordered. This is done using a series of property checks on the | ||
| Since [v2.1.0][210] `morphdom` also runs `Node.isSameNode(otherNode)`. This | ||
| [`nanomorph`][nm] runs `Node.isSameNode(otherNode)` when diffing two DOM trees. This | ||
| allows us to override the function and replace it with a custom function that | ||
@@ -279,4 +282,11 @@ proxies an existing node. Check out the code to see how it works. The result is | ||
| `nanomorph`, which saw first use in choo 5, has supported `isSameNode` since | ||
| its conception. | ||
| its conception. [`morphdom`][md] has supported `.isSameNode` since [v2.1.0][210]. | ||
| ### Is this basically `react-create-class`? | ||
| `nanocomponent` is very similar to `react-create-class`, but it leaves more decisions up | ||
| to you. For example, there is no built in `props` or `state` abstraction in `nanocomponent` | ||
| but you can do something similar with `arguments` (perhaps passing a single `props` object | ||
| to `.render` e.g. `.render({ foo, bar })` and assigning internal state to `this` however | ||
| you want (perhaps `this.state = { fizz: buzz }`). | ||
| ## API | ||
@@ -331,5 +341,12 @@ ### `component = Nanocomponent()` | ||
| ## See Also | ||
| - [choojs/choo](https://github.com/choojs/choo) | ||
| - [choojs/choo][choo] | ||
| - [choojs/nanocomponent-adapters][nca] | ||
| - [shama/bel](https://github.com/shama/bel) | ||
| - [shama/on-load](https://github.com/shama/on-load) | ||
| ## Optional lifecycle events | ||
| You can add even more lifecycle events to your components by attatching the following modules | ||
| in the `beforerender` hook. | ||
| - [yoshuawuyts/observe-resize](https://github.com/yoshuawuyts/observe-resize) | ||
@@ -354,4 +371,2 @@ - [bendrucker/document-ready](https://github.com/bendrucker/document-ready) | ||
| [5]: https://travis-ci.org/choojs/nanocomponent | ||
| [6]: https://img.shields.io/codecov/c/github/choojs/cache-component/master.svg?style=flat-square | ||
| [7]: https://codecov.io/github/choojs/nanocomponent | ||
| [8]: http://img.shields.io/npm/dm/nanocomponent.svg?style=flat-square | ||
@@ -370,1 +385,3 @@ [9]: https://npmjs.org/package/nanocomponent | ||
| [onload]: https://github.com/shama/on-load | ||
| [choo]: https://github.com/choojs/choo | ||
| [nca]: https://github.com/choojs/nanocomponent-adapters |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by22.9%
36172
- Number of package files
- increased by8.33%
13
- Lines of code
- increased by70.04%
437
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by4.68%
380
Worsened metrics
- Dev dependency count
- increased by6.25%
17