README.md

@@ -2,13 +2,6 @@
 
 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
 
@@ -31,34 +24,71 @@ 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
-app/                                <-- your app code
+src/                                <-- your source code
     css/                            <-- processed css files
     js/                             <-- processed javascript files
     public/                         <-- unprocessed static `/` assets
     components/                     <-- riots components
-        app.riot
+        hello-riot/
-    pages/                          <-- semantic page/components
+            hello-riot.riot         <-- riot component
-        riot-welcome.riot
+            hello-riot.spec.js      <-- component tests
-        riot-about.riot
+    index.js                        <-- application bootstrap
-    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 easy isolated testing
+
+*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 5173
+- `npm run dev` - Starts the development server at port 3000
 - `npm run build` - Builds the application in a dist folder
-- `npm run preview` - Serves the build files (dist folder) locally at port 4173
+- `npm run preview` - Serves the build files (dist folder) locally at port 5000
 
-> See [ViteJS Documentation](https://vitejs.dev/) for more information
+> Note that if after this last command you do not see anything, you can use instead this other command:
+
+`npm run preview --host` - You should then be able to see your files locally at port 5000
 
 
 ## License

app/boot.js

@@ -1,38 +0,0 @@
-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

@@ -1,32 +0,0 @@
-<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/pages/riot-about.riot

@@ -1,26 +0,0 @@
-<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>

index.html

@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
+  <head>
-        <meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="/app/css/main.css">
+    <link rel="stylesheet" href="/src/css/main.css">
-        <title>Riot Template</title>
+    <title>Riot Template</title>
-    </head>
+  </head>
-    <body>
+  <body>
-        <app></app>
+    <hello-riot version="v6.1.2"></hello-riot>
-
+    <script type="module" src="/src/index.js"></script>
-        <script type="module" src="/app/boot.js"></script>
+  </body>
-    </body>
+</html>
-</html>

package.json

@@ -1,22 +1,16 @@
 {
   "name": "vite-riot-template",
-  "version": "4.0.0",
+  "version": "0.2.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
-  "engines": {
-    "node": ">18.0.0 <23.0.0"
-  },
   "dependencies": {
-    "@riotjs/route": "^9.2.2",
+    "riot": "^6.1.2"
-    "riot": "^9.4.6"
   },
   "devDependencies": {
-    "@riotjs/compiler": "^9.4.4",
+    "rollup-plugin-riot": "^6.0.0",
-    "rollup-plugin-riot": "^9.0.2",
+    "vite": "^3.0.3"
-    "vite": "^6.2.2"
   }
 }

src/components/hello-riot/hello-riot.riot

@@ -1,41 +1,42 @@
-<riot-welcome>
+<hello-riot>
-    <section class="splash">
+    <div class="splash">
-        <h2>Welcome to Your Riot.js Application</h2>
+        <img src="/assets/images/square.svg">
+        <h1>Welcome to Your Riot.js Application</h1>
 
         <p>
-            Start development with
+            Start your development with
-            <a>RiotJS</a>, a component-based ui library,
+            <a>Riot</a>, a component-based ui library, running on the 
-            <a>Riot/Route</a>, a client-side routing library, and
+            <a>Vite</a> front-end tooling. 
-            <a>Vite</a> front-end build tooling.
         </p>
 
-        <h3>Getting Started</h3>
+        <h2>Getting Started</h2>
         <p>
-            This page is found at <br/>
+            This page is found at <br>
-            <code>app/pages/riot-welcome.riot</code>
+            <code>src/components/hello-riot/hello-riot.riot</code> <br>
+            and is mounted via object registry at
+            <code>src/index.js</code>.
             <p>
-                and is registered via <br/>
+                <em>many mounting strategies exist, this is but <strong>one</strong></em>
-                <code>app/boot.js</code>
             </p>
         </p>
 
-        <h3>Documentation</h3>
+        <h2>Documentation</h2>
 
         <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>v6.x</code>
+                <code>v3.x</code>
             </span>
         </div>
 
-        <h3>Ecosystem</h3>
+        <h2>Ecosystem</h2>
 
         <div class="flex">
             <a href="https://github.com/riot/examples">Examples</a>
@@ -43,11 +44,11 @@
             <a href="https://github.com/riot/riot/blob/main/AWESOME.md">Community</a>
             <a href="https://github.com/riot/riot">Github</a>
         </div>
-    </section>
+    </div>
 
     <script>
         export default {
 
         }
     </script>
-</riot-welcome>
+</hello-riot>

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

@@ -0,0 +1,17 @@
+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: 'v6.1.2'
+        });
+
+        expect(component.$('p').innerHTML).to.be.equal('v6.1.2');
+    });
+});

src/css/main.css

@@ -6,18 +6,6 @@ body {
   background: #222;
 }
 
-h1, h2, h3 {
-  margin: 1rem;
-}
-
-h3 {
-  color: #ED1846;
-}
-
-p {
-  margin: 1rem;
-}
-
 a {
   color: #ED1
 }
@@ -27,13 +15,13 @@ code {
 }
 
 .flex {
-    display: flex;
+    display: flex; 
-    justify-content: space-evenly;
+    justify-content: space-evenly; 
     text-align: center;
 }
 
 .splash {
-    font-size: 1.6rem;
+    font-size: larger;
     text-align: center;
     margin: 4vh auto;
     width: 620px;

src/index.js

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,23 @@
+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,8 +2,6 @@ import { defineConfig } from "vite";
 import riot from 'rollup-plugin-riot';
 
 export default defineConfig({
-    input: "app/**/*",
+    plugins: [{...riot(), enforce: 'pre'}],
-    output: "dist/bundle.js",
+    publicDir: 'src/public'
-    plugins: [riot()],
-    publicDir: 'app/public'
 });