SisuJs JSX -runtime

SisuJs JSX is a lightweight, zero-dependency JSX runtime for TypeScript and JavaScript. It directly maps JSX elements to DOM elements and is designed to serve as a minimal foundation for building JSX-based UI logic — whether used as-is or as part of another UI library or framework.

Core principles

The runtime is built on the following principles:

• Focused on DOM Creation: It produces DOM elements and adds behavior to them. There is no built-in re-rendering engine, routing, or state management
• Zero Dependencies: No external libraries or dependencies are required.
• No Magic: What you write is what you get. There’s no hidden behavior or behind-the-scenes abstraction.
• No Premade Handlers: You define how events (e.g., onclick) are handled.

Basic Features

• Basic rendering happens as expected (Example)
• React-style function-based components are supported (Example)
• Components can be described as plain functions (Example)

Class / Object -based components

Object-based components are be created by implementing interface:

interface JSX.OnRender {
  onRender():Node
}

or just creating an object that has a function-property onRender.

• Example 1
• Example 2

Attribute Modifiers

By default, SisuJs JSX does not include any premade events or modifiers. Instead, they are added dynamically. There are two ways to do this:

Default Modifiers

By calling:

JSX.onAttributeName(attribute: string, cb: DefaultOnAttributeCallback)

a default binding is created for the given attribute name. This attribute is not rendered to the DOM tree; instead, the provided callback is executed with the attribute’s value.

• Example

By calling:

JSX.onAttributeValueType(type:Function, handler:OnAttributeCallbackHandler)

a default binding is created for the given value type of the attribute, regardless of its name. This attribute is not rendered to the DOM tree; instead, the provided callback is executed with the attribute’s value. This behavior can be used, for instance, to establish two-way communication between an element and a state using the given attribute.

• Example

Custom Modifier

To add custom behavior, you must create a class or object that implements the following interface:

interface OnAttribute {
  onAttribute(element: HTMLElement, name?: string): void;
}

Whenever the renderer encounters such an object, it executes the onAttribute function for the current element, passing the element and the attribute name as a parameter. The attribute name itself has no inherent meaning — only the provided value matters.

• Example

Attribute Naming Conventions

Because HTML attributes are case-insensitive, it is possible — either by accident or deliberately — to add the same attribute with different casing to a JSX element, this runtime normalizes all attribute names to lowercase before processing their values. If the same attribute is encountered multiple times, the behavior is undefined, but generally, the last value takes precedence.

className or class Attribute?

Handling the class attribute is an unfortunate special case. In this runtime, both className and class can be used to define the class attribute. Regardless of the original name, both are coerced to class. If both are present, the last one defined generally takes precedence.

Configuration

TypeScript

For typescript you generally need to just modify tsconfig.json and add following properties:

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

Javascript

Check the documentation of the used bundler.