@innet/jsx-runtime

@innet/jsx-runtime is a package that enables React-style JSX syntax for the Innet framework.

Use it to write JSX/TSX in your Innet applications without manual transpilation.

Born as part of the @innet ecosystem.

Index

[ Install ]
[ Usage ] TypeScript Setup • Runtime Exports • Example

Install

🏠︎ / Install ↓

npm

npm i -D @innet/jsx-runtime

Usage

🏠︎ / Usage ↑

TypeScript Setup • Runtime Exports • Example

The library provides JSX runtime functions that transform JSX syntax into JavaScript function calls. When you write JSX in your TypeScript/JavaScript files, the compiler transforms it using these runtime functions.

TypeScript Setup

🏠︎ / Usage / TypeScript Setup ↓

Configure your tsconfig.json to use @innet/jsx-runtime as the JSX import source:

react-jsx (Recommended)

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@innet/jsx-runtime"
  }
}

react-jsxdev (Development with debug info)

{
  "compilerOptions": {
    "jsx": "react-jsxdev",
    "jsxImportSource": "@innet/jsx-runtime"
  }
}

Runtime Exports

🏠︎ / Usage / Runtime Exports ↑ ↓

The package provides two runtime modules:

jsx-runtime — Production runtime

import { jsx, jsxs, Fragment } from '@innet/jsx-runtime/jsx-runtime'

jsx-dev-runtime — Development runtime with enhanced debugging

import { jsxDEV, Fragment } from '@innet/jsx-runtime/jsx-dev-runtime'

Example

🏠︎ / Usage / Example ↑

Write JSX in your Innet application:

// App.tsx
import { State } from 'watch-state'

function Counter() {
  const count = new State(0)
  
  return (
    <button onclick={() => count.value++}>
      Count: {count}
    </button>
  )
}

The TypeScript compiler transforms it to:

// App.js (compiled)
import { jsx } from '@innet/jsx-runtime/jsx-runtime'
import { State } from 'watch-state'

function Counter() {
  const count = new State(0)
  
  return jsx('button', {
    onClick: () => count.value++,
    children: ['Count: ', count]
  })
}

Links

You can find more packages in the @innet ecosystem

• innet — Core engine
• @innet/jsx — JSX plugin system
• @innet/dom — Client-side framework
• @innet/server — Server-side framework
• innet-jsx — JSX to JS transpiler

Issues

If you find a bug or have a suggestion, please file an issue on GitHub