add routing
This commit is contained in:
parent
72bb631f81
commit
2065751df5
|
|
@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-8oBF1cSWkgYq0ZsLP9iiLLZDicIh1eYM8WLicRhaSLMrdtjEf9A3DgMYMxB/i/xgVUZGxPVD/hrwVzx/pjdmmw=="
|
||||
},
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,31 @@
|
|||
<app>
|
||||
<div>
|
||||
<hello-riot version="v9.x"></hello-riot>
|
||||
</div>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
Loading…
Reference in New Issue