152 lines
No EOL
4.1 KiB
HTML
152 lines
No EOL
4.1 KiB
HTML
<!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 "https://esm.sh/web-component-base";
|
||
|
||
export class Counter extends WebComponent {
|
||
static props = {
|
||
count: 0
|
||
}
|
||
onInit() {
|
||
// do something...
|
||
}
|
||
get template() {
|
||
return html`
|
||
<button onClick=${() => ++this.props.count}>
|
||
${this.props.count}
|
||
</button>
|
||
`;
|
||
}
|
||
}
|
||
|
||
customElements.define("my-counter", 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 © {{author.year}}
|
||
<a href="{{ author.url }}">{{ author.name }}</a>.
|
||
</small>
|
||
</my-footer>
|
||
</body>
|
||
|
||
</html> |