@glenstack/cf-workers-customevent

Cloudflare Workers CustomEvent

A polyfill CustomEvent implementation for Cloudflare Workers.

Installation

npm install --save @glenstack/cf-workers-customevent

Usage

import { CustomEvent } from "@glenstack/cf-workers-customevent";

addEventListener("myCustomEvent", (event) => {
  // Note: the `event` argument is the MyCustomEvent instance, rather than the FetchEvent.
  console.log("Hello from a myCustomEvent instance!");
});

addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (url.pathname === "/fireCustomEvent") {
    const e = new CustomEvent("myCustomEvent");
    dispatchEvent(e);
  }

  event.respondWith(new Response("Hello, world!"));
});

// GET-ing `/fireCustomEvent` will log "Hello from a myCustomEvent instance!" and respond with "Hello, world!"
// GET-ing `/` will just respond with "Hello, world!"

Optionally, you can also pass through extra information with the CustomEvent using the detail property:

import { CustomEvent } from "@glenstack/cf-workers-customevent";

addEventListener("myCustomEvent", (event: any) => {
  const name = event.detail.searchParams.get("name");
  console.log(`Hello ${name}, from a myCustomEvent instance!`);
});

addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (url.pathname === "/fireCustomEvent") {
    const e = new CustomEvent("myCustomEvent", {
      detail: { searchParams: url.searchParams },
    });
    dispatchEvent(e);
  }

  event.respondWith(new Response("Hello, world!"));
});

// GET-ing `/fireCustomEvent?name=Greg` will log "Hello Greg, from a myCustomEvent instance!" and respond with "Hello, world!"
// GET-ing `/` will just respond with "Hello, world!"

And finally, you can also pass through the original FetchEvent, in order to respond from within the custom event listener:

import { CustomEvent } from "@glenstack/cf-workers-customevent";

addEventListener("myCustomEvent", (event: any) => {
  const name = event.detail.searchParams.get("name");
  event.detail.fetchEvent.respondWith(new Response(`Hello, ${name}!`));
});

addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (url.pathname === "/fireCustomEvent") {
    const e = new CustomEvent("myCustomEvent", {
      detail: { searchParams: url.searchParams, fetchEvent: event },
    });
    dispatchEvent(e);
  } else {
    event.respondWith(new Response("Hello, world!"));
  }
});

// GET-ing `/fireCustomEvent?name=Greg` will respond with "Hello, Greg!"
// GET-ing `/` will just respond with "Hello, world!"