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

.build.yml

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

.build.yml.bkup

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

.github/workflows/eslint.yml

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

.github/workflows/test.yml

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

.gitignore

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

CONTRIBUTING.md

@@ -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.

README.md

@@ -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 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 and that's all the component system I needed?
+- 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 and assemble them easily in a page?
+- 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.

netlify.toml

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

package.json

@@ -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"
   },

packages/config/README.md

@@ -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 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 can write HTML fragments and assemble them easily in a page?
+- 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 |
+| 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/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/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) |
+| [`@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) |
+| [`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)_

packages/config/nitro-config.js

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

packages/config/package.json

@@ -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": {

packages/core/README.md

@@ -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 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 can write HTML fragments and assemble them easily in a page?
+- 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 |
+| 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/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/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) |
+| [`@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) |
+| [`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)_

packages/core/cli/commands/build.mjs

@@ -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,
+      ...nitroConfig,
-      // spread mcfly.nitro config
+
-      ...(mcflyConfig.nitro ?? {}),
+      minify: args.minify ?? nitroConfig.minify,
-      ...(nitroConfig ?? {}),
+      preset: args.preset ?? nitroConfig.preset,
-      ...mcflyNitroConfig,
     })
-    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)

packages/core/cli/commands/prepare.mjs

@@ -3,8 +3,8 @@
 import { consola } from 'consola'
 import { defineCommand } from 'citty'
 import { resolve } from 'pathe'
-import { createNitro } from 'nitropack'
+import { createNitro, writeTypes } from 'nitropack'
-import { 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)

packages/core/cli/commands/serve.mjs

@@ -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
+          ...nitroConfig,
-          ...(mcflyConfig.nitro ?? {}),
-          ...(nitroConfig ?? {}),
-          ...mcflyNitroConfig,
         },
         {
           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,

packages/core/get-nitro-config.js

@@ -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]
+}

packages/core/mcfly-nitro-config.js

@@ -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'],
+      },
+    ],
+  },
+}

packages/core/package.json

@@ -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",
+    "test": "echo \"Error: no test specified\" && exit 1"
-    "build:middleware": "npx esbuild route-middleware.js --bundle --outfile=mcfly-middleware.js"
   },
   "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",

packages/core/route-middleware.js

@@ -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(
+  const { appConfigFile } = useRuntimeConfig()
-    (key) => `/${key.replace('root:public:', '')}`
+  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:',
+    'ms'
-    event.path
   )
   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

packages/core/runtime/index.js

@@ -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'

packages/core/runtime/inject-elements.mjs

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

packages/core/runtime/inject-fragments.mjs

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

packages/create-mcfly/README.md

@@ -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)_

packages/create-mcfly/index.js

@@ -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(

packages/create-mcfly/package.json

@@ -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": {

site/README.md

@@ -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)_

site/mcfly.config.mjs

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

site/package.json

@@ -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"
   }
 }

site/src/pages/demo.html

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

site/src/pages/index.html

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

templates/basic/.gitignore

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

templates/basic/README.md

@@ -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 |
+| Command         | Action                                               |
-| --- | --- |
+| --------------- | ---------------------------------------------------- |
-| npm start | Start the development server |
+| npm run dev     | Start the development server                         |
-| npm run prepare | Prepare the workspace |
+| npm run prepare | Prepare the workspace                                |
-| npm run build | Locally generate the app's build files to `./output` |
+| npm run build   | Locally generate the app's build files to `./output` |
-| npm run preview | Preview the built app locally |
+| npm run preview | Preview the built app locally                        |

templates/basic/package.json

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

templates/basic/src/components/my-footer.html

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

templates/basic/src/pages/index.html

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