{"id":15044804,"url":"https://github.com/infernojs/babel-plugin-inferno","last_synced_at":"2025-04-05T18:07:47.684Z","repository":{"id":37431037,"uuid":"43599800","full_name":"infernojs/babel-plugin-inferno","owner":"infernojs","description":"Transforms JSX to InfernoJS vNodes","archived":false,"fork":false,"pushed_at":"2025-01-23T14:15:33.000Z","size":915,"stargazers_count":80,"open_issues_count":2,"forks_count":25,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T17:08:20.368Z","etag":null,"topics":["inferno","jsx"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/infernojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-03T13:24:25.000Z","updated_at":"2025-02-02T17:59:18.000Z","dependencies_parsed_at":"2023-12-12T20:03:24.083Z","dependency_job_id":"98b99d6e-b41b-4706-a586-31ba8935c811","html_url":"https://github.com/infernojs/babel-plugin-inferno","commit_stats":{"total_commits":412,"total_committers":24,"mean_commits":"17.166666666666668","dds":0.674757281553398,"last_synced_commit":"2a54e520e4b1f4b8861ae0af0264e1caa6c159d9"},"previous_names":["trueadm/babel-plugin-inferno"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infernojs%2Fbabel-plugin-inferno","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infernojs%2Fbabel-plugin-inferno/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infernojs%2Fbabel-plugin-inferno/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infernojs%2Fbabel-plugin-inferno/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/infernojs","download_url":"https://codeload.github.com/infernojs/babel-plugin-inferno/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378142,"owners_count":20929296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inferno","jsx"],"created_at":"2024-09-24T20:51:04.136Z","updated_at":"2025-04-05T18:07:47.659Z","avatar_url":"https://github.com/infernojs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://infernojs.org/\" target=\"_blank\"\u003e\u003cimg width=\"400\" alt=\"Inferno\" title=\"Inferno\" src=\"https://user-images.githubusercontent.com/2021355/36073166-a47d4a8e-0f34-11e8-959c-860ea836d79d.png\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/babel-plugin-inferno\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/babel-plugin-inferno.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/babel-plugin-inferno\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/babel-plugin-inferno.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/babel-plugin-inferno\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/babel-plugin-inferno.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# InfernoJS Babel Plugin\n\n\u003e Plugin for babel 6+ to enable JSX for Inferno\n\nThis plugin transforms JSX code in your projects to [Inferno](https://github.com/trueadm/inferno) compatible virtual DOM.\nIt is recommended to use this plugin for compiling JSX for inferno. It is different to other JSX plugins, because it outputs highly optimized inferno specific `createVNode` calls. This plugin also checks children shape during compilation stage to reduce overhead from runtime application. \n\n## How to install\n\n```bash\nnpm i --save-dev babel-plugin-inferno\n```\n\n## How to use\n\nAdd the plugin to your `package.json` and update the plugin section in your `.babelrc` file. Or if your Babel settings are located inside the `package.json` - update the plugin section there.\n\nIt's important that you also include the `babel-plugin-syntax-jsx`plugin.\n\nExample on a `.babelrc` file that will work with Inferno:\n\nMake sure inferno plugin is added before babel module transformers\n\n```js\n{   \n    \"presets\": [ \"es2015\" ],\n    \"plugins\": [[\"babel-plugin-inferno\", {\"imports\": true}]]\n}\n```\n\n## Examples    \n\n```js\n\n// Render a simple div\nInferno.render(\u003cdiv\u003e\u003c/div\u003e, container);\n\n// Render a div with text\nInferno.render(\u003cdiv\u003eHello world\u003c/div\u003e, container);\n\n// Render a div with a boolean attribute\nInferno.render(\u003cdiv autoFocus='true' /\u003e, container);\n\n```\n\n## Fragments\n\nAll of the following syntaxes are **reserved** for createFragment call\n\n```js\n\u003c\u003e\n    \u003cdiv\u003eFoo\u003c/div\u003e\n    \u003cdiv\u003eBar\u003c/div\u003e\n\u003c/\u003e\n\n\n\u003cFragment\u003e\n    \u003cdiv\u003eFoo\u003c/div\u003e\n    \u003cdiv\u003eBar\u003c/div\u003e\n\u003c/Fragment\u003e\n\n\u003cInferno.Fragment\u003e\n    \u003cdiv\u003eFoo\u003c/div\u003e\n    \u003cdiv\u003eBar\u003c/div\u003e\n\u003c/Inferno.Fragment\u003e\n\n```\n\nReact.Fragment is also compiled to inferno createFragment call to ease project migration to Inferno https://github.com/infernojs/babel-plugin-inferno/issues/56.\n\n## Special flags\n\nThis plugin provides few special compile time flags that can be used to optimize an inferno application.\n\n```js\n// ChildFlags:\n\u003cdiv $HasTextChildren /\u003e - Children is rendered as pure text\n\u003cdiv $HasVNodeChildren /\u003e - Children is another vNode (Element or Component)\n\u003cdiv $HasNonKeyedChildren /\u003e - Children is always array without keys\n\u003cdiv $HasKeyedChildren /\u003e - Children is array of vNodes having unique keys\n\u003cdiv $ChildFlag={expression} /\u003e - This attribute is used for defining children shpae runtime. See inferno-vnode-flags (ChildFlags) for possibe values\n\n// Functional flags\n\u003cdiv $ReCreate /\u003e - This flag tells inferno to always remove and add the node. It can be used to replace key={Math.random()}\n```\n\nFlag called `noNormalize` has been removed in v4, and is replaced by `$HasVNodeChildren`\n\n## Options\n\n\nChange in v4:\n\n\n#### Imports (boolean)\nbabel-plugin-inferno will automatically import the required methods from inferno library.\nThere is no need to import inferno in every single JSX file. Only import the inferno specific code required by the application.\n\nexample:\n```js\nimport {render} from 'inferno'; // Just import what you need, (render in this case)\n\n// The plugin will automatically import, createVNode\nrender(\u003cdiv\u003e1\u003c/div\u003e, document.getElementById('root'));\n```\n\nYou need to have support for ES6 modules for this to work. If you are using legacy build system or outdated version of webpack, you can revert this change by using `imports: false`\n\n```js\n{\n    \"presets\": [ \"es2015\" ],\n    \"plugins\": [[\"inferno\", {\n        \"imports\": false\n    }]]\n}\n```\n\n\n#### Pragma\n\nEach method that is used from inferno can be replaced by custom name.\n\n``` pragma ``` (string) defaults to createVNode.\n\n``` pragmaCreateComponentVNode ``` (string) defaults to createComponentVNode.\n \n``` pragmaNormalizeProps ``` (string) defaults to normalizeProps.\n \n``` pragmaTextVNode ``` (string) defaults to createTextVNode.\n\n``` pragmaFragmentVNode ``` (string) defaults to createFragment.\n \n\n```js\n{\n    \"presets\": [ \"es2015\" ],\n    \"plugins\": [[\"inferno\", {\n        \"imports\": true,\n        \"pragma\": \"\",\n        \"pragmaCreateComponentVNode\": \"\",\n        \"pragmaNormalizeProps\": \"\",\n        \"pragmaTextVNode\": \"\"\n    }]]\n}\n```\n\n### Troubleshoot\n\nYou can verify `babel-plugin-inferno` is used by looking at the compiled output.\nThis plugin does not generate calls to `createElement` or `h`, but instead it uses low level InfernoJS API\n`createVNode`, `createComponentVNode`, `createFragment` etc. If you see your JSX being transpiled into `createElement` calls\nits good indication that your babel configuration is not correct.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finfernojs%2Fbabel-plugin-inferno","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finfernojs%2Fbabel-plugin-inferno","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finfernojs%2Fbabel-plugin-inferno/lists"}