Andarist / Babel Plugin Jsx Adopt
Stars: ✭ 94
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Babel Plugin Jsx Adopt
Sowing Machine
🌱A React UI toolchain & JSX alternative
Stars: ✭ 64 (-31.91%)
Mutual labels: babel, babel-plugin, jsx
Babel Plugin React Persist
Automatically useCallback() & useMemo(); memoize inline functions
Stars: ✭ 91 (-3.19%)
Mutual labels: babel, babel-plugin, jsx
Babel Plugin React Html Attrs
Babel plugin which transforms HTML and SVG attributes on JSX host elements into React-compatible attributes
Stars: ✭ 170 (+80.85%)
Mutual labels: babel, babel-plugin, jsx
Jsx Control Statements
Neater If and For for React JSX
Stars: ✭ 1,305 (+1288.3%)
Mutual labels: babel, babel-plugin, jsx
Htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Stars: ✭ 7,299 (+7664.89%)
Mutual labels: babel, babel-plugin, jsx
Babel Plugin Css Prop
Babel plugin to transpile `css` prop to a styled component. (Experimental)
Stars: ✭ 56 (-40.43%)
Mutual labels: babel, babel-plugin
Tinker.macro
Evaluate Laravel code at build-time, via Laravel Tinker
Stars: ✭ 56 (-40.43%)
Mutual labels: babel, babel-plugin
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-36.17%)
Mutual labels: babel, babel-plugin
Modify Babel Preset
💫 Create a modified babel preset based on an an existing preset.
Stars: ✭ 85 (-9.57%)
Mutual labels: babel, babel-plugin
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235 (+1213.83%)
Mutual labels: babel, babel-plugin
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-30.85%)
Mutual labels: babel, babel-plugin
Babel Plugin Root Import
Add the opportunity to import modules by the root path
Stars: ✭ 1,084 (+1053.19%)
Mutual labels: babel, babel-plugin
Js Toolbox
CLI tool to simplify the development of JavaScript apps/libraries with little to no configuration. (WORK IN PROGRESS/PACKAGE NOT PUBLISHED).
Stars: ✭ 53 (-43.62%)
Mutual labels: babel, jsx
React Es6 Padawan To Jedi Book
Uma introdução simples e completa para React usando ES6 e Babel.
Stars: ✭ 46 (-51.06%)
Mutual labels: babel, jsx
Babel Plugin Optimize Clsx
Babel plugin to optimize the use of clsx, classnames, and other libraries with a compatible API
Stars: ✭ 80 (-14.89%)
Mutual labels: babel, babel-plugin
Tkframework
react + relay + redux + saga + graphql + webpack
Stars: ✭ 83 (-11.7%)
Mutual labels: babel, jsx
Xwasm
[Work In Progress] WebAssembly Packager and WASM tooling for modern frontend
Stars: ✭ 45 (-52.13%)
Mutual labels: babel, babel-plugin
Generator Babel Plugin
Babel Plugin generator for Yeoman
Stars: ✭ 88 (-6.38%)
Mutual labels: babel, babel-plugin
Babel Plugin Jsx Two Way Binding
🍺 A two-way data binding solution for React
Stars: ✭ 15 (-84.04%)
Mutual labels: babel-plugin, jsx
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-57.45%)
Mutual labels: babel, babel-plugin
babel-plugin-jsx-adopt
This plugin transforms
adopt
calls to render props. Idea based on this gist. ⚠️ Experimental: Code you are likely to write should be transformed just fine, convoluted/edge cases might not be covered yet.
Example
Input
const Example = () => {
const theme = adopt(<Theme />)
const counter = adopt(<Counter />)
const toggle = adopt(<Toggle />)
return (
<div style={{ color: theme === 'light' ? '#000' : '#fff' }}>
<span>{`Count: ${counter}`}</span>
<button onClick={toggle}>{'Toggle'}</button>
</div>
)
}
Output
const Example = () => {
return (
<Theme>
{theme => (
<Counter>
{counter => (
<Toggle>
{toggle => (
<div style={{ color: theme === 'light' ? '#000' : '#fff' }}>
<span>{`Count: ${counter}`}</span>
<button onClick={toggle}>{'Toggle'}</button>
</div>
)}
</Toggle>
)}
</Counter>
)}
</Theme>
)
}
Installation
npm install --save-dev babel-plugin-jsx-adopt
If you want to use it with [email protected], you should also install [email protected]^7.0.0-0
(just to prevent peer dep warnings).
Usage
.babelrc
(Recommended)
Via .babelrc
{
"plugins": ["babel-plugin-jsx-adopt"]
}
Via CLI
babel --plugins babel-plugin-jsx-adopt script.js
Via Node API
require('babel-core').transform('code', {
plugins: ['babel-plugin-jsx-adopt'],
})
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].