Development JSX runtime

Run Stop Open full page

Read as Markdown

The development compiler emits jsxDEV calls with source-location metadata.

APIs demonstrated

• Fragment from @pibbl/core/jsx-dev-runtime
• jsxDEV from @pibbl/core/jsx-dev-runtime
• JSX from @pibbl/core/jsx-dev-runtime

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import { Rectangle, Text, pibbl } from '@pibbl/core';
import { Fragment, jsxDEV, type JSX } from '@pibbl/core/jsx-dev-runtime';

const canvas = document.createElement('canvas');
canvas.width = 280;
canvas.height = 140;
document.body.append(canvas);

const source = { fileName: 'development.ts', lineNumber: 15, columnNumber: 3 };
const component: JSX.ElementType = Rectangle;
const background = jsxDEV(
  component,
  { style: { width: 280, height: 140, fill: '#0f766e' } },
  'background',
  false,
  source,
  undefined,
);
const label = jsxDEV(
  Text,
  { style: { left: 20, top: 48, font: '24px sans-serif', fill: '#fff' }, children: 'Development JSX' },
  'label',
  false,
  source,
  undefined,
);
const root = jsxDEV(
  Fragment,
  { children: [background, label] },
  undefined,
  true,
  source,
  undefined,
);
const controller = pibbl(canvas, root);
window.addEventListener('pagehide', () => controller.dispose(), { once: true });

Usage notes

• Compiler output is shown explicitly for inspection; source metadata is included in development builds.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.