@fynixorg/ui 1.0.12 → 1.0.14

package/dist/router/router.js

@@ -19,10 +19,71 @@ function escapeHTML(str) {
         .replace(/"/g, """)
         .replace(/'/g, "'")
         .replace(/`/g, "`")
-        .replace(/\//g, "/");
+        .replace(/\//g, "/")
+        .replace(/=/g, "=")
+        .replace(/\(/g, "(")
+        .replace(/\)/g, ")")
+        .replace(/\{/g, "{")
+        .replace(/\}/g, "}")
+        .replace(/\[/g, "[")
+        .replace(/\]/g, "]");
+}
+function sanitizeContent(content) {
+    return content
+        .replace(/<script[^>]*>.*?<\/script>/gis, "")
+        .replace(/<iframe[^>]*>.*?<\/iframe>/gis, "")
+        .replace(/<object[^>]*>.*?<\/object>/gis, "")
+        .replace(/<embed[^>]*>/gi, "")
+        .replace(/<link[^>]*>/gi, "")
+        .replace(/on\w+\s*=/gi, "")
+        .replace(/javascript:/gi, "")
+        .replace(/vbscript:/gi, "")
+        .replace(/data:/gi, "")
+        .replace(/expression\s*\(/gi, "");
+}
+function sanitizeProps(props) {
+    const sanitized = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (typeof key !== "string" ||
+            key.startsWith("__") ||
+            key.includes("javascript") ||
+            key.includes("on")) {
+            continue;
+        }
+        if (typeof value === "string") {
+            const cleanContent = sanitizeContent(value);
+            sanitized[key] = escapeHTML(cleanContent);
+        }
+        else if (typeof value === "object" && value !== null) {
+            if (Object.keys(value).length < 50) {
+                sanitized[key] = sanitizeProps(value);
+            }
+        }
+        else if (typeof value === "number" || typeof value === "boolean") {
+            sanitized[key] = value;
+        }
+    }
+    return sanitized;
 }
 function isValidURL(url) {
     try {
+        const suspiciousPatterns = [
+            /javascript:/i,
+            /vbscript:/i,
+            /data:/i,
+            /mailto:/i,
+            /tel:/i,
+            /ftp:/i,
+            /file:/i,
+            /%2f%2f/i,
+            /%5c%5c/i,
+            /\\\\/,
+            /@/,
+        ];
+        if (suspiciousPatterns.some((pattern) => pattern.test(url))) {
+            console.warn("[Router] Security: Suspicious URL pattern blocked");
+            return false;
+        }
         const parsed = new URL(url, window.location.origin);
         if (parsed.origin !== window.location.origin) {
             console.warn("[Router] Security: Cross-origin navigation blocked");
@@ -32,6 +93,15 @@ function isValidURL(url) {
             console.warn("[Router] Security: Dangerous protocol blocked:", parsed.protocol);
             return false;
         }
+        const decodedPath = decodeURIComponent(parsed.pathname);
+        if (decodedPath !== parsed.pathname && /[<>"'`]/.test(decodedPath)) {
+            console.warn("[Router] Security: Encoded XSS attempt blocked");
+            return false;
+        }
+        if (url.length > 2048) {
+            console.warn("[Router] Security: Excessively long URL blocked");
+            return false;
+        }
         return true;
     }
     catch (e) {
@@ -66,19 +136,15 @@ function sanitizePath(path) {
 }
 function tryGlobPaths() {
     try {
-        let modules = import.meta.glob(["./**/*.fnx", "./**/*.tsx", "./**/*.jsx", "./**/*.ts", "./**/*.js"], { eager: true });
-        console.log("[Router] Glob attempt 1 (./**):", Object.keys(modules));
+        let modules = import.meta.glob("/src/**/*.{fnx,tsx,jsx,ts,js}", {
+            eager: true,
+        });
         if (Object.keys(modules).length === 0) {
-            modules = import.meta.glob(["../**/*.fnx", "../**/*.tsx", "../**/*.jsx"], { eager: true });
-            console.log("[Router] Glob attempt 2 (../**):", Object.keys(modules));
+            modules = import.meta.glob(["./**/*.fnx", "./**/*.tsx", "./**/*.jsx", "./**/*.ts", "./**/*.js"], { eager: true });
         }
         if (Object.keys(modules).length === 0) {
-            modules = import.meta.glob("/src/**/*.{fnx,tsx,jsx,ts,js}", {
-                eager: true,
-            });
-            console.log("[Router] Glob attempt 3 (/src/**):", Object.keys(modules));
+            modules = import.meta.glob(["../**/*.fnx", "../**/*.tsx", "../**/*.jsx"], { eager: true });
         }
-        console.log("[Router] Final modules loaded:", Object.keys(modules).length);
         return modules || {};
     }
     catch (error) {
@@ -167,13 +233,14 @@ function updateMetaTags(meta = {}) {
     if (!meta || typeof meta !== "object")
         return;
     if (meta.title && typeof meta.title === "string") {
-        document.title = escapeHTML(meta.title);
+        const sanitizedTitle = escapeHTML(meta.title).substring(0, 60);
+        document.title = sanitizedTitle;
     }
     MANAGED_META.forEach((def) => {
         const value = meta[def.key];
         const selector = def.name
-            ? `meta[name="${def.name}"]`
-            : `meta[property="${def.property}"]`;
+            ? `meta[name="${CSS.escape(def.name)}"]`
+            : `meta[property="${CSS.escape(def.property || "")}"]`;
         let el = document.querySelector(selector);
         if (value == null) {
             if (el)
@@ -182,6 +249,12 @@ function updateMetaTags(meta = {}) {
         }
         if (typeof value !== "string")
             return;
+        const cleanValue = sanitizeContent(value);
+        const sanitizedValue = escapeHTML(cleanValue).substring(0, 300);
+        if (/javascript:|vbscript:|data:|<|>/i.test(sanitizedValue)) {
+            console.warn(`[Router] Security: Blocked suspicious meta content for ${def.key}`);
+            return;
+        }
         if (!el) {
             el = document.createElement("meta");
             if (def.name)
@@ -190,9 +263,177 @@ function updateMetaTags(meta = {}) {
                 el.setAttribute("property", def.property);
             document.head.appendChild(el);
         }
-        el.setAttribute("content", escapeHTML(value));
+        el.setAttribute("content", sanitizedValue);
     });
 }
+class EnterpriseRouter {
+    constructor() {
+        this.routeCache = new Map();
+        this.preloadQueue = new Set();
+        this.routeMatchCache = new Map();
+        this.routes = {};
+    }
+    setRoutes(routes) {
+        if (!routes || typeof routes !== "object") {
+            console.warn("[EnterpriseRouter] Invalid routes configuration");
+            return;
+        }
+        this.routes = routes;
+    }
+    async preloadRoute(path) {
+        if (this.routeCache.has(path))
+            return;
+        const route = this.routes[path];
+        if (route?.component) {
+            const loadRoute = async () => {
+                try {
+                    const component = await route.component();
+                    this.routeCache.set(path, component);
+                    route.prefetch?.forEach((prefetchPath) => {
+                        this.preloadQueue.add(prefetchPath);
+                    });
+                    console.log(`[EnterpriseRouter] Preloaded route: ${path}`);
+                }
+                catch (error) {
+                    console.warn(`[EnterpriseRouter] Failed to preload route ${path}:`, error);
+                }
+            };
+            if ("requestIdleCallback" in window) {
+                requestIdleCallback(loadRoute);
+            }
+            else {
+                setTimeout(loadRoute, 0);
+            }
+        }
+    }
+    matchRoute(path) {
+        const cached = this.routeMatchCache.get(path);
+        if (cached !== undefined)
+            return cached;
+        const match = this.computeRouteMatch(path);
+        if (this.routeMatchCache.size > 100) {
+            const firstKey = this.routeMatchCache.keys().next().value;
+            if (firstKey !== undefined) {
+                this.routeMatchCache.delete(firstKey);
+            }
+        }
+        this.routeMatchCache.set(path, match);
+        return match;
+    }
+    computeRouteMatch(path) {
+        const segments = path.split("/").filter(Boolean);
+        for (const [routePath, routeConfig] of Object.entries(this.routes)) {
+            const routeSegments = routePath.split("/").filter(Boolean);
+            if (segments.length !== routeSegments.length)
+                continue;
+            const params = {};
+            let isMatch = true;
+            for (let i = 0; i < segments.length; i++) {
+                const segment = segments[i];
+                const routeSegment = routeSegments[i];
+                if (routeSegment && segment) {
+                    if (routeSegment.startsWith(":")) {
+                        params[routeSegment.slice(1)] = segment;
+                    }
+                    else if (segment !== routeSegment) {
+                        isMatch = false;
+                        break;
+                    }
+                }
+                else {
+                    isMatch = false;
+                    break;
+                }
+            }
+            if (isMatch) {
+                return {
+                    component: routeConfig.component,
+                    params,
+                    meta: typeof routeConfig.meta === "function"
+                        ? routeConfig.meta(params)
+                        : routeConfig.meta,
+                };
+            }
+        }
+        return null;
+    }
+    async checkRouteGuard(route, path, params) {
+        if (!route.guard)
+            return true;
+        if (route.guard.canActivate) {
+            const canActivate = await route.guard.canActivate(path, params);
+            return canActivate;
+        }
+        return true;
+    }
+    getPreloadedComponent(path) {
+        return this.routeCache.get(path);
+    }
+    clearCache() {
+        this.routeCache.clear();
+        this.routeMatchCache.clear();
+        this.preloadQueue.clear();
+    }
+}
+class LayoutRouter {
+    constructor() {
+        this.layoutCache = new Map();
+        this.keepAliveComponents = new Map();
+    }
+    renderNestedRoutes(routes, segments) {
+        if (segments.length === 0)
+            return null;
+        const [currentSegment, ...remainingSegments] = segments;
+        const currentRoute = routes.find((r) => r.path === currentSegment);
+        if (!currentRoute)
+            return null;
+        let content;
+        if (remainingSegments.length > 0 && currentRoute.children) {
+            content = this.renderNestedRoutes(currentRoute.children, remainingSegments);
+        }
+        else {
+            if (currentRoute.keepAlive && currentSegment) {
+                content = this.renderKeepAlive(currentRoute.component, currentSegment);
+            }
+            else {
+                content = this.renderComponent(currentRoute.component);
+            }
+        }
+        if (currentRoute.layout) {
+            const layoutKey = `${currentSegment}_layout`;
+            let layoutComponent = this.layoutCache.get(layoutKey);
+            if (!layoutComponent) {
+                layoutComponent = this.renderComponent(currentRoute.layout);
+                this.layoutCache.set(layoutKey, layoutComponent);
+            }
+            return this.renderComponent(currentRoute.layout, { children: content });
+        }
+        return content;
+    }
+    renderKeepAlive(component, key) {
+        if (this.keepAliveComponents.has(key)) {
+            return this.keepAliveComponents.get(key);
+        }
+        const rendered = this.renderComponent(component);
+        this.keepAliveComponents.set(key, rendered);
+        return rendered;
+    }
+    renderComponent(component, props = {}) {
+        try {
+            return component(props);
+        }
+        catch (error) {
+            console.error("[LayoutRouter] Component render error:", error);
+            return null;
+        }
+    }
+    cleanup() {
+        this.layoutCache.clear();
+        this.keepAliveComponents.clear();
+    }
+}
+const enterpriseRouter = new EnterpriseRouter();
+const layoutRouter = new LayoutRouter();
 function createFynix() {
     const isDevMode = import.meta.hot !== undefined;
     if (routerInstance && isRouterInitialized && !isDevMode) {
@@ -210,6 +451,8 @@ function createFynix() {
     let isDestroyed = false;
     let listenerCount = 0;
     let renderTimeout = null;
+    let lastNavigationTime = 0;
+    const NAVIGATION_RATE_LIMIT = 100;
     const listeners = [];
     if (!window[PROPS_NAMESPACE]) {
         window[PROPS_NAMESPACE] = {};
@@ -262,13 +505,24 @@ function createFynix() {
             routes[routePath] = component;
         }
     }
-    function renderRouteImmediate() {
+    async function renderRouteImmediate() {
         if (isDestroyed)
             return;
         const path = normalizePath(window.location.pathname);
         let Page = routes[path];
         let params = {};
         let routeProps = {};
+        const enterpriseMatch = enterpriseRouter.matchRoute(path);
+        if (enterpriseMatch) {
+            const preloadedComponent = enterpriseRouter.getPreloadedComponent(path);
+            if (preloadedComponent) {
+                Page = preloadedComponent;
+            }
+            else {
+                Page = enterpriseMatch.component;
+            }
+            params = enterpriseMatch.params;
+        }
         if (!Page) {
             const match = matchDynamicRoute(path, dynamicRoutes);
             if (match) {
@@ -282,8 +536,30 @@ function createFynix() {
             return;
         }
         if (!Page) {
-            root.innerHTML = `<h2>404 Not Found</h2><p>Path: ${escapeHTML(path)}</p>`;
+            root.innerHTML = "";
+            const container = document.createElement("div");
+            container.style.cssText =
+                "padding: 2rem; text-align: center; font-family: system-ui, sans-serif;";
+            const heading = document.createElement("h2");
+            heading.textContent = "404 Not Found";
+            heading.style.cssText = "color: #dc2626; margin-bottom: 1rem;";
+            const pathInfo = document.createElement("p");
+            const safePath = escapeHTML(sanitizeContent(path));
+            pathInfo.textContent = `Path: ${safePath}`;
+            pathInfo.style.cssText = "color: #6b7280; margin-bottom: 2rem;";
+            const backButton = document.createElement("button");
+            backButton.textContent = "Go Back";
+            backButton.style.cssText =
+                "padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 0.25rem; cursor: pointer;";
+            backButton.onclick = () => window.history.back();
+            container.appendChild(heading);
+            container.appendChild(pathInfo);
+            container.appendChild(backButton);
+            root.appendChild(container);
             updateMetaTags({ title: "404 - Page Not Found" });
+            ["/", "/home", "/about"].forEach((commonPath) => {
+                enterpriseRouter.preloadRoute(commonPath).catch(console.warn);
+            });
             return;
         }
         const state = (window.history.state || {});
@@ -301,17 +577,23 @@ function createFynix() {
             const meta = typeof Page.meta === "function" ? Page.meta(params) : Page.meta;
             updateMetaTags(meta);
         }
-        window.__lastRouteProps = {
+        const unsafeProps = {
             ...routeProps,
             ...passedProps,
             params,
         };
+        const safeProps = sanitizeProps(unsafeProps);
+        window.__lastRouteProps = safeProps;
         try {
-            mount(Page, rootSelector, window.__lastRouteProps);
+            mount(Page, rootSelector, safeProps);
         }
         catch (err) {
             console.error("[Router] Mount failed:", err);
-            root.innerHTML = `<pre style="color:red;">Mount Error occurred</pre>`;
+            root.innerHTML = "";
+            const errorDiv = document.createElement("pre");
+            errorDiv.style.color = "red";
+            errorDiv.textContent = "Mount Error occurred";
+            root.appendChild(errorDiv);
         }
         currentPath = path;
     }
@@ -329,6 +611,12 @@ function createFynix() {
     function navigate(path, props = {}) {
         if (isDestroyed)
             return;
+        const now = Date.now();
+        if (now - lastNavigationTime < NAVIGATION_RATE_LIMIT) {
+            console.warn("[Router] Security: Navigation rate limited");
+            return;
+        }
+        lastNavigationTime = now;
         const normalizedPath = normalizePath(path);
         if (!isValidURL(window.location.origin + normalizedPath)) {
             console.error("[Router] Invalid navigation URL");
@@ -336,8 +624,10 @@ function createFynix() {
         }
         if (normalizedPath === currentPath)
             return;
+        enterpriseRouter.preloadRoute(normalizedPath).catch(console.warn);
+        const sanitizedProps = sanitizeProps(props);
         const cacheKey = generateCacheKey();
-        addToCache(propsCache, cacheKey, props);
+        addToCache(propsCache, cacheKey, sanitizedProps);
         try {
             window.history.pushState({ __fynixCacheKey: cacheKey }, "", normalizedPath);
             renderRoute();
@@ -349,13 +639,20 @@ function createFynix() {
     function replace(path, props = {}) {
         if (isDestroyed)
             return;
+        const now = Date.now();
+        if (now - lastNavigationTime < NAVIGATION_RATE_LIMIT) {
+            console.warn("[Router] Security: Replace rate limited");
+            return;
+        }
+        lastNavigationTime = now;
         const normalizedPath = normalizePath(path);
         if (!isValidURL(window.location.origin + normalizedPath)) {
             console.error("[Router] Invalid replace URL");
             return;
         }
+        const sanitizedProps = sanitizeProps(props);
         const cacheKey = generateCacheKey();
-        addToCache(propsCache, cacheKey, props);
+        addToCache(propsCache, cacheKey, sanitizedProps);
         try {
             window.history.replaceState({ __fynixCacheKey: cacheKey }, "", normalizedPath);
             renderRoute();
@@ -459,6 +756,8 @@ function createFynix() {
             renderTimeout = null;
         }
         isDestroyed = true;
+        enterpriseRouter.clearCache();
+        layoutRouter.cleanup();
         listeners.forEach(({ element, event, handler }) => {
             try {
                 element.removeEventListener(event, handler);
@@ -519,6 +818,15 @@ function createFynix() {
         cleanup,
         routes,
         dynamicRoutes,
+        preloadRoute: enterpriseRouter.preloadRoute.bind(enterpriseRouter),
+        clearCache: () => {
+            enterpriseRouter.clearCache();
+            layoutRouter.cleanup();
+        },
+        enableNestedRouting: (nestedRoutes) => {
+            router.nestedRoutes = nestedRoutes;
+            console.log("[Router] Nested routing enabled with", nestedRoutes.length, "routes");
+        },
     };
     routerInstance = router;
     return router;