@revojs/vue 0.1.22 → 0.1.24

package/dist/index.js

@@ -1,5 +1,4 @@
-import { addRoutes, useKit } from "revojs/kit";
-import "revojs";
+import { addAlias, addRoutes, useKit } from "revojs/kit";
 
 //#region src/index.ts
 function addPages(app, path) {
@@ -12,11 +11,15 @@ function vue() {
 			entries: ["./routes"]
 		} } },
 		setup(app) {
-			const { toPath, addAlias } = useKit(app, import.meta.url);
-			app.config.client = toPath("./module/index.html");
-			addRoutes(app, toPath("./module/routes"));
-			addAlias("vue/app", "./module/app.ts");
-			addAlias("vue/main", "./module/main.vue");
+			const { fromModule } = useKit(import.meta.url);
+			app.config.template.head.children.push({
+				tagName: "script",
+				attributes: { type: "module" },
+				children: [`import "${fromModule("./module/entry.ts")}"`]
+			});
+			addRoutes(app, fromModule("./module/routes"));
+			addAlias(app, "vue/app", fromModule("./module/app.ts"));
+			addAlias(app, "vue/main", fromModule("./module/main.vue"));
 		}
 	};
 }

package/dist/module/app.ts

@@ -1,8 +1,15 @@
-import { isServer, Radix, Scope, toRoutePath, useUrl, type Node } from "revojs";
-import { type Component, createSSRApp } from "vue";
-import { createMemoryHistory, createRouter, createWebHistory, RouterView, type RouteRecordRaw } from "vue-router";
 import Main from "#alias/vue/main";
 import pages from "#virtual/pages";
+import { isServer, Radix, Scope, useUrl, type Node } from "revojs";
+import { createSSRApp, type Component } from "vue";
+import {
+    createMemoryHistory,
+    createRouter,
+    createWebHistory,
+    RouteRecordSingleView,
+    RouterView,
+    type RouteRecordRaw,
+} from "vue-router";
 
 function toRoute(path: string, node: Node<Component>, index: number): RouteRecordRaw {
     const layout = node.children["+layout"];
@@ -17,8 +24,12 @@ function toRoute(path: string, node: Node<Component>, index: number): RouteRecor
         children.push({ path: "", component: node.value });
     }
 
+    if (node.type === "OPTIONAL-PARAMETER") {
+        path = ":" + node.parameter + "?";
+    }
+
     if (node.type === "PARAMETER") {
-        path += node.parameter;
+        path = ":" + node.parameter;
     }
 
     const route = {
@@ -33,19 +44,30 @@ function toRoute(path: string, node: Node<Component>, index: number): RouteRecor
 export default async (scope: Scope) => {
     const radix = new Radix<Component>();
 
-    for (const name in pages) {
-        const Component = pages[name];
+    for (const path in pages) {
+        const segments = path.toLowerCase().split("/");
 
-        if (Component) {
-            const [path] = toRoutePath(name);
+        for (const attribute of segments.pop()?.split(".") ?? []) {
+            if (attribute === "index" || attribute === "vue") {
+                continue;
+            }
 
-            radix.use(path, Component);
+            segments.push(attribute);
         }
+
+        radix.use(segments, pages[path]);
+    }
+
+    const rootNode = toRoute("/", radix.rootNode, 0);
+
+    const optionalNode = rootNode.children?.find((route) => route.path.includes("?")) as RouteRecordSingleView;
+    if (optionalNode) {
+        rootNode.children?.push({ ...optionalNode, path: "" });
     }
 
     const router = createRouter({
         history: isServer ? createMemoryHistory() : createWebHistory(),
-        routes: [toRoute("/", radix.rootNode, 0)],
+        routes: [rootNode],
     });
 
     const app = createSSRApp(Main).use(router).provide("REVOJS_SCOPE", scope);

package/dist/module/entry.ts

@@ -0,0 +1,4 @@
+import createApp from "#alias/vue/app";
+import { Scope } from "revojs";
+
+await createApp(new Scope()).then((app) => app.mount("#app"));

package/dist/module/routes/[...]/index.get.ts

@@ -1,7 +1,7 @@
-import { defineRoute, sendHtml, useServer } from "revojs";
-import { renderToString } from "vue/server-renderer";
 import createApp from "#alias/vue/app";
 import client from "#virtual/client";
+import { defineRoute, sendHtml, useServer } from "revojs";
+import { renderToString } from "vue/server-renderer";
 
 export default defineRoute({
     async fetch(scope) {
@@ -13,9 +13,9 @@ export default defineRoute({
         app.config.errorHandler = (value) => (exception = value);
 
         const content = client
-            .replace("<!-- MAIN -->", await renderToString(app))
+            .replace("<!-- BODY -->", await renderToString(app))
             .replace(
-                "<!-- STATES -->",
+                "<!-- HEAD -->",
                 "<script id='STATES' type='application/json'>" + JSON.stringify(states) + "</script>"
             );
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/vue",
-    "version": "0.1.22",
+    "version": "0.1.24",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",

package/dist/module/index.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vue</title>
-        <!-- STATES -->
-    </head>
-    <body>
-        <div id="app"><!-- MAIN --></div>
-        <script type="module">
-            import { Scope } from "revojs";
-            import createApp from "#alias/vue/app";
-
-            await createApp(new Scope()).then((app) => app.mount("#app"));
-        </script>
-    </body>
-</html>