Mount, update, and dispose

Run Stop Open full page

Read as Markdown

Own one Pibbl root for a canvas and replace its content without creating another controller.

APIs demonstrated

• pibbl from @pibbl/core
• Canvas from @pibbl/core
• PibblController from @pibbl/core

Complete example

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

import { pibbl, Rectangle, type Canvas, type PibblController } from "@pibbl/core";

const canvas: Canvas = document.createElement("canvas");
canvas.width = 360;
canvas.height = 180;
document.body.append(canvas);
const controller: PibblController = pibbl(
  canvas,
  <Rectangle
    style={{ left: 30, top: 30, width: 220, height: 100, fill: "#087e8b" }}
  />,
);
const update = document.createElement("button");
update.textContent = "Update root";
update.onclick = () => {
  pibbl(
    canvas,
    <Rectangle
      style={{ left: 60, top: 30, width: 220, height: 100, fill: "#b83970" }}
    />,
  );
};
const stop = document.createElement("button");
stop.textContent = "Dispose";
stop.onclick = () => {
  controller.dispose();
  update.disabled = true;
  stop.disabled = true;
};
document.body.append(update, stop);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

• One canvas has at most one live mount. dispose() is idempotent.

Documentation version

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