@stephansama packages / @stephansama/typed-events

@stephansama/typed-events

Typed events store using standard schema

Table of contents

Open Table of contents

• Installation
• Usage
• References

Installation

pnpm install @stephansama/typed-events

Usage

import * as z from "zod";

import { TypedEvent } from "@stephansama/typed-events";

export const customAnimationEvent = new TypedEvent(
  "custom-animation-event",
  z.object({
    x: z.number(),
    y: z.number(),
  }),
);

somewhere in your codebase

export function listenForAnimationEvent() {
  const item = document.getElementById("item");

  const cleanup = customAnimationEvent.listen((event) => {
    item.style.x = event.detail.x;
    item.style.y = event.detail.y;
  });

  return () => cleanup();
}

somewhere else in your codebase

export function dispatchEvent() {
  const x = document.getElementById("x");
  const y = document.getElementById("y");

  const button = document.getElementById("button");

  button.addEventListener("click", () => {
    customAnimationEvent.dispatch({
      x: +x.innerText,
      y: +y.innerText,
    });
  });
}

References

• standardschema

Modules

Module	Description
events	‐
index	‐
utils	‐