Installation
@beforesemicolon/web-component is a plug-and-play library. It does not require complex build steps, compiler configuration, or bundlers. You can use it by installing it via a package manager or directly including it from a CDN in a standard browser script tag.
Via Package Managers
Install the package using your package manager of choice:
npm
1npm install @beforesemicolon/web-componentyarn
1yarn add @beforesemicolon/web-componentpnpm
1pnpm add @beforesemicolon/web-componentOnce installed, you can import WebComponent, styling utilities, and Markup templating functions directly into your JavaScript or TypeScript files:
1import { WebComponent, html, css } from '@beforesemicolon/web-component'Via CDN
For rapid prototyping or zero-build environments, you can include the script from a CDN (such as unpkg or jsDelivr) in your document's <head>.
Latest Version
1<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>Specific Version
1<script src="https://unpkg.com/@beforesemicolon/web-component@1.19.2/dist/client.js"></script>CDN Global Namespaces
When using the client CDN build, @beforesemicolon/web-component exposes a global variable BFS. Under this namespace, you can access the core elements:
BFS.WebComponent: The base class for building custom elements.BFS.css: The tagged template styling helper.BFS.MARKUP: The underlying Markup library namespace containinghtml,state,effect, and other template utilities.
Here is an example of accessing these APIs from browser-native scripts:
1const { WebComponent, css } = BFS2const { html, state } = BFS.MARKUP3 4class MyCounter extends WebComponent {5 initialState = { count: 0 }6 7 render() {8 return html`9 <button10 type="button"11 onclick="${() =>12 this.setState({ count: this.state.count() + 1 })}"13 >14 Count: ${this.state.count}15 </button>16 `17 }18}19customElements.define('my-counter', MyCounter)