Web Component

!npm

Reactive Web Component API enhanced with Markup.

Motivation

- Native Web Components APIs are too robust. This means you need to write so much code for the simplest components.
- Even if you manage to handle all the APIs fine, you still need to deal with DOM manipulation and handle your own reactivity.
- Markup offers the simplest and more powerful templating system that can be used
on the client without setup.

With all these reasons, it only made sense to introduce a simple API to handle everything for you.

``ts
// import everything from Markup as if you are using it directly
import { WebComponent, html } from '@beforesemicolon/web-component'
import stylesheet from './counter-app.css' with { type: 'css' }

interface Props {
label: string
}

interface State {
count: number
}

class CounterApp extends WebComponent {
static observedAttributes = ['label']
label = '+' // defined props default value
initialState = {
// declare initial state
count: 0,
}
stylesheet = stylesheet

countUp = (e: Event) => {
e.stopPropagation()
e.preventDefault()

this.setState(({ count }) => ({ count: count + 1 }))
this.dispatch('click')
}

render() {
return html

${this.state.count}

${this.props.label}


}
}

customElements.define('counter-app', CounterApp)
`

In your HTML you can simply use the tag normally.

`html

`

Install

`
npm install @beforesemicolon/web-component
`

In the browser

`html








``