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
 
@@ -24,62 +31,34 @@ 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
-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/
+        app.riot
-            hello-riot.riot         <-- riot component
+    pages/                          <-- semantic page/components
-            hello-riot.spec.js      <-- component tests
+        riot-welcome.riot
-    app.js                          <-- app initialization
+        riot-about.riot
+    boot.js                         <-- app bootstrap
 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 3000
+- `npm run dev` - Starts the development server at port 5173
 - `npm run build` - Builds the application in a dist folder
-- `npm run preview` - Serves the build files (dist folder) locally at port 5000
+- `npm run preview` - Serves the build files (dist folder) locally at port 4173
 
-> Note that if after this last command you do not see anything, you can use instead this other command:
+> See [ViteJS Documentation](https://vitejs.dev/) for more information
-
-`npm run preview --host` - You should then be able to see your files locally at port 5000
 
 
 ## License

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>
+<riot-welcome>
-    <div class="splash">
+    <section class="splash">
-        <img src="/assets/images/square.svg" />
+        <h2>Welcome to Your Riot.js Application</h2>
-        <h1>Welcome to Your Riot.js Application</h1>
 
         <p>
-            Start your development with
+            Start development with
-            <a>Riot</a>, a component-based ui library, running on the
+            <a>RiotJS</a>, a component-based ui library,
-            <a>Vite</a> front-end tooling.
+            <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/hello-riot.riot</code>
+            <code>app/pages/riot-welcome.riot</code>
             <p>
-                and is auto-registered via <br/>
+                and is registered via <br/>
-                <code>src/app.js</code>
+                <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>v4.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,11 +3,12 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="/src/css/app.css">
+        <link rel="stylesheet" href="/app/css/main.css">
         <title>Riot Template</title>
     </head>
     <body>
-        <hello-riot version="v7.x"></hello-riot>
+        <app></app>
-        <script type="module" src="/src/app.js"></script>
+
+        <script type="module" src="/app/boot.js"></script>
     </body>
 </html>

package.json

@@ -1,18 +1,22 @@
 {
   "name": "vite-riot-template",
-  "version": "2.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": "^7.1.0"
+    "@riotjs/route": "^9.2.2",
+    "riot": "^9.4.6"
   },
   "devDependencies": {
-    "@riotjs/compiler": "^6.4.2",
+    "@riotjs/compiler": "^9.4.4",
-    "rollup-plugin-riot": "^6.0.0",
+    "rollup-plugin-riot": "^9.0.2",
-    "vite": "^4.1.4"
+    "vite": "^6.2.2"
   }
 }

src/app.js

@@ -1,17 +0,0 @@
-// 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);
-});

vite.config.js

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