ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: remove old size increase explanation in readme

Browse source
This commit is contained in:
Ayo Ayco 2025-03-30 20:04:13 +02:00
commit 5aa5ee44fa
59 changed files with 10260 additions and 3052 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
.build.yml
View file

@ -8,8 +8,8 @@ secrets:
- bbfcb6dc-7c4a-42ee-a11a-022f0339a133
environment:
NETLIFY_SITE_ID: bfd69adf-f754-433c-9690-63426f0d2fa0
REPO: wcb
GH_USER: ayoayco
REPO: wcb
tasks:
- push-mirror: |
cd ~/"${REPO}"
@ -17,16 +17,22 @@ tasks:
git push --mirror "https://github.com/${GH_USER}/${REPO}"
- install-deps: |
cd ~/"${REPO}"
pnpm i
pnpm i --ignore-scripts
- test: |
cd ~/"${REPO}"
npx vitest run
- build: |
cd ~/"${REPO}"
pnpm -F site run build
pnpm -F ./packages/core build
pnpm -F ./packages/config build
pnpm -F docs i --ignore-scripts
pnpm -F docs build
- deploy: |
cd ~/"${REPO}"
cd wcb
{
set +x
. ~/.buildsecrets
set -x
}
export NETLIFY_AUTH_TOKEN
pnpm -F site run deploy
pnpm -F docs run deploy

441
README.md
View file

