ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sprinkle with fairy dust (it's science)

Browse source
This commit is contained in:
Ayo 2023-10-20 00:49:45 +02:00
parent a452e1c386
commit b8b0fd162f
5 changed files with 137 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -18,9 +18,9 @@
We want a way to:
1. create web apps with vanilla custom elements
1. write real .HTML files
1. no frameworks or reactivity libraries on the browser
1. server-side pre-rendering
1. control on when and where JS is downloaded for interactive elements
1. have no frameworks or reactivity libraries on the browser
1. use server-side rendering
1. control when and where JS is downloaded for interactive elements
## Special directories
**1. `src/pages`**

29
src/components/awesome-header.html
View file

@ -7,39 +7,12 @@
<style>
header {
margin: 0.5em 0;
border-radius: 5px;
background: linear-gradient(45deg, #3054bf, #416fff);
color: white;
margin-bottom: 1em;
}
header a {
color: white;
}
header,
main {
padding: 0.5em 1em;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 750px;
margin: 0 auto;
padding: 1em;
}
h1 {
padding: 0;
margin: 0;
}
h2,
p,
ul,
ol {
margin-bottom: 1em;
}
main {
max-width: 35em;
margin: 0 auto;
}
</style>

23
src/components/my-head.html
View file

@ -23,5 +23,28 @@
property="og:description"
content="McFly is a full-stack no-framework framework that assists developers in leveraging the web platform."
/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 750px;
margin: 0 auto;
padding: 1em;
}
body > * {
padding: 0.5em 1em;
}
h1 {
padding: 0;
margin: 0;
}
h2,
p,
ul,
ol {
margin-bottom: 1em;
}
</style>
<slot />
</head>

8
src/components/vanilla-hello-world.js
View file

@ -8,17 +8,11 @@ class HelloWorld extends HTMLElement {
this.onclick = () => {
this.setAttribute("name", `Clicked ${++count}x`);
};
this.setAttribute("title", "Click me please");
}
attributeChangedCallback(property, previousValue, currentValue) {
if (previousValue !== currentValue) {
this[property] = currentValue;
this.render();
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
}
}
render() {
this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
}
}

106
src/pages/index.html
View file

@ -1,33 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<my-head></my-head>
<my-head>
<link rel="stylesheet" href="/prism.css" />
<script src="/prism.js"></script>
<style>
@counter-style publish-icons {
system: cyclic;
symbols: "️✅";
suffix: " ";
}
ul {
list-style: publish-icons;
}
header,
footer,
main {
max-width: 35em;
margin: 0 auto;
}
</style>
</my-head>
<body>
<awesome-header></awesome-header>
<main>
<section>
<p>
<strong>McFly</strong> is a full-stack no-framework framework that
assists developers in leveraging the web platform.
<strong style="font-size: large">McFly</strong> is a full-stack
no-framework framework that assists developers in leveraging the web
platform.
</p>
<p>
Here's a sample interactive custom element:
<vanilla-hello-world name="McFly"></vanilla-hello-world>
</p>
<p>
Start at the very basic of writing HTML files and enhance with standard
web technologies or go advanced as you like, at your own pace.
Start at the very basic of writing HTML files and enhance with
standard web technologies or go advanced as you like, at your own
pace.
</p>
<ul>
<li>HTML pages & fragments</li>
<li>Server-Side Rendering logic</li>
<li>Custom Elements</li>
<li>REST APIs</li>
<li>Deploy Anywhere</li>
<li>Create web apps with vanilla custom elements</li>
<li>Write real .HTML files</li>
<li>Have no frameworks or reactivity libraries on the browser</li>
<li>Use server-side rendering</li>
<li>Deploy anywhere</li>
</ul>
<p>...all in the same project.</p>
<p>
Read more on
<a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.
</p>
</section>
<!--
<section>
<h2>HTML pages w/ server setup</h2>
<ul>
<li>
directly use custom elements & static fragments (no imports or
registry maintenance needed)
</li>
<li>
use
<code class="language-html">&lt;script server:setup&gt;</code>
to define logic that runs on the server, which then gets stripped
away
</li>
</ul>
</section>
<section>
<h2>Custom Elements & Static Fragments</h2>
<ul>
<li>
all components are automatically registered using their file names;
a
<code class="language-unknown">hello-world.js</code> component can
be used as
<code class="language-unknown">&lt;hello-world&gt;</code>
</li>
<li>
static <code class="language-unknown">.html</code> fragments; a
<code class="language-unknown">my-header.html</code> fragment can be
directly used as
<code class="language-unknown">&lt;my-header&gt;</code>
</li>
</ul>
</section>
<section>
<h2>Using the Browser's built-in reactivity</h2>
<p>
Here's a sample interactive custom element:
<vanilla-hello-world name="McFly"></vanilla-hello-world>
</p>
<code-block language="js" line-numbers="true">
<pre>
class HelloWorld extends HTMLElement {
static get observedAttributes() {
return ["name"];
}
connectedCallback() {
let count = 0;
this.onclick = () => {
this.setAttribute("name", `Clicked ${++count}x`);
};
}
attributeChangedCallback(property, previousValue, currentValue) {
if (previousValue !== currentValue) {
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
}
}
}</pre>
</code-block>
</section> -->
</main>
<my-footer></my-footer>
</body>