add routing

This commit is contained in:
Geoff Doty 2024-09-01 11:45:46 -04:00
parent 72bb631f81
commit 2065751df5
7 changed files with 151 additions and 21 deletions

76
package-lock.json generated
View File

@ -8,12 +8,16 @@
"name": "vite-riot-template", "name": "vite-riot-template",
"version": "3.0.0", "version": "3.0.0",
"dependencies": { "dependencies": {
"@riotjs/route": "^9.2.0",
"riot": "^9.3.0" "riot": "^9.3.0"
}, },
"devDependencies": { "devDependencies": {
"@riotjs/compiler": "^9.2.0", "@riotjs/compiler": "^9.2.0",
"rollup-plugin-riot": "^9.0.2", "rollup-plugin-riot": "^9.0.2",
"vite": "^5.4.2" "vite": "^5.4.2"
},
"engines": {
"node": ">18.0.0 <21.0.0"
} }
}, },
"node_modules/@babel/helper-string-parser": { "node_modules/@babel/helper-string-parser": {
@ -472,6 +476,19 @@
"npm": ">=3.0" "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": { "node_modules/@riotjs/util": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.4.0.tgz", "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.4.0.tgz",
@ -725,6 +742,35 @@
"node": ">=4" "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": { "node_modules/css-simple-parser": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-simple-parser/-/css-simple-parser-3.0.0.tgz", "resolved": "https://registry.npmjs.org/css-simple-parser/-/css-simple-parser-3.0.0.tgz",
@ -749,8 +795,7 @@
"node_modules/cumpa": { "node_modules/cumpa": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/cumpa/-/cumpa-2.0.1.tgz", "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": { "node_modules/curri": {
"version": "2.0.3", "version": "2.0.3",
@ -764,6 +809,14 @@
"integrity": "sha512-y5wnIx97oe0IqMllL/lizgkK2c9vu1cQeqPCCsS7mwNdPuYxg3b04eDJynHhC63kM8+ZsteOmiPElfVGOUmmKg==", "integrity": "sha512-y5wnIx97oe0IqMllL/lizgkK2c9vu1cQeqPCCsS7mwNdPuYxg3b04eDJynHhC63kM8+ZsteOmiPElfVGOUmmKg==",
"dev": true "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": { "node_modules/esbuild": {
"version": "0.21.5", "version": "0.21.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", "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": "^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": { "node_modules/picocolors": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@ -911,6 +969,15 @@
"node": "^10 || ^12 || >=14" "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": { "node_modules/recast": {
"version": "0.23.9", "version": "0.23.9",
"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz", "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
@ -995,6 +1062,11 @@
"rollup": ">=2.53.1" "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": { "node_modules/source-map": {
"version": "0.7.4", "version": "0.7.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",

View File

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

View File

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

View File

@ -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>

View File

@ -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> <p>
Start your development with Start your development with
@ -9,17 +8,17 @@
<a>Vite</a> front-end tooling. <a>Vite</a> front-end tooling.
</p> </p>
<h2>Getting Started</h2> <h3>Getting Started</h3>
<p> <p>
This page is found at <br/> This page is found at <br/>
<code>src/components/hello-riot.riot</code> <code>src/components/riot-welcome.riot</code>
<p> <p>
and is auto-registered via <br/> and is registered via <br/>
<code>src/app.js</code> <code>src/app.js</code>
</p> </p>
</p> </p>
<h2>Documentation</h2> <h3>Documentation</h3>
<div class="flex"> <div class="flex">
<span> <span>
@ -35,7 +34,7 @@
</span> </span>
</div> </div>
<h2>Ecosystem</h2> <h3>Ecosystem</h3>
<div class="flex"> <div class="flex">
<a href="https://github.com/riot/examples">Examples</a> <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/blob/main/AWESOME.md">Community</a>
<a href="https://github.com/riot/riot">Github</a> <a href="https://github.com/riot/riot">Github</a>
</div> </div>
</div> </section>
<script> <script>
export default { export default {
} }
</script> </script>
</hello-riot> </riot-welcome>

View File

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

View File

@ -1,4 +1,5 @@
import * as riot from "riot"; import * as riot from "riot";
import {Route, Router} from "@riotjs/route";
import app from "./components/app.riot"; import app from "./components/app.riot";
const main = { const main = {
@ -15,13 +16,19 @@ const main = {
plugins() { plugins() {
riot.install((component) => { riot.install((component) => {
// add your own features here // 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() { mount() {
// register core app component // register core app component
riot.register("app", app); riot.register("app", app);
riot.register("router", Router);
riot.register("route", Route);
// mount main app // mount main app
riot.mount("app"); riot.mount("app");