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

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

@ -7,39 +7,12 @@
<style> <style>
header { header {
margin: 0.5em 0;
border-radius: 5px; border-radius: 5px;
background: linear-gradient(45deg, #3054bf, #416fff); background: linear-gradient(45deg, #3054bf, #416fff);
color: white; color: white;
margin-bottom: 1em;
} }
header a { header a {
color: white; 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> </style>

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

@ -23,5 +23,28 @@
property="og:description" property="og:description"
content="McFly is a full-stack no-framework framework that assists developers in leveraging the web platform." 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 /> <slot />
</head> </head>

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

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

134
src/pages/index.html
View file

@ -1,33 +1,117 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <body>
<awesome-header></awesome-header> <awesome-header></awesome-header>
<main> <main>
<p> <section>
<strong>McFly</strong> is a full-stack no-framework framework that <p>
assists developers in leveraging the web platform. <strong style="font-size: large">McFly</strong> is a full-stack
</p> no-framework framework that assists developers in leveraging the web
<p> platform.
Here's a sample interactive custom element: </p>
<vanilla-hello-world name="McFly"></vanilla-hello-world> <p>
</p> Here's a sample interactive custom element:
<p> <vanilla-hello-world name="McFly"></vanilla-hello-world>
Start at the very basic of writing HTML files and enhance with standard </p>
web technologies or go advanced as you like, at your own pace. <p>
</p> Start at the very basic of writing HTML files and enhance with
<ul> standard web technologies or go advanced as you like, at your own
<li>HTML pages & fragments</li> pace.
<li>Server-Side Rendering logic</li> </p>
<li>Custom Elements</li> <ul>
<li>REST APIs</li> <li>Create web apps with vanilla custom elements</li>
<li>Deploy Anywhere</li> <li>Write real .HTML files</li>
</ul> <li>Have no frameworks or reactivity libraries on the browser</li>
<p>...all in the same project.</p> <li>Use server-side rendering</li>
<p> <li>Deploy anywhere</li>
Read more on </ul>
<a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>. <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> </main>
<my-footer></my-footer> <my-footer></my-footer>
</body> </body>