geoff
/
vite-riot-template
mirror of https://github.com/n2geoff/vite-riot-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
package-lock.json generated
View File

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

3
package.json
View File

@ -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": {

25
src/components/app.riot
View File

@ -1,14 +1,31 @@
<app>
<div>
<hello-riot version="v9.x"></hello-riot>
<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>

26
src/components/riot-about.riot Normal file
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>

21
src/components/hello-riot.riot → src/components/riot-welcome.riot
View File

@ -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
src/css/main.css
View File

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

9
src/main.js
View File

@ -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");