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,71 +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
-    index.js                        <-- application bootstrap
+        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 uses a static object registry to mount global **components** which 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/index.js` for more information
-
-
-### Tests
-
-In a folder-per-component setup, you can place your `*.spec.js` files right next to your web components for isolated testing, but this template is a...
-
-*bring your own testing solution*
-
-> CHAI/MOCHA EXAMPLE: `src/components/hello-riot/hello-riot.spec.js` (unwired)
-
-
 ## 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

@@ -6,6 +6,18 @@ body {
   background: #222;
 }
 
+h1, h2, h3 {
+  margin: 1rem;
+}
+
+h3 {
+  color: #ED1846;
+}
+
+p {
+  margin: 1rem;
+}
+
 a {
   color: #ED1
 }
@@ -21,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,42 +1,41 @@
-<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>
+            This page is found at <br/>
-            <code>src/components/hello-riot/hello-riot.riot</code> <br>
+            <code>app/pages/riot-welcome.riot</code>
-            and is mounted via object registry at
-            <code>src/index.js</code>.
             <p>
-                <em>many mounting strategies exist, this is but <strong>one</strong></em>
+                and is registered via <br/>
+                <code>app/boot.js</code>
             </p>
         </p>
 
-        <h2>Documentation</h2>
+        <h3>Documentation</h3>
 
         <div class="flex">
             <span>
                 <a href="https://riot.js.org/documentation/">Riot </a>
-                <br>
+                <br/>
                 <code>{props.version}</code>
             </span>
             <em>or</em>
             <span>
                 <a href="https://vitejs.dev/guide/">Vite</a>
-                <br>
+                <br/>
-                <code>v3.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>
@@ -44,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/main.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/index.js"></script>
+
+        <script type="module" src="/app/boot.js"></script>
     </body>
 </html>

package.json

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

src/components/hello-riot/hello-riot.spec.js

@@ -1,17 +0,0 @@
-import {component} from 'riot';
-import {expect} from 'chai';
-import HelloRiot from './hello-riot.riot';
-
-describe('Hello Riot Page Unit Test', () => {
-    const mount = component(HelloRiot);
-
-    it('The component properties are properly rendered', () => {
-        const div = document.createElement('div')
-
-        const component = mount(div, {
-            version: 'v7.x'
-        });
-
-        expect(component.$('p').innerHTML).to.be.equal('v7.x');
-    });
-});

src/index.js

@@ -1,10 +0,0 @@
-import {Register} from './js/register.js';
-import HelloRiot from './components/hello-riot/hello-riot.riot';
-
-// define global components here
-const registry = {
-    'hello-riot': HelloRiot
-};
-
-// register global components 
-Register(registry);

src/js/register.js

@@ -1,23 +0,0 @@
-import {register, mount} from 'riot';
-
-/**
- * Register Global Components
- *
- * helper that registers and mounts global components
- * via an object registry
- *
- * @param {Object} registry     key:value object registry
- */
-export function Register(registry = {}) {
-    Object.entries(registry).map(([name, component]) => {
-        register(name, component);
-        mount(name);
-
-        return {
-            name,
-            component
-        }
-    });
-}
-
-export default Register;

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'
 });