https://github.com/d8corp/innet--jsx
https://github.com/d8corp/innet--jsx
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/d8corp/innet--jsx
- Owner: d8corp
- License: mit
- Created: 2022-02-21T09:12:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-06-05T20:36:32.000Z (about 1 year ago)
- Last Synced: 2025-09-13T13:02:50.989Z (10 months ago)
- Language: JavaScript
- Size: 1.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @innet/jsx
[](https://www.npmjs.com/package/@innet/jsx)
[](https://www.npmtrends.com/@innet/jsx)
[](https://changelogs.xyz/@innet/jsx)
[](https://github.com/d8corp/innet--jsx/blob/main/LICENSE)
## 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](https://www.npmjs.com/package/innet) you can check
- [@innet/dom](https://www.npmjs.com/package/@innetjs/dom) to use it on client side
- [@innet/server](https://www.npmjs.com/package/@innetjs/server) to use it on server side
- [innetjs](https://www.npmjs.com/package/innetjs) if you want to try innet ecosystem
- [innet-jsx](https://www.npmjs.com/package/innet-jsx) converts `jsx`/`tsx` into `js`/`ts`
- [rollup-plugin-innet-jsx](https://www.npmjs.com/package/rollup-plugin-innet-jsx) to use it with rollup
This package contains plugins that handle jsx components.
[](https://github.com/d8corp/innet--jsx/stargazers)
[](https://github.com/d8corp/innet--jsx/watchers)
## Install
npm
```bash
npm i @innet/jsx
```
yarn
```bash
yarn add @innet/jsx
```
## TS Setup
#### preserve
Setup with [innet-jsx](https://github.com/d8corp/innet-jsx)
`tsconfig.json`
```
{
"compilerOptions": {
...
"jsx": "preserve"
},
...
}
```
#### react-jsx
Or setup without [innet-jsx](https://github.com/d8corp/innet-jsx)
```
{
"compilerOptions": {
...
"jsx": "react-jsx",
"jsxImportSource": "@innet/jsx"
},
...
}
```
#### react-jsxdev
To get more error details use `react-jsxdev`
```
{
"compilerOptions": {
...
"jsx": "react-jsxdev",
"jsxImportSource": "@innet/jsx"
},
...
}
```
## JSX Component
JSX Component is a function that get `props` argument
```typescript
function Test (props) {
console.log(props.id)
}
```
Create a handler to handle JSX Component
```typescript
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
```typescript jsx
innet(, handler)
// 'test'
innet(, handler)
// undefined
```
If you try to use `null`, you can get an error, because of `null` is an object. To prevent this, use `nullish`
```typescript jsx
import innet, { createHandler } from 'innet'
import { object, nullish } from '@innet/utils'
import { jsxComponent } from '@innet/jsx'
const handler = createHandler([
nullish([]),
object([
jsxComponent,
]),
])
function Test ({ children }) {
console.log(children)
}
innet({null}, handler)
// null
```
## JSX Plugin
`jsxPlugins` is a plugin which adds default jsx elements by jsx plugins.
```typescript jsx
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(, handler)
// 3
```
[innet-jsx](https://www.npmjs.com/package/innet-jsx) converts jsx:
```typescript
innet({
type: 'sum',
props: {
a: 1,
b: 2,
}
}, handler)
```
## Context
Use `Context` to create a context variable.
```typescript jsx
import { Context } from '@innet/jsx'
const color = new Context('blue')
```
Use `useContext` in a component to get current context value.
```typescript jsx
import { useContext, Context } from '@innet/jsx'
const color = new Context('blue')
function Content () {
const currentColor = useContext(color)
console.log(`color: ${currentColor}`)
}
```
Use `ContextProvider` to provide values into children.
```typescript jsx
import innet, { createHandler } from 'innet'
import { object, nullish, arraySync } from '@innet/utils'
import {
jsxComponent,
Context,
useProps,
useContext,
ContextProvider
} from '@innet/jsx'
const handler = createHandler([
nullish([]),
arraySync,
object([jsxComponent]),
])
const color = new Context('blue')
function Content () {
const currentColor = useContext(color)
console.log(`color: ${currentColor}`)
}
innet((
<>
>
), handler)
//color: blue
//color: red
```
## Issues
If you find a bug or have a suggestion, please file an issue on [GitHub](https://github.com/d8corp/innet--jsx/issues).
[](https://github.com/d8corp/innet--jsx/issues)