McFly

McFly is a no-framework framework
that assists in leveraging the web platform

Features

• Create web apps with vanilla custom elements
• Write real .HTML files
• Have no frameworks or reactivity libraries on the browser
• Use server-side rendering
• Deploy anywhere

Special directories

1. src/pages

• file based routing for .html files
• directly use custom elements & static fragments (no imports or registry maintenance needed)
• use <script server:setup> to define logic that runs on the server, which then gets stripped away

2. src/components

• custom element constructor files (only .js files for now)
• all components are automatically registered using their file names; a hello-world.js component can be used as <hello-world>
• static .html fragments; a my-header.html fragment can be directly used as <my-header>

Setting up

In this project, we maintain several node workspaces in directories ./packages, ./site, and ./templates.

You can experience the framework now by cloning the project and playing with the example files in the special directories for the landing page (./site/src).

Do the following steps to get you started:

1. clone project and go into the directory

git clone https://github.com/ayoayco/mcfly.git

cd mcfly

2. install deps

npm i

3. run the dev server

npm start

4. open the browser to https://localhost:3000 (or what the dev server said)

McFly config

To tell McFly you want to use components, pass the mode (only "js" for now) to the components prop mcfly.config.ts

import defineConfig from "./packages/define-config";

export default defineConfig({
  components: "js",
});

More info

This framework is a result of an exploration for using Nitro and vanilla JS custom elements using a minimal Web Component Base class.

Nitro is the same production-grade web server powering Nuxt

---

Just keep building
A project by Ayo Ayco