@innet/jsx
v2.0.0-alpha.10
Published
XML-ish syntax with innet
Downloads
29
Readme
@innet/jsx
Abstract
JSX is one of the main features you can use with innet. JSX makes possible to use XML-ish syntax in JavaScript.
If you want to use JSX with innet you can check
- @innet/dom to use it on client side
- @innet/server to use it on server side
- innetjs if you want to try innet ecosystem
- innet-jsx converts
jsx
/tsx
intojs
/ts
- rollup-plugin-innet-jsx to use it with rollup
This package contains plugins that handle jsx components.
Install
npm
npm i @innet/jsx
yarn
yarn add @innet/jsx
JSX Component
JSX Component is a function that get props
argument
function Test (props) {
return props?.id
}
Create a handler to handle JSX Component
import innet, { createHandler } from 'innet'
import { object } from '@innet/utils'
import { jsxComponent } from '@innet/jsx'
const handler = createHandler([
object([
jsxComponent,
]),
])
Here we say: an object should be handled as jsxComponent
Then we can use it as wall
innet(<Test id='test' />, handler)
// 'test'
innet(<Test />, handler)
// undefined
If you try to use null
, you can get an error, because of null
is an object. To prevent this, use nullish
import innet, { createHandler } from 'innet'
import { object, nullish } from '@innet/utils'
import { jsxComponent, useChildren } from '@innet/jsx'
const handler = createHandler([
nullish([]),
object([
jsxComponent,
]),
])
function Test () {
console.log(useChildren())
}
innet(<Test>{null}</Test>, handler)
// [ null ]
JSX Plugin
jsxPlugins
is a plugin which adds default jsx elements by jsx plugins.
import innet, { createHandler } from 'innet'
import { object, nullish } from '@innet/utils'
import { jsxPlugins, useProps } from '@innet/jsx'
// JSX Plugin
const sum = () => {
const { a, b } = useProps()
console.log(a + b)
}
const handler = createHandler([
nullish([]),
object([
jsxPlugins({
sum,
}),
])
])
innet(<sum a={1} b={2} />, handler)
// 3
innet-jsx converts this code to:
innet({
type: 'sum',
props: {
a: 1,
b: 2,
}
}, handler)
Issues
If you find a bug or have a suggestion, please file an issue on GitHub.