chore: mention generic plugin system for using server frameworks

- generic `server.serve` config
- new demo workspace
- new basic template
- updated readme

Reviewed-on: https://git.ayo.run/ayo/mcfly/pulls/3
Co-authored-by: Ayo <ayo@ayco.io>
Co-committed-by: Ayo <ayo@ayco.io>

.prettierignore

@@ -6,6 +6,6 @@
 **/*.yml
 **/*.yaml
 
-templates
+templates/**
 
 **/public/*

CHANGESET.md

@@ -1,4 +0,0 @@
-# Rough list of changes
-
-1. Expose a `McFly` object containing event properties to `server:setup` scripts. Useful for handling requests like form submission.
-2. Add a cozy demo page for form handling using the exposed `McFly` object

CONTRIBUTING.md

@@ -19,50 +19,7 @@ To start or participate on discussions, see our [mcfly-discussions](https://list
 
 ## Contribute Code
 
-We use `git` and `email` here -- it is actually fun!
-
-To get started, setup [git send-email](https://git-send-email.io).
-
-After setting up `git send-email` you can now follow the steps below to start hacking:
-
-1️⃣ Clone the repository to your local machine, then go into the project directory:
-
-```bash
-$ git clone https://git.sr.ht/~ayoayco/mcfly
-$ cd mcfly
-```
-
-2️⃣ Create a new branch for your changes:
-
-```bash
-$ git checkout -b my-branch
-```
-
-3️⃣ Make your changes, and then commit them with a descriptive message using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/):
-
-```bash
-$ git commit -m "feat(core): implement server-side rendering"
-```
-
-4️⃣ Use `git send-email` to send a patch:
-
-```bash
-$ git send-email --to="~ayoayco/mcfly-patches@lists.sr.ht" HEAD^
-```
-
-### Tips:
-
-💡 You can set the default "to" address for the project:
-
-```bash
-$ git config sendemail.to "~ayoayco/mcfly-patches@lists.sr.ht"
-```
-
-💡 The `HEAD^` bit is a reference to the latest commit, which will be added to your patch. This could be a range of commits as well if you have mutiple commits.
-
-5️⃣ After successfully sending your patch, wait for a response from us whether the patch needs rework... or a notification if it gets merged!
-
-> As a summary, we use `git` and `email` to collaborate on McFly. You have to set up [git send-email](https://git-send-email.io) and send patches via email. :)
+Due to still figuring out how parts fit together, we are not ready for code contributions.
 
 ## Get in touch
 

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="McFly logo" />
+  <img width="250" src="https://git.ayo.run/ayo/mcfly/raw/branch/main/assets/mcfly-logo-sm.png" alt="McFly logo" />
 </p>
 
 <h1 align="center">McFly</h1>
@@ -29,11 +29,13 @@ I thought:
 
 We are currently in a focused rewrite. All parts are subject to breaking changes in minor releases.
 
+- [x] generic plugin system for using server frameworks
 - [x] file-based API routing via fastify as server framework
-- [ ] file-based HTML pages routing & templating via Eta
+- [ ] file-based HTML pages routing
+- [ ] HTML templating via Eta
 - [ ] auto-registry of custom elements
 - [ ] SSR custom elements
-- [ ] SSG
+- [ ] SSG builds
 
 ## Try it today
 
@@ -62,12 +64,12 @@ npm create mcfly@latest
 
 The following are the project packages published on the NPM registry:
 
-| Package                                                | Description                                   | Version                                                          |
-| :----------------------------------------------------- | --------------------------------------------- | ---------------------------------------------------------------- |
-| [`@mcflyjs/config`](https://ayco.io/n/@mcflyjs/config) | Configuration handling for McFly projects     | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fconfig) |
-| [`@mcflyjs/core`](https://ayco.io/n/@mcflyjs/core)     | Commands & runtime handling                   | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fcore)   |
-| [`@mcflyjs/fastify`](https://ayco.io/n/@mcflyjs/core)  | Adapter for using fastify as server framework | ![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/config`](https://ayco.io/n/@mcflyjs/config)   | Configuration handling for McFly projects     | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fconfig/alpha) |
+| [`@mcflyjs/core`](https://ayco.io/n/@mcflyjs/core)       | Commands & runtime handling                   | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Fcore/alpha)   |
+| [`@mcflyjs/fastify`](https://ayco.io/n/@mcflyjs/fastify) | Adapter for using fastify as server framework | ![npm version](https://img.shields.io/npm/v/%40mcflyjs%2Ffastify)      |
+| [`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
 

VALUES.md

@@ -1,3 +0,0 @@
-# Values (initial)
-
-Our core values include leaning on open standards and decentralized technologies, which do not require any form of lock-in. Therefore, you don’t need anything else than `git` and `email` to collaborate.

eslint.config.mjs

@@ -16,7 +16,7 @@ export default [
   eslintPluginPrettierRecommended,
   includeIgnoreFile(gitignorePath),
   {
-    ignores: ['site/*', 'templates/*', '**/public/*', 'demo/*'],
+    ignores: ['site/*', 'templates/**', '**/public/*', 'demo/*'],
   },
   {
     rules: {

mcfly.config.mjs

@@ -1,3 +0,0 @@
-export default {
-  from: 'root',
-}

package.json

@@ -13,7 +13,6 @@
     "build:site:preview": "pnpm -F site build:preview",
     "template:basic": "pnpm run build && pnpm -F basic-template start",
     "create:mcfly": "node ./packages/create-mcfly",
-    "create:component": "node ./packages/create-component",
     "cli": "node ./packages/core/cli/index.js",
     "test": "vitest --run",
     "lint": "eslint . --config eslint.config.mjs --cache",

packages/config/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
+  <img width="250" src="https://git.ayo.run/ayo/mcfly/raw/branch/main/assets/mcfly-logo-sm.png" alt="McFly Logo" />
 </p>
 
 <h1 align="center">McFly</h1>

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcflyjs/config",
-  "version": "0.2.9",
+  "version": "0.3.0-alpha",
   "description": "Nitro configuration for McFly apps",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git.sr.ht/~ayoayco/mcfly",
+    "url": "https://git.ayo.run/ayo/mcfly",
     "directory": "packages/config"
   },
   "author": "Ayo Ayco",

packages/core/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
+  <img width="250" src="https://git.ayo.run/ayo/mcfly/raw/branch/main/assets/mcfly-logo-sm.png" alt="McFly Logo" />
 </p>
 
 <h1 align="center">McFly</h1>

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcflyjs/core",
-  "version": "0.8.8",
+  "version": "0.9.0-alpha",
   "description": "McFly core package",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git.sr.ht/~ayoayco/mcfly",
+    "url": "https://git.ayo.run/ayo/mcfly",
     "directory": "packages/core"
   },
   "author": "Ayo Ayco",

packages/core/src/index.ts

@@ -1,6 +1,18 @@
 #!/usr/bin/env node
 import { defineCommand, runMain, type ArgsDef, type CommandDef } from 'citty'
 
+export type Logger = {
+  log: Function
+  error: Function
+}
+
+export type ServerConfig = {
+  rootDir: string
+  apiDir: string
+  port: number
+  logger: Logger
+}
+
 const main: CommandDef<ArgsDef> = defineCommand({
   meta: {
     name: 'mcfly',

packages/create-mcfly/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
+  <img width="250" src="https://git.ayo.run/ayo/mcfly/raw/branch/main/assets/mcfly-logo-sm.png" alt="McFly Logo" />
 </p>
 
 <h1 align="center">Create McFly</h1>

packages/create-mcfly/index.js

@@ -7,15 +7,15 @@ import { spawnSync } from 'node:child_process'
 import path from 'node:path'
 
 const [, , directoryArg] = process.argv
-
-type PromptAction = {
-  prompt: string
-  info?: string
-  startMessage: string
-  command: string
-  subCommand: string
-  error: string
-}
+/**
+ * @typedef {Object} PromptAction
+ * @property {string} prompt - The prompt text to display
+ * @property {string} [info] - Additional information about the prompt
+ * @property {string} startMessage - Message to show when starting the action
+ * @property {string} command - The command to execute
+ * @property {string} subCommand - The subcommand to execute
+ * @property {string} error - Error message to display on failure
+ */
 
 /**
  * Create McFly App
@@ -42,7 +42,10 @@ async function create() {
   const hasErrors = await downloadTemplateToDirectory(directory)
 
   if (!hasErrors) {
-    const prompts: PromptAction[] = [
+    /**
+     * @type {Array<PromptAction>}
+     */
+    const prompts = [
       {
         prompt: `Would you like to install the dependencies to ${colorize(
           'bold',
@@ -80,7 +83,7 @@ async function create() {
  * @param {string} directory
  * @returns string
  */
-function getSafeDirectory(directory: string): string {
+function getSafeDirectory(directory) {
   const { platform } = process
   const locale = path[platform === `win32` ? `win32` : `posix`]
   const localePath = directory.split(path.sep).join(locale.sep)
@@ -92,16 +95,14 @@ function getSafeDirectory(directory: string): string {
  * @param {string} directory
  * @returns Promise<boolean> hasErrors
  */
-async function downloadTemplateToDirectory(
-  directory: string
-): Promise<boolean> {
+async function downloadTemplateToDirectory(directory) {
   let hasErrors = false
 
   try {
     consola.start(
       `Copying template to ${colorize('bold', getSafeDirectory(directory))}...`
     )
-    await downloadTemplate('sourcehut:ayoayco/mcfly/templates/basic', {
+    await downloadTemplate('github:ayo-run/mcfly/templates/basic', {
       dir: directory,
     })
   } catch (ㆆ_ㆆ) {
@@ -123,11 +124,11 @@ async function downloadTemplateToDirectory(
  * @param {string} cwd
  * @returns Promise<Array<boolean> | undefined>
  */
-async function askPrompts(
-  prompts: PromptAction[],
-  cwd: string
-): Promise<boolean[] | undefined> {
-  const results: boolean[] = []
+async function askPrompts(prompts, cwd) {
+  /**
+   * @type {Array<boolean>}
+   */
+  const results = []
 
   for (const p of prompts) {
     const userIntends = await consola.prompt(p.prompt, {
@@ -169,7 +170,7 @@ async function askPrompts(
  * @param {string} directory
  * @param {boolean} installDeps
  */
-function showResults(directory: string, installDeps: boolean) {
+function showResults(directory, installDeps) {
   let nextActions = [
     `Go to your project by running ${colorize('yellow', `cd ${directory}`)}`,
   ]
@@ -189,7 +190,7 @@ function showResults(directory: string, installDeps: boolean) {
     'bold',
     'McFly'
   )} app is ready: ${directory}\n\nNext actions: ${nextActions
-    .map((action, index) => `\n${++index}. ${action}`)
+    .map((action, index) => `\n${index}. ${action}`)
     .join('')}`
 
   consola.box(result)

packages/create-mcfly/package.json

@@ -1,27 +1,25 @@
 {
   "name": "create-mcfly",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "Create a new McFly app",
   "type": "module",
   "bin": {
-    "create-mcfly": "./dist/index.js"
+    "create-mcfly": "./index.js"
   },
-  "main": "./dist/index.js",
+  "main": "./index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "default": "./index.js"
     }
   },
   "scripts": {
-    "build": "tsc --erasableSyntaxOnly",
     "version": "npm version",
     "publish": "npm publish",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "https://git.sr.ht/~ayoayco/mcfly",
+    "url": "https://git.ayo.run/ayo/mcfly",
     "directory": "packages/create-mcfly"
   },
   "author": "Ayo Ayco",

packages/create-mcfly/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "allowJs": true,
-    "emitDeclarationOnly": false,
-    "declarationDir": "./dist",
-    "outDir": "./dist"
-  }
-}

