88 lines
3.1 KiB
HTML
88 lines
3.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: 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>
|
|
</my-head>
|
|
<body>
|
|
<awesome-header>
|
|
<span>{{ project.name }}</span>
|
|
<span slot="description">{{ project.description }}</span>
|
|
</awesome-header>
|
|
<main>
|
|
<section style="font-size: large;">
|
|
|
|
<p>
|
|
By extending our base class, you get an easy authoring experience as you would expect in writing your components:</p>
|
|
<ul>
|
|
<li>A <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>Extensible templates & renderer (examples in-progress)</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 />
|
|
<my-quote type="info">
|
|
<p>
|
|
Version 2.0.0-beta is out! 🎉
|
|
</p>
|
|
<p>
|
|
We are now able to attach "side effects" to property value changes, from inside the component and outside.
|
|
</p>
|
|
<p>
|
|
Play on <a href="https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1010">CodePen</a>.
|
|
</p>
|
|
</my-quote>
|
|
</section>
|
|
<hr style="margin: 2em 0;" />
|
|
<section style="font-size: large;">
|
|
<p>
|
|
When you extend the WebComponent 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 from "https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js";
|
|
|
|
export class Counter extends WebComponent {
|
|
static properties = ["count"];
|
|
onInit() {
|
|
this.props.count = 0;
|
|
this.onclick = () => ++this.props.count;
|
|
}
|
|
get template() {
|
|
return `<button>${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>
|