floodfx / liveviewjs

LiveView-based library for reactive app development in NodeJS and Deno

Home Page:https://liveviewjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add types for Hooks

floodfx opened this issue · comments

Summary of types in Hooks docs

Something like:

type ReplyRefFn = (reply: string, ref: string) => void;
type PayloadHandlerFn = (payload: any) => void;

/**
 * Define Hook interface
 */
interface Hook {
  el: HTMLElement;
  liveSocket: LiveSocket;
  pushEvent: (event: any, payload: any, replyRefFn: ReplyRefFn) => void;
  pushEventTo: (selectorOrTarget: string, event: any, payload: any, fn: ReplyRefFn) => void;
  handleEvent: (event: any, fn: PayloadHandlerFn) => void;
  upload: (name: string, files: any[]) => void;
  uploadTo: (selectorOrTarget: string, name: string, files: any[]) => void;

  mounted(): void;
  beforeUpdate(): void;
  updated(): void;
  destroyed(): void;
  disconnected(): void;
  reconnected(): void;
}

class NumberInput implements Hook {
  el: HTMLInputElement;
  mounted(): void {
    this.el.addEventListener("input", (e) => {
      // replace all non-numeric characters with empty string
      this.el.value = this.el.value.replace(/\D/g, "");
    });
  }
}```