https://github.com/beforesemicolon/web-component

A Web Component Framework
https://github.com/beforesemicolon/web-component

custom-elements html templating-system web-components webapp webcomponents

Last synced: about 1 year ago
JSON representation

A Web Component Framework

• Host: GitHub
• URL: https://github.com/beforesemicolon/web-component
• Owner: beforesemicolon
• License: bsd-3-clause
• Created: 2021-10-17T17:28:36.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-27T21:16:56.000Z (about 2 years ago)
• Last Synced: 2024-05-28T03:59:46.179Z (about 2 years ago)
• Topics: custom-elements, html, templating-system, web-components, webapp, webcomponents
• Language: TypeScript
• Homepage: https://markup.beforesemicolon.com/
• Size: 1.41 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
# Web Component

[![Static Badge](https://img.shields.io/badge/documentation-blue)](https://markup.beforesemicolon.com/documentation/capabilities/web-component)

[![Test](https://github.com/beforesemicolon/web-component/actions/workflows/test.yml/badge.svg)](https://github.com/beforesemicolon/web-component/actions/workflows/test.yml)

[![npm](https://img.shields.io/npm/v/%40beforesemicolon%2Fweb-component)](https://www.npmjs.com/package/@beforesemicolon/web-component)

![npm](https://img.shields.io/npm/l/%40beforesemicolon%2Fweb-component)

Reactive Web Component API enhanced with [Markup](https://markup.beforesemicolon.com/).

## 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](https://markup.beforesemicolon.com/) 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

    const { WebComponent } = BFS

    const { html, state, effect } = BFS.MARKUP

```