153 lines
4.6 KiB
HTML
153 lines
4.6 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;
|
|
}
|
|
& hr {
|
|
margin: 2em 0;
|
|
}
|
|
|
|
& section p:not(blockquote *):first-of-type::first-letter {
|
|
font-weight: 900;
|
|
font-size: 2rem;
|
|
line-height: 2rem;
|
|
float: left;
|
|
color: var(--color-primary);
|
|
margin-top: -8px;
|
|
}
|
|
}
|
|
</style>
|
|
</my-head>
|
|
<body>
|
|
<awesome-header>
|
|
<span>{{ project.name }}</span>
|
|
<span slot="description">{{ project.description }}</span>
|
|
</awesome-header>
|
|
<main>
|
|
<section>
|
|
<p>
|
|
By extending our base class, you get the easy authoring experience you
|
|
have come to expect when coming from more mature JS frameworks-- all
|
|
with zero-dependency, 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>
|
|
<li>
|
|
Provided out-of-the-box with
|
|
<a href="https://ayco.io/gh/McFly">McFly</a>, a powerful
|
|
no-framework framework
|
|
</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 easily get confusing
|
|
and hard to maintain, especially when coming from JS frameworks with
|
|
advanced tooling.
|
|
</p>
|
|
<p>
|
|
This project aims to ease this with the thinnest possible abstraction
|
|
from vanilla and virtually zero need for advanced tooling. It works
|
|
without bundlers, transpilers, or polyfills.
|
|
</p>
|
|
<p>
|
|
When you extend the <code-block inline>WebComponent</code-block> class
|
|
for your component, you only have to define the template and
|
|
properties. Any change in any property value will automatically cause
|
|
just the component UI to render.
|
|
</p>
|
|
|
|
<p>
|
|
The result is a reactive UI on property changes:
|
|
<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>
|