Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcanno/use-jsx
Use JSX in native
https://github.com/jcanno/use-jsx
babel jsx virtual-dom
Last synced: 23 days ago
JSON representation
Use JSX in native
- Host: GitHub
- URL: https://github.com/jcanno/use-jsx
- Owner: Jcanno
- License: mit
- Created: 2021-11-08T01:33:45.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-23T09:39:20.000Z (almost 3 years ago)
- Last Synced: 2024-12-01T09:37:35.157Z (25 days ago)
- Topics: babel, jsx, virtual-dom
- Language: TypeScript
- Homepage:
- Size: 47.9 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Use-Jsx
English|[简体中文](https://github.com/Jcanno/use-jsx/blob/master/README.zh-CN.md)
`use-jsx` can help you use jsx with babel in native JS environment, for developing simple component in page.
## Features
- Fragment
- Function Component
- virtual dom tree namespace
## How to use
### 1. Type commands in terminal to install `use-jsx`:
```shell
# with npm
npm install use-jsx
# with yarn
yarn add use-jsx
```
### 2. Config babel
`use-jsx` supports manual import and auto import babel config mode.
- import jsx in manual:
```js
{
// you need to install @babel/plugin-transform-typescript if you use TypeScript
[
'@babel/plugin-transform-typescript',
{
isTSX: true,
// config X.createElement, X is customized, it's required to be the same in your source code.
jsxPragma: 'X.createElement',
// config X.Fragment, X is customized, it's required to be the same in your source code.
jsxPragmaFrag: 'X.Fragment',
},
],
[
'@babel/plugin-transform-react-jsx',
{
// config X.createElement, X is customized, it's required to be the same in your source code.
pragma: 'X.createElement',
// config X.Fragment, X is customized, it's required to be the same in your source code.
pragmaFrag: 'X.Fragment',
},
],
}
```
import `use-jsx` in your source code:
```js
import * as X from 'use-jsx'
```
X needs to be consistent with your babel config.
- import jsx in automatic mode:
```js
{
plugins: [
[
// you need to install @babel/plugin-transform-typescript if you use TypeScript
'@babel/plugin-transform-typescript',
{
isTSX: true,
},
],
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
importSource: 'use-jsx',
},
],
]
}
```
You don't need import `use-jsx` anymore, it's all done by babel.
### 3. Render your jsx
use `render` to generate Actual DOM to HTML page.
```jsx
import { render } from 'use-jsx'
render(
It's generated by use-jsx, document.body, 'greeting')
// use-jsx support to render function which returns jsx
render(
,
document.getElementById('myDiv'),
'myComponent',
)
```
render receives three arguments, first for custom jsx or function which returns jsx, second for real element which jsx mouted, the last is namespace for tree, `default` by default
### 4. useDom
if we want to get Actual DOM, `useDom` can help.
```js
function MyComponent() {
// useDom offer div actual DOM, so we can do some things such as getting div actual size to `getBoundingClientRect`
const useDom = (dom) => {
const domRect = dom.getBoundingClientRect()
}
return
}
```