Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayoayco/McFly
[🚧 PoC] Back to the Basics. Into the Future. 😱
https://github.com/ayoayco/McFly
Last synced: 3 months 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 (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-16T12:16:31.000Z (3 months ago)
- Last Synced: 2024-03-16T14:37:41.923Z (3 months ago)
- Language: JavaScript
- Homepage: https://mcfly.js.org
- Size: 986 KB
- Stars: 70
- Watchers: 2
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-stars - ayoayco/McFly - [🚧 PoC] Back to the Basics. Into the Future. 😱 (JavaScript)
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 |  |
| [`@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 |  |
## 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)*