fynixui 1.0.11 → 1.0.13

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fynixui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "description": "Core package for Fynix UI framework - A lightweight, reactive UI framework with TypeScript support.",
   "main": "./dist/fynix/index.js",
@@ -214,6 +214,5 @@
         "./types/global.d.ts"
       ]
     }
-  },
-  "dependencies": {}
+  }
 }

package/dist/plugins/vite-plugin-res.js

@@ -1,8 +1,18 @@
 import { transform } from "esbuild";
 import { normalizePath } from "vite";
+import crypto from "crypto";
 export default function fynixPlugin(options = {}) {
-    const { jsxFactory = "Fynix", jsxFragment = "Fynix.Fragment", include = [".ts", ".js", ".jsx", ".tsx", ".fnx"], exclude = ["node_modules"], sourcemap = true, esbuildOptions = {}, } = options;
+    const { jsxFactory = "Fynix", jsxFragment = "Fynix.Fragment", include = [".ts", ".js", ".jsx", ".tsx", ".fnx"], exclude = ["node_modules"], esbuildOptions = {}, } = options;
     let viteServer = null;
+    const transformCache = new Map();
+    function hasJsxLike(code) {
+        return (/<[A-Za-z]/.test(code) ||
+            /Fynix\s*\(/.test(code) ||
+            /Fragment|<>/.test(code));
+    }
+    function getContentHash(code) {
+        return crypto.createHash("md5").update(code).digest("hex");
+    }
     return {
         name: "vite-plugin-fynix",
         enforce: "pre",
@@ -17,6 +27,14 @@ export default function fynixPlugin(options = {}) {
             const shouldInclude = include.some((ext) => normalizedId.endsWith(ext));
             if (!shouldInclude)
                 return null;
+            if (!hasJsxLike(code)) {
+                return null;
+            }
+            const contentHash = getContentHash(code);
+            const cached = transformCache.get(normalizedId);
+            if (cached && cached.contentHash === contentHash) {
+                return { code: cached.code, map: cached.map };
+            }
             const ctx = this;
             if (typeof ctx.addWatchFile === "function") {
                 ctx.addWatchFile(id);
@@ -39,16 +57,19 @@ export default function fynixPlugin(options = {}) {
                     loader,
                     jsxFactory,
                     jsxFragment,
-                    sourcemap,
+                    sourcemap: false,
                     sourcefile: id,
                     target: "esnext",
                     format: "esm",
                     ...esbuildOptions,
                 });
-                return {
+                const transformed = {
                     code: result.code,
-                    map: result.map || null,
+                    map: null,
+                    contentHash,
                 };
+                transformCache.set(normalizedId, transformed);
+                return { code: transformed.code, map: transformed.map };
             }
             catch (error) {
                 const err = error;
@@ -71,6 +92,7 @@ export default function fynixPlugin(options = {}) {
         handleHotUpdate(ctx) {
             const { file, server } = ctx;
             const normalizedFile = normalizePath(file);
+            transformCache.delete(normalizedFile);
             const shouldReload = include.some((ext) => normalizedFile.endsWith(ext));
             if (shouldReload) {
                 console.log(`\x1b[32m[vite-plugin-fynix]\x1b[0m HMR: full-reload triggered by ${normalizedFile}`);

package/dist/router/router.js

@@ -1,4 +1,36 @@
 import { mount } from "../runtime";
+import { nixLazy } from "../hooks/nixLazy";
+class LocationManager {
+    constructor() {
+        this.current = {
+            path: typeof window !== "undefined" ? window.location.pathname : "/",
+            params: {},
+            search: typeof window !== "undefined" ? window.location.search : "",
+        };
+        this.subscribers = new Set();
+    }
+    get value() {
+        return this.current;
+    }
+    set value(newLocation) {
+        this.current = newLocation;
+        this.subscribers.forEach((callback) => {
+            try {
+                callback(newLocation);
+            }
+            catch (error) {
+                console.error("[Router] Location subscriber error:", error);
+            }
+        });
+    }
+    subscribe(callback) {
+        this.subscribers.add(callback);
+        return () => {
+            this.subscribers.delete(callback);
+        };
+    }
+}
+export const location = new LocationManager();
 const MAX_CACHE_SIZE = 50;
 const PROPS_NAMESPACE = "__fynixLinkProps__";
 const MAX_LISTENERS = 100;
@@ -42,6 +74,30 @@ function sanitizeContent(content) {
         .replace(/expression\s*\(/gi, "");
 }
 function sanitizeProps(props) {
+    const sanitized = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (typeof key !== "string" || key.startsWith("__")) {
+            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 === "function") {
+            sanitized[key] = value;
+        }
+        else if (typeof value === "number" || typeof value === "boolean") {
+            sanitized[key] = value;
+        }
+    }
+    return sanitized;
+}
+function sanitizeExternalProps(props) {
     const sanitized = {};
     for (const [key, value] of Object.entries(props)) {
         if (typeof key !== "string" ||
@@ -51,12 +107,11 @@ function sanitizeProps(props) {
             continue;
         }
         if (typeof value === "string") {
-            const cleanContent = sanitizeContent(value);
-            sanitized[key] = escapeHTML(cleanContent);
+            sanitized[key] = escapeHTML(sanitizeContent(value));
         }
         else if (typeof value === "object" && value !== null) {
             if (Object.keys(value).length < 50) {
-                sanitized[key] = sanitizeProps(value);
+                sanitized[key] = sanitizeExternalProps(value);
             }
         }
         else if (typeof value === "number" || typeof value === "boolean") {
@@ -134,18 +189,37 @@ function sanitizePath(path) {
     }
     return path || "/";
 }
-function tryGlobPaths() {
+function tryGlobPaths(lazy = false) {
     try {
-        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", "./**/*.ts", "./**/*.js"], { eager: true });
+        if (lazy) {
+            let modules = import.meta.glob("/src/**/*.{tsx,jsx,ts,js}");
+            if (Object.keys(modules).length === 0) {
+                modules = import.meta.glob([
+                    "./**/*.tsx",
+                    "./**/*.jsx",
+                    "./**/*.ts",
+                    "./**/*.js",
+                ]);
+            }
+            if (Object.keys(modules).length === 0) {
+                modules = import.meta.glob(["../**/*.tsx", "../**/*.jsx"]);
+            }
+            return modules || {};
         }
-        if (Object.keys(modules).length === 0) {
-            modules = import.meta.glob(["../**/*.fnx", "../**/*.tsx", "../**/*.jsx"], { eager: true });
+        else {
+            let modules = import.meta.glob("/src/**/*.{tsx,jsx,ts,js}", {
+                eager: true,
+            });
+            if (Object.keys(modules).length === 0) {
+                modules = import.meta.glob(["./**/*.tsx", "./**/*.jsx", "./**/*.ts", "./**/*.js"], { eager: true });
+            }
+            if (Object.keys(modules).length === 0) {
+                modules = import.meta.glob(["../**/*.tsx", "../**/*.jsx"], {
+                    eager: true,
+                });
+            }
+            return modules || {};
         }
-        return modules || {};
     }
     catch (error) {
         console.error("[Router] Failed to load modules:", error);
@@ -155,7 +229,7 @@ function tryGlobPaths() {
 function filePathToRoute(filePath) {
     let route = filePath
         .replace(/^.*\/src/, "")
-        .replace(/\.(ts|tsx|js|jsx|fnx)$/, "")
+        .replace(/\.(ts|tsx|js|jsx)$/, "")
         .replace(/\/view$/, "")
         .replace(/\/$/, "");
     if (!route)
@@ -266,175 +340,7 @@ function updateMetaTags(meta = {}) {
         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() {
+function createFynix(options = {}) {
     const isDevMode = import.meta.hot !== undefined;
     if (routerInstance && isRouterInitialized && !isDevMode) {
         console.warn("[Router] Router already initialized, returning existing instance");
@@ -462,13 +368,17 @@ function createFynix() {
     }
     const propsCache = window.__fynixPropsCache || new Map();
     window.__fynixPropsCache = propsCache;
-    const modules = tryGlobPaths();
+    const isLazy = !!options.lazy;
+    const modules = tryGlobPaths(isLazy);
     const routes = {};
     const dynamicRoutes = [];
     for (const [filePath, mod] of Object.entries(modules)) {
         const routePath = filePathToRoute(filePath);
         let component = undefined;
-        if (mod && typeof mod === "object") {
+        if (isLazy && typeof mod === "function") {
+            component = nixLazy(mod);
+        }
+        else if (mod && typeof mod === "object") {
             if ("default" in mod && mod.default) {
                 component = mod.default;
             }
@@ -512,17 +422,6 @@ function createFynix() {
         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) {
@@ -557,9 +456,6 @@ function createFynix() {
             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 || {});
@@ -577,13 +473,16 @@ function createFynix() {
             const meta = typeof Page.meta === "function" ? Page.meta(params) : Page.meta;
             updateMetaTags(meta);
         }
-        const unsafeProps = {
-            ...routeProps,
-            ...passedProps,
-            params,
+        const safeProps = {
+            ...sanitizeExternalProps(passedProps),
+            ...sanitizeProps({ ...routeProps, params }),
         };
-        const safeProps = sanitizeProps(unsafeProps);
         window.__lastRouteProps = safeProps;
+        location.value = {
+            path,
+            params,
+            search: window.location.search,
+        };
         try {
             mount(Page, rootSelector, safeProps);
         }
@@ -624,7 +523,6 @@ function createFynix() {
         }
         if (normalizedPath === currentPath)
             return;
-        enterpriseRouter.preloadRoute(normalizedPath).catch(console.warn);
         const sanitizedProps = sanitizeProps(props);
         const cacheKey = generateCacheKey();
         addToCache(propsCache, cacheKey, sanitizedProps);
@@ -729,11 +627,15 @@ function createFynix() {
             handler: clickHandler,
         });
         listenerCount++;
-        window.addEventListener("popstate", renderRoute);
+        const popstateHandler = (_e) => {
+            if (!isDestroyed)
+                renderRoute();
+        };
+        window.addEventListener("popstate", popstateHandler);
         listeners.push({
             element: window,
             event: "popstate",
-            handler: renderRoute,
+            handler: popstateHandler,
         });
         listenerCount++;
     }
@@ -756,8 +658,6 @@ function createFynix() {
             renderTimeout = null;
         }
         isDestroyed = true;
-        enterpriseRouter.clearCache();
-        layoutRouter.cleanup();
         listeners.forEach(({ element, event, handler }) => {
             try {
                 element.removeEventListener(event, handler);
@@ -818,15 +718,6 @@ 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;