Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vihanb/babel-plugin-jsx-to-dom
Converts JSX to browser HTML code.
https://github.com/vihanb/babel-plugin-jsx-to-dom
babel-plugin dom jsx jsx-syntax
Last synced: about 1 month ago
JSON representation
Converts JSX to browser HTML code.
- Host: GitHub
- URL: https://github.com/vihanb/babel-plugin-jsx-to-dom
- Owner: vihanb
- License: mit
- Created: 2017-11-27T04:07:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-19T23:40:11.000Z (over 6 years ago)
- Last Synced: 2024-10-11T23:49:39.112Z (3 months ago)
- Topics: babel-plugin, dom, jsx, jsx-syntax
- Language: JavaScript
- Size: 31.3 KB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-jsx-to-dom
Normally if you use JSX, you have to use React. **You must** add: `babel-plugin-syntax-jsx` to your project to use this.
This supports namespaces which you can add by specifying the element(s)'s namespaces with a `namespace=""` attribute.
## Installation
```sh
$ npm install babel-plugin-jsx-to-dom
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["babel-plugin-syntax-jsx", "babel-plugin-jsx-to-dom"]
}
```
### Via CLI
```sh
$ babel --plugins syntax-jsx,include script.js
```
### Via Node API
```javascript
require('babel').transform('code', {
plugins: ['syntax-jsx', 'jsx-to-dom']
});
```
## Example
input:
```js
let a =
hi
```
output:
```js
let a = function() {
const _elem = document.createElement("p");
_elem.appendChild(document.createTextNode("hi"));
return _elem;
}()
```
This also supports more complex senarios:
```js
function makeTemplate(name, opts) {
return (
{ name }
);
}
```
output:
```js
function makeTemplate(name, opts) {
return function() {
const _elem = document.createElement("div");
let _attrs = opts;
for (_attr in _attrs) if (_attrs.hasOwnProperty(_attr))
_elem.setAttribute(_attr, _attrs[_attr]);
const _expr = name, _res = (typeof _expr == "string" ? document.createTextNode(_expr) : _expr);
if (_res instanceof Array) {
for (let _i = 0; _i < _res.length; _i += 1) _elem.appendChild(
(typeof _res[_i] == "string" ? document.createTextNode(_res[_i]) : _res[_i])
);
} else
_elem.appendChild(_res);
return _elem;
}();
}
```
## Namespaces
This supports namespaces. Provide a `namespace=""` attribute
## Setting raw attributes
This supports setting attributes not through `setAttribute` but as a property of the element. So:
```js
```
Would output
```js
var video = document.createElement('video');
video.playbackRate = playbackRate;
```
Without the `unsafe-` this would have generated:
```js
var video = document.createElement('video');
video.setAttribute('playbackRate', playbackRate);
```
## Preventing whitespace from being added
Normally if you have:
```jsx
```
The whitepace will be added as a node. You can change this by setting the `noWhitespaceOnly` option to true.
## Defaulting null/undefined
Normally if you pass null or undefined to an attribute it won't treat it specially. This behavior is:
```
nullValues: false,
undefinedValues: false
```
Setting these to true will *prevent* the attributes from being set in these cases