├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── example.js
├── index.js
├── package.json
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/
3 | tmp/
4 | dist/
5 | npm-debug.log*
6 | .DS_Store
7 | .nyc_output
8 | yarn.lock
9 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | node_js:
 2 | - "4"
 3 | - "5"
 4 | - "6"
 5 | - "7"
 6 | sudo: false
 7 | language: node_js
 8 | script: "npm run test"
 9 | # after_success: "npm i -g codecov && npm run coverage && codecov"
10 | addons:
11 |   apt:
12 |     packages:
13 |       - xvfb
14 | install:
15 |   - export DISPLAY=':99.0'
16 |   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
17 |   - npm install
18 | 


--------------------------------------------------------------------------------
/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 | # microcomponent [![stability][0]][1]
 2 | [![npm version][2]][3] [![build status][4]][5]
 3 | [![downloads][8]][9] [![js-standard-style][10]][11]
 4 | 
 5 | Smol event based component library. Syntactic sugar around [nanocomponent][nc].
 6 | Adds logging through [nanologger](https://github.com/yoshuawuyts/nanologger).
 7 | 
 8 | ## Usage
 9 | ```js
10 | var microcomponent = require('microcomponent')
11 | var html = require('bel')
12 | 
13 | var component = createComponent()
14 | document.body.appendChild(component.render())
15 | 
16 | function createComponent () {
17 |   var component = microcomponent({
18 |     props: {
19 |       text: null
20 |     }
21 |   })
22 |   component.on('render', render)
23 |   component.on('update', update)
24 |   component.on('load', load)
25 |   component.on('unload', unload)
26 |   return component
27 | 
28 |   function render () {
29 |     return html`<h1>${this.props.text}</h1>`
30 |   }
31 | 
32 |   function update (props) {
33 |     return props.text !== this.props.text
34 |   }
35 | 
36 |   function load () {
37 |     console.log('mounted on DOM')
38 |   }
39 | 
40 |   function unload () {
41 |     console.log('removed from DOM')
42 |   }
43 | }
44 | ```
45 | 
46 | ## API
47 | ### `component = Component([{ name, props, state, pure }])`
48 | Create a new Microcomponent instance. Takes a name string that's used for
49 | logging data. Logging is logged on log level `'debug'`. You can set the log
50 | level through `localStorage.logLevel = 'debug|info|warn|error|fatal'`. Also
51 | takes objects that will be initialized as `this.state` and `this.props`. For
52 | reference, a `this.oldProps` will always contain the state of the previous
53 | render iteration.
54 | 
55 | Set `pure = true` to activate the default `on('update')` handler, which will
56 | shallow diff `props` with `this.props`.
57 | 
58 | ### `component.on(eventname, handler)`
59 | Register a new handler for an eventname. Can register any custom event,
60 | built-in lifecycle events are:
61 | - `render`: (required) create a new DOMNode. If there's already been an DOMNode
62 |   rendered it'll be diffed instead. Must always return an DOMNode of the same
63 |   type.
64 | - `update`: (required) determine if `update` should be called
65 | - `load`: called when the element is mounted on the DOM
66 | - `unload`: called when the element is removed from the DOM
67 | 
68 | ### `component.emit(eventname, [props])`
69 | Trigger a handler on the component.
70 | 
71 | ### `DOMNode = component.render([props])`
72 | Render an element.
73 | 
74 | ## See Also
75 | - [yoshuawuyts/nanocomponent][nc]
76 | 
77 | ## License
78 | [MIT](https://tldrlegal.com/license/mit-license)
79 | 
80 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
81 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index
82 | [2]: https://img.shields.io/npm/v/microcomponent.svg?style=flat-square
83 | [3]: https://npmjs.org/package/microcomponent
84 | [4]: https://img.shields.io/travis/yoshuawuyts/microcomponent/master.svg?style=flat-square
85 | [5]: https://travis-ci.org/yoshuawuyts/microcomponent
86 | [6]: https://img.shields.io/codecov/c/github/yoshuawuyts/microcomponent/master.svg?style=flat-square
87 | [7]: https://codecov.io/github/yoshuawuyts/microcomponent
88 | [8]: http://img.shields.io/npm/dm/microcomponent.svg?style=flat-square
89 | [9]: https://npmjs.org/package/microcomponent
90 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
91 | [11]: https://github.com/feross/standard
92 | [nc]: https://github.com/yoshuawuyts/nanocomponent
93 | 


--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
  1 | var microcomponent = require('.')
  2 | var morph = require('nanomorph')
  3 | var css = require('yo-css')
  4 | var html = require('bel')
  5 | var shallowEqual = require('juliangruber-shallow-equal/objects')
  6 | var move = require('array-move').mut
  7 | 
  8 | function createComponent () {
  9 |   var component = microcomponent({
 10 |     name: 'example',
 11 |     state: {
 12 |       first: null,
 13 |       last: null
 14 |     }
 15 |   })
 16 |   component.on('render', render)
 17 |   component.on('update', update)
 18 |   return component
 19 | 
 20 |   function render () {
 21 |     this.state.first = this.props.first()
 22 |     this.state.last = this.props.last()
 23 |     return html`
 24 |       <article>
 25 |         <h1 style=${css({
 26 |           fontFamily: 'monospace'
 27 |         })}>
 28 |           ${this.props.title} (+${this.props.likes}) 
 29 |           <button onclick=${this.props.like}>Like</button> 
 30 |           <button onclick=${this.props.delete}>x</button>
 31 |           <button onclick=${this.props.up} disabled=${this.state.first}>^</button>
 32 |           <button onclick=${this.props.down} disabled=${this.state.last}>v</button>
 33 |         </h1>
 34 |       </article>
 35 |     `
 36 |   }
 37 | 
 38 |   function update (props) {
 39 |     return !shallowEqual(props, this.props) ||
 40 |       props.first() !== this.state.first ||
 41 |       props.last() !== this.state.last
 42 |   }
 43 | }
 44 | 
 45 | var state = {
 46 |   posts: []
 47 | }
 48 | 
 49 | var el = render()
 50 | document.body.appendChild(el)
 51 | 
 52 | for (var i = 0; i < 10; i++) addPost()
 53 | 
 54 | function addPost () {
 55 |   var post = {
 56 |     title: Math.random().toString(16).slice(2),
 57 |     likes: 0,
 58 |     component: createComponent(),
 59 |     like: function () {
 60 |       post.likes++
 61 |       update()
 62 |     },
 63 |     delete: function () {
 64 |       state.posts.splice(state.posts.indexOf(post), 1)
 65 |       update()
 66 |     },
 67 |     up: function () {
 68 |       var idx = state.posts.indexOf(post)
 69 |       move(state.posts, idx, idx - 1)
 70 |       update()
 71 |     },
 72 |     down: function () {
 73 |       var idx = state.posts.indexOf(post)
 74 |       move(state.posts, idx, idx + 1)
 75 |       update()
 76 |     },
 77 |     first: function () {
 78 |       return state.posts.indexOf(post) === 0
 79 |     },
 80 |     last: function () {
 81 |       return state.posts.indexOf(post) === state.posts.length - 1
 82 |     }
 83 |   }
 84 |   state.posts.push(post)
 85 |   update()
 86 | }
 87 | 
 88 | function render () {
 89 |   return html`
 90 |     <div>
 91 |       <button onclick=${addPost}>New Post</button>
 92 |       ${state.posts.map(post => post.component.render(Object.assign({}, post)))}
 93 |     </div>
 94 |   `
 95 | }
 96 | 
 97 | function update () {
 98 |   el = morph(el, render())
 99 | }
100 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var Nanocomponent = require('nanocomponent')
 2 | var nanologger = require('nanologger')
 3 | var nanomorph = require('nanomorph')
 4 | var assert = require('assert')
 5 | var shallowEqual = require('juliangruber-shallow-equal/objects')
 6 | 
 7 | var rootLabelRegex = /^data-onloadid/
 8 | 
 9 | module.exports = Microcomponent
10 | 
11 | function Microcomponent (opts) {
12 |   if (!(this instanceof Microcomponent)) return new Microcomponent(opts)
13 |   Nanocomponent.call(this)
14 | 
15 |   opts = opts || {}
16 |   this.name = opts.name || 'component'
17 |   this.props = opts.props || {}
18 |   this.state = opts.state || {}
19 | 
20 |   this._log = nanologger(this.name)
21 |   this._log.debug('initialized')
22 | 
23 |   if (opts.pure) {
24 |     this._update = function (props) {
25 |       return !shallowEqual(props, this.props)
26 |     }
27 |   }
28 | }
29 | Microcomponent.prototype = Object.create(Nanocomponent.prototype)
30 | 
31 | Microcomponent.prototype.on = function (eventname, handler) {
32 |   assert.equal(typeof eventname, 'string', 'microcomponent.on eventname should be type string')
33 |   assert.equal(typeof handler, 'function', 'microcomponent.on handler should be type function')
34 | 
35 |   if (eventname === 'render') {
36 |     this._render = function () {
37 |       return handler.call(this)
38 |     }
39 |     var render = this.render
40 |     this.render = function (props) {
41 |       this._log.debug(eventname, props)
42 |       var oldElement = this._element
43 |       var ret = render.call(this, props)
44 |       var newElement = this._element
45 | 
46 |       if (oldElement) {
47 |         var oldAttrs = oldElement.attributes
48 |         var attr, name
49 |         for (var i = 0, len = oldAttrs.length; i < len; i++) {
50 |           attr = oldAttrs[i]
51 |           name = attr.name
52 |           if (rootLabelRegex.test(name)) {
53 |             newElement.setAttribute(name, attr.value)
54 |             break
55 |           }
56 |         }
57 |         nanomorph(oldElement, newElement)
58 |         this._element = oldElement
59 |       }
60 | 
61 |       return ret
62 |     }
63 |   } else {
64 |     this['_' + eventname] = function () {
65 |       var len = arguments.length
66 |       var args = new Array(len)
67 |       for (var i = 0; i < len; i++) args[i] = arguments[i]
68 |       args.length
69 |         ? this._log.debug(eventname, args)
70 |         : this._log.debug(eventname)
71 |       var res = handler.apply(this, args)
72 |       return res
73 |     }
74 |   }
75 | 
76 |   return this
77 | }
78 | 
79 | Microcomponent.prototype.emit = function (eventname) {
80 |   assert.equal(typeof eventname, 'string', 'microcomponent.emit eventname should be type string')
81 |   var len = arguments.length - 1
82 |   var args = new Array(len)
83 |   for (var i = 0; i < len; i++) args[i] = arguments[i + 1]
84 |   return this['_' + eventname].apply(this, args)
85 | }
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "microcomponent",
 3 |   "description": "Smol event based component library",
 4 |   "repository": "yoshuawuyts/microcomponent",
 5 |   "license": "MIT",
 6 |   "version": "3.1.6",
 7 |   "scripts": {
 8 |     "deps": "dependency-check . && dependency-check . --extra --no-dev",
 9 |     "start": "beefy example.js",
10 |     "test": "standard && npm run deps && browserify test.js | tape-run",
11 |     "coverage": "nyc report --reporter=text-lcov > coverage.lcov"
12 |   },
13 |   "dependencies": {
14 |     "juliangruber-shallow-equal": "^1.0.4",
15 |     "nanocomponent": "^5.0.0",
16 |     "nanologger": "^1.1.0",
17 |     "nanomorph": "^5.0.0"
18 |   },
19 |   "devDependencies": {
20 |     "array-move": "^1.0.0",
21 |     "beefy": "^2.1.8",
22 |     "bel": "^5.0.0",
23 |     "browserify": "^14.3.0",
24 |     "dependency-check": "^2.8.0",
25 |     "nyc": "^10.1.2",
26 |     "standard": "^9.0.2",
27 |     "tape": "^4.6.3",
28 |     "tape-run": "^3.0.0",
29 |     "yo-css": "^1.1.0"
30 |   },
31 |   "keywords": [
32 |     "component",
33 |     "event",
34 |     "diffing"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | var nanomorph = require('nanomorph')
 2 | var microcomponent = require('.')
 3 | var test = require('tape')
 4 | var html = require('bel')
 5 | 
 6 | test('integration', function (t) {
 7 |   t.plan(3)
 8 | 
 9 |   function PlainComponent () {
10 |     var component = microcomponent('plaincomponent')
11 |     component.on('render', render)
12 |     component.on('update', update)
13 |     component.on('load', load)
14 |     component.on('unload', unload)
15 | 
16 |     return component
17 | 
18 |     function render () {
19 |       t.ok(true, 'component: render')
20 |       return html`
21 |         <div>
22 |           <div></div>
23 |         </div>
24 |       `
25 |     }
26 | 
27 |     function update (props) {
28 |       return false
29 |     }
30 | 
31 |     function load () {
32 |       t.ok(true, 'component: load')
33 |     }
34 | 
35 |     function unload () {
36 |       t.fail('component: unload')
37 |     }
38 |   }
39 | 
40 |   var plainComponent = PlainComponent()
41 |   var state = {
42 |     count: 0
43 |   }
44 | 
45 |   function render () {
46 |     var el = html`
47 |       <div>
48 |         <h1>count is ${state.count}</h1>
49 |         ${plainComponent.render()}
50 |       </div>
51 |     `
52 |     return el
53 |   }
54 | 
55 |   function update () {
56 |     t.ok(true, 'update')
57 |     var newElement = render()
58 |     nanomorph(el, newElement)
59 |   }
60 | 
61 |   var el = render()
62 |   document.body.appendChild(el)
63 | 
64 |   setTimeout(function () {
65 |     state.count++
66 |     update()
67 |   }, 1000)
68 | })
69 | 


--------------------------------------------------------------------------------