145 lines
4.2 KiB
HTML
145 lines
4.2 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: Write 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",
|
|
};
|
|
</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;
|
|
}
|
|
}
|
|
& hr {
|
|
margin: 2em 0;
|
|
}
|
|
|
|
& section p:not(blockquote *):first-of-type::first-letter {
|
|
font-weight: bold;
|
|
font-size: 2rem;
|
|
line-height: 1rem;
|
|
float: left;
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
</style>
|
|
</my-head>
|
|
<body>
|
|
<awesome-header>
|
|
<span>{{ project.name }}</span>
|
|
<span slot="description">{{ project.description }}</span>
|
|
</awesome-header>
|
|
<main>
|
|
<section>
|
|
<p>
|
|
Get the easy authoring experience you have come to love from popular
|
|
JS frameworks -- with minimal tooling and very thin abstraction over
|
|
the vanilla web platform.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
A robust <code-block inline>props</code-block> API that synchronizes
|
|
your components' property values and HTML attributes
|
|
</li>
|
|
<li>Sensible life-cycle hooks that you understand and remember</li>
|
|
<li>
|
|
A minimal <code-block inline>html</code-block> function for tagged
|
|
templates powered by Preact's tiny (450 Bytes)
|
|
<a href="http://github.com/developit/htm" target="_blank"
|
|
>htm/mini</a
|
|
>
|
|
</li>
|
|
<li>
|
|
Attach "side effects" that gets triggered on property value changes
|
|
with <code-block inline>attachEffect</code-block> (<a
|
|
href="https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1011"
|
|
target="_blank"
|
|
>example</a
|
|
>)
|
|
</li>
|
|
</ul>
|
|
<call-to-action></call-to-action>
|
|
</section>
|
|
<hr />
|
|
<section>
|
|
<p>Why use this base class?</p>
|
|
<p>
|
|
Writing Web Components from the vanilla
|
|
<code-block inline>HTMLElement</code-block> can seem confusing and
|
|
hard to maintain especially when coming from JS frameworks; and other
|
|
projects will recommend complex setups before you can even get
|
|
started...
|
|
</p>
|
|
<p>
|
|
This project aims to ease this with virtually zero need for advanced
|
|
tooling and working closest to vanilla custom element APIs. 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://unpkg.com/web-component-base@2.0.0/index.js";
|
|
|
|
export class Counter extends WebComponent {
|
|
static props = {
|
|
count: 0
|
|
}
|
|
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>
|
|
<span
|
|
>This site is built with
|
|
<a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework
|
|
framework; </span
|
|
><br />
|
|
<span
|
|
>✨ Star on
|
|
<a href="https://github.com/ayoayco/web-component-base">GitHub</a> to
|
|
support; </span
|
|
><br />
|
|
<span>
|
|
A project by <a href="{{ author.url }}">{{ author.name }}</a>
|
|
</span>
|
|
</my-footer>
|
|
</body>
|
|
</html>
|