Various TS fixes

assets/js/live_toast/live_toast.ts

@@ -68,6 +68,11 @@ type DismissTimer = {
   cancel: () => void
 }
 
+type ToastElement = HTMLElement & {
+  order: number
+  targetDestination: string
+}
+
 export type ClientToastOptions = {
   duration?: number | 'infinity'
   metadata?: Record<string, unknown>
@@ -82,11 +87,8 @@ type ClientToastRequest = {
 
 const dismissTimers = new WeakMap<object, DismissTimer>()
 
-declare global {
-  interface HTMLElement {
-    order: number
-    targetDestination: string
-  }
+function asToastElement(el: HTMLElement): ToastElement {
+  return el as ToastElement
 }
 
 export function addToast(
@@ -109,9 +111,9 @@ function doAnimations(
   maxItems: number,
   elToRemove?: HTMLElement
 ) {
-  const ts = []
+  const ts: ToastElement[] = []
   let toasts = Array.from(
-    document.querySelectorAll<HTMLElement>(
+    document.querySelectorAll<ToastElement>(
       '#toast-group [phx-hook="LiveToast"]'
     )
   )
@@ -226,7 +228,8 @@ function toastGroupTarget(el: HTMLElement) {
 }
 
 async function animateOut(this: ViewHook) {
-  const val = (this.el.order - 2) * 100 + (this.el.order - 2) * gap
+  const toast = asToastElement(this.el)
+  const val = (toast.order - 2) * 100 + (toast.order - 2) * gap
 
   let direction = ''
 
@@ -390,7 +393,8 @@ export function createLiveToastHook(duration = 6000, maxItems = 3) {
       }
 
       // animate to targetDestination in 0ms
-      const keyframes = { y: [this.el.targetDestination] }
+      const toast = asToastElement(this.el)
+      const keyframes = { y: [toast.targetDestination] }
       animate(this.el, keyframes, { duration: 0 })
     },
     mounted(this: ViewHook) {

assets/test/live_toast.test.ts

@@ -78,8 +78,6 @@ function mountToast(duration: number | 'Infinity' = 1000, countdown = false) {
     get: () => document.body
   })
 
-  el.order = 1
-  el.targetDestination = '0px'
   el.matches = ((selector: string) => {
     if (selector === ':hover') return hovered
     if (selector === ':focus-within') return focused

mix.exs

@@ -69,6 +69,7 @@ defmodule LiveToast.MixProject do
   defp files do
     ~w"""
     assets/js
+    assets/index.d.ts
     priv
     lib/live_toast.ex
     lib/live_toast/components.ex

package.json

@@ -4,9 +4,11 @@
   "description": "Phoenix Hook for LiveToast",
   "license": "MIT",
   "private": true,
+  "types": "./assets/index.d.ts",
   "module": "./priv/static/live_toast.esm.js",
   "main": "./priv/static/live_toast.cjs.js",
   "exports": {
+    "types": "./assets/index.d.ts",
     "import": "./priv/static/live_toast.esm.js",
     "require": "./priv/static/live_toast.cjs.js"
   },
@@ -20,6 +22,7 @@
     "LICENSE.md",
     "package.json",
     "priv/static/*",
+    "assets/index.d.ts",
     "assets/js/live_toast/*"
   ]
 }

priv/static/live_toast.js

@@ -820,6 +820,9 @@ var LiveMotion = (() => {
   var remainingSelector = "[data-live-toast-remaining]";
   var lastTS = [];
   var dismissTimers = new WeakMap();
+  function asToastElement(el) {
+    return el;
+  }
   function addToast(kind, message, options = {}) {
     var _a;
     (_a = document.getElementById("toast-group")) == null ? void 0 : _a.dispatchEvent(new CustomEvent(clientToastEvent, {
@@ -894,7 +897,8 @@ var LiveMotion = (() => {
   }
   function animateOut() {
     return __async(this, null, function* () {
-      const val = (this.el.order - 2) * 100 + (this.el.order - 2) * gap;
+      const toast = asToastElement(this.el);
+      const val = (toast.order - 2) * 100 + (toast.order - 2) * gap;
       let direction = "";
       if (this.el.dataset.corner === "bottom_left" || this.el.dataset.corner === "bottom_center" || this.el.dataset.corner === "bottom_right") {
         direction = "-";
@@ -1013,7 +1017,8 @@ var LiveMotion = (() => {
         if (this.el.dataset.liveToastGroup === "true") {
           return;
         }
-        const keyframes = { y: [this.el.targetDestination] };
+        const toast = asToastElement(this.el);
+        const keyframes = { y: [toast.targetDestination] };
         animate2(this.el, keyframes, { duration: 0 });
       },
       mounted() {