tessl/npm-builder-io--qwik

An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and resumable architecture for instant-loading web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Event Handling

Name: tessl/npm-builder-io--qwik
Author: tessl

Event system with lazy loading and server-side event handling capabilities. Qwik's event system loads event handlers only when needed.

Capabilities

Event Listeners

Add event listeners with automatic lazy loading.

/**
 * Add event listener to current component element
 * @param event - Event name
 * @param handler - QRL event handler
 */
function useOn(event: string, handler: QRL<(event: Event) => void>): void;

/**
 * Add event listener to document
 * @param event - Event name  
 * @param handler - QRL event handler
 */
function useOnDocument(event: string, handler: QRL<(event: Event) => void>): void;

/**
 * Add event listener to window
 * @param event - Event name
 * @param handler - QRL event handler  
 */
function useOnWindow(event: string, handler: QRL<(event: Event) => void>): void;

// Event handler type
type EventHandler<T, E> = QRL<(event: E, element: T) => any>;

// Multi-event handler type
type QRLEventHandlerMulti<T, E> = QRL<(event: E, element: T) => any> | undefined;

Usage Examples:

import { component$, useOn, useOnDocument, useOnWindow, $ } from "@builder.io/qwik";

export const EventDemo = component$(() => {
  // Component-level event listener
  useOn("click", $(() => {
    console.log("Component clicked");
  }));

  // Document-level event listener
  useOnDocument("keydown", $((event: KeyboardEvent) => {
    if (event.key === "Escape") {
      console.log("Escape pressed");
    }
  }));

  // Window-level event listener
  useOnWindow("resize", $(() => {
    console.log("Window resized");
  }));

  return <div>Click me or press Escape</div>;
});

Install with Tessl CLI