Browser Globals

For quick prototyping, testing, or simple web pages, you might prefer not to set up a build pipeline (like Webpack, Vite, or Rollup). @beforesemicolon/web-component fully supports zero-build setups by offering a pre-bundled client script that exposes all API functions on a single browser global namespace.

CDN Integration

To use the component library directly in your HTML files, load the client script from a CDN (such as unpkg.com or jsdelivr.net):

1<!-- Load the latest version -->2<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>3 4<!-- Or pin a specific version (recommended for production) -->5<script src="https://unpkg.com/@beforesemicolon/web-component@1.19.2/dist/client.js"></script>

Once loaded, the library attaches a single global variable BFS to the browser's window object.

The `BFS` Global Namespace

The window.BFS namespace is structured as follows:

window.BFS.WebComponent: The core component base class.
window.BFS.css: The tagged template function for creating reactive scoped CSS.
window.BFS.MARKUP: An object containing all the re-exported APIs from the underlying @beforesemicolon/markup package.

Re-exported Markup APIs under `BFS.MARKUP`

Through BFS.MARKUP, you can access all template rendering and reactivity tools:

html: Tagged template function for rendering DOM elements.
state: Creates reactive state getters and setters.
effect: Tracks side-effects depending on states.
Helper utilities: when, repeat, suspense, visible, etc.

Complete Zero-Build Example

Here is a complete, single-file HTML page showing how to declare and use a reactive custom element without any compilers or bundlers:

1<!doctype html>2<html lang="en">3    <head>4        <meta charset="UTF-8" />5        <title>Zero-Build Web Component Example</title>6        <!-- 1. Load the library from CDN -->7        <script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>8    </head>9    <body>10        <!-- 2. Declare custom elements in the HTML -->11        <user-card username="john_doe"></user-card>12 13        <script>14            // 3. Extract APIs from the global namespace15            const { WebComponent, css } = window.BFS16            const { html, state } = window.BFS.MARKUP17 18            // 4. Define your reactive component class19            class UserCard extends WebComponent {20                static observedAttributes = ['username']21 22                initialState = {23                    name: 'John Doe',24                    role: 'Developer',25                }26 27                // Scoped, reactive CSS28                stylesheet = css`29                    :host {30                        display: block;31                        padding: 1rem;32                        border: 1px solid #ccc;33                        border-radius: 8px;34                        font-family: sans-serif;35                        background-color: #f9f9f9;36                    }37                    h3 {38                        margin: 0 0 0.5rem;39                        color: var(--primary-color, #333);40                    }41                `42 43                render() {44                    return html`45                        <h3>${() => this.state.name()}</h3>46                        <p>Username: @${this.props.username}</p>47                        <p>Role: ${() => this.state.role()}</p>48                    `49                }50            }51 52            // 5. Register the element with the browser53            customElements.define('user-card', UserCard)54        </script>55    </body>56</html>

Standard ES Modules Alternative

If you want to use modern JavaScript imports (import syntax) without a bundler, you can import directly from the CDN if the browser supports ES Modules:

1import {2    WebComponent,3    html,4    state,5} from 'https://unpkg.com/@beforesemicolon/web-component/dist/esm/index.js'

Pin the package version for production pages so CDN updates cannot change behavior unexpectedly.

edit this doc