add routing

package-lock.json

@@ -8,12 +8,16 @@
       "name": "vite-riot-template",
       "version": "3.0.0",
       "dependencies": {
+        "@riotjs/route": "^9.2.0",
         "riot": "^9.3.0"
       },
       "devDependencies": {
         "@riotjs/compiler": "^9.2.0",
         "rollup-plugin-riot": "^9.0.2",
         "vite": "^5.4.2"
+      },
+      "engines": {
+        "node": ">18.0.0 <21.0.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -472,6 +476,19 @@
         "npm": ">=3.0"
       }
     },
+    "node_modules/@riotjs/route": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@riotjs/route/-/route-9.2.0.tgz",
+      "integrity": "sha512-2zycIKX21rf37EtXr+YVvOBudLtbEVWEUU7UgYZilq+kxVR1HTM7h6nlrEdkZlWKIbM08q0ES09YgzWdbcnAEA==",
+      "dependencies": {
+        "@riotjs/util": "^2.2.4",
+        "bianco.attr": "^1.1.1",
+        "bianco.events": "^1.1.1",
+        "bianco.query": "^1.1.4",
+        "cumpa": "^2.0.1",
+        "rawth": "^3.0.0"
+      }
+    },
     "node_modules/@riotjs/util": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.4.0.tgz",
@@ -725,6 +742,35 @@
         "node": ">=4"
       }
     },
+    "node_modules/bianco.attr": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/bianco.attr/-/bianco.attr-1.1.1.tgz",
+      "integrity": "sha512-fTjfPnnGYiCVbe5UltC/LsDRtJE+MjmadtL749CMIfCwjl18sdbCkaQ7cgtSao6iC9ZJC8Pzw0rjMdIuA6mK1g==",
+      "dependencies": {
+        "bianco.dom-to-array": "^1.1.0"
+      }
+    },
+    "node_modules/bianco.dom-to-array": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bianco.dom-to-array/-/bianco.dom-to-array-1.1.0.tgz",
+      "integrity": "sha512-IWUgplQRhJSZh+7PgD/my5+X27PXNUFdcHPosOYz39a/iFF8Wl9d0N/mOArdR7Zgr3J0Q9pKVk7nO6W+7XZwBg=="
+    },
+    "node_modules/bianco.events": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/bianco.events/-/bianco.events-1.1.1.tgz",
+      "integrity": "sha512-Ja7oY4xThYgsmfS+JltOnzdAvqP90DVXjbXab0lwrygJdCVRoL0Q4SkEKVMnN1VqNfDtxIUKNlubEUVNp00H7A==",
+      "dependencies": {
+        "bianco.dom-to-array": "^1.1.0"
+      }
+    },
+    "node_modules/bianco.query": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/bianco.query/-/bianco.query-1.1.4.tgz",
+      "integrity": "sha512-jUu8l484ckacCBmxN0gYLZ4Ge5aMfReL+aYNiC81s37s8+l0+rn9pnQayEgQtMHGlnL8ejd+x5U2PKpo0rvQzw==",
+      "dependencies": {
+        "bianco.dom-to-array": "^1.1.0"
+      }
+    },
     "node_modules/css-simple-parser": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/css-simple-parser/-/css-simple-parser-3.0.0.tgz",
@@ -749,8 +795,7 @@
     "node_modules/cumpa": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/cumpa/-/cumpa-2.0.1.tgz",
-      "integrity": "sha512-8oBF1cSWkgYq0ZsLP9iiLLZDicIh1eYM8WLicRhaSLMrdtjEf9A3DgMYMxB/i/xgVUZGxPVD/hrwVzx/pjdmmw==",
+      "integrity": "sha512-8oBF1cSWkgYq0ZsLP9iiLLZDicIh1eYM8WLicRhaSLMrdtjEf9A3DgMYMxB/i/xgVUZGxPVD/hrwVzx/pjdmmw=="
-      "dev": true
     },
     "node_modules/curri": {
       "version": "2.0.3",
@@ -764,6 +809,14 @@
       "integrity": "sha512-y5wnIx97oe0IqMllL/lizgkK2c9vu1cQeqPCCsS7mwNdPuYxg3b04eDJynHhC63kM8+ZsteOmiPElfVGOUmmKg==",
       "dev": true
     },
