fix(client): fix routeModules error

Author: linbingquan

examples/vue-app/main.js

@@ -1,4 +1,8 @@
-import { createSSRApp } from "aleph/vue";
+import { Link, createSSRApp } from "aleph/vue";
 import App from "./app.vue";
 
-createSSRApp(App).mount("#root", true);
+const app = createSSRApp(App)
+
+app.component('Link', Link)
+
+app.mount("#root", true)

framework/vue/router.ts

@@ -2,6 +2,10 @@ import { Component, createApp, createSSRApp } from "vue";
 import type { SSRContext } from "../../server/renderer.ts";
 import { RouterContext } from "./context.ts";
 import { defineComponent } from "vue";
+import { RouteModule } from "../core/route.ts";
+
+// deno-lint-ignore no-explicit-any
+const global = window as any;
 
 export const App = defineComponent({
   name: "App",
@@ -19,14 +23,19 @@ export const App = defineComponent({
   },
 });
 
-const createSSRApp_ = (app: Component, { ssrContext }: { ssrContext: SSRContext }) => {
-  const routeModules = ssrContext?.routeModules;
+type RootProps = {
+  ssrContext?: SSRContext;
+};
+
+const createSSRApp_ = (app: Component, props?: RootProps) => {
+  const { ssrContext } = props || {};
+  const routeModules = ssrContext?.routeModules || loadSSRModulesFromTag();
 
   if (ssrContext?.url) {
     RouterContext.value.url = ssrContext?.url;
   }
 
-  if (routeModules.length > 0) {
+  if (routeModules && routeModules.length > 0) {
     const defaultRouteModules = routeModules[0];
     const { defaultExport } = defaultRouteModules;
     if (defaultExport) {
@@ -37,6 +46,47 @@ const createSSRApp_ = (app: Component, { ssrContext }: { ssrContext: SSRContext
   return createSSRApp(app);
 };
 
+function getRouteModules(): Record<string, { defaultExport?: unknown; withData?: boolean }> {
+  return global.__ROUTE_MODULES || (global.__ROUTE_MODULES = {});
+}
+
+function loadSSRModulesFromTag(): RouteModule[] {
+  const el = window.document?.getElementById("ssr-modules");
+  if (el) {
+    try {
+      const data = JSON.parse(el.innerText);
+      if (Array.isArray(data)) {
+        let suspenseData: Record<string, unknown> | null | undefined = undefined;
+        const routeModules = getRouteModules();
+        return data.map(({ url, filename, suspense, ...rest }) => {
+          if (suspense) {
+            if (suspenseData === undefined) {
+              const el = window.document?.getElementById("suspense-data");
+              if (el) {
+                suspenseData = JSON.parse(el.innerText);
+              } else {
+                suspenseData = null;
+              }
+            }
+            if (suspenseData) {
+              rest.data = suspenseData[url];
+            }
+          }
+          return {
+            url: new URL(url, location.href),
+            filename,
+            defaultExport: routeModules[filename].defaultExport,
+            ...rest,
+          };
+        });
+      }
+    } catch (e) {
+      throw new Error(`loadSSRModulesFromTag: ${e.message}`);
+    }
+  }
+  return [];
+}
+
 const createApp_ = (app: Component) => {
   return createApp(app);
 };