https://github.com/gfmio/jsx-transform-2-loader
A Webpack loader that transforms JSX decoupled from React using jsx-transformer v2
https://github.com/gfmio/jsx-transform-2-loader
js jsx react virtualdom webpack
Last synced: 3 months ago
JSON representation
A Webpack loader that transforms JSX decoupled from React using jsx-transformer v2
- Host: GitHub
- URL: https://github.com/gfmio/jsx-transform-2-loader
- Owner: gfmio
- Created: 2017-05-08T22:25:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-08T22:37:05.000Z (over 8 years ago)
- Last Synced: 2025-10-01T04:27:55.378Z (3 months ago)
- Topics: js, jsx, react, virtualdom, webpack
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
jsx-transform-2-loader
======================
jsx-transform-2-loader is a Webpack loader that transforms JSX decoupled from React (or any specific framework) using v2 of the `jsx-transformer` package. It is based on `jsx-transform-loader` which however uses an old version of `jsx-transform`.
# Install
```shell
npm install --save-dev jsx-transform-2-loader
```
# Usage
Include the package as a loader in your Webpack config. You may specify all options that `jsx-transform` accepts. The most important option is the `factory` option (default: `h`), which determines the name of the factory function used to construct the Virtual DOM objects.
```js
...
{
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
options: {
factory: 'h'
// Other jsx-transform options may go here.
},
loader: 'jsx-transform-2-loader'
}]
}
...
```
# Example
Input:
```jsx
var h = require('virtual-dom/h');
var profile =
{[user.firstName, user.lastName].join(' ')}
;
```
Output (with default options):
```js
var h = require('virtual-dom/h');
var profile = h('div', null, [
h('img', { src: "avatar.png", class: "profile" }),
h('h3', null, [[user.firstName, user.lastName].join(' ')])
]);
```
# License: MIT