https://github.com/ayoayco/McFly

[🚧 PoC] Back to the Basics. Into the Future. 😱
https://github.com/ayoayco/McFly

Last synced: 5 days ago
JSON representation

[🚧 PoC] Back to the Basics. Into the Future. 😱

• Host: GitHub
• URL: https://github.com/ayoayco/McFly
• Owner: ayoayco
• License: mit
• Created: 2023-10-07T18:05:53.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-28T21:46:16.000Z (about 1 month ago)
• Last Synced: 2024-10-26T22:01:42.507Z (16 days ago)
• Language: JavaScript
• Homepage: https://mcfly.js.org
• Size: 1 MB
• Stars: 70
• Watchers: 2
• Forks: 3
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



McFly


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




  

  

  



## Project Status 

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

> [!TIP]

> Need help? Wanna hangout? Everyone is welcome to join [our discussion channel](https://app.element.io/#/room/#mcfly-discussions:matrix.org)!

## 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 `` 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!

## Packages

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

| Package | Description | Version |

| --- | --- | --- |

| [`@mcflyjs/cli`](https://ayco.io/n/@mcflyjs/cli) | The McFly CLI tooling | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fcli) |

| [`@mcflyjs/config`](https://ayco.io/n/@mcflyjs/config) | Nitro server config for McFly projects | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fconfig) |

| [`@mcflyjs/core`](https://ayco.io/n/@mcflyjs/core) | Route event and config handlers | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fcore) |

| [`create-mcfly`](https://ayco.io/n/create-mcfly) | Script for scaffolding a new McFly workspace | ![npm version](https://img.shields.io/npm/v/create-mcfly) |

## More info

This framework is a result of [an exploration](https://social.ayco.io/@ayo/111195315785886977) for using [Nitro](https://nitro.unjs.io) and vanilla JS 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://ayco.io)*