v4

README.md

@@ -2,6 +2,13 @@
 
 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
 
@@ -29,13 +36,16 @@ When you use this template, you should update the following with your informatio
 
 ```
 dist/                               <-- `npm run build` app
-src/                                <-- your source code
+app/                                <-- your app code
     css/                            <-- processed css files
     js/                             <-- processed javascript files
     public/                         <-- unprocessed static `/` assets
     components/                     <-- riots components
-        hello-riot.riot             <-- example riot component
-    main.js                         <-- main app initialization
+        app.riot
+    pages/                          <-- semantic page/components
+        riot-welcome.riot
+        riot-about.riot
+    boot.js                         <-- app bootstrap
 index.html                          <-- START HERE
 vite.config.js                      <-- build configuration
 README.md

app/boot.js

@@ -0,0 +1,38 @@
+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();

app/components/app.riot

@@ -0,0 +1,32 @@
+<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>

app/css/main.css

@@ -10,6 +10,14 @@ h1, h2, h3 {
   margin: 1rem;
 }
 
+h3 {
+  color: #ED1846;
+}
+
+p {
+  margin: 1rem;
+}
+
 a {
   color: #ED1
 }
@@ -25,7 +33,7 @@ code {
 }
 
 .splash {
-    font-size: larger;
+    font-size: 1.6rem;
     text-align: center;
     margin: 4vh auto;
     width: 620px;

app/pages/riot-about.riot

@@ -0,0 +1,26 @@
+<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>

app/pages/riot-welcome.riot

@@ -1,25 +1,25 @@
-<hello-riot>
-    <div class="splash">
-        <img src="/assets/images/square.svg" />
-        <h1>Welcome to Your Riot.js Application</h1>
+<riot-welcome>
+    <section class="splash">
+        <h2>Welcome to Your Riot.js Application</h2>
 
         <p>
-            Start your development with
-            <a>Riot</a>, a component-based ui library, running on the
-            <a>Vite</a> front-end tooling.
+            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.
         </p>
 
-        <h2>Getting Started</h2>
+        <h3>Getting Started</h3>
         <p>
             This page is found at <br/>
-            <code>src/components/hello-riot.riot</code>
+            <code>app/pages/riot-welcome.riot</code>
             <p>
-                and is auto-registered via <br/>
-                <code>src/app.js</code>
+                and is registered via <br/>
+                <code>app/boot.js</code>
             </p>
         </p>
 
-        <h2>Documentation</h2>
+        <h3>Documentation</h3>
 
         <div class="flex">
             <span>
@@ -31,11 +31,11 @@
             <span>
                 <a href="https://vitejs.dev/guide/">Vite</a>
                 <br/>
-                <code>v5.x</code>
+                <code>v6.x</code>
             </span>
         </div>
 
-        <h2>Ecosystem</h2>
+        <h3>Ecosystem</h3>
 
         <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>
-    </div>
+    </section>
 
     <script>
         export default {
 
         }
     </script>
-</hello-riot>
+</riot-welcome>

index.html

@@ -3,12 +3,12 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="/src/css/main.css">
+        <link rel="stylesheet" href="/app/css/main.css">
         <title>Riot Template</title>
     </head>
     <body>
         <app></app>
 
-        <script type="module" src="/src/main.js"></script>
+        <script type="module" src="/app/boot.js"></script>
     </body>
 </html>

package.json

@@ -1,18 +1,22 @@
 {
   "name": "vite-riot-template",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
+  "engines": {
+    "node": ">18.0.0 <23.0.0"
+  },
   "dependencies": {
-    "riot": "^9.2.2"
+    "@riotjs/route": "^9.2.2",
+    "riot": "^9.4.6"
   },
   "devDependencies": {
-    "@riotjs/compiler": "^9.1.3",
+    "@riotjs/compiler": "^9.4.4",
     "rollup-plugin-riot": "^9.0.2",
-    "vite": "^5.3.5"
+    "vite": "^6.2.2"
   }
 }

src/components/app.riot

@@ -1,15 +0,0 @@
-<app>
-    <div>
-        <hello-riot version="v9.x"></hello-riot>
-    </div>
-
-    <script>
-        import helloRiot from "./hello-riot.riot";
-
-        export default {
-            components: {
-                helloRiot
-            }
-        }
-    </script>
-</app>

src/main.js

@@ -1,21 +0,0 @@
-import * as riot from "riot";
-import app from "./components/app.riot";
-
-const main = {
-    init() {
-        // start-up actions here
-
-        // mount components
-        this.mount();
-    },
-
-    mount() {
-        // register core app component
-        riot.register("app", app);
-
-        // mount main app
-        riot.mount("app");
-    }
-}
-
-main.init();

vite.config.js

@@ -2,8 +2,8 @@ import { defineConfig } from "vite";
 import riot from 'rollup-plugin-riot';
 
 export default defineConfig({
-    input: "src/components",
+    input: "app/**/*",
     output: "dist/bundle.js",
     plugins: [riot()],
-    publicDir: 'src/public'
+    publicDir: 'app/public'
 });