+    "node_modules/erre": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/erre/-/erre-3.0.1.tgz",
+      "integrity": "sha512-NoexRasUiWU1CcBMh997iybzdKRw4RPhjjiVjPwh1h+aK0PglsR6+7A3osXP5829hXNnarn9Yr1Zi9ThwwV4aA==",
+      "dependencies": {
+        "ruit": "^1.0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -865,6 +918,11 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+      "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -911,6 +969,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/rawth": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rawth/-/rawth-3.0.0.tgz",
+      "integrity": "sha512-712WxtKAVEhtFm/4keDUefyjxAZR/jKrFR8ownCdjnFUxJstyigv3LBo3Shtd5VPC/p6r5gd6jY0bnAfPSol9Q==",
+      "dependencies": {
+        "erre": "^3.0.1",
+        "path-to-regexp": "^6.2.1"
+      }
+    },
     "node_modules/recast": {
       "version": "0.23.9",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
@@ -995,6 +1062,11 @@
         "rollup": ">=2.53.1"
       }
     },
+    "node_modules/ruit": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/ruit/-/ruit-1.0.4.tgz",
+      "integrity": "sha512-eiHVb18DQ24Of/fdJmZCysw6X21IIyed5c87eAW95KQY5TvTfh6SR9pCkAowciyvhW1Bhm3RXuRX6eILKl+49w=="
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-riot-template",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,6 +11,7 @@
     "node": ">18.0.0 <21.0.0"
   },
   "dependencies": {
+    "@riotjs/route": "^9.2.0",
     "riot": "^9.3.0"
   },
   "devDependencies": {

src/components/app.riot

@@ -1,14 +1,31 @@
 <app>
-    <div>
+    <section class="splash">
-        <hello-riot version="v9.x"></hello-riot>
+        <router>
-    </div>
+            <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 helloRiot from "./hello-riot.riot";
+        import RiotWelcome from "./riot-welcome.riot";
+        import RiotAbout from "./riot-about.riot";
 
         export default {
             components: {
-                helloRiot
+                RiotWelcome,
+                RiotAbout
+            },
+            state: {
+                pages: [
+                    {path: "/", component: "riot-welcome", props: {version: "9.x"}},
+                    {path: "/about", component: "riot-about"},
+                ]
             }
         }
     </script>

src/components/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</code></p>
+            <p><code>state</code></p>
+            <p><code>routing</code></p>
+
+            <p>
+                These core examples are in<br/>
+                <code>src/components/app.riot</code>
+                <p>
+                    global components are registered in <br/>
+                    <code>src/app.js</code>
+                </p>
+            </p>
+            <br>
+            <a href="/">Enjoy</a>
+        </p>
+    </section>
+</riot-about>

src/components/riot-welcome.riot

@@ -1,7 +1,6 @@
-<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
@@ -9,17 +8,17 @@
             <a>Vite</a> front-end 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>src/components/riot-welcome.riot</code>
             <p>
-                and is auto-registered via <br/>
+                and is registered via <br/>
                 <code>src/app.js</code>
             </p>
         </p>
 
-        <h2>Documentation</h2>
+        <h3>Documentation</h3>
 
         <div class="flex">
             <span>
@@ -35,7 +34,7 @@
             </span>
         </div>
 
-        <h2>Ecosystem</h2>
+        <h3>Ecosystem</h3>
 
         <div class="flex">
             <a href="https://github.com/riot/examples">Examples</a>
@@ -43,11 +42,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>

src/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;

src/main.js

@@ -1,4 +1,5 @@
 import * as riot from "riot";
+import {Route, Router} from "@riotjs/route";
 import app from "./components/app.riot";
 
 const main = {
@@ -15,13 +16,19 @@ const main = {
     plugins() {
         riot.install((component) => {
             // add your own features here
-            component.version = "3.0.0";
+            component.version = {
+                riot: "9.x.x",
+                vite: "5.x.x",
+                app: "3.1.0"
+            };
         });
     },
 
     mount() {
         // register core app component
         riot.register("app", app);
+        riot.register("router", Router);
+        riot.register("route", Route);
 
         // mount main app
         riot.mount("app");