ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of git.sr.ht:~ayoayco/mcfly

Browse source
This commit is contained in:
Ayo Ayco 2025-01-28 22:19:54 +01:00
commit 4514394b38
49 changed files with 6794 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
.build.yml Normal file
View file

@ -0,0 +1,25 @@
image: alpine/edge
packages:
- nodejs
- npm
- pnpm
secrets:
- 291f0e35-9b8d-43ff-844c-77c5f29c1876
environment:
NETLIFY_SITE_ID: 390b392a-a898-491b-8500-79aa30f724d6
tasks:
- install-deps: |
cd mcfly
pnpm i
- build: |
cd mcfly
pnpm -F site run build
- deploy: |
cd mcfly
{
set +x
. ~/.buildsecrets
set -x
}
export NETLIFY_AUTH_TOKEN
pnpm -F site run deploy

24
.build.yml.bkup Normal file
View file

@ -0,0 +1,24 @@
image: archlinux
packages:
- nodejs
- npm
secrets:
- 46f739e5-4538-45dd-a79f-bf173b7a2ed9
environment:
NETLIFY_SITE_ID: 390b392a-a898-491b-8500-79aa30f724d6
tasks:
- setup: |
cd mcfly/site
npm i
- build: |
cd mcfly/site
NODE_ENV=production npm run build
- deploy: |
cd mcfly/site
{
set +x
. ~/.buildsecrets
set -x
}
export NETLIFY_AUTH_TOKEN
npm run deploy

40
.github/workflows/eslint.yml vendored
View file

@ -1,40 +0,0 @@
# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.
# ESLint is a tool for identifying and reporting on patterns
# found in ECMAScript/JavaScript code.
# More details at https://github.com/eslint/eslint
# and https://eslint.org
name: ESLint
on:
push:
branches: [ "main", "master" ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ "main" ]
schedule:
- cron: '27 4 * * 2'
jobs:
eslint:
name: Run eslint scanning
runs-on: ubuntu-latest
permissions:
contents: read
security-events: write
actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Install ESLint
run: |
npm install eslint@9.17.0
- name: Run ESLint
run: npx eslint .
--config eslint.config.mjs
continue-on-error: false

29
.github/workflows/test.yml vendored
View file

@ -1,29 +0,0 @@
name: Test
on:
push:
branches: ['main']
pull_request:
# The branches below must be a subset of the branches above
branches: ['main']
schedule:
- cron: '36 3 * * 2'
jobs:
test:
name: Run test
runs-on: ubuntu-latest
permissions:
contents: read
security-events: write
actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Install core deps
run: cd packages/core && npm install --ignore-scripts
- name: Run CLI tests
run: npx vitest run .
continue-on-error: false

1
.gitignore vendored
View file

@ -5,6 +5,7 @@ html
*.log*
.nitro
.mcfly
.netlify
.cache
.output

3
CONTRIBUTING.md
View file

@ -3,7 +3,8 @@
This file contains the contributing guide for our project.
To contribute to our project, please follow these steps:
1. Fork the repository on GitHub.
1. Fork the repository on [SourceHut](https://ayco.io/sh/mcfly).
2. Clone the forked repository to your local machine.
3. Create a new branch for your changes.
4. Make your changes and commit them with a descriptive message.

27
README.md
View file

@ -1,5 +1,5 @@
<p align="center">
<img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
<img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
</p>
<h1 align="center">McFly</h1>
@ -18,9 +18,9 @@ I often wonder what it would look like to build sites & apps knowing just the ba
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 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.
@ -70,11 +70,28 @@ 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) |
## 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.

BIN
assets/mcfly-logo-sm-bkup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
assets/mcfly-logo-sm.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
assets/mcfly-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 337 KiB

3
netlify.toml Normal file
View file

@ -0,0 +1,3 @@
[build]
base = "site"
publish = "dist"

1
package.json
View file

@ -26,6 +26,7 @@
"eslint-plugin-prettier": "^5.2.1",
"globals": "^15.14.0",
"husky": "^9.1.7",
"netlify-cli": "^18.0.0",
"prettier": "^3.4.2",
"vitest": "^2.1.8"
},

39
packages/config/README.md
View file

