@hai3/framework 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/index.cjs

@@ -935,6 +935,44 @@ function resolveBase(pluginConfig, appConfig) {
   return normalizeBase(rawBase);
 }
 
+// src/utils/routeMatcher.ts
+var import_path_to_regexp = require("path-to-regexp");
+function compileRoute(pattern, screensetId, screenId) {
+  return {
+    pattern,
+    screensetId,
+    screenId,
+    matcher: (0, import_path_to_regexp.match)(pattern, { decode: decodeURIComponent }),
+    toPath: (0, import_path_to_regexp.compile)(pattern, { encode: encodeURIComponent })
+  };
+}
+function matchPath(path, routes) {
+  for (const route of routes) {
+    const result = route.matcher(path);
+    if (result) {
+      return {
+        screensetId: route.screensetId,
+        screenId: route.screenId,
+        params: result.params
+      };
+    }
+  }
+  return void 0;
+}
+function generatePath(route, params) {
+  return route.toPath(params);
+}
+function extractRequiredParams(pattern) {
+  const params = [];
+  const matches = pattern.match(/:([^/]+)/g);
+  if (matches) {
+    for (const match2 of matches) {
+      params.push(match2.slice(1));
+    }
+  }
+  return params;
+}
+
 // src/plugins/navigation.ts
 var screenActions3 = screenActions;
 var menuActions3 = menuActions;