packages/fastify/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ayo Ayco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/fastify/README.md

@@ -0,0 +1,72 @@
+<p align="center">
+  <img width="250" src="https://git.ayo.run/ayo/mcfly/raw/branch/main/assets/mcfly-logo-sm.png" alt="McFly Logo" />
+</p>
+
+<h1 align="center">McFly Fastify Adapter</h1>
+
+Use fastify as a server framework in McFly
+
+```
+npm create mcfly@latest
+```
+
+<p align="center"><strong>McFly</strong> is a no-framework framework<br />that assists in building on the Web</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/from-the_future-blue?style=flat" />
+  <img src="https://img.shields.io/badge/status-legit-purple?style=flat" />
+  <a href="https://mc-fly.vercel.app/demo" target="_blank"><img src="https://img.shields.io/badge/see-the_demo_↗️-blue?style=flat&colorB=28CF8D" /></a>
+</p>
+
+## Features
+
+The time has come for vanilla Web tech. 🎉
+
+✅ Create web apps with vanilla custom elements<br>
+✅ Write real .HTML files<br>
+✅ Have no frameworks or reactivity libraries on the browser<br>
+✅ Use server-side rendering<br>
+✅ 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. `./src/api/`**
+
+- file-based routing for REST API endpoints
+- e.g., `./src/api/users.ts` can be accessed via `http://<domain>/api/users`
+- TypeScript or JavaScript welcome!
+
+## McFly config
+
+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'
+
+export default defineConfig({
+  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](https://ayco.io)_

packages/fastify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcflyjs/fastify",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -12,5 +12,8 @@
   "dependencies": {
     "@fastify/autoload": "6.3.1",
     "fastify": "5.8.5"
+  },
+  "devDependencies": {
+    "@mcflyjs/core": "workspace:*"
   }
 }

packages/fastify/serve.js

@@ -2,6 +2,13 @@ import Fastify from 'fastify'
 import AutoLoad from '@fastify/autoload'
 import path from 'node:path'
 
+/**
+ * @typedef {import('@mcflyjs/core').ServerConfig} ServerConfig
+ */
+
+/**
+ * @param {ServerConfig} param
+ */
 export default ({ rootDir, apiDir, logger, port }) => {
   const server = Fastify()
   const portNumber = port ?? 3000

pnpm-lock.yaml

@@ -148,6 +148,10 @@ importers:
       fastify:
         specifier: 5.8.5
         version: 5.8.5
+    devDependencies:
+      '@mcflyjs/core':
+        specifier: workspace:*
+        version: link:../core
 
   site:
     dependencies:
@@ -159,6 +163,18 @@ importers:
         version: link:../packages/core
 
   templates/basic:
+    dependencies:
+      '@mcflyjs/config':
+        specifier: ^0.3.0-alpha
+        version: 0.3.0-alpha
+      '@mcflyjs/core':
+        specifier: ^0.9.0-alpha
+        version: 0.9.0-alpha(magicast@0.3.5)
+      '@mcflyjs/fastify':
+        specifier: ^0.1
+        version: 0.1.0
+
+  templates/basic-legacy:
     dependencies:
       '@mcflyjs/config':
         specifier: ^0.2.9
@@ -1235,10 +1251,20 @@ packages:
   '@mcflyjs/config@0.2.9':
     resolution: {integrity: sha512-ZwFL1CVTEiVn+XSBN/aoIaPkTiZcZfXoQNOWpJGU/sgaJ1KxbXsXpyEalPzI79IRAD/tbSW7Tb2M4GbM2VgNPg==}
 
+  '@mcflyjs/config@0.3.0-alpha':
+    resolution: {integrity: sha512-ZgiR+7v1WZ9bI7m9YEfcM0e6hjj2oz7BpKgbnDs+v9LyoRx21F1m+ulbonNKj4bgTAVcF/JrzVqz1vwcu631FA==}
+
   '@mcflyjs/core@0.8.8':
     resolution: {integrity: sha512-+4P22OLBPWkiE/6+RogtZLIotUldxcHJbvpVwySDnR0ae4ME/Lwe4uZTW3eVHRsjny854Xdncm5q+qfZWf7mBg==}
     hasBin: true
 
+  '@mcflyjs/core@0.9.0-alpha':
+    resolution: {integrity: sha512-8G/O88tmKa0wvI1QEALhuf8mhbHBDhstvOeus0QeSwTzo4cSb0wz2nqS9sEjmL+lb5SisxLkkTXz3dOJ8hclig==}
+    hasBin: true
+
+  '@mcflyjs/fastify@0.1.0':
+    resolution: {integrity: sha512-O4ZRbM5VG6x+pJS/q0QkmCXz6K/qSdMlp7kSx9JJ44Fp2tbF6K8oDj0h1w/lMaOLnbqM7cDDO/Gd3Kj1PClD0g==}
+
   '@netlify/ai@0.4.1':
     resolution: {integrity: sha512-ETLtV/9taYrcGhszwO+BLFgFJJ2MCnJp8BwxfwV6Z/+z3SsaUG4ExC8x4xzNCdB2GPWxXrXkvR2LFNsPFSLcRA==}
     engines: {node: '>=20.6.1'}
@@ -7086,6 +7112,11 @@ snapshots:
       h3: 1.15.11
       web-component-base: 4.1.2
 
+  '@mcflyjs/config@0.3.0-alpha':
+    dependencies:
+      h3: 1.15.11
+      web-component-base: 4.1.2
+
   '@mcflyjs/core@0.8.8(@electric-sql/pglite@0.3.16)(@netlify/blobs@10.7.4)(magicast@0.3.5)':
     dependencies:
       c12: 3.3.4(magicast@0.3.5)
@@ -7130,6 +7161,24 @@ snapshots:
       - uploadthing
       - xml2js
 
+  '@mcflyjs/core@0.9.0-alpha(magicast@0.3.5)':
+    dependencies:
+      c12: 3.3.4(magicast@0.3.5)
+      citty: 0.1.6
+      consola: 3.4.2
+      devalue: 5.8.0
+      esprima: 4.0.1
+      h3: 1.15.11
+      pathe: 2.0.3
+      ultrahtml: 1.6.0
+    transitivePeerDependencies:
+      - magicast
+
+  '@mcflyjs/fastify@0.1.0':
+    dependencies:
+      '@fastify/autoload': 6.3.1
+      fastify: 5.8.5
+
   '@netlify/ai@0.4.1':
     dependencies:
       '@netlify/api': 14.0.18

pnpm-workspace.yaml

@@ -10,3 +10,7 @@ allowBuilds:
   sharp: false
   unix-dgram: false
   web-component-base: true
+minimumReleaseAgeExclude:
+  - '@mcflyjs/config@0.3.0-alpha'
+  - '@mcflyjs/core@0.9.0-alpha'
+  - '@mcflyjs/fastify@0.1.0'

site/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="250" src="https://git.sr.ht/~ayoayco/mcfly/blob/main/assets/mcfly-logo-sm.png" alt="rRick & Morty cartoon" />
+  <img width="250" src="https://git.ayo.run/ayo/mcfly/raw/branch/main/assets/mcfly-logo-sm.png" alt="McFly Logo" />
 </p>
 
 <h1 align="center">McFly Docs</h1>

site/package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "https://git.sr.ht/~ayoayco/mcfly",
+    "url": "https://git.ayo.run/ayo/mcfly",
     "directory": "app"
   },
   "author": "Ayo Ayco",

site/src/pages/demo.html

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

templates/basic-legacy/mcfly.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import { defineMcFlyConfig } from '@mcflyjs/config'
+
+export default defineMcFlyConfig({
+  components: 'js',
+})

templates/basic-legacy/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "basic-legacy-template",
+  "description": "McFly starter project",
+  "scripts": {
+    "start": "mcfly serve",
+    "prepare": "mcfly prepare",
+    "dev": "mcfly serve",
+    "build": "mcfly build",
+    "preview": "node .output/server/index.mjs",
+    "build:preview": "npm run build && npm run preview"
+  },
+  "dependencies": {
+    "@mcflyjs/config": "^0.2.9",
+    "@mcflyjs/core": "^0.8.8"
+  }
+}

