major refactor

2024-07-29 21:31:16 -04:00 · 2024-07-29 21:31:16 -04:00 · d883f8d6b7
parent 929a8c55e5
commit d883f8d6b7
8 changed files with 44 additions and 29 deletions
--- a/README.md
+++ b/README.md
@ -35,20 +35,13 @@ src/                                <-- your source code
    public/                         <-- unprocessed static `/` assets
    components/                     <-- riots components
        hello-riot.riot             <-- example riot component
-    app.js                          <-- app initialization
+    main.js                         <-- main app initialization
 index.html                          <-- START HERE
 vite.config.js                      <-- build configuration
 README.md
 ...                                 <-- misc project meta files
 ```

-### Automatic Tag Registeration
-
-Any `.riot` components under the `src/` directory are automatically registered, like `components/`. You can add, rename, restructure the folders as you like.
-
-> SEE: `/src/app.js` for more information
-
-
 ## NPM Scripts

 - `npm run dev` - Starts the development server at port 5173
--- a/index.html
+++ b/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/app.css">
+        <link rel="stylesheet" href="/src/css/main.css">
        <title>Riot Template</title>
    </head>
    <body>
-        <hello-riot version="v7.x"></hello-riot>
-        <script type="module" src="/src/app.js"></script>
+        <app></app>
+
+        <script type="module" src="/src/main.js"></script>
    </body>
 </html>
--- a/src/app.js
+++ b/src/app.js
@ -1,17 +0,0 @@
-// RiotJS
-import * as riot from 'riot';
-
-/**
- * Recursively scan this directory for the Riot components and
- * automatically register them with their "name".
- *
- * Eg. ./components/ExampleComponent.riot -> <example-component></example-component>
- */
-Object.entries(import.meta.glob('./**/*.riot', { eager: true })).forEach(([path, definition]) => {
-
-    // component name
-    let name = path.split('/').pop().replace(/\.\w+$/, '');
-
-    riot.register(name, definition.default);
-    riot.mount(name);
-});
--- a/src/components/app.riot
+++ b/src/components/app.riot
@ -0,0 +1,15 @@
+<app>
+    <div>
+        <hello-riot version="v9.x"></hello-riot>
+    </div>
+
+    <script>
+        import helloRiot from "./hello-riot.riot";
+
+        export default {
+            components: {
+                helloRiot
+            }
+        }
+    </script>
+</app>
--- a/src/components/hello-riot.riot
+++ b/src/components/hello-riot.riot
@ -31,7 +31,7 @@
            <span>
                <a href="https://vitejs.dev/guide/">Vite</a>
                <br/>
-                <code>v4.x</code>
+                <code>v5.x</code>
            </span>
        </div>

--- a/src/css/main.css
+++ b/src/css/main.css
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,21 @@
+import * as riot from "riot";
+import app from "./components/app.riot";
+
+const main = {
+    init() {
+        // start-up actions here
+
+        // mount components
+        this.mount();
+    },
+
+    mount() {
+        // register core app component
+        riot.register("app", app);
+
+        // mount main app
+        riot.mount("app");
+    }
+}
+
+main.init();
--- a/vite.config.js
+++ b/vite.config.js
@ -2,6 +2,8 @@ import { defineConfig } from "vite";
 import riot from 'rollup-plugin-riot';

 export default defineConfig({
+    input: "src/components",
+    output: "dist/bundle.js",
    plugins: [riot()],
    publicDir: 'src/public'
 });