tea-web

npm install kit-tea-web

<script type="module">
  import { runTeaApp } from './kit-tea-web/src/index.js';
</script>

import { runTeaApp } from 'kit-tea-web';

const canvas = document.getElementById('app');

runTeaApp({
  canvas,

  // Initialize model
  init: () => ({ count: 0 }),

  // Update model based on messages
  update: (msg, model) => {
    if (msg.kind === 'key-pressed' && msg.key === 265) { // Up arrow
      return { count: model.count + 1 };
    }
    return model;
  },

  // Render view from model
  view: (model) => ({
    type: 'Group',
    elements: [
      { type: 'Rect-Fill', x: 0, y: 0, w: 400, h: 300, color: 0x1a1a2eff },
      { type: 'Text', x: 180, y: 130, size: 48, color: 0xffd700ff, content: String(model.count) }
    ]
  })
});

import { loadKitWasm, createTeaApp } from 'kit-tea-web';
import { renderElement } from 'kit-tea-web/renderer';

// Load Kit source (use \$ to escape string interpolation in JS template literals)
const kitSource = `
init = fn() => {count: 0}
update = fn(-msg, model) => {count: model.count + 1}
view = fn(model) => {
  kind: "Text",
  x: 100, y: 100,
  size: 48, color: 0xffffffff,
  content: "\${model.count}"
}
`;

// Load WASM and create TEA app
const wasm = await loadKitWasm('./kit-interpreter.wasm');
wasm.init();
const app = createTeaApp(wasm, kitSource);

// Render initial view
const canvas = document.getElementById('app');
const ctx = canvas.getContext('2d');
renderElement(ctx, app.getView());

// Handle events
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const view = app.mouseClicked(e.clientX - rect.left, e.clientY - rect.top);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderElement(ctx, view);
});

runTeaApp({
  canvas: HTMLCanvasElement,
  init: () => Model,
  update: (msg: Msg, model: Model) => Model,
  view: (model: Model) => Element,
  config?: RuntimeConfig
})

const runtime = createRuntime(canvas, {
  targetFps: 60,
  backgroundColor: 0x1a1a2eff,
  autoClear: true,
  captureKeyboard: true,
  captureMouse: true,
  debug: false
});

runtime.start(initialView, updateFn);
runtime.stop();

const ctx = canvas.getContext('2d');
renderElement(ctx, {
  type: 'Rect-Fill',
  x: 10, y: 10, w: 100, h: 50,
  color: 0xff0000ff
});

intToColor(0xff0000ff) // => 'rgba(255,0,0,1)'

const cleanup = setupEventCapture(canvas, (msg) => {
  console.log(msg.kind, msg.x, msg.y);
}, {
  captureKeyboard: true,
  captureMouse: true,
  preventDefaults: true
});

// Later: cleanup();

import {
  frameTick,      // (dt) => Msg
  keyPressed,     // (keyCode) => Msg
  keyDown,        // (keyCode) => Msg
  keyReleased,    // (keyCode) => Msg
  mouseClicked,   // (x, y, button) => Msg
  mouseMoved,     // (x, y) => Msg
  mouseWheel      // (delta) => Msg
} from 'kit-tea-web';

const red = 0xff0000ff;      // Full red, full opacity
const semiBlue = 0x0000ff80; // Blue at 50% opacity
const white = 0xffffffff;

runTeaApp({
  canvas,
  config: {
    captureGamepad: true,
    gamepadDeadzone: 0.15,
  },
  // ...
});

import { createHybridRenderer } from 'kit-tea-web';

const canvas = document.getElementById('app');
const renderer = createHybridRenderer(canvas);

function frame() {
  const view = buildView();
  renderer.render(view, 0x1a1a2eff); // backgroundColor

  // Get performance stats
  const stats = renderer.getStats();
  console.log(`Triangles: ${stats.triangleCount}, Draw calls: ${stats.drawCalls}`);

  requestAnimationFrame(frame);
}

runTeaApp({
  canvas,
  config: {
    optimizedRendering: true, // Enable diffing
    showDirtyRects: true,     // Debug: show redrawn regions in red
  },
  // ...
});

const stats = app.runtime.getStats();
console.log(stats.diffing.efficiency); // "85.5%"
console.log(stats.diffing.partialRedraws); // 342
console.log(stats.diffing.fullRedraws); // 12

import { createHmrApp, createHmrIndicator } from 'kit-tea-web';

const hmr = createHmrApp({
  preserveState: true,  // Keep model across reloads
  verbose: true,        // Log HMR events
  onReload: (count) => console.log(`Reload #${count}`),
});

// Initial load
hmr.load({ init, update, view }, runtimeConfig, canvas);

// Hot reload with new view function
hmr.load({ init, update, view: newViewFn }, runtimeConfig, canvas);

// State is automatically preserved!
console.log(hmr.getModel()); // { count: 5, ... }

// Add visual indicator
createHmrIndicator(hmr, { position: 'bottom-right' });

import { setupDevMode } from 'kit-tea-web';

const dev = setupDevMode(canvas, './app.js', {
  watchInterval: 1000,
  runtimeConfig: { debug: true },
  onReload: () => console.log('Reloaded!'),
});

// Later: dev.stop()

runTeaApp({
  canvas,
  config: {
    debug: true,
    debugOptions: {
      showFps: true,        // FPS counter
      showFrameTime: true,  // Frame time in ms
      showEventCount: true, // Events per frame
      showMemory: true,     // JS heap usage (Chrome only)
      position: 'top-left', // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
    },
  },
  // ...
});

import { createWidgetManager } from 'kit-tea-web';

const widgets = createWidgetManager(canvas, {
  container: document.getElementById('canvas-container'), // Parent element
  zIndex: 10,
});

// Create widgets
widgets.createTextInput('name', {
  placeholder: 'Enter name',
  onChange: (value) => updateModel({ name: value }),
});

widgets.createSelect('color', {
  options: [
    { value: 'red', label: 'Red' },
    { value: 'blue', label: 'Blue' },
  ],
  onChange: (value) => updateModel({ color: value }),
});

widgets.createRange('size', {
  min: 10, max: 100, step: 5,
  onChange: (value) => updateModel({ size: parseInt(value) }),
});

widgets.createCheckbox('filled', {
  label: 'Filled',
  onChange: (checked) => updateModel({ filled: checked }),
});

widgets.createButton('submit', {
  label: 'Submit',
  onClick: () => handleSubmit(),
});

// Position widgets (call after canvas layout)
widgets.updatePosition('name', 100, 50, 200, 30);
widgets.updatePosition('color', 100, 100, 150, 30);

// Get/set values
widgets.setValue('name', 'Default');
const name = widgets.getValue('name');

// Show/hide
widgets.hide('name');
widgets.show('name');

// Cleanup
widgets.dispose();

cd examples/counter
python3 -m http.server 8000
# Open http://localhost:8000