TypeScript Support

Flexium is written in TypeScript and provides first-class type definitions.

Component Props

Define props interfaces for your components.

interface Props {
  name: string;
  age?: number;
}

function User(props: Props) {
  return <div>{props.name} ({props.age})</div>
}

State Typing

state() infers types automatically, or you can specify them.

const [count, setCount] = state<number>(0);
const [user, setUser] = state<User | null>(null);

FNode Children Types

As of v0.4.0, Flexium uses FNode (Flexium Node) as its core element type:

import type { FNodeChild, FNode } from 'flexium/core';

// FNodeChild supports: FNode, string, number, boolean, null, undefined, and arrays
type FNodeChild = FNode | string | number | boolean | null | undefined | FNodeChild[];

FNode (Flexium Node)

FNode is not a Virtual DOM node. It's a lightweight descriptor that immediately converts to real DOM with fine-grained reactivity. The "F" stands for Flexium.

This allows for more flexible JSX expressions:

function ConditionalRender({ show }: { show: boolean }) {
  return (
    <div>
      {show && <span>Visible</span>}  {/* boolean short-circuit */}
      {null}  {/* safely ignored */}
    </div>
  );
}