@innet/jsx NPM

@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 into js/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

TS Setup

preserve

Setup with innet-jsx

tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "preserve"
  },
  ...
}

react-jsx

Or setup without 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

function Test (props) {
  console.log(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 } from '@innet/jsx'

const handler = createHandler([
  nullish([]),
  object([
    jsxComponent,
  ]),
])

function Test ({ children }) {
  console.log(children)
}

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 jsx:

innet({
  type: 'sum',
  props: {
    a: 1,
    b: 2,
  }
}, handler)

Context

Use Context to create a context variable.

import { Context } from '@innet/jsx'
const color = new Context('blue')

Use useContext in a component to get current context value.

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.

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((
  <>
    <Content/>
    <ContextProvider for={color} set='red'>
      <Content/>
    </ContextProvider>
  </>
), handler)

//color: blue
//color: red