@ -1,5 +1,5 @@
<p align="center">
<img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
<img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
</p>
<h1 align="center">McFly</h1>
@ -17,18 +17,22 @@
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 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.
## Try it today
Run the following to generate a McFly starter project.
```
npm create mcfly@latest
```
@ -42,36 +46,43 @@ npm create mcfly@latest
✅ Deploy anywhere, even the Edge<br>
## 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/`**
**3. `./src/api/`**
- file-based routing for REST API endpoints
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
- e.g., `./src/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) |
| 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)*
_Just keep building_<br />
_A project by [Ayo Ayco](https://ayco.io)_

1
packages/config/nitro-config.js
View file

@ -9,6 +9,7 @@ export const nitroConfig = {
compatibilityDate: '2024-12-08',
srcDir: 'src',
apiDir: 'api',
buildDir: '.mcfly',
devServer: {
watch: ['./pages', './components', './api'],
},

6
packages/config/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@mcflyjs/config",
"version": "0.2.3",
"version": "0.2.7",
"description": "Nitro configuration for McFly apps",
"type": "module",
"main": "index.js",
@ -11,13 +11,13 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/ayoayco/McFly.git",
"url": "https://git.sr.ht/~ayoayco/mcfly",
"directory": "packages/config"
},
"author": "Ayo Ayco",
"license": "MIT",
"bugs": {
"url": "https://github.com/ayoayco/McFly/issues"
"url": "https://todo.sr.ht/~ayoayco/mcfly-todo"
},
"homepage": "https://mcfly.js.org",
"dependencies": {

39
packages/core/README.md
View file

@ -1,5 +1,5 @@
<p align="center">
<img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
<img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
</p>
<h1 align="center">McFly</h1>
@ -17,18 +17,22 @@
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 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.
## Try it today
Run the following to generate a McFly starter project.
```
npm create mcfly@latest
```
@ -42,36 +46,43 @@ npm create mcfly@latest
✅ Deploy anywhere, even the Edge<br>
## 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/`**
**3. `./src/api/`**
- file-based routing for REST API endpoints
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
- e.g., `./src/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) |
| 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)*
_Just keep building_<br />
_A project by [Ayo Ayco](https://ayco.io)_

22
packages/core/cli/commands/build.mjs
View file

@ -3,7 +3,6 @@
import { consola } from 'consola'
import { defineCommand } from 'citty'
import { dirname, resolve } from 'pathe'
import { loadConfig } from 'c12'
import {
build,
copyPublicAssets,
@ -12,26 +11,25 @@ import {
prerender,
} from 'nitropack'
import { fileURLToPath } from 'node:url'
import { nitroConfig as mcflyNitroConfig } from '@mcflyjs/config/nitro-config.js'
import { getMcFlyConfig, getNitroConfig } from '../../get-nitro-config.js'
async function _build(args) {
consola.start('Building project...')
try {
const rootDir = resolve(args.dir || args._dir || '.')
const { config: mcflyConfig } = await loadConfig({ name: 'mcfly' })
const { config: nitroConfig } = await loadConfig({ name: 'nitro' })
const [mcflyConfig, appConfigFile] = await getMcFlyConfig()
const nitroConfig = await getNitroConfig(mcflyConfig)
const nitro = await createNitro({
rootDir,
dev: false,
minify: args.minify,
preset: args.preset,
// spread mcfly.nitro config
...(mcflyConfig.nitro ?? {}),
...(nitroConfig ?? {}),
...mcflyNitroConfig,
...nitroConfig,
minify: args.minify ?? nitroConfig.minify,
preset: args.preset ?? nitroConfig.preset,
})
nitro.options.runtimeConfig.mcfly = mcflyConfig
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
@ -41,6 +39,8 @@ async function _build(args) {
handler: resolve(__dirname, '../../route-middleware.js'),
})
nitro.options.runtimeConfig.appConfigFile = appConfigFile
await prepare(nitro)
await copyPublicAssets(nitro)
await prerender(nitro)

9
packages/core/cli/commands/prepare.mjs
View file

@ -3,8 +3,8 @@
import { consola } from 'consola'
import { defineCommand } from 'citty'
import { resolve } from 'pathe'
import { createNitro } from 'nitropack'
import { writeTypes } from 'nitropack'
import { createNitro, writeTypes } from 'nitropack'
import { getMcFlyConfig, getNitroConfig } from '../../get-nitro-config.js'
async function prepare(args) {
consola.start('Preparing McFly workspace...')
@ -13,7 +13,10 @@ async function prepare(args) {
try {
const rootDir = resolve(args.dir || args._dir || '.')
const nitro = await createNitro({ extends: '@mcflyjs/config', rootDir })
const [mcflyConfig] = await getMcFlyConfig()
const nitroConfig = await getNitroConfig(mcflyConfig)
const nitro = await createNitro({ rootDir, ...nitroConfig })
await writeTypes(nitro)
} catch (e) {
consola.error(e)

15
packages/core/cli/commands/serve.mjs
View file

@ -12,10 +12,9 @@ import {
prerender,
} from 'nitropack'
import { resolve } from 'pathe'
import { loadConfig } from 'c12'
import { fileURLToPath } from 'node:url'
import { dirname } from 'pathe'
import { nitroConfig as mcflyNitroConfig } from '@mcflyjs/config/nitro-config.js'
import { getMcFlyConfig, getNitroConfig } from '../../get-nitro-config.js'
const hmrKeyRe = /^runtimeConfig\.|routeRules\./
const __filename = fileURLToPath(import.meta.url)
@ -42,8 +41,6 @@ async function serve(args) {
* @type {string}
*/
const rootDir = resolve(args.dir || args._dir || '.')
const { config: mcflyConfig } = await loadConfig({ name: 'mcfly' })
const { config: nitroConfig } = await loadConfig({ name: 'nitro' })
/**
* @typedef {import('nitropack').Nitro} Nitro
@ -60,6 +57,9 @@ async function serve(args) {
await nitro.close()
}
const [mcflyConfig, appConfigFile] = await getMcFlyConfig()
const nitroConfig = await getNitroConfig(mcflyConfig)
// create new nitro
nitro = await createNitro(
{
@ -67,10 +67,7 @@ async function serve(args) {
dev: true,
preset: 'nitro-dev',
_cli: { command: 'dev' },
// spread mcfly.nitro config
...(mcflyConfig.nitro ?? {}),
...(nitroConfig ?? {}),
...mcflyNitroConfig,
...nitroConfig,
},
{
watch: true,
@ -95,7 +92,7 @@ async function serve(args) {
}
)
nitro.hooks.hookOnce('restart', reload)
nitro.options.runtimeConfig.mcfly = mcflyConfig
nitro.options.runtimeConfig.appConfigFile = appConfigFile
nitro.options.handlers.push({
middleware: true,

31
packages/core/get-nitro-config.js Normal file
View file

@ -0,0 +1,31 @@
import { loadConfig } from 'c12'
import { mcflyNitroConfig } from './mcfly-nitro-config.js'
/**
* @typedef {import('nitropack').NitroConfig} NitroConfig
*/
/**
* @returns {Promise<NitroConfig>}
*/
export async function getNitroConfig(mcflyConfig = {}) {
const { config: nitroConfig } = await loadConfig({ name: 'nitro' })
return {
// nitro config in mcfly config
...mcflyConfig.nitro,
// nitro config from nitro config
...(nitroConfig ?? {}),
// McFly standard nitro config
...mcflyNitroConfig,
}
}
export async function getMcFlyConfig() {
const { config: mcflyConfig, configFile } = await loadConfig({
name: 'mcfly',
})
return [mcflyConfig, configFile]
}

33
packages/core/mcfly-nitro-config.js Normal file
View file

@ -0,0 +1,33 @@
/**
* @typedef {import('nitropack').NitroConfig} NitroConfig
* @type {NitroConfig}
*/
export const mcflyNitroConfig = {
framework: {
name: 'McFly',
},
compatibilityDate: '2024-12-08',
srcDir: 'src',
apiDir: 'api',
devServer: {
watch: ['./pages', './components', './api'],
},
serverAssets: [
{
baseName: 'pages',
dir: './pages',
},
{
baseName: 'components',
dir: './components',
},
],
imports: {
presets: [
{
from: 'web-component-base',
imports: ['WebComponent', 'html', 'attachEffect'],
},
],
},
}

10
packages/core/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@mcflyjs/core",
"version": "0.8.1",
"version": "0.8.7",
"description": "McFly core package",
"type": "module",
"main": "index.js",
@ -10,24 +10,24 @@
"scripts": {
"version": "npm version",
"publish": "npm publish",
"test": "echo \"Error: no test specified\" && exit 1",
"build:middleware": "npx esbuild route-middleware.js --bundle --outfile=mcfly-middleware.js"
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ayoayco/McFly.git",
"url": "https://git.sr.ht/~ayoayco/mcfly",
"directory": "packages/core"
},
"author": "Ayo Ayco",
"license": "MIT",
"bugs": {
"url": "https://github.com/ayoayco/McFly/issues"
"url": "https://todo.sr.ht/~ayoayco/mcfly-todo"
},
"homepage": "https://mcfly.js.org",
"dependencies": {
"c12": "^2.0.1",
"citty": "^0.1.6",
"consola": "^3.3.3",
"devalue": "^5.1.1",
"esprima": "^4.0.1",
"h3": "^1.13.0",
"nitropack": "latest",

53
packages/core/route-middleware.js
View file

@ -1,7 +1,11 @@
import { eventHandler } from 'h3'
import { useRuntimeConfig, useStorage } from 'nitropack/runtime'
import { useStorage } from 'nitropack/runtime'
import { createHooks } from 'hookable'
import { consola } from 'consola'
import { colorize } from 'consola/utils'
import { useRuntimeConfig } from 'nitropack/runtime'
import { dirname, relative } from 'pathe'
import { fileURLToPath } from 'node:url'
import {
hooks as mcflyHooks,
@ -9,7 +13,7 @@ import {
evaluateServerScripts,
injectHtmlFragments,
injectCustomElements,
} from '@mcflyjs/core/runtime'
} from '@mcflyjs/core/runtime/index.js' // important to import from installed node_module because this script is passed to another context
/**
* @typedef {import('../config').McFlyConfig} Config
@ -26,21 +30,42 @@ export default eventHandler(async (event) => {
const hooks = createHooks()
Object.keys(mcflyHooks).forEach((hookName) => hooks.addHooks(hookName))
const { path } = event
let { mcfly: config } = useRuntimeConfig()
const storage = useStorage()
const publicAssets = (await storage.getKeys('root:public')).map(
(key) => `/${key.replace('root:public:', '')}`
)
const { appConfigFile } = useRuntimeConfig()
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
let relativePath = relative(__dirname, appConfigFile)
console.log('>>> relative', relativePath)
let config
// TODO: this still doesn't work on Netlify
try {
const { default: configFn } = await import(relativePath)
config = configFn()
} catch (err) {
consola.error(err)
}
console.log('>>> ', {
config,
appConfigFile,
relativePath,
__dirname,
})
// if not page, don't render
if (event.path.startsWith('/api') || publicAssets.includes(event.path)) {
if (event.path.startsWith('/api')) {
return
}
if (!config || Object.keys(config).length === 0) {
config = defaultMcflyConfig
consola.warn(`[WARN]: McFly configuration not loaded, using defaults...`)
consola.warn(
`[WARN]: McFly configuration not found, using defaults...`,
defaultMcflyConfig
)
}
const plugins = config.plugins ?? []
@ -80,7 +105,8 @@ export default eventHandler(async (event) => {
// call hook
if (transform.hook) {
hooks.callHook(transform.hook)
// not sure if we want to await, for now it makes the outcome predictable
await hooks.callHook(transform.hook)
}
}
} else {
@ -92,15 +118,15 @@ export default eventHandler(async (event) => {
}
if (html) {
hooks.callHook(mcflyHooks.pageRendered)
await hooks.callHook(mcflyHooks.pageRendered)
}
const timeEnd = performance.now()
consola.info(
'Page rendered in',
colorize('green', event.path),
'rendered in',
Math.round(timeEnd - timeStart),
'ms:',
event.path
'ms'
)
return (
html ??
@ -122,6 +148,7 @@ function getPath(filename) {
function getPurePath(path) {
return path.split('?')[0]
}
/**
* Gets the correct HTML depending on the path requested
* @param {string} path

1
packages/core/runtime/index.js
View file

@ -4,3 +4,4 @@ export { getFiles } from './get-files.mjs'
export { hooks } from './hooks.mjs'
export { injectCustomElements } from './inject-elements.mjs'
export { injectHtmlFragments } from './inject-fragments.mjs'
export { mcflyNitroConfig as nitroConfig } from '../mcfly-nitro-config.js'

2
packages/core/runtime/inject-elements.mjs
View file

@ -1,5 +1,5 @@
import { ELEMENT_NODE, parse, render, walkSync } from 'ultrahtml'
import { getFiles } from '@mcflyjs/core/runtime/get-files.mjs'
import { getFiles } from './get-files.mjs'
/**
* @typedef {import('../../config/index.js').McFlyConfig} Config

2
packages/core/runtime/inject-fragments.mjs
View file

@ -1,5 +1,5 @@
import { ELEMENT_NODE, parse, render, walkSync } from 'ultrahtml'
import { getFiles } from '@mcflyjs/core/runtime/get-files.mjs'
import { getFiles } from './get-files.mjs'
/**
* @typedef {import('ultrahtml').Node} HtmlNode

24
packages/create-mcfly/README.md
View file

@ -1,5 +1,5 @@
<p align="center">
<img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
<img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
</p>
<h1 align="center">Create McFly</h1>
@ -17,6 +17,7 @@ npm create mcfly@latest
</p>
## Features
The time has come for vanilla Web tech. 🎉
✅ Create web apps with vanilla custom elements<br>
@ -26,19 +27,23 @@ The time has come for vanilla Web tech. 🎉
✅ Deploy anywhere<br>
## 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/`**
**3. `./src/api/`**
- file-based routing for REST API endpoints
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
- e.g., `./src/api/users.ts` can be accessed via `http://<domain>/api/users`
- TypeScript or JavaScript welcome!
## McFly config
@ -46,19 +51,20 @@ The time has come for vanilla Web tech. 🎉
To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
```js
import defineConfig from "./packages/define-config";
import defineConfig from './packages/define-config'
export default defineConfig({
components: "js",
});
components: 'js',
})
```
## 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)*
_Just keep building_<br />
_A project by [Ayo Ayco](https://ayco.io)_

4
packages/create-mcfly/index.js
View file

@ -104,7 +104,7 @@ async function downloadTemplateToDirectory(directory) {
consola.start(
`Copying template to ${colorize('bold', getSafeDirectory(directory))}...`
)
await downloadTemplate('github:ayoayco/mcfly/templates/basic', {
await downloadTemplate('sourcehut:ayoayco/mcfly/templates/basic', {
dir: directory,
})
} catch (ㆆ_ㆆ) {
@ -174,7 +174,7 @@ function showResults(directory, installDeps) {
nextActions = nextActions.concat([
`Start the dev server with ${colorize('yellow', 'npm start')}`,
`Join us at ${colorize('blue', 'https://ayco.io/gh/McFly')}`,
`Join us at ${colorize('blue', 'https://ayco.io/sh/mcfly')}`,
])
const result = `🎉 Your new ${colorize(

6
packages/create-mcfly/package.json
View file

@ -1,6 +1,6 @@
{
"name": "create-mcfly",
"version": "0.3.13",
"version": "0.4.3",
"description": "Create a new McFly app",
"type": "module",
"bin": {
@ -17,13 +17,13 @@
},
"repository": {
"type": "git",
"url": "https://github.com/ayoayco/McFly.git",
"url": "https://git.sr.ht/~ayoayco/mcfly",
"directory": "packages/create-mcfly"
},
"author": "Ayo Ayco",
"license": "MIT",
"bugs": {
"url": "https://github.com/ayoayco/McFly/issues"
"url": "https://todo.sr.ht/~ayoayco/mcfly-todo"
},
"homepage": "https://mcfly.js.org",
"dependencies": {

6495
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

22
site/README.md
View file

@ -1,5 +1,5 @@
<p align="center">
<img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
<img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
</p>
<h1 align="center">McFly Docs</h1>
@ -13,19 +13,23 @@
</p>
## 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/`**
**3. `./src/api/`**
- file-based routing for REST API endpoints
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
- e.g., `./src/api/users.ts` can be accessed via `http://<domain>/api/users`
- TypeScript or JavaScript welcome!
## McFly config
@ -33,14 +37,14 @@
To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
```js
import defineConfig from "./packages/define-config";
import defineConfig from './packages/define-config'
export default defineConfig({
components: "js",
});
components: 'js',
})
```
---
*Just keep building*<br />
*A project by [Ayo Ayco](https://ayco.io)*
_Just keep building_<br />
_A project by [Ayo Ayco](https://ayco.io)_

1
site/mcfly.config.mjs
View file

@ -8,6 +8,7 @@ export default defineMcFlyConfig({
},
plugins: [testPlugin()],
nitro: {
preset: 'netlify',
devServer: {
watch: ['../packages'],
},

9
site/package.json
View file

@ -6,13 +6,13 @@
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/ayoayco/McFly.git",
"url": "https://git.sr.ht/~ayoayco/mcfly",
"directory": "app"
},
"author": "Ayo Ayco",
"license": "MIT",
"bugs": {
"url": "https://github.com/ayoayco/McFly/issues"
"url": "https://todo.sr.ht/~ayoayco/mcfly-todo"
},
"homepage": "https://mcfly.js.org",
"scripts": {
@ -21,13 +21,14 @@
"dev": "mcfly serve",
"build": "mcfly build",
"preview": "node .output/server/index.mjs",
"build:preview": "pnpm run build && pnpm run preview"
"build:preview": "pnpm run build --preset=node-server && pnpm run preview",
"deploy": "netlify deploy --site=$NETLIFY_SITE_ID --dir=dist --prod"
},
"dependencies": {
"@mcflyjs/config": "workspace:*",
"@mcflyjs/core": "workspace:*"
},
"devDependencies": {
"typescript": "^5"
"typescript": "^5.7.3"
}
}

2
site/src/pages/demo.html
View file

@ -30,7 +30,7 @@
<warning-block
><span>This page is in-progress. See the
<a
href="https://github.com/ayoayco/McFly/blob/main/site/src/pages/demo.html"
href="https://git.sr.ht/~ayoayco/mcfly/tree/main/item/site/src/pages/demo.html"
>source code</a
>.</span></warning-block
>

2
site/src/pages/index.html
View file

@ -54,7 +54,7 @@
</ul>
<p>
Visit the <a href="/demo">Demo Page</a> or read more on ✨
<a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.
<a href="https://sr.ht/~ayoayco/mcfly/">SourceHut</a>.
</p>
<p>
* Custom element / web component templates are not yet server-rendered, but is a top-priority goal for the project

0
site/public/favicon.ico → site/src/public/favicon.ico
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
site/public/morty.png → site/src/public/morty.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

0
site/public/prism.css → site/src/public/prism.css
View file

0
site/public/prism.js → site/src/public/prism.js
View file

0
site/public/reset.css → site/src/public/reset.css
View file

0
site/public/robots.txt → site/src/public/robots.txt
View file

1
templates/basic/.gitignore vendored
View file

@ -2,6 +2,7 @@ dist
node_modules
*.log*
.nitro
.mcfly
.cache
.output
.env

20
templates/basic/README.md
View file

@ -5,28 +5,32 @@ This project was generated from the basic template for **McFly** -- a no-framewo
It contains example files to get you started using vanilla web technologies in a modern way. See the [Special Directories](#special-directories) section for more information.
## 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/`**
**3. `./src/api/`**
- file-based routing for REST API endpoints
- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
- e.g., `./src/api/users.ts` can be accessed via `http://<domain>/api/users`
- TypeScript or JavaScript welcome!
## Commands
The following commands are available to you on this project. Add more, or modify them as needed in your `./package.json` file.
| Command | Action |
| --- | --- |
| npm start | Start the development server |
| npm run prepare | Prepare the workspace |
| npm run build | Locally generate the app's build files to `./output` |
| npm run preview | Preview the built app locally |
| Command | Action |
| --------------- | ---------------------------------------------------- |
| npm run dev | Start the development server |
| npm run prepare | Prepare the workspace |
| npm run build | Locally generate the app's build files to `./output` |
| npm run preview | Preview the built app locally |

4
templates/basic/package.json
View file

@ -13,7 +13,7 @@
"typescript": "^5.7.3"
},
"dependencies": {
"@mcflyjs/config": "^0.2.3",
"@mcflyjs/core": "^0.8.1"
"@mcflyjs/config": "^0.2.7",
"@mcflyjs/core": "^0.8.5"
}
}

4
templates/basic/src/components/my-footer.html
View file

@ -1,9 +1,5 @@
<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
<p>
<small
>✨ Star on <a href="https://github.com/ayoayco/McFly">GitHub</a> to
support!</small
><br />
<slot />
</p>
</footer>

2
templates/basic/src/pages/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<!--
Hello! This page is an example McFly page.
See more on https://ayco.io/gh/McFly
See more on https://ayco.io/sh/mcfly
-->
<my-head>
<title>McFly: Back to the Basics. Into the Future.</title>

0
templates/basic/public/favicon.ico → templates/basic/src/public/favicon.ico
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
templates/basic/public/reset.css → templates/basic/src/public/reset.css
View file

0
templates/basic/public/robots.txt → templates/basic/src/public/robots.txt
View file