13 changed files with 829 additions and 983 deletions
--- a/README.md
+++ b/README.md
@ -2,13 +2,6 @@

 Use [Vite](https://vitejs.dev/) Starter Template to scaffold a new [Riot](https://riot.js.org/) project.

-## Features
-
-Minimal SPA setup using
-
- Riot 9.x
- Route 9.x
- Vite 6.x

 ## Getting Started

@ -31,34 +24,62 @@ When you use this template, you should update the following with your informatio
 - [ ] Change the favicon in `public`
 - [ ] Clean up the README

-
 ### Project Structure

 ```
 dist/                               <-- `npm run build` app
-app/                                <-- your app code
+src/                                <-- your source code
    css/                            <-- processed css files
    js/                             <-- processed javascript files
    public/                         <-- unprocessed static `/` assets
    components/                     <-- riots components
-        app.riot
-    pages/                          <-- semantic page/components
-        riot-welcome.riot
-        riot-about.riot
-    boot.js                         <-- app bootstrap
+        hello-riot/
+            hello-riot.riot         <-- riot component
+            hello-riot.spec.js      <-- component tests
+    app.js                          <-- app initialization
 index.html                          <-- START HERE
 vite.config.js                      <-- build configuration
 README.md
 ...                                 <-- misc project meta files
 ```

+### Mounting Strategy
+
+This template automaticly registers and mounts riot components. These global **components** can in-turn can mount other nested components via `components` export option.
+
+#### Example
+
+```
+// my-page.riot
+<my-page>
+    <div>
+        <example-component></example-component>
+    </div>
+
+    <script>
+        import Example from './example-component/example-component.riot';
+
+        export default {
+            components: {
+                Example
+            }
+        }
+    </script>
+</my-page>
+```
+
+> SEE: `/src/app.js` for more information
+
+
 ## NPM Scripts

- `npm run dev` - Starts the development server at port 5173
+- `npm run dev` - Starts the development server at port 3000
 - `npm run build` - Builds the application in a dist folder
- `npm run preview` - Serves the build files (dist folder) locally at port 4173
+- `npm run preview` - Serves the build files (dist folder) locally at port 5000

-> See [ViteJS Documentation](https://vitejs.dev/) for more information
+> Note that if after this last command you do not see anything, you can use instead this other command:
+
+`npm run preview --host` - You should then be able to see your files locally at port 5000


 ## License
--- a/app/boot.js
+++ b/app/boot.js
@ -1,38 +0,0 @@
-import * as riot from "riot";
-import {Route, Router} from "@riotjs/route";
-import app from "./components/app.riot";
-
-const boot = {
-    // start-up actions here
-    start() {
-        // install plugins
-        this.plugins();
-
-        // mount components
-        this.mount();
-    },
-
-    // extend functionality
-    plugins() {
-        riot.install((component) => {
-            // add your own features here
-            component.version = {
-                riot: "9.x.x",
-                vite: "6.x.x",
-                app: "4.0.0"
-            };
-        });
-    },
-
-    mount() {
-        // register core app component
-        riot.register("app", app);
-        riot.register("router", Router);
-        riot.register("route", Route);
-
-        // mount main app
-        riot.mount("app");
-    }
-}
-
-boot.start();
--- a/app/components/app.riot
+++ b/app/components/app.riot
@ -1,32 +0,0 @@
-<app>
-    <section class="splash">
-        <router>
-            <div class="flex">
-                <a href="/">Home</a>
-                <img src="/assets/images/square.svg" />
-                <a href="/about">About</a>
-            </div>
-        </router>
-        <route each="{page in state.pages}" path="{page.path}">
-            <div is="{page.component}" {...page.props}></div>
-        </route>
-    </section>
-
-    <script>
-        import RiotWelcome from "../pages/riot-welcome.riot";
-        import RiotAbout from "../pages/riot-about.riot";
-
-        export default {
-            components: {
-                RiotWelcome,
-                RiotAbout
-            },
-            state: {
-                pages: [
-                    {path: "/", component: "riot-welcome", props: {version: "9.x"}},
-                    {path: "/about", component: "riot-about"},
-                ]
-            }
-        }
-    </script>
-</app>
--- a/app/pages/riot-about.riot
+++ b/app/pages/riot-about.riot
@ -1,26 +0,0 @@
-<riot-about>
-    <section class="splash">
-        <h2>About <br> Template Starter</h2>
-        <p>
-            Designed as minimal starting point with enough examples
-            code to get you started in building your very own
-
-            <h3>Single-Page-Application</h3>
-
-            <p><code>components/pages</code></p>
-            <p><code>state</code></p>
-            <p><code>routing</code></p>
-
-            <p>
-                These core examples are in<br/>
-                <code>app/components/app.riot</code>
-                <p>
-                    bootstrap global configuration in <br/>
-                    <code>app/boot.js</code>
-                </p>
-            </p>
-            <br>
-            <a href="/">Enjoy</a>
-        </p>
-    </section>
-</riot-about>
--- a/index.html
+++ b/index.html
@ -3,12 +3,11 @@
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="/app/css/main.css">
+        <link rel="stylesheet" href="/src/css/app.css">
        <title>Riot Template</title>
    </head>
    <body>
-        <app></app>
-
-        <script type="module" src="/app/boot.js"></script>
+        <hello-riot version="v7.x"></hello-riot>
+        <script type="module" src="/src/app.js"></script>
    </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,22 +1,18 @@
 {
  "name": "vite-riot-template",
-  "version": "4.0.0",
+  "version": "2.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
-  "engines": {
-    "node": ">18.0.0 <23.0.0"
-  },
  "dependencies": {
-    "@riotjs/route": "^9.2.2",
-    "riot": "^9.4.6"
+    "riot": "^7.1.0"
  },
  "devDependencies": {
-    "@riotjs/compiler": "^9.4.4",
-    "rollup-plugin-riot": "^9.0.2",
-    "vite": "^6.2.2"
+    "@riotjs/compiler": "^6.4.2",
+    "rollup-plugin-riot": "^6.0.0",
+    "vite": "^4.1.4"
  }
 }
--- a/src/app.js
+++ b/src/app.js
@ -0,0 +1,17 @@
+// RiotJS
+import * as riot from 'riot';
+
+/**
+ * Recursively scan this directory for the Riot components and
+ * automatically register them with their "name".
+ *
+ * Eg. ./components/ExampleComponent.riot -> <example-component></example-component>
+ */
+Object.entries(import.meta.glob('./**/*.riot', { eager: true })).forEach(([path, definition]) => {
+
+    // component name
+    let name = path.split('/').pop().replace(/\.\w+$/, '');
+
+    riot.register(name, definition.default);
+    riot.mount(name);
+});
--- a/src/components/hello-riot.riot
+++ b/src/components/hello-riot.riot
@ -1,25 +1,25 @@
-<riot-welcome>
-    <section class="splash">
-        <h2>Welcome to Your Riot.js Application</h2>
+<hello-riot>
+    <div class="splash">
+        <img src="/assets/images/square.svg" />
+        <h1>Welcome to Your Riot.js Application</h1>

        <p>
-            Start development with
-            <a>RiotJS</a>, a component-based ui library,
-            <a>Riot/Route</a>, a client-side routing library, and
-            <a>Vite</a> front-end build tooling.
+            Start your development with
+            <a>Riot</a>, a component-based ui library, running on the
+            <a>Vite</a> front-end tooling.
        </p>

-        <h3>Getting Started</h3>
+        <h2>Getting Started</h2>
        <p>
            This page is found at <br/>
-            <code>app/pages/riot-welcome.riot</code>
+            <code>src/components/hello-riot/hello-riot.riot</code>
            <p>
-                and is registered via <br/>
-                <code>app/boot.js</code>
+                and is auto-registered via <br/>
+                <code>src/app.js</code>
            </p>
        </p>

-        <h3>Documentation</h3>
+        <h2>Documentation</h2>

        <div class="flex">
            <span>
@ -31,11 +31,11 @@
            <span>
                <a href="https://vitejs.dev/guide/">Vite</a>
                <br/>
-                <code>v6.x</code>
+                <code>v4.x</code>
            </span>
        </div>

-        <h3>Ecosystem</h3>
+        <h2>Ecosystem</h2>

        <div class="flex">
            <a href="https://github.com/riot/examples">Examples</a>
@ -43,11 +43,11 @@
            <a href="https://github.com/riot/riot/blob/main/AWESOME.md">Community</a>
            <a href="https://github.com/riot/riot">Github</a>
        </div>
-    </section>
+    </div>

    <script>
        export default {

        }
    </script>
-</riot-welcome>
+</hello-riot>
--- a/app/css/main.css
+++ b/app/css/main.css
@ -10,14 +10,6 @@ h1, h2, h3 {
  margin: 1rem;
 }

-h3 {
-  color: #ED1846;
-}
-
-p {
-  margin: 1rem;
-}
-
 a {
  color: #ED1
 }
@ -33,7 +25,7 @@ code {
 }

 .splash {
-    font-size: 1.6rem;
+    font-size: larger;
    text-align: center;
    margin: 4vh auto;
    width: 620px;
--- a/src/public/assets/images/square.svg
+++ b/src/public/assets/images/square.svg
--- a/src/public/favicon.ico
+++ b/src/public/favicon.ico
--- a/vite.config.js
+++ b/vite.config.js
@ -2,8 +2,6 @@ import { defineConfig } from "vite";
 import riot from 'rollup-plugin-riot';

 export default defineConfig({
-    input: "app/**/*",
-    output: "dist/bundle.js",
-    plugins: [riot()],
-    publicDir: 'app/public'
+    plugins: [{...riot(), enforce: 'pre'}],
+    publicDir: 'src/public'
 });