chore: setup component

.eslintrc.json

@@ -1,6 +1,10 @@
 {
   "root": true,
-  "extends": ["plugin:github/browser", "plugin:github/recommended", "plugin:github/typescript"],
+  "extends": [
+    "plugin:github/browser",
+    "plugin:github/recommended",
+    "plugin:github/typescript"
+  ],
   "globals": {
     "ExampleElement": "readonly"
   },

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "editor.codeActionsOnSave": {
-      "source.fixAll": "explicit"
+    "source.fixAll": "explicit"
   }
 }

README.md

@@ -1,11 +1,11 @@
-# Template Custom Element
+# HTMX Toasts Element
 
-[![Node CI](https://github.com/ZEISS/template-element/actions/workflows/main.yml/badge.svg)](https://github.com/ZEISS/template-element/actions/workflows/main.yml)
+[![Node CI](https://github.com/ZEISS/htmx-toasts/actions/workflows/main.yml/badge.svg)](https://github.com/ZEISS/htmx-toasts/actions/workflows/main.yml)
 [![Taylor Swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)
 [![Volkswagen](https://auchenberg.github.io/volkswagen/volkswargen_ci.svg?v=1)](https://github.com/auchenberg/volkswagen)
-[![GitHub License](https://img.shields.io/github/license/zeiss/template-element)]
+[![GitHub License](https://img.shields.io/github/license/zeiss/htmx-toasts)]
 
-This is a template for creating a custom element using the [Web Component API](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
+This is a simple HTMX element that can be used to display toasts in your web application.
 
 ## License
 

src/index.spec.ts

@@ -1,12 +1,12 @@
 import {fixture, html} from '@open-wc/testing-helpers'
-import {ExampleElement} from './index'
+import {HTMXToastsElement} from './index'
 import {describe, it, expect, beforeEach} from 'vitest'
 
 describe('example-element', () => {
-  let element: ExampleElement
+  let element: HTMXToastsElement
 
   beforeEach(async () => {
-    element = await fixture(html`<example-element></example-element>`)
+    element = await fixture(html`<htmx-toasts></htmx-toasts>`)
   })
 
   it('should render the element', () => {

src/index.ts

@@ -2,25 +2,63 @@ export {}
 
 declare global {
   interface Window {
-    ExampleElement: typeof ExampleElement
+    HTMXToastsElement: typeof HTMXToastsElement
   }
   interface HTMLElementTagNameMap {
-    'example-element': ExampleElement
+    'htmx-toasts': HTMXToastsElement
   }
 }
 
-export class ExampleElement extends HTMLElement {
+type Level = 'info' | 'warn' | 'error'
+type Code = number
+type Message = string
+
+type Notify = {
+  message: Message
+  level: Level
+  code: Code
+}
+
+type Notification = {
+  id: number
+  message: Message
+  level: Level
+  code: Code
+}
+
+export class HTMXToastsElement extends HTMLElement {
   constructor() {
     super()
   }
 
-  connectedCallback() {
-    this.textContent = 'Hello, World!'
+  notifications = new Array<Notification>()
+
+  connectedCallback(): void {
+    window.addEventListener('htmx-toasts:notify', ((e: CustomEvent<Notify>) => this._handleNotify(e)) as EventListener)
+  }
+
+  private _handleNotify(e: CustomEvent<Notify>): void {
+    const notifcation = {id: e.timeStamp, ...e.detail}
+    this.notifications.push(notifcation)
+    setTimeout(() => this._remove(notifcation), 3000)
+    // this.requestUpdate();
+  }
+
+  private _remove(n: Notification): void {
+    this.notifications = this.notifications.filter(i => i.id !== n.id)
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener('htmx-toasts:notify', ((e: CustomEvent<Notify>) =>
+      this._handleNotify(e)) as EventListener)
   }
 }
 
-customElements.define('example-element', ExampleElement)
+if (!window.customElements.get('htmx-toasts')) {
+  window.HTMXToastsElement = HTMXToastsElement
+  window.customElements.define('htmx-toats', HTMXToastsElement)
+}
 
 export const defineExampleElement = () => {
-  customElements.define('example-element', ExampleElement)
+  customElements.define('htmx-toasts', HTMXToastsElement)
 }