@@ -957,7 +995,39 @@ function navigation(config) {
     onInit(app) {
       const dispatch = app.store.dispatch;
       const base = resolveBase(config, app.config);
+      const routerMode = app.config.routerMode ?? "browser";
       let currentScreensetId = null;
+      const getCurrentPath = () => {
+        if (typeof window === "undefined") return "/";
+        switch (routerMode) {
+          case "hash":
+            return window.location.hash.slice(1) || "/";
+          case "memory":
+            return "/";
+          case "browser":
+          default:
+            return window.location.pathname;
+        }
+      };
+      const updateURL = (path) => {
+        if (typeof window === "undefined" || routerMode === "memory") {
+          return;
+        }
+        const url = prependBase(path, base);
+        switch (routerMode) {
+          case "hash":
+            if (window.location.hash !== `#${url}`) {
+              window.location.hash = url;
+            }
+            break;
+          case "browser":
+          default:
+            if (window.location.pathname !== url) {
+              window.history.pushState(null, "", url);
+            }
+            break;
+        }
+      };
       const loadScreensetTranslations = async (screensetId, language) => {
         await import_i18n.i18nRegistry.loadScreensetTranslations(
           screensetId,
@@ -986,21 +1056,17 @@ function navigation(config) {
         });
         updateScreensetMenu(screenset);
       };
-      const extractScreenId = () => {
-        const internalPath = stripBase(window.location.pathname, base);
-        if (!internalPath) {
-          return null;
-        }
-        const parts = internalPath.split("/").filter(Boolean);
-        return parts[0] || null;
+      const extractInternalPath = () => {
+        const currentPath = getCurrentPath();
+        return stripBase(currentPath, base) || "/";
       };
-      const activateScreen = (screenId) => {
-        const screensetId = app.routeRegistry?.getScreensetForScreen(screenId);
-        if (!screensetId) {
-          return;
-        }
-        activateScreenset(screensetId);
-        dispatch(screenActions3.navigateTo(screenId));
+      const activateFromRouteMatch = (match2) => {
+        activateScreenset(match2.screensetId);
+        dispatch(screenActions3.navigateTo(match2.screenId));
+      };
+      const matchCurrentPath = () => {
+        const path = extractInternalPath();
+        return app.routeRegistry?.matchRoute(path);
       };
       import_state13.eventBus.on("navigation/screen/navigated", (payload) => {
         if (!app.routeRegistry?.hasScreen(payload.screensetId, payload.screenId)) {
@@ -1009,14 +1075,22 @@ function navigation(config) {
           );
           return;
         }
-        activateScreenset(payload.screensetId);
-        dispatch(screenActions3.navigateTo(payload.screenId));
-        if (typeof window !== "undefined") {
-          const url = prependBase(`/${payload.screenId}`, base);
-          if (window.location.pathname !== url) {
-            window.history.pushState(null, "", url);
+        const pattern = app.routeRegistry?.getRoutePattern(payload.screenId);
+        if (pattern) {
+          const requiredParams = extractRequiredParams(pattern);
+          const providedParams = payload.params || {};
+          const missingParams = requiredParams.filter((param) => !(param in providedParams));
+          if (missingParams.length > 0) {
+            console.warn(
+              `Screen "${payload.screenId}" requires route params [${requiredParams.join(", ")}] but missing: [${missingParams.join(", ")}]`
+            );
+            return;
           }
         }
+        activateScreenset(payload.screensetId);
+        dispatch(screenActions3.navigateTo(payload.screenId));
+        const path = app.routeRegistry?.generatePath(payload.screenId, payload.params) ?? `/${payload.screenId}`;
+        updateURL(path);
       });
       import_state13.eventBus.on("navigation/screenset/navigated", (payload) => {
         const screenset = app.screensetRegistry.get(payload.screensetId);
@@ -1050,23 +1124,36 @@ function navigation(config) {
           );
         });
       });
-      if (typeof window !== "undefined") {
-        window.addEventListener("popstate", () => {
-          const screenId2 = extractScreenId();
-          if (screenId2) {
-            activateScreen(screenId2);
+      if (typeof window !== "undefined" && routerMode !== "memory") {
+        const handleURLChange = () => {
+          const match3 = matchCurrentPath();
+          if (match3) {
+            activateFromRouteMatch(match3);
           }
-        });
-        const screenId = extractScreenId();
+        };
+        if (routerMode === "hash") {
+          window.addEventListener("hashchange", handleURLChange);
+        } else {
+          window.addEventListener("popstate", handleURLChange);
+        }
+        const match2 = matchCurrentPath();
         const autoNavigate = app.config.autoNavigate !== false;
-        if (screenId) {
-          activateScreen(screenId);
+        if (match2) {
+          activateFromRouteMatch(match2);
         } else if (autoNavigate) {
           const screensets2 = app.screensetRegistry.getAll();
           if (screensets2.length > 0) {
             navigateToScreenset({ screensetId: screensets2[0].id });
           }
         }
+      } else if (routerMode === "memory") {
+        const autoNavigate = app.config.autoNavigate !== false;
+        if (autoNavigate) {
+          const screensets2 = app.screensetRegistry.getAll();
+          if (screensets2.length > 0) {
+            navigateToScreenset({ screensetId: screensets2[0].id });
+          }
+        }
       }
     }
   };
@@ -1085,14 +1172,25 @@ function createRouteRegistry(screensetRegistry3) {
       screenset.menu.forEach((menuScreenItem) => {
         const screenId = menuScreenItem.menuItem.screenId ?? menuScreenItem.menuItem.id;
         if (screenId && menuScreenItem.screen) {
+          const pattern = menuScreenItem.menuItem.path ?? `/${screenId}`;
+          const compiledRoute = compileRoute(pattern, screenset.id, screenId);
           routes.push({
             screensetId: screenset.id,
             screenId,
-            loader: menuScreenItem.screen
+            loader: menuScreenItem.screen,
+            pattern,
+            compiledRoute
           });
         }
       });
     });
+    routes.sort((a, b) => {
+      const aHasParams = a.pattern.includes(":");
+      const bHasParams = b.pattern.includes(":");
+      if (!aHasParams && bHasParams) return -1;
+      if (aHasParams && !bHasParams) return 1;
+      return 0;
+    });
     return routes;
   }
   return {
@@ -1148,6 +1246,35 @@ function createRouteRegistry(screensetRegistry3) {
         screensetId,
         screenId
       }));
+    },
+    /**
+     * Match a URL path against registered routes, extracting params.
+     * Returns the first matching route with extracted params, or undefined if no match.
+     */
+    matchRoute(path) {
+      const allRoutes = buildRoutes();
+      const compiledRoutes = allRoutes.map((r) => r.compiledRoute);
+      return matchPath(path, compiledRoutes);
+    },
+    /**
+     * Generate a URL path for a screen with given params.
+     */
+    generatePath(screenId, params = {}) {
+      const allRoutes = buildRoutes();
+      const route = allRoutes.find((r) => r.screenId === screenId);
+      if (!route) {
+        console.warn(`Route not found for screen: ${screenId}`);
+        return `/${screenId}`;
+      }
+      return generatePath(route.compiledRoute, params);
+    },
+    /**
+     * Get the route pattern for a screen.
+     */
+    getRoutePattern(screenId) {
+      const allRoutes = buildRoutes();
+      const route = allRoutes.find((r) => r.screenId === screenId);
+      return route?.pattern;
     }
   };
 }