https://github.com/ayoayco/McFly
Contribute to McFly - [mirror] of https://ayco.io/sh/mcfly
https://github.com/ayoayco/McFly
Last synced: 3 months ago
JSON representation
Contribute to McFly - [mirror] of https://ayco.io/sh/mcfly
- Host: GitHub
- URL: https://github.com/ayoayco/McFly
- Owner: ayoayco
- License: mit
- Created: 2023-10-07T18:05:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-04T20:53:14.000Z (3 months ago)
- Last Synced: 2025-04-06T12:07:42.468Z (3 months ago)
- Language: JavaScript
- Homepage: https://mcfly.js.org
- Size: 2.12 MB
- Stars: 72
- Watchers: 1
- Forks: 3
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://developer.mozilla.org/en-US/docs/Web/HTML) and I can have a dynamic web page from that?
- What if I knew how to build [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) and that's all the component system I needed?
- What if I can write [HTML fragments](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) and [assemble them](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) 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](https://ayos.blog/places-in-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](https://todo.sr.ht/~ayoayco/mcfly?search=label%3A%22v1.0.0+milestone%22)
## 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](https://nitro.build). 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](https://git.sr.ht/~ayoayco/mcfly/tree/main/item/CONTRIBUTING.md).
But you can also contribute via official mirrors of the project repository in the following platforms:
1. [GitHub](https://github.com/ayoayco/mcfly)
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 `` 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`](https://ayco.io/n/@mcflyjs/config) | Nitro server config for McFly projects |  |
| [`@mcflyjs/core`](https://ayco.io/n/@mcflyjs/core) | Route event and config handlers |  |
| [`create-mcfly`](https://ayco.io/n/create-mcfly) | Script for scaffolding a new McFly workspace |  |
## Project setup
After cloning the project, you will need [node](https://nodejs.org/en/download) and [pnpm installed](https://pnpm.io/installation). 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](https://social.ayco.io/@ayo/111195315785886977) for using [Nitro](https://nitro.build) and custom elements using a minimal [Web Component Base](https://WebComponent.io) class.
**Nitro** is the same production-grade web server powering [Nuxt](https://nuxt.com/)
---
_Just keep building_<br />
_A project by [Ayo Ayco](https://ayo.ayco.io)_