Web Component

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.

// 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<Props, State> {
    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`
            <p>${this.state.count}</p>
            <button type="button" onclick="${this.countUp}">
                ${this.props.label}
            </button>
        `
    }
}

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

In your HTML you can simply use the tag normally.

<counter-app label="count up"></counter-app>

Install

npm install @beforesemicolon/web-component

In the browser

<!-- use the latest version -->
<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>

<!-- use a specific version -->
<script src="https://unpkg.com/@beforesemicolon/[email protected]/dist/client.js"></script>

<!-- link you app script after -->
<script>
    const { WebComponent } = BFS
    const { html, state, effect } = BFS.MARKUP
</script>