templates/basic-legacy/src/pages/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <!--
+    Hello! This page is an example McFly page.
+    See more on https://ayco.io/sh/mcfly
+  -->
+  <my-head>
+    <title>McFly: Back to the Basics. Into the Future.</title>
+    <script server:setup>
+      const project = {
+        name: "McFly",
+        description: "Back to the Basics. Into the Future."
+      };
+    </script>
+  </my-head>
+  <body>
+    <awesome-header>
+      <span>{{ project.name }}</span>
+      <span slot="description">{{ project.description }}</span>
+    </awesome-header>
+    <main>
+      <h2>Welcome to {{ project.name }}</h2>
+      <p>Server date time: {{new Date().toLocaleString()}}</p>
+      <p>
+        Here's an interactive custom element:
+        <my-hello-world></my-hello-world>
+      </p>
+      <code-block language="js">
+class MyHelloWorld extends WebComponent {
+  static props = {
+    myName: &quot;World&quot;,
+    count: 0
+  }
+
+  updateLabel() {
+    this.props.myName = `Clicked ${++this.props.count}x`;
+  }
+
+  get template() {
+    return html`
+      &lt;button onClick=${() => this.updateLabel()} style="cursor:pointer"&gt;
+        Hello ${this.props.myName}!
+      &lt;/button&gt;`;
+  }
+}</code-block>
+    </main>
+    <my-footer>
+      <small>
+        Learn how to build components easily at <a href="https://WebComponent.io">WebComponent.io</a>
+      </small>
+    </my-footer>
+  </body>
+</html>

