Typescript Frameworks

TypeScript

React

React implementation using hooks (useEffect and useRef) for managing component lifecycle and references:

tip

Full example project can be found here

import { useEffect, useRef } from 'react';
import { 
  InitVerificationDetail, 
  VerificationCompletedDetail, 
  VerifySpeedUI, 
  VerifySpeedUIEvent 
} from 'verifyspeed-web-ui';

function App() {
  const verifySpeedRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = verifySpeedRef.current;
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );

      return () => {
        element.removeEventListener(
          VerifySpeedUIEvent.INIT_VERIFICATION,
          handleInitVerification as unknown as EventListener
        );
        element.removeEventListener(
          VerifySpeedUIEvent.VERIFICATION_COMPLETED,
          handleVerificationCompleted as unknown as EventListener
        );
      };
    }
  }, []);

  return <verify-speed-ui ref={verifySpeedRef} />;
}

Vue 3

Vue 3 implementation using lifecycle hooks:

tip

Full example project can be found here

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { 
  InitVerificationDetail, 
  VerificationCompletedDetail, 
  VerifySpeedUI, 
  VerifySpeedUIEvent 
} from 'verifyspeed-web-ui';

const verifySpeedRef = ref<HTMLElement | null>(null);

onMounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification as unknown as EventListener
    )
    element.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted as unknown as EventListener
    )
  }
})

//* TIP: Remove event listeners on unmount
onUnmounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification as unknown as EventListener
    )
    element.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted as unknown as EventListener
    )
  }
})
</script>

<template>
  <verify-speed-ui ref="verifySpeedRef" />
</template>

Angular

Angular implementation using ViewChild decorator and lifecycle hooks:

tip

Full example project can be found here

import {
  Component,
  ElementRef,
  OnInit,
  OnDestroy,
  ViewChild,
  CUSTOM_ELEMENTS_SCHEMA,
  AfterViewInit,
} from '@angular/core';
import { 
  InitVerificationDetail, 
  VerificationCompletedDetail, 
  VerifySpeedUI, 
  VerifySpeedUIEvent 
} from 'verifyspeed-web-ui';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: '<verify-speed-ui #verifySpeed></verify-speed-ui>'
})
export class AppComponent implements OnInit, OnDestroy {
  @ViewChild('verifySpeed') verifySpeedRef!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    const element = this.verifySpeedRef.nativeElement;
    element.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener
    );
    element.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener
    );
  }

  ngOnDestroy() {
    const element = this.verifySpeedRef.nativeElement;
    element.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener
    );
    element.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener
    );
  }
}

Svelte

Svelte implementation using lifecycle functions and bind directive:

tip

Full example project can be found here

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import type { InitVerificationDetail, VerificationCompletedDetail } from 'verifyspeed-web-ui';
  import { VerifySpeedUI, VerifySpeedUIEvent } from 'verifyspeed-web-ui';

  let verifySpeedRef: HTMLElement;

  onMount(() => {
    if (verifySpeedRef) {
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });

  onDestroy(() => {
    if (verifySpeedRef) {
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });
</script>

<verify-speed-ui bind:this={verifySpeedRef} />

Lit

Lit implementation using decorators and lifecycle callbacks:

tip

Full example project can be found here

import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import {
  InitVerificationDetail,
  VerificationCompletedDetail,
  VerifySpeedUI,
  VerifySpeedUIEvent,
} from 'verifyspeed-web-ui';

@customElement('verify-speed-wrapper')
export class VerifySpeedWrapper extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener,
    );
    this.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener,
    );
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification as unknown as EventListener,
    );
    this.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted as unknown as EventListener,
    );
  }

  render() {
    return html`<verify-speed-ui></verify-speed-ui>`;
  }
}

Usage in HTML:

<verify-speed-wrapper />

SolidJS

SolidJS implementation using lifecycle and refs:

tip

Full example project can be found here

import { createSignal, onMount, onCleanup } from 'solid-js'
import './App.css'
import { InitVerificationDetail, VerificationCompletedDetail, VerifySpeedUI, VerifySpeedUIEvent } from 'verifyspeed-web-ui'

function VerifySpeed() {
  const [verifySpeedRef, setVerifySpeedRef] = createSignal<HTMLElement>();

  onMount(() => {
    const element = verifySpeedRef();
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });

  onCleanup(() => {
    const element = verifySpeedRef();
    if (element) {
      element.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification as unknown as EventListener
      );
      element.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted as unknown as EventListener
      );
    }
  });

  return <verify-speed-ui ref={setVerifySpeedRef} />;
}

// Usage
function App() {
  return (
    <div>
      <VerifySpeed />
    </div>
  );
}