McFly

McFly is a metaframework
that assists in leveraging the web platform

Why

I often wonder what it would look like to build sites & apps knowing just the basics.

I thought:

• What if I knew how to write HTML and I can have a dynamic web page from that?
• What if I knew how to build custom elements and that's all the component system I needed?
• What if I can write HTML fragments and assemble them easily in a page?
• What if I did not have to worry about the ever-growing number of ways to have a place on the Web?

McFly is my reimagination of web development: Back to the basics. Into the future.

Project Status

We are currently in a Proof of Concept phase. All parts are subject to breaking changes in minor releases.

👉 Road to v1.0.0 todo items

Try it today

Run the following to generate a McFly starter project.

npm create mcfly@latest

How it works (for the nerds)

It is primarily a runtime middleware for Nitro. Every time a page is requested, the McFly middleware intercepts and assembles the view for the requestor. McFly does this with the assets it knows about which are mostly: pages, components, public assets.

A plugin system allows for the core functionality to only "lean" on platform. Anything not yet a standard is implemented as a plugin which will be easily "swapped" away when the platform catches up.

Contribution

There is a guide for contributing via SourceHut.

But you can also contribute via official mirrors of the project repository in the following platforms:

1. GitHub

We will add more guides & mirrors for different platforms.

Features

✅ Use vanilla custom elements (or sugar-coated web components)
✅ Write server-powered .html pages
✅ "Use the Platform™" on both server runtimes & browsers
✅ Use server-side rendering
✅ Deploy anywhere, even the Edge

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>

3. ./src/api/

• file-based routing for REST API endpoints
• e.g., ./src/api/users.js can be accessed via http://<domain>/api/users

Packages

The following are the project packages published on the NPM registry:

Package	Description	Version
@mcflyjs/config	Nitro server config for McFly projects
@mcflyjs/core	Route event and config handlers
create-mcfly	Script for scaffolding a new McFly workspace

Project setup

After cloning the project, you will need node and pnpm installed. When you are sure that you have node and pnpm, then run the following to download the dependencies:

corepack enable
pnpm i

The following commands are available to you on this project. Add more, or modify them as needed in your ./package.json file.

Command	Action
pnpm run site	Start the development server for https://mcfly.js.org
pnpm run template:basic	Start the development server for the basic template
pnpm run build	Locally generate the app's build files to ./output
pnpm run preview	Preview the built app locally

More info

This framework is a result of an exploration for using Nitro and 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