{"_id":"@calebmer/inferno","_rev":"1-5505b37820a7124e2d756d3f8db506e6","name":"@calebmer/inferno","dist-tags":{"latest":"5.0.4-custom"},"versions":{"5.0.4-custom":{"name":"@calebmer/inferno","version":"5.0.4-custom","license":"MIT","description":"An extremely fast, React-like JavaScript library for building modern user interfaces","author":{"name":"Dominic Gannaway","email":"dg@domgan.com"},"bugs":{"url":"https://github.com/infernojs/inferno/issues"},"homepage":"https://github.com/infernojs/inferno#readme","keywords":["inferno","performance","framework","interfaces","user interfaces","html","renderToString","server","dom","browser","rollup","vdom"],"collective":{"type":"opencollective","url":"https://opencollective.com/inferno","logo":"https://opencollective.com/inferno/logo.txt"},"scripts":{"postinstall":"opencollective postinstall"},"rollup":{"bundledDependencies":["inferno-shared","inferno-vnode-flags"],"moduleName":"Inferno"},"main":"index.js","module":"index.esm.js","dev:module":"dist/index.dev.esm.js","typings":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/infernojs/inferno.git"},"devDependencies":{"inferno-utils":"5.0.4"},"dependencies":{"inferno-shared":"5.0.4","inferno-vnode-flags":"5.0.4","opencollective":"^1.0.3"},"_id":"@calebmer/inferno@5.0.4-custom","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"calebmer","email":"calebmeredith8@gmail.com"},"dist":{"integrity":"sha512-Uaiya+8QEPO7CJzyaPkcxx7eZPQknDqt0XY/s43ZdRcQEY64s3WHoI6pLOF3OFtMnsHP4XlrHP3potFKxytqkQ==","shasum":"24c9b8cc584bc4fbb851fd0d4cd13a91ed68947d","tarball":"https://registry.npmjs.org/@calebmer/inferno/-/inferno-5.0.4-custom.tgz","fileCount":11,"unpackedSize":644473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa77U4CRA9TVsSAnZWagAAvnsP/08oiTWaoLZl7VTjIzvV\nJLSENNYFEwGHvSBKI1/Of21HKnWNyMYvTlch4YT/A59WAJBwyf09zVliUzIq\nNfuKUU9ZvnEXlvzOcteifqk22SDdLvlbZMPIGK/jzvRb2wX4r/FjEoiWCiMZ\nvbe3s+15RB+ZgOT4k+WJgF9XG/D+Hpp+krst2TGX0woYKM7lglJI+IhSIXNk\nNBQbgYL5RSwJ/5YTfAulOLsk3z+L5AoX6LkCL2kEaZ+E0TbqFntJxzrq0UcF\nJDKZa3q3N9MbjUFw+IyIhudoYdNRHWUNhm2+8S24wsfYuWQazXB8+MhjLVNy\nYJsKsqvb5x0H2Jj9XDrpXJ85NjLL6/33sr+Y884TRwFnzkpNiOIagWFkemgv\nYye2vgN4k+KIBVK/3lU2mbTk2GwSHXqhKPrz+FLl7SXRUobEP48tpf2ol2Gf\niTjI2FmX6uYcTkxKae7/60CZGbIQGcmzxJi+EUgnJmyOaADOIQENBNHoRIIQ\n0OhbTwyUWySW/jyJXq6TTmAgHmO2nMs8x2YyYEp6r7PcqegJ+dWv4XamOMB5\n/XQXFeSmN6qSK6vR+E+TERnQl57cdmuSXXTitwnaD043WBfDJKxmVxGJfEU5\nGE8kH72/oERt5kXKxsYEQbYv2lAFgM+OZ8lyk8C/w7/kARwUSUjMO+IJN2hm\nzku3\r\n=Uyib\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1IekkmwtlkKMFc4pumbVa56deCa23b+Nghiaq1InHzAiBdoZ/Ei0jTdcpLx2pTGf4MIrP2VKZZxq45sNKJBlZyPQ=="}]},"maintainers":[{"name":"calebmer","email":"calebmeredith8@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/inferno_5.0.4-custom_1525658934337_0.7795479594839734"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-07T02:08:54.285Z","5.0.4-custom":"2018-05-07T02:08:54.515Z","modified":"2022-04-04T21:31:56.662Z"},"maintainers":[{"name":"calebmer","email":"calebmeredith8@gmail.com"}],"description":"An extremely fast, React-like JavaScript library for building modern user interfaces","homepage":"https://github.com/infernojs/inferno#readme","keywords":["inferno","performance","framework","interfaces","user interfaces","html","renderToString","server","dom","browser","rollup","vdom"],"repository":{"type":"git","url":"git+https://github.com/infernojs/inferno.git"},"author":{"name":"Dominic Gannaway","email":"dg@domgan.com"},"bugs":{"url":"https://github.com/infernojs/inferno/issues"},"license":"MIT","readme":"<p align=\"center\"><a href=\"https://infernojs.org/\" target=\"_blank\"><img width=\"150\" alt=\"Inferno\" title=\"Inferno\" src=\"https://user-images.githubusercontent.com/2021355/36063342-626d7ea8-0e84-11e8-84e1-f22bb3b8c4d5.png\"></p>\n\n[![Build Status](https://img.shields.io/travis/infernojs/inferno/master.svg?style=flat-square)](https://travis-ci.org/infernojs/inferno/branches)\n[![Coverage Status](https://img.shields.io/coveralls/infernojs/inferno/master.svg?style=flat-square)](https://coveralls.io/github/infernojs/inferno?branch=master)\n[![MIT](https://img.shields.io/npm/l/inferno.svg?style=flat-square)](https://github.com/infernojs/inferno/blob/master/LICENSE.md)\n[![NPM](https://img.shields.io/npm/v/inferno.svg?style=flat-square)](https://www.npmjs.com/package/inferno)\n[![npm downloads](https://img.shields.io/npm/dm/inferno.svg?style=flat-square)](https://www.npmjs.org/package/inferno)\n[![Slack Status](https://inferno-slack.herokuapp.com/badge.svg)](https://inferno-slack.herokuapp.com/)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/inferno/dist/inferno.min.js?compression=gzip)](https://unpkg.com/inferno/dist/inferno.min.js)\n[![Backers on Open Collective](https://opencollective.com/inferno/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/inferno/sponsors/badge.svg)](#sponsors)\n\nInferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.\n\n## Description\n\nThe main objective of the Inferno project is to provide the fastest possible **runtime** performance for web applications. Inferno excels at rendering real time data views or large DOM trees.\n\nThe performance is achieved through multiple optimizations, for example:\n\n- Inferno's own [JSX plugin](https://github.com/infernojs/babel-plugin-inferno) creates monomorphic `createVNode` calls, instead of `createElement`\n- Inferno's diff process uses bitwise flags to memoize the shape of objects\n- Child nodes are normalized only when needed\n- Special JSX flags can be used during compile time to optimize runtime performance at application level\n- Many micro optimizations\n\n## Features\n\n- Component driven + one-way data flow architecture\n- React-like API, concepts and component lifecycle events\n- Partial synthetic event system, normalizing events for better cross browser support\n- Inferno's [`linkEvent`](https://github.com/infernojs/inferno/blob/master/README.md#linkevent-package-inferno) feature removes the need to use arrow functions or binding event callbacks\n- Isomorphic rendering on both client and server with `inferno-server`\n- Unlike React and Preact, Inferno has lifecycle events on functional components\n- Unlike Preact and other React-like libraries, Inferno has controlled components for input/select/textarea elements\n- Components can be rendered outside their current html hierarchy using `createPortal` - API\n- Support for [older browsers](https://github.com/infernojs/inferno#browser-supports) without any polyfills\n- defaultHooks for Functional components, this way re-defining lifecycle events per usage can be avoided\n\n## Browser support\nSince version 4 we have started running our test suite **without** any polyfills.\nInferno is now part of [Saucelabs](https://saucelabs.com/) open source program and we use their service for executing the tests.\n\nInfernoJS natively supports the browsers listed below.\n\n[![Build Status](https://saucelabs.com/browser-matrix/Havunen.svg)](https://saucelabs.com/open_sauce/user/Havunen)\n\n\n## Migration to v4\nList of breaking changes can be found from [here](https://github.com/infernojs/inferno/blob/master/docs/v4-migration.md)\n\n## Benchmarks\n\n- [UI Bench](https://localvoid.github.io/uibench/)\n- [dbmonster](https://rawgit.com/infernojs/dbmonster-inferno/master/index.html)\n- [JS Web Frameworks Benchmark - Round 6](http://stefankrause.net/js-frameworks-benchmark6/webdriver-ts/table.html)\n- [Isomorphic-UI-Benchmark](https://github.com/marko-js/isomorphic-ui-benchmarks)\n- [1k Components](https://rawgit.com/infernojs/inferno/master/benchmarks/1kcomponents/index.html)\n\n## Code Example\n\nLet's start with some code. As you can see, Inferno intentionally keeps the same design ideas as React regarding components: one-way data flow and separation of concerns.\n\nIn these examples, JSX is used via the [Inferno JSX Babel Plugin](https://github.com/infernojs/babel-plugin-inferno) to provide a simple way to express Inferno virtual DOM. You do not need to use JSX, it's completely **optional**, you can use [hyperscript](https://github.com/infernojs/inferno/tree/master/packages/inferno-hyperscript) or [createElement](https://github.com/infernojs/inferno/tree/master/packages/inferno-create-element) (like React does).\nKeep in mind that compile time optimizations are available only for JSX.\n\n```jsx\nimport { render } from 'inferno';\n\nconst message = \"Hello world\";\n\nrender(\n  <MyComponent message={ message } />,\n  document.getElementById(\"app\")\n);\n```\nFurthermore, Inferno also uses ES6 components like React:\n\n```jsx\nimport { render, Component } from 'inferno';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      counter: 0\n    };\n  }\n  render() {\n    return (\n      <div>\n        <h1>Header!</h1>\n        <span>Counter is at: { this.state.counter }</span>\n      </div>\n    );\n  }\n}\n\nrender(\n  <MyComponent />,\n  document.getElementById(\"app\")\n);\n```\n\nBecause performance is an important aspect of this library, we want to show you how to optimize your application even further.\nIn the example below we optimize diffing process by using JSX **$HasVNodeChildren** to predefine children shape compile time.\nThen we create text vNode using `createTextVNode`.\n\n```jsx\nimport { createTextVNode, render, Component } from 'inferno';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      counter: 0\n    };\n  }\n  render() {\n    return (\n      <div>\n        <h1>Header!</h1>\n        <span $HasVNodeChildren>{createTextVNode('Counter is at: ' + this.state.counter)}</span>\n      </div>\n    );\n  }\n}\n\nrender(\n  <MyComponent />,\n  document.getElementById(\"app\")\n);\n```\n\n### More Examples\n\nIf you have built something using Inferno you can add them here:\n\n- [**Simple Clock** (@JSFiddle)](https://jsfiddle.net/pzmqLjo7/)\n\n\n## Getting Started\n\nThe best way to get started with Inferno is by using [Create Inferno App](https://github.com/infernojs/create-inferno-app).\n\nAlternatively, you can use the [Inferno Boilerplate](https://github.com/infernojs/inferno-boilerplate) for a very simple setup. For a more advanced example demonstrating how Inferno might be used, we recommend trying out [Inferno Starter Project](https://github.com/nightwolfz/inferno-starter) by [nightwolfz](https://github.com/nightwolfz/). For using Inferno to build a mobile app, try [Inferno Mobile Starter Project](https://github.com/Rudy-Zidan/inferno-mobile) by [Rudy-Zidan](https://github.com/Rudy-Zidan).\n\nCore package:\n\n```sh\nnpm install --save inferno\n```\n\nAddons:\n\n```sh\n# server-side rendering\nnpm install --save inferno-server\n# routing\nnpm install --save inferno-router\n```\n\nPre-bundled files for browser consumption can be found on [our cdnjs](https://cdnjs.com/libraries/inferno):\n\nOr on jsDelivr:\n\n```\nhttps://cdn.jsdelivr.net/npm/inferno@latest/dist/inferno.min.js\n```\n\nOr on unpkg.com:\n\n```\nhttps://unpkg.com/inferno@latest/dist/inferno.min.js\n```\n\n### Creating Virtual DOM\n\n#### JSX:\n```sh\nnpm install --save-dev babel-plugin-inferno\n```\n\n#### Hyperscript:\n```sh\nnpm install --save inferno-hyperscript\n```\n\n#### createElement:\n```sh\nnpm install --save inferno-create-element\n```\n\n### Compatibility with existing React apps\n```sh\nnpm install --save-dev inferno-compat\n```\n\nNote: Make sure you read more about [`inferno-compat`](https://github.com/infernojs/inferno/tree/master/packages/inferno-compat) before using it.\n\n## Third-party state libraries\n\nInferno now has bindings available for some of the major state management libraries out there:\n\n- Redux via [`inferno-redux`](https://github.com/infernojs/inferno/tree/dev/packages/inferno-redux)\n- MobX via [`inferno-mobx`](https://github.com/infernojs/inferno/tree/dev/packages/inferno-mobx)\n- Cerebral via [`cerebral-view-inferno`](https://github.com/cerebral/cerebral-view-inferno)\n\n## JSX\n\nInferno has its own [JSX Babel plugin](https://github.com/trueadm/babel-plugin-inferno).\n\n## Differences from React\n\n- Inferno is much smaller in size, `~8kb` vs `45kb` gzip. This means Inferno is faster to transfer over the network but more importantly, it is *much* faster to parse – this makes a big impact on mobile.\n- Inferno is considerably faster than React. This doesn't apply to benchmarks only, but to real-world applications that companies have converted to Inferno from React as well. Ranging from 40% - 110% performance improvement with Inferno `1.0`. No other React-like library gets close to this performance gain over React.\n- Inferno doesn't have a fully synthetic event system like React does. Inferno has a partially synthetic event system, instead opting to only delegate certain events (such as `onClick`).\n- Inferno doesn't support React Native. Inferno was only designed for the browser/server with the DOM in mind.\n- Inferno doesn't support string refs – although this can be enabled using `inferno-compat`. We don't recommend using them since they are the source of many memory leaks and performance issues in real-world apps. Stick with function callback refs instead.\n- Inferno includes `render` on the main core package, rather than have an `InfernoDOM` package like React does. We used to do it that way, but we found people simply didn't like it given we don't support native. Furthermore, by not splitting them, we improved performance and bundle sizes.\n- Inferno provides lifecycle events on functional components. This is a major win for people who prefer lightweight components rather than ES2015 classes.\n- Inferno is able to use the React Dev Tools extensions for Chrome/Firefox/etc to provide the same level of debugging experience to the Inferno user via `inferno-devtools`.\n\n## Differences from Preact\n\n- Inferno is larger in size, `~8kb` vs `3kb` gzip. This means that Preact should parse faster than Inferno – if only slightly.\n- Inferno has a partial synthetic event system, resulting in better performance via delegation of certain events.\n- Inferno is *much* faster than Preact in rendering, updating and removing elements from the DOM. Inferno diffs against virtual DOM, rather than the real DOM (except when loading from server-side rendered content), which means it can make drastic improvements. Unfortunately, diffing against the real DOM has a 30-40% overhead cost in operations.\n- Inferno fully supports controlled components for `input`/`select`/`textarea` elements. This prevents lots of edgecases where the virtual DOM is not the source of truth (it should always be). Preact pushes the source of truth to the DOM itself.\n- Inferno provides lifecycle events on functional components. This is a major win for people who prefer lightweight components rather than ES2015 classes.\n\n## Event System\n\nLike React, Inferno also uses a light-weight synthetic event system in certain places (although both event systems differ massively). Inferno's event system provides highly efficient delegation and an event helper called [`linkEvent`](https://github.com/infernojs/inferno/blob/master/README.md#linkevent-package-inferno).\n\nOne major difference between Inferno and React is that Inferno does not rename events or change how they work by default. Inferno only specifies that events should be camel cased, rather than lower case. Lower case events will bypass\nInferno's event system in favour of using the native event system supplied by the browser. For example, when detecting changes on an `<input>` element, in React you'd use `onChange`, with Inferno you'd use `onInput` instead (the\nnative DOM event is `oninput`).\n\nAvailable synthetic events are:\n- `onClick`\n- `onDblClick`\n- `onMouseMove`\n- `onMouseDown`\n- `onMouseUp`\n- `onSubmit`\n- `onKeyPress`\n- `onKeyDown`\n- `onKeyUp`\n- `onInput`\n- `onChange`\n- `onFocusIn`\n- `onFocusOut`\n\n### `linkEvent` (package: `inferno`)\n\n`linkEvent()` is a helper function that allows attachment of `props`/`state`/`context` or other data to events without needing to `bind()` them or use arrow functions/closures. This is extremely useful when dealing with events in functional components. Below is an example:\n\n```jsx\nimport { linkEvent } from 'inferno';\n\nfunction handleClick(props, event) {\n  props.validateValue(event.target.value);\n}\n\nfunction MyComponent(props) {\n  return <div><input type=\"text\" onClick={ linkEvent(props, handleClick) } /><div>;\n}\n```\n\nThis is an example of using it with ES2015 classes:\n\n\n```jsx\nimport { linkEvent, Component } from 'inferno';\n\nfunction handleClick(instance, event) {\n  instance.setState({ data: event.target.value });\n}\n\nclass MyComponent extends Component {\n  render () {\n    return <div><input type=\"text\" onClick={ linkEvent(this, handleClick) } /><div>;\n  }\n}\n```\n\n`linkEvent()` offers better performance than binding an event in a class constructor and using arrow functions, so use it where possible.\n\n\n## Controlled Components\n\nIn HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input.\nIn Inferno, mutable state is typically kept in the state property of components, and only updated with `setState()`.\n\nWe can combine the two by making the Inferno state be the \"single source of truth\". Then the Inferno component that renders a form also\ncontrols what happens in that form on subsequent user input. An input form element whose value is controlled by\nInferno in this way is called a \"controlled component\".\n\n## Inferno Top-Level API\n\n### `render` (package: `inferno`)\n\n```javascript\nimport { render } from 'inferno';\n\nrender(<div />, document.getElementById(\"app\"));\n```\n\nRender a virtual node into the DOM in the supplied container given the supplied virtual DOM. If the virtual node was previously rendered\ninto the container, this will perform an update on it and only mutate the DOM as necessary, to reflect the latest Inferno virtual node.\n\nWarning: If the container element is not empty before rendering, the content of the container will be overwritten on the initial render.\n\n### `createRenderer` (package: `inferno`)\n\n`createRenderer` creates an alternative render function with a signature matching that of the first argument passed to a reduce/scan function. This allows for easier integration with reactive programming libraries, like [RxJS](https://github.com/ReactiveX/rxjs) and [Most](https://github.com/cujojs/most).\n\n```javascript\nimport { createRenderer } from 'inferno';\nimport { scan, map } from 'most';\n\nconst renderer = createRenderer();\n\n\n// NOTE: vNodes$ represents a stream of virtual DOM node updates\nscan(renderer, document.getElementById(\"app\"), vNodes$);\n```\n\nSee [inferno-most-fp-demo](https://github.com/joshburgess/inferno-most-fp-demo) for an example of how to build an app architecture around this.\n\n### `createElement` (package: `inferno-create-element`)\n\nCreates an Inferno VNode using a similar API to that found with React's `createElement()`\n\n```javascript\nimport { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\nclass BasicComponent extends Component {\n  render() {\n    return createElement('div', {\n        className: 'basic'\n      },\n      createElement('span', {\n        className: this.props.name\n      }, 'The title is ', this.props.title)\n    )\n  }\n}\n\nrender(\n  createElement(BasicComponent, { title: 'abc' }),\n  document.getElementById(\"app\")\n);\n```\n\n### `Component` (package: `inferno`)\n\n**Class component:**\n\n```javascript\nimport { Component } from 'inferno';\n\nclass MyComponent extends Component {\n  render() {\n    ...\n  }\n}\n```\n\nThis is the base class for Inferno Components when they're defined using ES6 classes.\n\n**Functional component:**\n\n```javascript\nconst MyComponent = ({ name, age }) => (\n  <span>My name is: { name } and my age is: {age}</span>\n);\n```\n\nAnother way of using defaultHooks.\n```javascript\nexport function Static() {\n    return <div>1</div>;\n}\n\nStatic.defaultHooks = {\n    onComponentShouldUpdate() {\n        return false;\n    }\n};\n```\n\nFunctional components are first-class functions where their first argument is the `props` passed through from their parent.\n\n### `createVNode` (package: `inferno`)\n```js\nimport { createVNode } from 'inferno';\n\ncreateVNode(\n  flags,\n  type,\n  [className],\n  [...children],\n  [childFlags],\n  [props],\n  [key],\n  [ref]\n)\n```\n\ncreateVNode is used to create html element's virtual node object. Typically `createElement()` (package: `inferno-create-element`), `h()` (package: `inferno-hyperscript`) or JSX are used to create\n`VNode`s for Inferno, but under the hood they all use `createVNode()`. Below is an example of `createVNode` usage:\n\n```javascript\nimport { VNodeFlags, ChildFlags } from 'inferno-vnode-flags';\nimport { createVNode, createTextVNode, render } from 'inferno';\n\nconst vNode = createVNode(VNodeFlags.HtmlElement, 'div', 'example', createTextVNode('Hello world!'), ChildFlags.HasVNodeChildren);\n\n// <div class=\"example\">Hello world!</div>\n\nrender(vNode, container);\n```\n\n`createVNode` arguments explained:\n\n`flags`: (number) is a value from [`VNodeFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this is a numerical value that tells Inferno what the VNode describes on the page.\n\n`type`: (string) is tagName for element for example 'div'\n\n`className`: (string) is the class attribute ( it is separated from props because it is the most commonly used property )\n\n`children`: (vNode[]|vNode) is one or array of vNodes to be added as children for this vNode\n\n`childFlags`: (number) is a value from [`ChildFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this tells inferno shape of the children so normalization process can be skipped.\n\n`props`: (Object) is object containing all other properties. fe: `{onClick: method, 'data-attribute': 'Hello Community!}`\n\n`key`: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.\n\n`ref`: (function) callback which is called when DOM node is added/removed from DOM.\n\n\n### `createComponentVNode` (package: 'inferno')\n```js\nimport { createComponentVNode } from 'inferno';\n\ncreateComponentVNode(\n  flags,\n  type,\n  [props],\n  [key],\n  [ref]\n)\n```\n\ncreateComponentVNode is used for creating vNode for Class/Functional Component.\n\nExample:\n```javascript\nimport { VNodeFlags, ChildFlags } from 'inferno-vnode-flags';\nimport { createVNode, createTextVNode, createComponentVNode, render } from 'inferno';\n\nfunction MyComponent(props, context) {\n  return createVNode(VNodeFlags.HtmlElement, 'div', 'example', createTextVNode(props.greeting), ChildFlags.HasVNodeChildren);\n}\n\nconst vNode = createComponentVNode(VNodeFlags.ComponentFunction, MyComponent, {\n  greeting: 'Hello Community!'\n}, null, {\n  onComponentDidMount() {\n    console.log(\"example of did mount hook!\")\n  }\n})\n\n// <div class=\"example\">Hello Community!</div>\n\nrender(vNode, container);\n```\n\n\n`createComponentVNode` arguments explained:\n\n`flags`: (number) is a value from [`VNodeFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this is a numerical value that tells Inferno what the VNode describes on the page.\n\n`type`: (Function/Class) is the class or function prototype for Component\n\n`props`: (Object) properties passed to Component, can be anything\n\n`key`: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.\n\n`ref`: (Function|Object) this property is object for Functional Components defining all its lifecycle methods. For class Components this is function callback for ref.\n\n\n\n### `createTextVNode` (package: 'inferno')\n\ncreateTextVNode is used for creating vNode for text nodes.\n\n`createTextVNode` arguments explained:\ntext: (string) is a value for text node to be created.\nkey: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.\n\n```js\nimport { createTextVNode } from 'inferno';\n\ncreateTextVNode(\n  text,\n  key\n)\n```\n\n\n### `cloneVNode` (package: `inferno-clone-vnode`)\n\nThis package has same API as React.cloneElement\n\n```javascript\nimport {cloneVNode} from 'inferno-clone-vnode';\n\ncloneVNode(\n  vNode,\n  [props],\n  [...children]\n)\n```\n\nClone and return a new Inferno `VNode` using a `VNode` as the starting point. The resulting `VNode` will have the original `VNode`'s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original `VNode` will be preserved.\n\n`cloneVNode()` is almost equivalent to:\n```jsx\n<VNode.type {...VNode.props} {...props}>{children}</VNode.type>\n```\n\nAn example of using `cloneVNode`:\n\n```javascript\nimport { cloneVNode, createVNode, render } from 'inferno';\nimport { VNodeFlags } from 'inferno-vnode-flags';\n\nconst vNode = createVNode(VNodeFlags.HtmlElement, 'div', 'example', 'Hello world!');\nconst newVNode = cloneVNode(vNode, { id: 'new' }); // we are adding an id prop to the VNode\n\nrender(newVNode, container);\n```\n\nIf you're using JSX:\n\n```jsx\nimport { render, cloneVNode } from 'inferno';\n\nconst vNode = <div className=\"example\">Hello world</div>;\nconst newVNode = cloneVNode(vNode, { id: 'new' }); // we are adding an id prop to the VNode\n\nrender(newVNode, container);\n```\n\n### `createPortal` (package: 'inferno')\n\nHTML:\n```html\n<div id=\"root\"></div>\n<div id=\"outside\"></div>\n```\n\nJavascript:\n```jsx\nconst { render, Component, version, createPortal } from 'inferno';\n\nfunction Outsider(props) {\n\treturn <div>{`Hello ${props.name}!`}</div>;\n}\n\nconst outsideDiv = document.getElementById('outside');\nconst rootDiv = document.getElementById('root');\n\nfunction App() {\n\treturn (\n  \t    <div>\n    \t    Main view\n            ...\n            {createPortal(<Outsider name=\"Inferno\" />, outsideDiv)}\n        </div>\n    );\n}\n\n\n// render an instance of Clock into <body>:\nrender(<App />, rootDiv);\n```\n\nResults into:\n```html\n<div id=\"root\">\n    <div>Main view ...</div>\n</div>\n<div id=\"outside\">\n    <div>Hello Inferno!</div>\n</div>\n```\nCool huh? Updates (props/context) will flow into \"Outsider\" component from the App component the same way as any other Component.\nFor inspiration on how to use it click [here](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202)!\n\n### `hydrate` (package: `inferno`)\n\n```javascript\nimport { hydrate } from 'inferno';\n\nhydrate(<div />, document.getElementById(\"app\"));\n```\n\nSame as `render()`, but is used to hydrate a container whose HTML contents were rendered by `inferno-server`. Inferno will attempt to attach event listeners to the existing markup.\n\n### `findDOMNode` (package: `inferno-compat`)\nThis feature has been moved from inferno to inferno-compat in v4 forward. No options are needed anymore.\n\nNote: we recommend using a `ref` callback on a component to find its instance, rather than using `findDOMNode()`. `findDOMNode()` cannot be used on functional components.\n\nIf a component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.\nIn most cases, you can attach a ref to the DOM node and avoid using `findDOMNode()` at all. When render returns null or false, `findDOMNode()` returns null.\n\n### Inferno Flags (package: inferno-vnode-flags)\n\n**VNodeFlags:**\n- `VNodeFlags.HtmlElement`\n- `VNodeFlags.ComponentUnknown`\n- `VNodeFlags.ComponentClass`\n- `VNodeFlags.ComponentFunction`\n- `VNodeFlags.Text`\n- `VNodeFlags.SvgElement`\n- `VNodeFlags.InputElement`\n- `VNodeFlags.TextareaElement`\n- `VNodeFlags.SelectElement`\n- `VNodeFlags.Void`\n- `VNodeFlags.Portal`\n- `VNodeFlags.ReCreate` (JSX **$ReCreate**) always re-creates the vNode\n\n**VNodeFlags Masks:**\n- `VNodeFlags.FormElement` - Is from element\n- `VNodeFlags.Element` - Is vNode element\n- `VNodeFlags.Component` - Is vNode Component\n- `VNodeFlags.VNodeShape` - mask for defining type\n\n\n**ChildFlags**\n- `ChildFlags.UnknownChildren` needs Normalization\n- `ChildFlags.HasInvalidChildren` is invalid (null, undefined, false, true)\n- `ChildFlags.HasVNodeChildren` (JSX **$HasVNodeChildren**) is single vNode (Element/Component)\n- `ChildFlags.HasNonKeyedChildren` (JSX **$HasNonKeyedChildren**) is Array of vNodes non keyed (no nesting, no holes)\n- `ChildFlags.HasKeyedChildren` (JSX **$HasKeyedChildren**) is Array of vNodes keyed (no nesting, no holes)\n\nChildFlags Masks\n- `ChildFlags.MultipleChildren` Is Array\n\n\n### `renderToString` (package: `inferno-server`)\n\n```javascript\nimport { renderToString } from 'inferno-server';\n\nconst string = renderToString(<div />);\n```\n\nRender a virtual node into an HTML string, given the supplied virtual DOM.\n\n## Functional component lifecycle events\n\n| Name                      | Triggered when                                                  | Arguments to callback           |\n| -----------               | --------------                                                  | -----------------------         |\n| `onComponentWillMount`    | a functional component is about to mount                        |                                 |\n| `onComponentDidMount`     | a functional component has mounted successfully                 | `domNode`                       |\n| `onComponentShouldUpdate` | a functional component has been triggered to updated            | `lastProps, nextProps`          |\n| `onComponentWillUpdate`   | a functional component is about to perform an update            | `lastProps, nextProps`          |\n| `onComponentDidUpdate`    | a functional component has performed an updated                 | `lastProps, nextProps`          |\n| `onComponentWillUnmount`  | a functional component is about to be unmounted                 | `domNode`                       |\n\n### Using functional lifecycle events\n\nFunctional lifecycle events must be explicitly assigned via props onto a functional component like shown below:\n\n```javascript\nimport { render } from 'inferno';\n\nfunction mounted(domNode) {\n  // [domNode] will be available for DOM nodes and components (if the component has mounted to the DOM)\n}\n\nfunction FunctionalComponent({ props }) {\n  return <div>Hello world</div>;\n}\n\nrender(\n  <FunctionalComponent onComponentDidMount={ mounted } />,\n  document.getElementById(\"app\")\n);\n```\n\nPlease note: class components (ES2015 classes) from `inferno` **do not** support the same lifecycle events (they have their own lifecycle events that work as methods on the class itself).\n\n## Development vs Production modes\n\nBy default, Inferno will run in development mode. Development mode provides extra checks and better error messages at the cost of slower performance and larger code to parse.\nWhen using Inferno in a production environment, it is highly recommended that you turn off development mode.\n\n### Running Inferno on Node JS\n\nEnsure the environment variable `process.env.NODE_ENV` is set to `production`.\n\n### Building Inferno for use in a browser\n\nWhen running Inferno on the browser using Webpack or Rollup, a replacement will need to occur during your build.\n\n#### Webpack\n\nUse the following configuration in your Webpack build for production build:\n\n```js\n  ...\n  plugins: [\n    new webpack.DefinePlugin({\n      'process.env': {\n        'NODE_ENV': JSON.stringify('production')\n      }\n    })\n  ]\n```\n\nWhen you are building for development, you may want to use `inferno.dev.esm.js` (\"dev:module\": \"dist/index.dev.esm.js\",) file.\nThat build version has extra level of validation for development purposes. You can use it by adding following code to your webpack config.\n\n```js\n    ...\n\tresolve: {\n    /* When doing development workflow we want to make sure webpack picks up development build of inferno */\n\t\talias: {\n\t\t\tinferno: __dirname + \"/node_modules/inferno/dist/index.dev.esm.js\"\n\t\t}\n\t}\n```\n\n#### Rollup\n\nUse the following configuration in your Rollup build:\n\n```js\nconst replace = require('rollup-plugin-replace');\n```\n\n```js\n  ...\n  plugins: [\n    replace({\n      'process.env.NODE_ENV': JSON.stringify('production'),\n    })\n  ]\n```\n\nWhen you are building for development, you may want to use `inferno.dev.esm.js` (\"dev:module\": \"dist/index.dev.esm.js\",) file.\nThat build version has extra level of validation for development purposes. You can use it by adding following code to your rollup config.\n\n```js\n    const alias = require('rollup-plugin-alias');\n\n    ...\n\tplugins: {\n    /* When doing development workflow we want to make sure webpack picks up development build of inferno */\n\t\talias: {\n\t\t\t'inferno': __dirname + '/node_modules/inferno/dist/index.dev.esm.js'\n\t\t}\n\t}\n```\n\n### Custom namespaces\n\nInferno always wants to deliver great performance. In order to do so, it has to make intelligent assumptions about the state of the DOM and the elements available to mutate. Custom namespaces conflict with this idea and change the schema of how different elements and attributes might work, so Inferno makes no attempt to support namespaces. Instead, SVG namespaces are automatically applied to elements and attributes based on their `tag name`.\n\n## Community\n\nThere is an [Inferno Slack](https://infernojs.slack.com). You can join via [inferno-slack.herokuapp.com](https://inferno-slack.herokuapp.com).\n\n\n### Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n<a href=\"https://github.com/infernojs/inferno/graphs/contributors\"><img src=\"https://opencollective.com/inferno/contributors.svg?width=890\" /></a>\n\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/inferno#backer)]\n\n<a href=\"https://opencollective.com/inferno#backers\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/backers.svg?width=890\"></a>\n\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/inferno#sponsor)]\n\n<a href=\"https://opencollective.com/inferno/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/0/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/1/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/1/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/2/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/2/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/3/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/3/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/4/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/4/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/5/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/5/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/6/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/6/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/7/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/7/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/8/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/8/avatar.svg\"></a>\n<a href=\"https://opencollective.com/inferno/sponsor/9/website\" target=\"_blank\"><img src=\"https://opencollective.com/inferno/sponsor/9/avatar.svg\"></a>\n\n","readmeFilename":"README.md"}