\n\nA functional approach to authoring performant HTML components using plugins. Syntactic suggar on top of [nanocomponent](https://github.com/choojs/nanocomponent). Pass in a function and get another function back that handles rerendering as needed when called upon.\n\n- [Usage](#usage)\n- [API](#api)\n - [Context](#context)\n - [Lifecycle](#lifecycle)\n - [Plugins](#plugins)\n- [Examples](#examples)\n- [Why tho?](#why-tho)\n\n## Usage\n\nThe most straightforward use is to pass in a function and have the default shallow diff figure out whether to rerender the component on consecutive calls.\n\n```javascript\n// button.js\nconst html = require('bel')\nconst component = require('fun-component')\n\nmodule.exports = component(function button (ctx, clicks, onclick) {\n return html`\n \n `\n})\n```\n\n```javascript\n// app.js\nconst choo = require('choo')\nconst html = require('choo/html')\nconst button = require('./button')\n\nconst app = choo()\napp.route('/', view)\napp.mount('body')\n\nfunction view (state, emit) {\n return html`\n \n ${button(state.clicks, () => emit('click'))}\n \n `\n}\n\napp.use(function (state, emitter) {\n state.clicks = 0\n emitter.on('click', () => {\n state.clicks += 1\n emitter.emit(state.events.RENDER)\n })\n})\n```\n\n### Standalone\n\nThough fun-component was authored with [choo](https://github.com/choojs/choo) in mind it works just as well standalone!\n\n```javascript\nconst button = require('./button')\n\nlet clicks = 0\nfunction onclick () {\n clicks += 1\n button(clicks, onclick)\n}\n\ndocument.body.appendChild(button(clicks, onclick))\n```\n\n## API\n\n### `component(render)`\n### `component(name, render)`\n\nCreate a new component context. Either takes a function as an only argument or a name and a function. Returns a function that renders the element. If no name is supplied the name is derrived from the functions `name` property.\n\n*Warning: implicit function names are most probably mangled during minification. If name consistency is important to your implementation, use the explicit name syntax.*\n\n```javascript\ncomponent('hello', () => html`
Hi there!
`)\n```\n\n### Context\n\nThe component context (`ctx`) is prefixed to the arguments of all lifecycle hooks and the render function itself. The context object can be used to access the underlying nanocomponent instance.\n\n```javascript\n// Exposing nanocomponent inner workings\ncomponent(function echo(ctx) {\n return html`
I'm ${ctx._name} on the ${ctx._hasWindow ? 'client' : 'server'}
`\n})\n```\n\n### Lifecycle\n\nAll the lifecycle hooks of nanocomponent are supported, i.e. [`beforerender`](https://github.com/choojs/nanocomponent#nanocomponentprototypebeforerenderel), [`load`](https://github.com/choojs/nanocomponent#nanocomponentprototypeloadel), [`unload`](https://github.com/choojs/nanocomponent#nanocomponentprototypeunloadel), [`afterupdate`](https://github.com/choojs/nanocomponent#nanocomponentprototypeafterupdateel), and [`afterreorder`](https://github.com/choojs/nanocomponent#nanocomponentprototypeafterreorderel). Lifecycle hooks are declared on the element itself (with an \"on\" prefix) and are forwarded to the underlying nanocomponent instance.\n\nAll lifecycle hooks are called with the context object and the latest arguments used to call the component.\n\n#### Update\n\nfun-component comes with a baked in default update function that performs a shallow diff of arguments to determine whether to update the component. Setting `onupdate` on the element overrides this default behavior.\n\n##### `onupdate(ctx