McFly

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

Installation

Run the following to generate a McFly starter project.

npm create mcfly@latest

Features

The time has come for vanilla Web tech. 🎉

✅ 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>

3. ./routes/api/

file-based routing for REST API endpoints
e.g., ./routes/api/users.ts can be accessed via http://<domain>/api/users
TypeScript or JavaScript welcome!

McFly CLI (In-Progress)

The McFly CLI can assist further in scaffolding new projects and building blocks:

npm i -g @mcflyjs/cli

Then, you can run the following McFly CLI commands:

Command	Action
`mcfly new`	Creates a new McFly project.
`mcfly serve`	Runs the developent server.
`mcfly build`	Builds the McFly project for production.
`mcfly prepare`	Prepares the McFly workspace.
`mcfly generate`	Generates building blocks for a McFly app. (In-progress)

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",
});

Packages

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

Package	Description	Version
`@mcflyjs/core`	Core package containing event and configuration handlers
`@mcflyjs/config`	Package containing the Nitro configuration for McFly projects
`@mcflyjs/cli`	The McFly CLI tooling
`create-mcfly`	Script for scaffolding a new McFly workspace

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

3.7 KiB Raw Blame History