@ -16,438 +16,29 @@ When you extend the `WebComponent` class for your component, you only have to de
The result is a reactive UI on property changes.
There's a trade off between productivity & lightweight-ness here, and it is somewhere between [Microsoft's FASTElement](https://github.com/microsoft/fast) & [Google's LitElement](https://github.com/lit/lit/).
## Links
- [Repository](https://git.sr.ht/~ayoayco/wcb)
- [Issues](https://todo.sr.ht/~ayoayco/wcb)
- [Documentation](https://webcomponent.io)
- [Main Repo at SourceHut](https://git.sr.ht/~ayoayco/wcb)
- [GitHub Mirror](https://github.com/ayoayco/wcb)
- ...more mirrors coming
- [To Do](https://todo.sr.ht/~ayoayco/wcb)
- [Read a blog explaining the reactivity](https://ayos.blog/reactive-custom-elements-with-html-dataset/)
- [View demo on CodePen](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
## Table of Contents
## Want to get in touch?
1. [Project Status](#project-status)
1. [Installation](#installation)
1. [Import via CDN](#import-via-cdn)
1. [Installation via npm](#installation-via-npm)
1. [Exports](#exports)
1. [Main Exports](#main-exports)
1. [Utilities](#utilities)
1. [Usage](#usage)
1. [Examples](#Examples)
1. [To-Do App](#1-to-do-app)
1. [Single HTML file](#2-single-html-file-example)
1. [Feature Demos](#3-feature-demos)
1. [`template` vs `render()`](#template-vs-render)
1. [Prop access](#prop-access)
1. [Alternatives](#alternatives)
1. [Styling](#styling)
1. [Shadow DOM Opt-In](#shadow-dom-opt-in)
1. [Just the Templating](#just-the-templating)
1. [Life-Cycle Hooks](#life-cycle-hooks)
1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized
1. [`afterViewInit`](#afterviewinit) - after the view is first initialized
1. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM
1. [`onChanges`](#onchanges) - every time an attribute value changes
1. [Library Size](#library-size)
There are many ways to get in touch:
## Project Status
It is ready for many simple cases we see people use custom elements for. If you have a cool project built on **WebComponent.io** we'd love to know! :)
For building advanced interactions, we have an in-progress work on smart diffing to prevent component children being wiped on interaction.
In the mean time, if you have some complex needs, we recommend using the `WebComponent` base class with a more mature rendering approach like `lit-html`... and here's a demo for that: [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010).
...or you can even [use just parts](#just-the-templating) of it for your own base class.
## Installation
The library is distributed as complete ECMAScript Modules (ESM) and published on [NPM](https://ayco.io/n/web-component-base). Please file an issue in our [issue tracker](https://ayco.io/gh/web-component-base/issues) for problems or requests regarding our distribution.
### Import via CDN
It is possible to import directly using a CDN like [esm.sh](https://esm.sh/web-component-base) or [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component or HTML files. In all examples in this document, we use `unpkg` but you can find on CodePen examples that `esm.sh` also works well.
Additionally, we use `@latest` in the rest of our [usage examples](#usage) here for simplicity, but take note that this incurs additional resolution steps for CDNs to find the actual latest published version. You may replace the `@latest` in the URL with specific versions as shown in our CodePen examples, and this will typically be better for performance.
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
```
### Installation via npm
Usable for projects with bundlers or using import maps pointing to the specific files downloaded in `node_modules/web-component-base`.
```bash
npm i web-component-base
```
## Exports
You can import everything separately, or in a single file each for the main exports and utilities.
### Main Exports
```js
// all in a single file
import { WebComponent, html } from 'web-component-base'
// in separate files
import { WebComponent } from 'web-component-base/WebComponent.js'
import { html } from 'web-component-base/html.js'
```
### Utilities
```js
// in a single file
import {
serialize,
deserialize,
getCamelCase,
getKebabCase,
createElement,
} from 'web-component-base/utils'
// or separate files
import { serialize } from 'web-component-base/utils/serialize.js'
import { createElement } from 'web-component-base/utils/create-element.js'
// etc...
```
## Usage
In your component class:
```js
// HelloWorld.mjs
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class HelloWorld extends WebComponent {
static props = {
myName: 'World',
emotion: 'sad',
}
get template() {
return `
<h1>Hello ${this.props.myName}${this.props.emotion === 'sad' ? '. 😭' : '! 🙌'}</h1>
`
}
}
customElements.define('hello-world', HelloWorld)
```
In your HTML page:
```html
<head>
<script type="module" src="HelloWorld.mjs"></script>
</head>
<body>
<hello-world my-name="Ayo" emotion="sad">
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
</script>
</body>
```
## Examples
### 1. To-Do App
A simple app that allows adding / completing tasks:
[View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/GRegyVe?editors=1010)
![To-Do App screen recording](https://raw.githubusercontent.com/ayoayco/web-component-base/main/assets/todo-app.gif)
### 2. Single HTML file Example
Here is an example of using a custom element in a single .html file.
```html
<!doctype html>
<html lang="en">
<head>
<title>WC Base Test</title>
<script type="module">
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class HelloWorld extends WebComponent {
static props = {
myName: 'World',
}
get template() {
return `<h1>Hello ${this.props.myName}!</h1>`
}
}
customElements.define('hello-world', HelloWorld)
</script>
</head>
<body>
<hello-world my-name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector('hello-world')
setTimeout(() => {
helloWorld.props.myName = 'Ayo zzzZzzz'
}, 2500)
</script>
</body>
</html>
```
### 3. Feature Demos
Some feature-specific demos:
1. [Context-Aware Post-Apocalyptic Human](https://codepen.io/ayoayco-the-styleful/pen/WNqJMNG?editors=1010)
1. [Simple reactive property](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
1. [Counter & Toggle](https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010)
1. [Using custom templating (lit-html)](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010)
1. [Using dynamic style objects](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010)
1. [Using the Shadow DOM](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)
1. [Using tagged templates in your vanilla custom element](https://codepen.io/ayoayco-the-styleful/pen/bGzJQJg?editors=1010)
## `template` vs `render()`
This mental model attempts to reduce the cognitive complexity of authoring components:
1. The `template` is a read-only property (initialized with a `get` keyword) that represents _how_ the component view is rendered.
1. There is a `render()` method that triggers a view render.
1. This `render()` method is _automatically_ called under the hood every time an attribute value changed.
1. You can _optionally_ call this `render()` method at any point to trigger a render if you need (eg, if you have private unobserved properties that need to manually trigger a render)
1. Overriding the `render()` function for handling a custom `template` is also possible. Here's an example of using `lit-html`: [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010)
## Prop Access
The `props` property of the `WebComponent` interface is provided for easy read/write access to a camelCase counterpart of _any_ observed attribute.
```js
class HelloWorld extends WebComponent {
static props = {
myProp: 'World',
}
get template() {
return html` <h1>Hello ${this.props.myProp}</h1> `
}
}
```
Assigning a value to the `props.camelCase` counterpart of an observed attribute will trigger an "attribute change" hook.
For example, assigning a value like so:
```
this.props.myName = 'hello'
```
...is like calling the following:
```
this.setAttribute('my-name','hello');
```
Therefore, this will tell the browser that the UI needs a render if the attribute is one of the component's observed attributes we explicitly provided with `static props`;
> [!NOTE]
> The `props` property of `WebComponent` works like `HTMLElement.dataset`, except `dataset` is only for attributes prefixed with `data-`. A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-` prefix.
> Another advantage over `HTMLElement.dataset` is that `WebComponent.props` can hold primitive types 'number', 'boolean', 'object' and 'string'.
### Alternatives
The current alternatives are using what `HTMLElement` provides out-of-the-box, which are:
1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows.
## Styling
When using the built-in `html` function for tagged templates, a style object of type `Partial<CSSStyleDeclaration>` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration).
Try it now with this [example on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010)
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class StyledElements extends WebComponent {
static props = {
emphasize: false,
type: 'warn',
}
#typeStyles = {
warn: {
backgroundColor: 'yellow',
border: '1px solid orange',
},
error: {
backgroundColor: 'orange',
border: '1px solid red',
},
}
get template() {
return html`
<div
style=${{
...this.#typeStyles[this.props.type],
padding: '1em',
}}
>
<p style=${{ fontStyle: this.props.emphasize && 'italic' }}>Wow!</p>
</div>
`
}
}
customElements.define('styled-elements', StyledElements)
```
## Shadow DOM Opt-In
Add a static property `shadowRootInit` with object value of type `ShadowRootInit` (see [options on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options)) to opt-in to using shadow dom for the whole component.
Try it now [on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)
Example:
```js
static shadowRootInit = {
mode: "closed",
};
```
## Just the Templating
You don't have to extend the whole base class just to use some features. All internals are exposed and usable separately so you can practically build the behavior on your own classes.
Here's an example of using the `html` tag template on a class that extends from vanilla `HTMLElement`... also [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzJQJg?editors=1010).
```js
import { html } from 'https://unpkg.com/web-component-base/html'
import { createElement } from 'https://unpkg.com/web-component-base/utils'
class MyQuote extends HTMLElement {
connectedCallback() {
const el = createElement(
html` <button onClick=${() => alert('hey')}>hey</button>`
)
this.appendChild(el)
}
}
customElements.define('my-quote', MyQuote)
```
## Life-Cycle Hooks
Define behavior when certain events in the component's life cycle is triggered by providing hook methods
### onInit()
- Triggered when the component is connected to the DOM
- Best for setting up the component
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class ClickableText extends WebComponent {
// gets called when the component is used in an HTML document
onInit() {
this.onclick = () => console.log('>>> click!')
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`
}
}
```
### afterViewInit()
- Triggered after the view is first initialized
```js
class ClickableText extends WebComponent {
// gets called when the component's innerHTML is first filled
afterViewInit() {
const footer = this.querySelector('footer')
// do stuff to footer after view is initialized
}
get template() {
return `<footer>Awesome site &copy; 2023</footer>`
}
}
```
### onDestroy()
- Triggered when the component is disconnected from the DOM
- best for undoing any setup done in `onInit()`
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class ClickableText extends WebComponent {
clickCallback() {
console.log('>>> click!')
}
onInit() {
this.onclick = this.clickCallback
}
onDestroy() {
console.log('>>> removing event listener')
this.removeEventListener('click', this.clickCallback)
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`
}
}
```
### onChanges()
- Triggered when an attribute value changed
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class ClickableText extends WebComponent {
// gets called when an attribute value changes
onChanges(changes) {
const { property, previousValue, currentValue } = changes
console.log('>>> ', { property, previousValue, currentValue })
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`
}
}
```
## Library Size
All the functions and the base class in the library are minimalist by design and only contains what is needed for their purpose.
The main export (with `WebComponent` + `html`) is 1.7 kB (min + gzip) according to [bundlephobia.com](https://bundlephobia.com/package/web-component-base@latest), and the `WebComponent` base class is just 1.08 kB (min + brotli) according to [size-limit](http://github.com/ai/size-limit).
1. Email a ticket: [~ayoayco/wcb@todo.sr.ht](mailto:~ayoayco/wcb@todo.sr.ht)
1. Submit via [SourceHut todo](https://todo.sr.ht/~ayoayco/wcb)
1. Start a [GitHub discussion](https://github.com/ayoayco/wcb/discussions)
1. Email me: [ayo@ayco.io](mailto:ayo@ayco.io)
## Inspirations and thanks
1. [htm](https://github.com/developit/htm)
1. [lit](https://github.com/lit/lit)
1. [htm](https://github.com/developit/htm) - I use it for the `html` function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see.
1. [fast](https://github.com/microsoft/fast) - When I found that Microsoft has their own base class (super cool!) and I thought: okay, I don't feel bad about forgetting Lit exists now
1. [lit](https://github.com/lit/lit) - `lit-html` continues to amaze me and I worked to make `wcb` generic so I (and others) can continue to use it

21
docs/.gitignore vendored Normal file
View file

@ -0,0 +1,21 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store

4
docs/.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
docs/.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

54
docs/README.md Normal file
View file

@ -0,0 +1,54 @@
# Starlight Starter Kit: Basics
[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
```
npm create astro@latest -- --template starlight
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro + Starlight project, you'll see the following folders and files:
```
.
├── public/
├── src/
│ ├── assets/
│ ├── content/
│ │ ├── docs/
│ └── content.config.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json
```
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
Static assets, like favicons, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

47
docs/astro.config.mjs Normal file
View file

@ -0,0 +1,47 @@
// @ts-check
import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'
// https://astro.build/config
export default defineConfig({
redirects: {
'/guides/': '/guides/why',
},
integrations: [
starlight({
title: 'WCB (alpha)',
social: {
npm: 'https://www.npmjs.com/package/web-component-base',
sourcehut: 'https://sr.ht/~ayoayco/wcb/',
github: 'https://github.com/ayoayco/wcb/',
},
sidebar: [
{
label: 'Guides',
items: [
// Each item here is one entry in the navigation menu.
'getting-started',
'why',
'exports',
'usage',
'examples',
'template-vs-render',
'prop-access',
'shadow-dom',
'styling',
'just-parts',
'life-cycle-hooks',
'library-size',
],
},
// {
// label: 'Reference',
// autogenerate: { directory: 'reference' },
// },
],
components: {
Footer: './src/components/Attribution.astro',
},
}),
],
})

6666
docs/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

18
docs/package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "docs",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro",
"deploy": "netlify deploy --site=$NETLIFY_SITE_ID --dir=dist --prod"
},
"dependencies": {
"@astrojs/starlight": "^0.32.5",
"astro": "^5.5.3",
"sharp": "^0.32.5"
}
}

1
docs/public/favicon.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>
Side by side

After

Width:  |  Height:  |  Size: 696 B

BIN
docs/src/assets/houston.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 96 KiB

11
docs/src/components/Attribution.astro Normal file
View file

@ -0,0 +1,11 @@
---
import Footer from '@astrojs/starlight/components/Footer.astro'
---
<Footer />
<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
<p>
<small>A project by <a href="https://ayo.ayco.io">Ayo Ayco</a></small>
</p>
</footer>

7
docs/src/content.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineCollection } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';
export const collections = {
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
};

59
docs/src/content/docs/guides/examples.md Normal file
View file

@ -0,0 +1,59 @@
---
title: Examples
slug: examples
---
### 1. To-Do App
A simple app that allows adding / completing tasks:
[View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/GRegyVe?editors=1010)
![To-Do App screen recording](https://raw.githubusercontent.com/ayoayco/web-component-base/main/assets/todo-app.gif)
### 2. Single HTML file Example
Here is an example of using a custom element in a single .html file.
```html
<!doctype html>
<html lang="en">
<head>
<title>WC Base Test</title>
<script type="module">
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class HelloWorld extends WebComponent {
static props = {
myName: 'World',
}
get template() {
return `<h1>Hello ${this.props.myName}!</h1>`
}
}
customElements.define('hello-world', HelloWorld)
</script>
</head>
<body>
<hello-world my-name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector('hello-world')
setTimeout(() => {
helloWorld.props.myName = 'Ayo zzzZzzz'
}, 2500)
</script>
</body>
</html>
```
### 3. Feature Demos
Some feature-specific demos:
1. [Context-Aware Post-Apocalyptic Human](https://codepen.io/ayoayco-the-styleful/pen/WNqJMNG?editors=1010)
1. [Simple reactive property](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
1. [Counter & Toggle](https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010)
1. [Using custom templating (lit-html)](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010)
1. [Using dynamic style objects](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010)
1. [Using the Shadow DOM](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)
1. [Using tagged templates in your vanilla custom element](https://codepen.io/ayoayco-the-styleful/pen/bGzJQJg?editors=1010)

42
docs/src/content/docs/guides/exports.md Normal file
View file

@ -0,0 +1,42 @@
---
title: Exports
slug: exports
---
You can import everything separately, or in a single file each for the main exports and utilities.
### Main Exports
```js
// all in a single file
import { WebComponent, html } from 'web-component-base'
// in separate files
import { WebComponent } from 'web-component-base/WebComponent.js'
import { html } from 'web-component-base/html.js'
```
### Utilities
```js
// in a single file
import {
serialize,
deserialize,
getCamelCase,
getKebabCase,
createElement,
} from 'web-component-base/utils'
// or separate files
import { serialize } from 'web-component-base/utils/serialize.js'
import { createElement } from 'web-component-base/utils/create-element.js'
// etc...
```

53
docs/src/content/docs/guides/getting-started.mdx Normal file
View file

@ -0,0 +1,53 @@
---
title: Getting Started
slug: getting-started
---
import { Aside, Badge } from '@astrojs/starlight/components';
**Web Component Base (WCB)**
<Badge text="alpha" variant="danger" /> is a zero-dependency, tiny JS base class for creating reactive [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) easily.
When you extend the WebComponent class for your custom element, you only have to define the template and properties. Any change in an observed property's value will automatically cause the component UI to render.
The result is a reactive UI on property changes.
There's a trade off between productivity & lightweight-ness here and it is somewhere between [Microsoft's FASTElement](https://fast.design/) & [Google's LitElement](https://lit.dev/).
## Project Status
Treat it as a **stable alpha** product. Though the public APIs are stable, most examples are only useful for simple atomic use-cases due to remaining work needed on the internals.
<Aside type="caution" title="Important">
For building advanced interactions, there is an in-progress work on smart diffing to prevent component children being wiped on interaction.
</Aside>
<Aside type="tip">
If you have some complex needs, we recommend using the `WebComponent` base class with a more mature rendering approach like `lit-html`, and here's a demo for that: [View on CodePen](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010).
</Aside>
...or you can even [use just parts](/just-parts) of it for your own base class.
## Installation
The library is distributed as complete ECMAScript Modules (ESM) and published on [NPM](https://ayco.io/n/web-component-base). Please
email a ticket at [~ayoayco/wcb@todo.sr.ht](mailto:~ayoayco/wcb@todo.sr.ht) or submit via [SourceHut todo](https://todo.sr.ht/~ayoayco/wcb)
for problems or requests regarding our distribution.
### Import via CDN
It is possible to import directly using a CDN like [esm.sh](https://esm.sh/web-component-base) or [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component or HTML files. In all examples in this document, we use `unpkg` but you can find on CodePen examples that `esm.sh` also works well.
Additionally, we use `@latest` in the rest of our [usage](/usage) and [examples](/examples) here for simplicity, but take note that this incurs additional resolution steps for CDNs to find the actual latest published version. You may replace the `@latest` in the URL with specific versions as shown in our CodePen examples, and this will typically be better for performance.
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
```
### Installation via npm
Usable for projects with bundlers or using import maps pointing to the specific files downloaded in `node_modules/web-component-base`.
```bash
npm i web-component-base
```

24
docs/src/content/docs/guides/just-parts.md Normal file
View file

@ -0,0 +1,24 @@
---
title: Using Just Some Parts
slug: 'just-parts'
---
You don't have to extend the whole base class to use some features. All internals are exposed and usable separately so you can practically build the behavior on your own classes.
Here's an example of using the `html` tag template on a class that extends from vanilla `HTMLElement`... also [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzJQJg?editors=1010).
```js
import { html } from 'https://unpkg.com/web-component-base/html'
import { createElement } from 'https://unpkg.com/web-component-base/utils'
class MyQuote extends HTMLElement {
connectedCallback() {
const el = createElement(
html` <button onClick=${() => alert('hey')}>hey</button>`
)
this.appendChild(el)
}
}
customElements.define('my-quote', MyQuote)
```

8
docs/src/content/docs/guides/library-size.md Normal file
View file

@ -0,0 +1,8 @@
---
title: Library Size
slug: library-size
---
All the functions and the base class in the library are minimalist by design and only contains what is needed for their purpose.
The main export (with `WebComponent` + `html`) is **1.7 kB** (min + gzip) according to [bundlephobia.com](https://bundlephobia.com/package/web-component-base@latest), and the `WebComponent` base class is **1.08 kB** (min + brotli) according to [size-limit](http://github.com/ai/size-limit).

92
docs/src/content/docs/guides/life-cycle-hooks.md Normal file
View file

@ -0,0 +1,92 @@
---
title: Life-Cycle Hooks
slug: life-cycle-hooks
---
Define behavior when certain events in the component's life cycle is triggered by providing hook methods
### onInit()
- Triggered when the component is connected to the DOM
- Best for setting up the component
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class ClickableText extends WebComponent {
// gets called when the component is used in an HTML document
onInit() {
this.onclick = () => console.log('>>> click!')
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`
}
}
```
### afterViewInit()
- Triggered after the view is first initialized
```js
class ClickableText extends WebComponent {
// gets called when the component's innerHTML is first filled
afterViewInit() {
const footer = this.querySelector('footer')
// do stuff to footer after view is initialized
}
get template() {
return `<footer>Awesome site &copy; 2023</footer>`
}
}
```
### onDestroy()
- Triggered when the component is disconnected from the DOM
- best for undoing any setup done in `onInit()`
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class ClickableText extends WebComponent {
clickCallback() {
console.log('>>> click!')
}
onInit() {
this.onclick = this.clickCallback
}
onDestroy() {
console.log('>>> removing event listener')
this.removeEventListener('click', this.clickCallback)
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`
}
}
```
### onChanges()
- Triggered when an attribute value changed
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class ClickableText extends WebComponent {
// gets called when an attribute value changes
onChanges(changes) {
const { property, previousValue, currentValue } = changes
console.log('>>> ', { property, previousValue, currentValue })
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`
}
}
```

48
docs/src/content/docs/guides/prop-access.mdx Normal file
View file

@ -0,0 +1,48 @@
---
title: Prop Access
slug: prop-access
---
import { Aside } from '@astrojs/starlight/components'
The `props` property of the `WebComponent` interface is provided for easy read/write access to a camelCase counterpart of _any_ observed attribute.
```js
class HelloWorld extends WebComponent {
static props = {
myProp: 'World',
}
get template() {
return html` <h1>Hello ${this.props.myProp}</h1> `
}
}
```
Assigning a value to the `props.camelCase` counterpart of an observed attribute will trigger an "attribute change" hook.
For example, assigning a value like so:
```
this.props.myName = 'hello'
```
...is like calling the following:
```
this.setAttribute('my-name','hello');
```
Therefore, this will tell the browser that the UI needs a render if the attribute is one of the component's observed attributes we explicitly provided with `static props`;
<Aside type="note">
The `props` property of `WebComponent` works like `HTMLElement.dataset`, except `dataset` is only for attributes prefixed with `data-`. A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-` prefix.
Another advantage over `HTMLElement.dataset` is that `WebComponent.props` can hold primitive types 'number', 'boolean', 'object' and 'string'.
</Aside>
### Alternatives
The current alternatives are using what `HTMLElement` provides out-of-the-box, which are:
1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows.

28
docs/src/content/docs/guides/shadow-dom.md Normal file
View file

@ -0,0 +1,28 @@
---
title: Using the Shadow DOM
slug: shadow-dom
---
Add a static property `shadowRootInit` with object value of type `ShadowRootInit` (see [options on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options)) to opt-in to using shadow dom for the whole component.
Try it now [on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)
Example:
```js
class ShadowElement extends WebComponent {
static shadowRootInit = {
mode: 'open', // can be 'open' or 'closed'
}
get template() {
return html`
<div>
<p>Wow!?</p>
</div>
`
}
}
customElements.define('shadow-element', ShadowElement)
```

90
docs/src/content/docs/guides/styling.md Normal file
View file

@ -0,0 +1,90 @@
---
title: Styling
slug: styling
---
There are two ways we can safely have scoped styles:
1. Using style objects
2. Using the Shadow DOM and constructable stylesheets
It is highly recommended to use the second approach, as with it, browsers can assist more for performance.
## Using style objects
When using the built-in `html` function for tagged templates, a style object of type `Partial<CSSStyleDeclaration>` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration).
Try it now with this [example on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010)
```js
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class StyledElement extends WebComponent {
static props = {
emphasize: false,
type: 'warn',
}
#typeStyles = {
warn: {
backgroundColor: 'yellow',
border: '1px solid orange',
},
error: {
backgroundColor: 'orange',
border: '1px solid red',
},
}
get template() {
return html`
<div
style=${{
...this.#typeStyles[this.props.type],
padding: '1em',
}}
>
<p style=${{ fontStyle: this.props.emphasize && 'italic' }}>Wow!</p>
</div>
`
}
}
customElements.define('styled-elements', StyledElement)
```
## Using the Shadow DOM and Constructable Stylesheets
If you [use the Shadow DOM](/shadow-dom), you can add a `static styles` property of type string which will be added in the `shadowRoot`'s [`adoptedStylesheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets).
Try it now with this [example on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/JojmeEe?editors=1010)
```js
class StyledElement extends WebComponent {
static shadowRootInit = {
mode: 'open',
}
static styles = `
div {
background-color: yellow;
border: 1px solid black;
padding: 1em;
p {
text-decoration: underline;
}
}
`
get template() {
return html`
<div>
<p>Wow!?</p>
</div>
`
}
}
customElements.define('styled-elements', StyledElement)
```

12
docs/src/content/docs/guides/template-vs-render.md Normal file
View file

@ -0,0 +1,12 @@
---
title: template vs render()
slug: template-vs-render
---
This mental model attempts to reduce the cognitive complexity of authoring components:
1. The `template` is a read-only property (initialized with a `get` keyword) that represents _how_ the component view is rendered.
1. There is a `render()` method that triggers a view render.
1. This `render()` method is _automatically_ called under the hood every time an attribute value changed.
1. You can _optionally_ call this `render()` method at any point to trigger a render if you need (eg, if you have private unobserved properties that need to manually trigger a render)
1. Overriding the `render()` function for handling a custom `template` is also possible. Here's an example of using `lit-html`: [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010)

43
docs/src/content/docs/guides/usage.md Normal file
View file

@ -0,0 +1,43 @@
---
title: Usage
slug: usage
---
In your component class:
```js
// HelloWorld.mjs
import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'
class HelloWorld extends WebComponent {
static props = {
myName: 'World',
emotion: 'sad',
}
get template() {
return `
<h1>Hello ${this.props.myName}${this.props.emotion === 'sad' ? '. 😭' : '! 🙌'}</h1>
`
}
}
customElements.define('hello-world', HelloWorld)
```
In your HTML page:
```html
<head>
<script type="module" src="HelloWorld.mjs"></script>
</head>
<body>
<hello-world my-name="Ayo" emotion="sad">
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
</script>
</body>
```

12
docs/src/content/docs/guides/why.md Normal file
View file

@ -0,0 +1,12 @@
---
title: Why use this base class?
slug: 'why'
---
Often times, when simple websites need a quick custom element, the best way is still to create one extending from `HTMLElement`. However, it can quickly reach a point where writing the code from scratch can seem confusing and hard to maintain especially when compared to other projects with more advanced setups.
Also, when coming from frameworks with an easy declarative coding experience (using templates), the default imperative way (e.g., creating instances of elements, manually attaching event handlers, and other DOM manipulations) is a frequent pain point we see.
This project aims to address these with virtually zero tooling required and thin abstractions from vanilla custom element APIs – giving you only the bare minimum code to be productive.
It works on current-day browsers without needing compilers, transpilers, or polyfills.

35
docs/src/content/docs/index.mdx Normal file
View file

@ -0,0 +1,35 @@
---
title: Web Component Base
description: Web components in Easy Mode
template: splash
hero:
tagline: A simple reactivity system for web components
# image:
# file: ../../assets/houston.webp
actions:
- text: Get Started
link: /getting-started
icon: right-arrow
- text: Play on CodePen
link: https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010
icon: external
variant: minimal
---
import { Card, CardGrid } from '@astrojs/starlight/components';
<CardGrid stagger>
<Card title="Reactive." icon="rocket">
A robust API for synchronizing your component's UI and properties
</Card>
<Card title="Tiny." icon="add-document">
~1 kB base class (minified, compressed) with versatile utilities
</Card>
<Card title="Easy." icon="heart">
Sensible life-cycle hooks that you understand and remember
</Card>
<Card title="Familiar." icon="open-book">
Use the built-in JSX-like syntax or bring your own custom templating
</Card>
</CardGrid>

11
docs/src/content/docs/reference/example.md Normal file
View file

@ -0,0 +1,11 @@
---
title: Example Reference
description: A reference page in my new Starlight docs site.
---
Reference pages are ideal for outlining how things work in terse and clear terms.
Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you're documenting.
## Further reading
- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework

5
docs/tsconfig.json Normal file
View file

@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}

0
examples/scoped-styles/index.html → examples/constructed-styles/index.html
View file

30
examples/constructed-styles/index.js Normal file
View file

@ -0,0 +1,30 @@
// @ts-check
import { WebComponent, html } from '../../src/index.js'
class StyledElements extends WebComponent {
static shadowRootInit = {
mode: 'open',
}
static styles = `
div {
background-color: yellow;
border: 1px solid black;
padding: 1em;
p {
text-decoration: underline;
}
}
`
get template() {
return html`
<div>
<p>Wow!?</p>
</div>
`
}
}
customElements.define('styled-elements', StyledElements)

12
examples/style-objects/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<styled-elements type="warn" condition></styled-elements>
</body>
</html>

0
examples/scoped-styles/index.js → examples/style-objects/index.js
View file

2
netlify.toml
View file

@ -1,3 +1,3 @@
[build]
base = "site"
base = "docs"
publish = "dist"

6
package.json
View file

@ -1,6 +1,6 @@
{
"name": "web-component-base",
"version": "4.0.1",
"version": "4.1.0",
"description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
"type": "module",
"exports": {
@ -31,7 +31,7 @@
"test": "vitest --run",
"test:watch": "vitest",
"demo": "npx simple-server .",
"site": "pnpm --filter site start",
"docs": "pnpm -F docs start",
"build": "pnpm run clean && tsc && pnpm run copy:source",
"size-limit": "pnpm run build && size-limit",
"clean": "rm -rf dist",
@ -78,7 +78,7 @@
"size-limit": [
{
"path": "./dist/WebComponent.js",
"limit": "1.1 KB"
"limit": "1.2 KB"
},
{
"path": "./dist/html.js",

3853
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

2
pnpm-workspace.yaml
View file

@ -1,3 +1,3 @@
packages:
# include packages in subfolders (e.g. apps/ and packages/)
- 'site/**'
- 'docs/'

5
site/.eslintignore
View file

@ -1,5 +0,0 @@
dist
node-modules
.output
public

10
site/.gitignore vendored
View file

@ -1,10 +0,0 @@
dist
node_modules
*.log*
.nitro
.cache
.output
.env
*~
*swp
*swo

1
site/.prettierignore
View file

@ -1 +0,0 @@
*

67
site/README.md
View file

@ -1,67 +0,0 @@
# McFly Starter Project
## Background
This project was generated from the basic template for **McFly** -- a no-framework framework that assists in leveraging the web platform.
![template-basic](https://raw.githubusercontent.com/ayoayco/McFly/main/assets/template-basic.png)
It contains example files to get you started using vanilla web technologies in a modern way. See the [Special Directories](#special-directories) section for more information.
## Features
The time has come for vanilla Web tech. 🎉
✅ Create web apps with vanilla custom elements<br>
✅ Write real .HTML files<br>
✅ Have no frameworks or reactivity libraries on the browser<br>
✅ Use server-side rendering<br>
✅ Deploy anywhere<br>
## Special directories
**1. `./src/pages/`**
- file-based routing for `.html` files
- directly use custom elements & static fragments (no imports or registry maintenance needed)
- use `<script server:setup>` to define logic that runs on the server, which then gets stripped away
**2. `./src/components/`**
- custom element constructor files (only `.js` files for now)
- all components are automatically registered using their file names; a `hello-world.js` component can be used as `<hello-world>`
- static `.html` fragments; a `my-header.html` fragment can be directly used as `<my-header>`
**3. `./routes/api/`**
- file-based routing for REST API endpoints
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
- TypeScript or JavaScript welcome!
## McFly config
To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
```js
import defineConfig from './packages/define-config'
export default defineConfig({
components: 'js',
})
```
## Commands
The following commands are available to you on this project. Add more, or modify them as needed in your `./package.json` file.
| Command | Action |
| --------------- | ---------------------------------------------------- |
| npm start | Start the development server |
| npm run prepare | Prepare the workspace |
| npm run build | Locally generate the app's build files to `./output` |
| npm run preview | Preview the built app locally |
---
_Just keep building_<br />
_A project by [Ayo Ayco](https://ayco.io)_

7
site/mcfly.config.mjs
View file

@ -1,7 +0,0 @@
import { defineMcFlyConfig } from '@mcflyjs/config'
export default defineMcFlyConfig({
components: 'js',
nitro: {
preset: 'netlify'
}
})

21
site/package.json
View file

@ -1,21 +0,0 @@
{
"name": "site",
"description": "McFly starter project; see more on https://ayco.io/gh/McFly",
"scripts": {
"start": "mcfly serve",
"prepare": "mcfly prepare",
"dev": "mcfly serve",
"build": "mcfly build",
"preview": "node .output/server/index.mjs",
"build:preview": "pnpm run build && pnpm run preview",
"deploy": "netlify deploy --site=$NETLIFY_SITE_ID --dir=dist --prod"
},
"dependencies": {
"@mcflyjs/config": "^0.2.7",
"@mcflyjs/core": "^0.8.6"
},
"version": "0.0.1",
"main": "index.js",
"author": "Ayo Ayco",
"license": "MIT"
}

31
site/src/components/awesome-header.html
View file

@ -1,31 +0,0 @@
<header class="my-header">
<h1><slot /></h1>
<slot name="description" />
</header>
<style>
.my-header {
border-radius: 5px;
background: linear-gradient(45deg, var(--color-primary), var(--color-fade));
color: white;
margin: 1em 0;
padding: 1.5em;
& a {
color: white;
}
}
@media only screen and (max-device-width: 400px) {
.my-header {
& h1 {
font-size: 1.5em;
line-clamp: 1;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
</style>

47
site/src/components/call-to-action.html
View file

@ -1,47 +0,0 @@
<div class="call-to-action">
<a id="primary" href="https://ayco.io/sh/wcb#readme">
Learn More
</a>
<a
href="https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010"
target="_blank"
>Playground &rarr;</a
>
</div>
<style>
.call-to-action {
display: flex;
gap: 1em;
justify-content: center;
margin: 1em 0;
width: 100%;
& a {
border: 3px solid var(--color-fade);
padding: 0.5em 0.75em;
border-radius: 5px;
text-align: center;
text-decoration: none;
&:hover {
box-shadow: 0 0 0 3px var(--color-fade);
}
&#primary {
background: #3054bf;
color: white;
min-width: 35%;
}
}
}
@media only screen and (max-device-width: 430px) {
.call-to-action {
flex-direction: column;
& a {
width: 100% !important;
}
}
}
</style>

41
site/src/components/code-block.js
View file

@ -1,41 +0,0 @@
class CodeBlockComponent extends HTMLElement {
connectedCallback() {
const trimmed = this.innerHTML.trim()
const lang = this.getAttribute('language')
const inline = this.getAttribute('inline') !== null
this.innerHTML = `
<pre><code id="code">${trimmed}</code></pre>
`
/**
* @type {HTMLPreElement}
*/
const pre = this.querySelector('pre')
if (lang) {
pre.className = `language-${lang}`
}
/**
* @type {Partial<CSSStyleDeclaration>}
*/
const style = {
background: '#f5f2f0',
padding: '1em',
margin: '1em 0',
fontSize: 'large',
overflow: 'auto',
borderRadius: '5px',
}
if (inline) {
style.display = 'inline'
style.padding = '0.25em 0.3em'
}
Object.keys(style).forEach((rule) => {
pre.style[rule] = style[rule]
})
}
}

85
site/src/components/feature-set.js
View file

@ -1,85 +0,0 @@
class FeatureSet extends WebComponent {
#features = [
{
icon: '️🔄',
title: 'Reactive.',
description:
"A robust API for synchronizing your component's UI and properties",
},
{
icon: '️🤏',
title: 'Tiny.',
description:
'~1 kB base class (minified, compressed) with versatile utilities',
},
{
icon: '😌',
title: 'Easy.',
description: 'Sensible life-cycle hooks that you understand and remember',
url: '',
},
{
icon: '️💡',
title: 'Familiar.',
description:
'Use the built-in JSX-like syntax or bring your own custom templating',
url: 'https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010',
},
]
/**
* @type {Array<HTMLArticleElement>}
*/
get articleEl() {
return this.querySelectorAll('article')
}
afterViewInit() {
/**
* @type {Partial<CSSStyleDeclaration>}
*/
const articleStyles = {
border: '1px solid #ccc',
borderRadius: '5px',
padding: '30px',
margin: '0 auto 1em',
boxShadow: '5px 25px 10px -25px rgba(34, 34, 34, 0.15)',
}
Object.keys(articleStyles).forEach((rule) =>
this.articleEl.forEach((el) => (el.style[rule] = articleStyles[rule]))
)
/**
* @type {Partial<CSSStyleDeclaration>}
*/
const ftrStyles = {
maxWidth: '800px',
margin: '0 auto',
padding: '30px',
gap: '1em',
}
const featureWrapper = this.querySelector('.feature-wrapper')
Object.keys(ftrStyles).forEach(
(rule) => (featureWrapper.style[rule] = ftrStyles[rule])
)
}
get template() {
return html`
<div class="feature-wrapper">
${this.#features.map(
(feature) => html`
<article>
<h3 style="margin-bottom: 1em" class="feature-title">
<span>${feature.icon}</span> ${feature.title}
</h3>
<p style="margin:0" class="feature-description">
${feature.description}
</p>
</article>
`
)}
</div>
`
}
}

10
site/src/components/my-counter.js
View file

@ -1,10 +0,0 @@
class Counter extends WebComponent {
static props = {
count: 0,
}
get template() {
return html`<button onClick=${() => ++this.props.count}>
${this.props.count}
</button>`
}
}

3
site/src/components/my-footer.html
View file

@ -1,3 +0,0 @@
<footer style="text-align: center; font-style: italic; padding: 0.5em 1em 1em">
<slot />
</footer>

53
site/src/components/my-head.html
View file

@ -1,53 +0,0 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/reset.css" />
<meta name="generator" content="McFly v0.0.1" />
<meta name="theme-color" content="#3054bf" />
<meta
name="description"
content="🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨"
/>
<meta name="author" content="Ayo Ayco" />
<meta name="origin" content="https://mc-fly.vercel.app/" />
<!-- Open Graph data -->
<meta property="og:site_name" content="WebComponent.io" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="WebComponent.io: Web Components in Easy Mode"
/>
<meta
property="og:description"
content="🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨"
/>
<style>
:root {
--color-primary: #3054bf;
--color-fade: #416fff;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 1em;
}
body > * {
padding: 0.5em 1em;
}
h1 {
padding: 0;
margin: 0;
}
h2,
p,
ul,
ol {
margin-bottom: 1em;
}
</style>
<slot />
</head>

22
site/src/components/vanilla-hello-world.js
View file

@ -1,22 +0,0 @@
class HelloWorld extends HTMLElement {
static get observedAttributes() {
return ['my-name']
}
connectedCallback() {
let count = 0
const currentName = this.getAttribute('my-name')
if (!currentName) {
this.setAttribute('my-name', 'World')
}
this.onclick = () => this.setAttribute('my-name', `Clicked ${++count}x`)
}
attributeChangedCallback(property, previousValue, currentValue) {
if (property === 'my-name' && previousValue !== currentValue) {
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`
}
}
}

12
site/src/components/warning-block.html
View file

@ -1,12 +0,0 @@
<quote
style="
background-color: beige;
border-radius: 5px;
border: 1px solid gray;
padding: 1em;
margin: 1em 0;
display: block;
"
>
<span id="icon">⚠️</span> <slot />
</quote>

152
site/src/pages/index.html
View file

@ -1,152 +0,0 @@
<!doctype html>
<html lang="en">
<!--
Hello! This page is an example McFly page.
See more on https://ayco.io/gh/McFly
-->
<my-head>
<title>WebComponent.io: Web Components in Easy Mode</title>
<link rel="stylesheet" href="prism.css" />
<script src="prism.js" defer></script>
<script server:setup>
const project = {
name: 'WebComponent.io',
description: 'A simple reactivity system for web components',
};
const author = {
name: 'Ayo Ayco',
url: 'https://ayco.io',
year: '2023',
};
</script>
<style>
@counter-style publish-icons {
system: cyclic;
symbols: '️✅';
suffix: ' ';
}
main {
font-size: large;
& section ul {
list-style: publish-icons;
& li {
margin-bottom: 0.5em;
}
}
& section.jumbo {
& .hero-statement {
font-size: 2em;
text-align: center;
}
}
& code-block {
overflow: auto;
}
}
</style>
</my-head>
<body>
<awesome-header>
<span>{{ project.name }}</span>
<span slot="description">{{ project.description }}</span>
</awesome-header>
<main>
<section class="jumbo">
<p class="hero-statement">
Build lightweight custom elements that browsers &
<em>you</em> understand.
</p>
<call-to-action></call-to-action>
<div>
<feature-set>
<h2>Features</h2>
<ul>
<li>
A robust API for synchronizing your component's UI and
properties
</li>
<li>
~1 kB base class (minified, compressed) with versatile utilities
</li>
<li>
Sensible life-cycle hooks that you understand and remember
</li>
<li>
Use the built-in JSX-like syntax or bring your own custom
templating
</li>
</ul>
</feature-set>
</div>
</section>
<section>
<h2>Why use this base class?</h2>
<p>
Often times, when simple websites need a quick
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements"
target="_blank">custom element</a>, the best way is still to create one extending from
<code-block inline>HTMLElement</code-block>. However, it can quickly
reach a point where writing the code from scratch can seem confusing
and hard to maintain especially when compared to other projects with
more advanced setups.
</p>
<p>
Also, when coming from frameworks with an easy declarative coding
experience (using templates), the default imperative way (e.g.,
creating instances of elements, manually attaching event handlers, and
other DOM manipulations) is a frequent pain point we see.
</p>
<p>
This project aims to address these with virtually zero tooling
required and thin abstractions from vanilla custom element APIs –
giving you only the bare minimum code to be productive.
</p>
<p>
It works on current-day browsers without needing compilers,
transpilers, or polyfills.
</p>
<p>
Here's an interactive custom element:
<my-counter></my-counter>
</p>
<code-block language="js">
<pre>
import { WebComponent, html } from &quot;https://esm.sh/web-component-base&quot;;
export class Counter extends WebComponent {
static props = {
count: 0
}
onInit() {
// do something...
}
get template() {
return html`
&lt;button onClick=${() => ++this.props.count}&gt;
${this.props.count}
&lt;/button&gt;
`;
}
}
customElements.define(&quot;my-counter&quot;, Counter);</pre>
</code-block>
</section>
</main>
<my-footer>
<small>
<a href="https://ayco.io/sh/wcb/tree/main/site">Website</a>
built with <a href="https://mcfly.js.org">McFly</a>.<br />
Copyright &copy; {{author.year}}
<a href="{{ author.url }}">{{ author.name }}</a>.
</small>
</my-footer>
</body>
</html>

BIN
site/src/public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

118
site/src/public/prism.css
View file

@ -1,118 +0,0 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
code[class*='language-'],
pre[class*='language-'] {
color: #000;
background: 0 0;
text-shadow: 0 1px #fff;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
code[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
pre[class*='language-']::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
code[class*='language-'] ::selection,
code[class*='language-']::selection,
pre[class*='language-'] ::selection,
pre[class*='language-']::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f2f0;
}
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #708090;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: 0.7;
}
.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: #905;
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #690;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.class-name,
.token.function {
color: #dd4a68;
}
.token.important,
.token.regex,
.token.variable {
color: #e90;
}
.token.bold,
.token.important {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

753
site/src/public/prism.js
View file

@ -1,753 +0,0 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
var _self =
'undefined' != typeof window
? window
: 'undefined' != typeof WorkerGlobalScope &&
self instanceof WorkerGlobalScope
? self
: {},
Prism = (function (e) {
var n = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,
t = 0,
r = {},
a = {
manual: e.Prism && e.Prism.manual,
disableWorkerMessageHandler:
e.Prism && e.Prism.disableWorkerMessageHandler,
util: {
encode: function e(n) {
return n instanceof i
? new i(n.type, e(n.content), n.alias)
: Array.isArray(n)
? n.map(e)
: n
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/\u00a0/g, ' ')
},
type: function (e) {
return Object.prototype.toString.call(e).slice(8, -1)
},
objId: function (e) {
return (
e.__id || Object.defineProperty(e, '__id', { value: ++t }), e.__id
)
},
clone: function e(n, t) {
var r, i
switch (((t = t || {}), a.util.type(n))) {
case 'Object':
if (((i = a.util.objId(n)), t[i])) return t[i]
for (var l in ((r = {}), (t[i] = r), n))
n.hasOwnProperty(l) && (r[l] = e(n[l], t))
return r
case 'Array':
return (
(i = a.util.objId(n)),
t[i]
? t[i]
: ((r = []),
(t[i] = r),
n.forEach(function (n, a) {
r[a] = e(n, t)
}),
r)
)
default:
return n
}
},
getLanguage: function (e) {
for (; e; ) {
var t = n.exec(e.className)
if (t) return t[1].toLowerCase()
e = e.parentElement
}
return 'none'
},
setLanguage: function (e, t) {
;(e.className = e.className.replace(RegExp(n, 'gi'), '')),
e.classList.add('language-' + t)
},
currentScript: function () {
if ('undefined' == typeof document) return null
if ('currentScript' in document) return document.currentScript
try {
throw new Error()
} catch (r) {
var e = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack) ||
[])[1]
if (e) {
var n = document.getElementsByTagName('script')
for (var t in n) if (n[t].src == e) return n[t]
}
return null
}
},
isActive: function (e, n, t) {
for (var r = 'no-' + n; e; ) {
var a = e.classList
if (a.contains(n)) return !0
if (a.contains(r)) return !1
e = e.parentElement
}
return !!t
},
},
languages: {
plain: r,
plaintext: r,
text: r,
txt: r,
extend: function (e, n) {
var t = a.util.clone(a.languages[e])
for (var r in n) t[r] = n[r]
return t
},
insertBefore: function (e, n, t, r) {
var i = (r = r || a.languages)[e],
l = {}
for (var o in i)
if (i.hasOwnProperty(o)) {
if (o == n)
for (var s in t) t.hasOwnProperty(s) && (l[s] = t[s])
t.hasOwnProperty(o) || (l[o] = i[o])
}
var u = r[e]
return (
(r[e] = l),
a.languages.DFS(a.languages, function (n, t) {
t === u && n != e && (this[n] = l)
}),
l
)
},
DFS: function e(n, t, r, i) {
i = i || {}
var l = a.util.objId
for (var o in n)
if (n.hasOwnProperty(o)) {
t.call(n, o, n[o], r || o)
var s = n[o],
u = a.util.type(s)
'Object' !== u || i[l(s)]
? 'Array' !== u || i[l(s)] || ((i[l(s)] = !0), e(s, t, o, i))
: ((i[l(s)] = !0), e(s, t, null, i))
}
},
},
plugins: {},
highlightAll: function (e, n) {
a.highlightAllUnder(document, e, n)
},
highlightAllUnder: function (e, n, t) {
var r = {
callback: t,
container: e,
selector:
'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code',
}
a.hooks.run('before-highlightall', r),
(r.elements = Array.prototype.slice.apply(
r.container.querySelectorAll(r.selector)
)),
a.hooks.run('before-all-elements-highlight', r)
for (var i, l = 0; (i = r.elements[l++]); )
a.highlightElement(i, !0 === n, r.callback)
},
highlightElement: function (n, t, r) {
var i = a.util.getLanguage(n),
l = a.languages[i]
a.util.setLanguage(n, i)
var o = n.parentElement
o && 'pre' === o.nodeName.toLowerCase() && a.util.setLanguage(o, i)
var s = { element: n, language: i, grammar: l, code: n.textContent }
function u(e) {
;(s.highlightedCode = e),
a.hooks.run('before-insert', s),
(s.element.innerHTML = s.highlightedCode),
a.hooks.run('after-highlight', s),
a.hooks.run('complete', s),
r && r.call(s.element)
}
if (
(a.hooks.run('before-sanity-check', s),
(o = s.element.parentElement) &&
'pre' === o.nodeName.toLowerCase() &&
!o.hasAttribute('tabindex') &&
o.setAttribute('tabindex', '0'),
!s.code)
)
return a.hooks.run('complete', s), void (r && r.call(s.element))
if ((a.hooks.run('before-highlight', s), s.grammar))
if (t && e.Worker) {
var c = new Worker(a.filename)
;(c.onmessage = function (e) {
u(e.data)
}),
c.postMessage(
JSON.stringify({
language: s.language,
code: s.code,
immediateClose: !0,
})
)
} else u(a.highlight(s.code, s.grammar, s.language))
else u(a.util.encode(s.code))
},
highlight: function (e, n, t) {
var r = { code: e, grammar: n, language: t }
if ((a.hooks.run('before-tokenize', r), !r.grammar))
throw new Error('The language "' + r.language + '" has no grammar.')
return (
(r.tokens = a.tokenize(r.code, r.grammar)),
a.hooks.run('after-tokenize', r),
i.stringify(a.util.encode(r.tokens), r.language)
)
},
tokenize: function (e, n) {
var t = n.rest
if (t) {
for (var r in t) n[r] = t[r]
delete n.rest
}
var a = new s()
return (
u(a, a.head, e),
o(e, a, n, a.head, 0),
(function (e) {
for (var n = [], t = e.head.next; t !== e.tail; )
n.push(t.value), (t = t.next)
return n
})(a)
)
},
hooks: {
all: {},
add: function (e, n) {
var t = a.hooks.all
;(t[e] = t[e] || []), t[e].push(n)
},
run: function (e, n) {
var t = a.hooks.all[e]
if (t && t.length) for (var r, i = 0; (r = t[i++]); ) r(n)
},
},
Token: i,
}
function i(e, n, t, r) {
;(this.type = e),
(this.content = n),
(this.alias = t),
(this.length = 0 | (r || '').length)
}
function l(e, n, t, r) {
e.lastIndex = n
var a = e.exec(t)
if (a && r && a[1]) {
var i = a[1].length
;(a.index += i), (a[0] = a[0].slice(i))
}
return a
}
function o(e, n, t, r, s, g) {
for (var f in t)
if (t.hasOwnProperty(f) && t[f]) {
var h = t[f]
h = Array.isArray(h) ? h : [h]
for (var d = 0; d < h.length; ++d) {
if (g && g.cause == f + ',' + d) return
var v = h[d],
p = v.inside,
m = !!v.lookbehind,
y = !!v.greedy,
k = v.alias
if (y && !v.pattern.global) {
var x = v.pattern.toString().match(/[imsuy]*$/)[0]
v.pattern = RegExp(v.pattern.source, x + 'g')
}
for (
var b = v.pattern || v, w = r.next, A = s;
w !== n.tail && !(g && A >= g.reach);
A += w.value.length, w = w.next
) {
var E = w.value
if (n.length > e.length) return
if (!(E instanceof i)) {
var P,
L = 1
if (y) {
if (!(P = l(b, A, e, m)) || P.index >= e.length) break
var S = P.index,
O = P.index + P[0].length,
j = A
for (j += w.value.length; S >= j; )
j += (w = w.next).value.length
if (((A = j -= w.value.length), w.value instanceof i))
continue
for (
var C = w;
C !== n.tail && (j < O || 'string' == typeof C.value);
C = C.next
)
L++, (j += C.value.length)
L--, (E = e.slice(A, j)), (P.index -= A)
} else if (!(P = l(b, 0, E, m))) continue
S = P.index
var N = P[0],
_ = E.slice(0, S),
M = E.slice(S + N.length),
W = A + E.length
g && W > g.reach && (g.reach = W)
var z = w.prev
if (
(_ && ((z = u(n, z, _)), (A += _.length)),
c(n, z, L),
(w = u(n, z, new i(f, p ? a.tokenize(N, p) : N, k, N))),
M && u(n, w, M),
L > 1)
) {
var I = { cause: f + ',' + d, reach: W }
o(e, n, t, w.prev, A, I),
g && I.reach > g.reach && (g.reach = I.reach)
}
}
}
}
}
}
function s() {
var e = { value: null, prev: null, next: null },
n = { value: null, prev: e, next: null }
;(e.next = n), (this.head = e), (this.tail = n), (this.length = 0)
}
function u(e, n, t) {
var r = n.next,
a = { value: t, prev: n, next: r }
return (n.next = a), (r.prev = a), e.length++, a
}
function c(e, n, t) {
for (var r = n.next, a = 0; a < t && r !== e.tail; a++) r = r.next
;(n.next = r), (r.prev = n), (e.length -= a)
}
if (
((e.Prism = a),
(i.stringify = function e(n, t) {
if ('string' == typeof n) return n
if (Array.isArray(n)) {
var r = ''
return (
n.forEach(function (n) {
r += e(n, t)
}),
r
)
}
var i = {
type: n.type,
content: e(n.content, t),
tag: 'span',
classes: ['token', n.type],
attributes: {},
language: t,
},
l = n.alias
l &&
(Array.isArray(l)
? Array.prototype.push.apply(i.classes, l)
: i.classes.push(l)),
a.hooks.run('wrap', i)
var o = ''
for (var s in i.attributes)
o +=
' ' +
s +
'="' +
(i.attributes[s] || '').replace(/"/g, '&quot;') +
'"'
return (
'<' +
i.tag +
' class="' +
i.classes.join(' ') +
'"' +
o +
'>' +
i.content +
'</' +
i.tag +
'>'
)
}),
!e.document)
)
return e.addEventListener
? (a.disableWorkerMessageHandler ||
e.addEventListener(
'message',
function (n) {
var t = JSON.parse(n.data),
r = t.language,
i = t.code,
l = t.immediateClose
e.postMessage(a.highlight(i, a.languages[r], r)), l && e.close()
},
!1
),
a)
: a
var g = a.util.currentScript()
function f() {
a.manual || a.highlightAll()
}
if (
(g &&
((a.filename = g.src),
g.hasAttribute('data-manual') && (a.manual = !0)),
!a.manual)
) {
var h = document.readyState
'loading' === h || ('interactive' === h && g && g.defer)
? document.addEventListener('DOMContentLoaded', f)
: window.requestAnimationFrame
? window.requestAnimationFrame(f)
: window.setTimeout(f, 16)
}
return a
})(_self)
'undefined' != typeof module && module.exports && (module.exports = Prism),
'undefined' != typeof global && (global.Prism = Prism)
;(Prism.languages.markup = {
comment: { pattern: /<!--(?:(?!<!--)[\s\S])*?-->/, greedy: !0 },
prolog: { pattern: /<\?[\s\S]+?\?>/, greedy: !0 },
doctype: {
pattern:
/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
greedy: !0,
inside: {
'internal-subset': {
pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
lookbehind: !0,
greedy: !0,
inside: null,
},
string: { pattern: /"[^"]*"|'[^']*'/, greedy: !0 },
punctuation: /^<!|>$|[[\]]/,
'doctype-tag': /^DOCTYPE/i,
name: /[^\s<>'"]+/,
},
},
cdata: { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, greedy: !0 },
tag: {
pattern:
/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
greedy: !0,
inside: {
tag: {
pattern: /^<\/?[^\s>\/]+/,
inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ },
},
'special-attr': [],
'attr-value': {
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
inside: {
punctuation: [
{ pattern: /^=/, alias: 'attr-equals' },
{ pattern: /^(\s*)["']|["']$/, lookbehind: !0 },
],
},
},
punctuation: /\/?>/,
'attr-name': {
pattern: /[^\s>\/]+/,
inside: { namespace: /^[^\s>\/:]+:/ },
},
},
},
entity: [
{ pattern: /&[\da-z]{1,8};/i, alias: 'named-entity' },
/&#x?[\da-f]{1,8};/i,
],
}),
(Prism.languages.markup.tag.inside['attr-value'].inside.entity =
Prism.languages.markup.entity),
(Prism.languages.markup.doctype.inside['internal-subset'].inside =
Prism.languages.markup),
Prism.hooks.add('wrap', function (a) {
'entity' === a.type &&
(a.attributes.title = a.content.replace(/&amp;/, '&'))
}),
Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
value: function (a, e) {
var s = {}
;(s['language-' + e] = {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
lookbehind: !0,
inside: Prism.languages[e],
}),
(s.cdata = /^<!\[CDATA\[|\]\]>$/i)
var t = {
'included-cdata': { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, inside: s },
}
t['language-' + e] = { pattern: /[\s\S]+/, inside: Prism.languages[e] }
var n = {}
;(n[a] = {
pattern: RegExp(
'(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)'.replace(
/__/g,
function () {
return a
}
),
'i'
),
lookbehind: !0,
greedy: !0,
inside: t,
}),
Prism.languages.insertBefore('markup', 'cdata', n)
},
}),
Object.defineProperty(Prism.languages.markup.tag, 'addAttribute', {
value: function (a, e) {
Prism.languages.markup.tag.inside['special-attr'].push({
pattern: RegExp(
'(^|["\'\\s])(?:' +
a +
')\\s*=\\s*(?:"[^"]*"|\'[^\']*\'|[^\\s\'">=]+(?=[\\s>]))',
'i'
),
lookbehind: !0,
inside: {
'attr-name': /^[^\s=]+/,
'attr-value': {
pattern: /=[\s\S]+/,
inside: {
value: {
pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
lookbehind: !0,
alias: [e, 'language-' + e],
inside: Prism.languages[e],
},
punctuation: [{ pattern: /^=/, alias: 'attr-equals' }, /"|'/],
},
},
},
})
},
}),
(Prism.languages.html = Prism.languages.markup),
(Prism.languages.mathml = Prism.languages.markup),
(Prism.languages.svg = Prism.languages.markup),
(Prism.languages.xml = Prism.languages.extend('markup', {})),
(Prism.languages.ssml = Prism.languages.xml),
(Prism.languages.atom = Prism.languages.xml),
(Prism.languages.rss = Prism.languages.xml)
!(function (s) {
var e =
/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/
;(s.languages.css = {
comment: /\/\*[\s\S]*?\*\//,
atrule: {
pattern: RegExp(
'@[\\w-](?:[^;{\\s"\']|\\s+(?!\\s)|' + e.source + ')*?(?:;|(?=\\s*\\{))'
),
inside: {
rule: /^@[\w-]+/,
'selector-function-argument': {
pattern:
/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
lookbehind: !0,
alias: 'selector',
},
keyword: {
pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
lookbehind: !0,
},
},
},
url: {
pattern: RegExp(
'\\burl\\((?:' + e.source + '|(?:[^\\\\\r\n()"\']|\\\\[^])*)\\)',
'i'
),
greedy: !0,
inside: {
function: /^url/i,
punctuation: /^\(|\)$/,
string: { pattern: RegExp('^' + e.source + '$'), alias: 'url' },
},
},
selector: {
pattern: RegExp(
'(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|' +
e.source +
')*(?=\\s*\\{)'
),
lookbehind: !0,
},
string: { pattern: e, greedy: !0 },
property: {
pattern:
/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
lookbehind: !0,
},
important: /!important\b/i,
function: { pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i, lookbehind: !0 },
punctuation: /[(){};:,]/,
}),
(s.languages.css.atrule.inside.rest = s.languages.css)
var t = s.languages.markup
t && (t.tag.addInlined('style', 'css'), t.tag.addAttribute('style', 'css'))
})(Prism)
Prism.languages.clike = {
comment: [
{ pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: !0, greedy: !0 },
{ pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 },
],
string: {
pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: !0,
},
'class-name': {
pattern:
/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
lookbehind: !0,
inside: { punctuation: /[.\\]/ },
},
keyword:
/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
boolean: /\b(?:false|true)\b/,
function: /\b\w+(?=\()/,
number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
punctuation: /[{}[\];(),.:]/,
}
;(Prism.languages.javascript = Prism.languages.extend('clike', {
'class-name': [
Prism.languages.clike['class-name'],
{
pattern:
/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
lookbehind: !0,
},
],
keyword: [
{ pattern: /((?:^|\})\s*)catch\b/, lookbehind: !0 },
{
pattern:
/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
lookbehind: !0,
},
],
function:
/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
number: {
pattern: RegExp(
'(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])'
),
lookbehind: !0,
},
operator:
/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
})),
(Prism.languages.javascript['class-name'][0].pattern =
/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/),
Prism.languages.insertBefore('javascript', 'keyword', {
regex: {
pattern: RegExp(
'((?:^|[^$\\w\\xA0-\\uFFFF."\'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))'
),
lookbehind: !0,
greedy: !0,
inside: {
'regex-source': {
pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
lookbehind: !0,
alias: 'language-regex',
inside: Prism.languages.regex,
},
'regex-delimiter': /^\/|\/$/,
'regex-flags': /^[a-z]+$/,
},
},
'function-variable': {
pattern:
/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
alias: 'function',
},
parameter: [
{
pattern:
/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
lookbehind: !0,
inside: Prism.languages.javascript,
},
{
pattern:
/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
lookbehind: !0,
inside: Prism.languages.javascript,
},
{
pattern:
/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
lookbehind: !0,
inside: Prism.languages.javascript,
},
{
pattern:
/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
lookbehind: !0,
inside: Prism.languages.javascript,
},
],
constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/,
}),
Prism.languages.insertBefore('javascript', 'string', {
hashbang: { pattern: /^#!.*/, greedy: !0, alias: 'comment' },
'template-string': {
pattern:
/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
greedy: !0,
inside: {
'template-punctuation': { pattern: /^`|`$/, alias: 'string' },
interpolation: {
pattern:
/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
lookbehind: !0,
inside: {
'interpolation-punctuation': {
pattern: /^\$\{|\}$/,
alias: 'punctuation',
},
rest: Prism.languages.javascript,
},
},
string: /[\s\S]+/,
},
},
'string-property': {
pattern:
/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
lookbehind: !0,
greedy: !0,
alias: 'property',
},
}),
Prism.languages.insertBefore('javascript', 'operator', {
'literal-property': {
pattern:
/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
lookbehind: !0,
alias: 'property',
},
}),
Prism.languages.markup &&
(Prism.languages.markup.tag.addInlined('script', 'javascript'),
Prism.languages.markup.tag.addAttribute(
'on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)',
'javascript'
)),
(Prism.languages.js = Prism.languages.javascript)

76
site/src/public/reset.css
View file

@ -1,76 +0,0 @@
/**
THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
👉 https://www.joshwcomeau.com/css/custom-css-reset/
**/
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
html,
body {
height: 100%;
}
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg,
iframe {
display: block;
max-width: 100%;
margin: 0 auto;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}

2
site/src/public/robots.txt
View file

@ -1,2 +0,0 @@
User-agent: *
Disallow:

3
site/tsconfig.json
View file

@ -1,3 +0,0 @@
{
"extends": "./.nitro/types/tsconfig.json"
}

29
src/WebComponent.js
View file

@ -28,6 +28,9 @@ export class WebComponent extends HTMLElement {
*/
static props
// TODO: support array of styles
static styles
/**
* Read-only string property that represents how the component will be rendered
* @returns {string | any}
@ -182,7 +185,15 @@ export class WebComponent extends HTMLElement {
// TODO: smart diffing
if (JSON.stringify(this.#prevDOM) !== JSON.stringify(tree)) {
this.#applyStyles()
/**
* create element
* - resolve prop values
* - attach event listeners
*/
const el = createElement(tree)
if (el) {
if (Array.isArray(el)) this.#host.replaceChildren(...el)
else this.#host.replaceChildren(el)
@ -191,4 +202,22 @@ export class WebComponent extends HTMLElement {
}
}
}
#applyStyles() {
if (this.constructor.styles !== undefined)
try {
const styleObj = new CSSStyleSheet()
styleObj.replaceSync(this.constructor.styles)
console.log(this.constructor.styles, this.constructor.props)
this.#host.adoptedStyleSheets = [
...this.#host.adoptedStyleSheets,
styleObj,
]
} catch (e) {
console.error(
'ERR: Constructable stylesheets are only supported in shadow roots',
e
)
}
}
}