JSX Runtime

hastscript/jsx-runtime

hastscript/jsx-dev-runtime

/**
 * JSX automatic runtime function for HTML elements
 * @param type - Element name or null for Fragment
 * @param properties - Element properties including children
 * @param key - Optional key (ignored)
 * @returns Element or Root node
 */
function jsx(type: string | null, properties: JSXProps, key?: string): Result;
function jsxs(type: string | null, properties: JSXProps, key?: string): Result;
function jsxDEV(type: string | null, properties: JSXProps, key?: string): Result;

/**
 * JSX Fragment component (null value)
 */
const Fragment: null;

interface JSXProps {
  children?: Child;
  [key: string]: Child | PropertyValue | Style;
}

// Configure tsconfig.json or build tool for automatic runtime
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hastscript"
  }
}

// JSX syntax automatically uses hastscript runtime
const element = <div className="container">Hello World</div>;

// JSX with properties
const input = <input type="text" placeholder="Enter name" required />;

// JSX with children
const list = (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
);

// JSX Fragment
const fragment = (
  <>
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </>
);

// JSX with dynamic content
const name = "Alice";
const greeting = <div>Hello, {name}!</div>;

hastscript/svg/jsx-runtime

hastscript/svg/jsx-dev-runtime

/**
 * JSX automatic runtime function for SVG elements with case-sensitive tag names
 * @param type - Element name or null for Fragment
 * @param properties - Element properties including children
 * @param key - Optional key (ignored)
 * @returns Element or Root node
 */
function jsx(type: string | null, properties: JSXProps, key?: string): Result;
function jsxs(type: string | null, properties: JSXProps, key?: string): Result;
function jsxDEV(type: string | null, properties: JSXProps, key?: string): Result;

/**
 * JSX Fragment component for SVG (null value)
 */
const Fragment: null;

// Inline pragma for SVG JSX runtime
/** @jsxImportSource hastscript/svg */

// SVG elements with JSX
const circle = <circle cx={50} cy={50} r={40} fill="red" />;

// Complete SVG with JSX
const svg = (
  <svg viewBox="0 0 100 100" width={100} height={100}>
    <circle cx={50} cy={50} r={40} fill="blue" />
    <text x={50} y={55} textAnchor="middle" fill="white">
      SVG
    </text>
  </svg>
);

// Case-sensitive SVG elements
const gradient = (
  <linearGradient id="grad1">
    <stop offset="0%" stopColor="rgb(255,255,0)" />
    <stop offset="100%" stopColor="rgb(255,0,0)" />
  </linearGradient>
);

// SVG with foreignObject
const foreign = (
  <foreignObject x={10} y={10} width={100} height={50}>
    HTML content inside SVG
  </foreignObject>
);

// SVG Fragment
const svgElements = (
  <>
    <circle cx={25} cy={25} r={20} fill="green" />
    <circle cx={75} cy={75} r={20} fill="blue" />
  </>
);

React.createElement

// Configure for classic runtime
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "null"
  }
}

// Import h function
import { h } from "hastscript";

// JSX transpiles to h() calls
const element = <div className="container">Hello World</div>;
// Becomes: h("div", { className: "container" }, "Hello World")

// For SVG, import s function
import { s } from "hastscript";

// Configure jsxFactory to "s" for SVG files
const circle = <circle cx={50} cy={50} r={40} fill="red" />;
// Becomes: s("circle", { cx: 50, cy: 50, r: 40, fill: "red" })

// JSX namespace for classic runtime
namespace h.JSX {
  type Element = Result;
  type IntrinsicElements = Record<string, Properties | { children?: Child }>;
  type IntrinsicAttributes = never;
  interface ElementChildrenAttribute {
    children?: never;
  }
}

// JSX namespace for automatic runtime
declare namespace JSX {
  type Element = Result;
  type IntrinsicElements = Record<string, Properties | { children?: Child }>;
  type IntrinsicAttributes = never;
  interface ElementChildrenAttribute {
    children?: never;
  }
}

import { h } from "hastscript";

// Typed JSX with hastscript
const TypedComponent = (): h.JSX.Element => {
  return (
    <div className="container">
      <h1>Typed Content</h1>
      <p>This is type-safe JSX with hastscript</p>
    </div>
  );
};

// SVG with TypeScript
import { s } from "hastscript";

const TypedSVG = (): s.JSX.Element => {
  return (
    <svg viewBox="0 0 100 100">
      <circle cx={50} cy={50} r={40} fill="blue" />
    </svg>
  );
};

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hastscript"
  }
}

// For SVG-specific files
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hastscript/svg"
  }
}

// For development with better debugging
{
  "compilerOptions": {
    "jsx": "react-jsxdev",
    "jsxImportSource": "hastscript"
  }
}

// JSX-specific types
interface JSXProps {
  children?: Child;
  [key: string]: Child | PropertyValue | Style;
}

// Re-exported core types
type Result = Element | Root;
type Child = ArrayChild | Nodes | PrimitiveChild;
type PropertyValue = ArrayValue | PrimitiveValue;
type PrimitiveValue = boolean | number | string | null | undefined;
type ArrayValue = Array<number | string>;
type Style = Record<string, StyleValue>;
type StyleValue = number | string;