templates/basic/mcfly.config.mjs

@@ -1,6 +1,6 @@
-// @ts-check
-import { defineMcFlyConfig } from '@mcflyjs/config'
+import { defineConfig } from '@mcflyjs/config'
+import fastify from '@mcflyjs/fastify'
 
-export default defineMcFlyConfig({
-  components: 'js',
+export default defineConfig({
+  server: fastify(),
 })

templates/basic/package.json

@@ -1,16 +1,17 @@
 {
-  "name": "basic-template",
-  "description": "McFly starter project",
+  "name": "mcfly-basic",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
   "scripts": {
-    "start": "mcfly serve",
-    "prepare": "mcfly prepare",
-    "dev": "mcfly serve",
-    "build": "mcfly build",
-    "preview": "node .output/server/index.mjs",
-    "build:preview": "npm run build && npm run preview"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "mcfly serve"
   },
+  "author": "",
+  "license": "ISC",
   "dependencies": {
-    "@mcflyjs/config": "^0.2.9",
-    "@mcflyjs/core": "^0.8.8"
+    "@mcflyjs/config": "^0.3.0-alpha",
+    "@mcflyjs/core": "^0.9.0-alpha",
+    "@mcflyjs/fastify": "^0.1"
   }
 }

templates/basic/src/api/README.md

@@ -0,0 +1,29 @@
+# Routes Folder
+
+Routes define the pathways within your application.
+Fastify's structure supports the modular monolith approach, where your
+application is organized into distinct, self-contained modules.
+This facilitates easier scaling and future transition to a microservice architecture.
+In the future you might want to independently deploy some of those.
+
+In this folder you should define all the routes that define the endpoints
+of your web application.
+Each service is a [Fastify
+plugin](https://fastify.dev/docs/latest/Reference/Plugins/), it is
+encapsulated (it can have its own independent plugins) and it is
+typically stored in a file; be careful to group your routes logically,
+e.g. all `/users` routes in a `users.js` file. We have added
+a `root.js` file for you with a '/' root added.
+
+If a single file becomes too large, create a folder and add a `index.js` file there:
+this file must be a Fastify plugin, and it will be loaded automatically
+by the application. You can now add as many files as you want inside that folder.
+In this way you can create complex routes within a single monolith,
+and eventually extract them.
+
+If you need to share functionality between routes, place that
+functionality into the `plugins` folder, and share it via
+[decorators](https://fastify.dev/docs/latest/Reference/Decorators/).
+
+If you're a bit confused about using `async/await` to write routes, you would
+better take a look at [Promise resolution](https://fastify.dev/docs/latest/Reference/Routes/#promise-resolution) for more details.

templates/basic/src/api/example/index.js

@@ -0,0 +1,6 @@
+export default async (fastify) => {
+  fastify.get('/', async function (request, reply) {
+    console.log({ request, reply })
+    return 'This is an example'
+  })
+}

templates/basic/src/api/index.js

@@ -0,0 +1,5 @@
+export default async (fastify) => {
+  fastify.get('/', async function (request, reply) {
+    return 'This is the API Index'
+  })
+}

templates/basic/src/api/root.js

@@ -0,0 +1,6 @@
+export default async function (fastify, opts) {
+  fastify.get('/', async function (request, reply) {
+    console.log({ opts, request, reply })
+    return { root: true }
+  })
+}

templates/basic/src/pages/index.html

@@ -1,53 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!--
-    Hello! This page is an example McFly page.
-    See more on https://ayco.io/sh/mcfly
-  -->
-  <my-head>
-    <title>McFly: Back to the Basics. Into the Future.</title>
-    <script server:setup>
-      const project = {
-        name: "McFly",
-        description: "Back to the Basics. Into the Future."
-      };
-    </script>
-  </my-head>
-  <body>
-    <awesome-header>
-      <span>{{ project.name }}</span>
-      <span slot="description">{{ project.description }}</span>
-    </awesome-header>
-    <main>
-      <h2>Welcome to {{ project.name }}</h2>
-      <p>Server date time: {{new Date().toLocaleString()}}</p>
-      <p>
-        Here's an interactive custom element:
-        <my-hello-world></my-hello-world>
-      </p>
-      <code-block language="js">
-class MyHelloWorld extends WebComponent {
-  static props = {
-    myName: &quot;World&quot;,
-    count: 0
-  }
-
-  updateLabel() {
-    this.props.myName = `Clicked ${++this.props.count}x`;
-  }
-
-  get template() {
-    return html`
-      &lt;button onClick=${() => this.updateLabel()} style="cursor:pointer"&gt;
-        Hello ${this.props.myName}!
-      &lt;/button&gt;`;
-  }
-}</code-block>
-    </main>
-    <my-footer>
-      <small>
-        Learn how to build components easily at <a href="https://WebComponent.io">WebComponent.io</a>
-      </small>
-    </my-footer>
-  </body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WORK IN PROGRESS</title>
+</head>
+<body>
+    <h1>WORK IN PROGRESS</h1>
+    <p>See <a href="https://ayco.io/sh/mcfly">the project repository</a> for more info.</p>
+</body>
 </html>