47ee0ef2a9
- add Project Status section - add exports section - update features list on site and readme
152 lines
4.5 KiB
HTML
152 lines
4.5 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",
|
||
};
|
||
</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 and build
|
||
standard custom elements with zero bundlers, transpilers or polyfills.
|
||
</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>
|
||
Use a custom templating syntax you are already familiar with, like
|
||
<code-block inline>lit-html</code-block> (<a
|
||
href="https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010"
|
||
target="_blank"
|
||
>example</a
|
||
>)
|
||
</li>
|
||
<li>
|
||
Built-in minimal <code-block inline>html</code-block> function for
|
||
tagged templates powered by Preact's tiny (450 Bytes)
|
||
<code-block inline>htm/mini</code-block>
|
||
</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 directly from
|
||
<code-block inline>HTMLElement</code-block> can seem confusing and
|
||
hard to maintain, especially when coming from popular JS frameworks
|
||
and other projects that recommend complex setups.
|
||
</p>
|
||
<p>
|
||
This project aims to address this 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://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>
|