Skip to content

Commit

Permalink
chore: setup component
Browse files Browse the repository at this point in the history
katallaxie authored Nov 5, 2024
1 parent eff3fda commit 16d9dad
Showing 5 changed files with 58 additions and 16 deletions.
6 changes: 5 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -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"
},
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
"source.fixAll": "explicit"
}
}
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

6 changes: 3 additions & 3 deletions src/index.spec.ts
Original file line number Diff line number Diff line change
@@ -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', () => {
52 changes: 45 additions & 7 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -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)
}

0 comments on commit 16d9dad

Please sign in to comment.