├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | dist/ 4 | tmp/ 5 | npm-debug.log* 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | node_js: 2 | - "4" 3 | - "6" 4 | sudo: false 5 | language: node_js 6 | script: "npm run test" 7 | # after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov" 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Yoshua Wuyts 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cache-element [![stability][0]][1] 2 | [![npm version][2]][3] [![build status][4]][5] 3 | [![downloads][8]][9] [![js-standard-style][10]][11] 4 | 5 | Cache an HTML element that's used in DOM diffing algorithms that respect 6 | `element.isSameNode()`. 7 | 8 | ## Usage 9 | ```js 10 | var cache = require('cache-element') 11 | var html = require('bel') 12 | 13 | var nav = cache(function () { 14 | return html` 15 | 22 | ` 23 | }) 24 | 25 | document.body.appendChild(nav.render()) 26 | ``` 27 | 28 | ## API 29 | ### `element = cache(render)` 30 | Create a new instance of cache-element. Takes a render function that is called 31 | when `element.render()` is called and a prior call doesn't have a node mounted 32 | on the DOM. 33 | 34 | ### `element.render()` 35 | Render the element to append it on the DOM. As long as the Node is on the DOM, 36 | subsequent calls to `element.render()` will return an empty node that has a 37 | `.isSameNode()` method on it so diffing algorithms that respect this property 38 | will skip diffing this node. 39 | 40 | ## Installation 41 | ```sh 42 | $ npm install cache-element 43 | ``` 44 | 45 | ## See Also 46 | - [yoshuawuyts/nanomorph](https://github.com/yoshuawuyts/nanomorph) 47 | - [yoshuawuyts/nanocomponent](https://github.com/yoshuawuyts/nanocomponent) 48 | 49 | ## License 50 | [MIT](https://tldrlegal.com/license/mit-license) 51 | 52 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square 53 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index 54 | [2]: https://img.shields.io/npm/v/cache-element.svg?style=flat-square 55 | [3]: https://npmjs.org/package/cache-element 56 | [4]: https://img.shields.io/travis/yoshuawuyts/cache-element/master.svg?style=flat-square 57 | [5]: https://travis-ci.org/yoshuawuyts/cache-element 58 | [6]: https://img.shields.io/codecov/c/github/yoshuawuyts/cache-element/master.svg?style=flat-square 59 | [7]: https://codecov.io/github/yoshuawuyts/cache-element 60 | [8]: http://img.shields.io/npm/dm/cache-element.svg?style=flat-square 61 | [9]: https://npmjs.org/package/cache-element 62 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square 63 | [11]: https://github.com/feross/standard 64 | [bel]: https://github.com/shama/bel 65 | [md]: https://github.com/patrick-steele-idem/morphdom 66 | [210]: https://github.com/patrick-steele-idem/morphdom/pull/81 67 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var Nanocomponent = require('nanocomponent') 2 | var assert = require('assert') 3 | 4 | module.exports = CacheElement 5 | 6 | function CacheElement (render) { 7 | if (!(this instanceof CacheElement)) return new CacheElement(render) 8 | Nanocomponent.call(this) 9 | assert.equal(typeof render, 'function', 'cache-element: render should be type function') 10 | this._handleRender = render 11 | } 12 | CacheElement.prototype = Object.create(Nanocomponent.prototype) 13 | 14 | CacheElement.prototype._render = function () { 15 | return this._handleRender() 16 | } 17 | 18 | CacheElement.prototype._update = function () { 19 | return false 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cache-element", 3 | "version": "3.0.1", 4 | "description": "Memoize a bel element", 5 | "main": "index.js", 6 | "scripts": { 7 | "deps": "dependency-check . && dependency-check . --extra --no-dev", 8 | "test": "standard *.js && npm run deps", 9 | "test:cov": "standard && npm run deps" 10 | }, 11 | "repository": "yoshuawuyts/cache-element", 12 | "keywords": [ 13 | "bel", 14 | "choo", 15 | "element", 16 | "thunk", 17 | "cache", 18 | "perf", 19 | "cache" 20 | ], 21 | "license": "MIT", 22 | "dependencies": { 23 | "nanocomponent": "^3.0.2" 24 | }, 25 | "devDependencies": { 26 | "dependency-check": "^2.8.0", 27 | "standard": "^9.0.2" 28 | } 29 | } 30 | --------------------------------------------------------------------------------