@gohanfromgoku/ui-kit 0.1.1 → 0.1.3

package/dist/navigation/createBrowserRouter.js

@@ -0,0 +1,57 @@
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect } from "preact/compat";
+import createStore from "../storage/index";
+import { generateURLToNavigate, isRouteMatching } from "./support/url.support";
+import { extractParamsFromURL } from "./support/params.support";
+import { extractQueryParamsFromURL } from "./support/query-params.support";
+import { computed } from "@preact/signals";
+const locationDetails = createStore("location-details", { value: { params: {}, queryParams: {}, ...window.location } });
+const activeRoute = createStore("active-route", { value: {} });
+const createBrowserRouter = (routes, { page404 } = { page404: () => _jsx(_Fragment, { children: "Page Not Found" }) }) => {
+    const navigate = (to, { queryParams, replace } = {}) => {
+        if (typeof to === "number") {
+            window.history.go(to);
+            return;
+        }
+        const url = generateURLToNavigate(to, queryParams || {});
+        if (window.location.href === url) {
+            return;
+        }
+        if (replace) {
+            window.history.replaceState({}, "", url);
+        }
+        else {
+            window.history.pushState({}, "", url);
+        }
+        window.dispatchEvent(new Event("popstate"));
+    };
+    const useLocationDetails = () => {
+        if (routes.length === 0) {
+            throw "useLocationDetails cannot be used without initializing routes, use createRoutes initialize routes";
+        }
+        ;
+        const values = computed(() => locationDetails.value);
+        return values.value;
+    };
+    const Outlet = () => {
+        const component = computed(() => activeRoute.value?.component ?? page404);
+        useEffect(() => {
+            const updateLocation = () => {
+                const active = routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.href, component: page404 };
+                activeRoute.setState({ value: active });
+                const params = extractParamsFromURL(window.location.pathname, active.pathname);
+                const queryParams = extractQueryParamsFromURL(window.location.href);
+                locationDetails.setState({ value: { params, queryParams, ...window.location } });
+            };
+            window.addEventListener("popstate", updateLocation);
+            return () => window.removeEventListener("popstate", updateLocation);
+        }, []);
+        return _jsx(component.value, {});
+    };
+    return {
+        navigate,
+        useLocationDetails,
+        Outlet
+    };
+};
+export default createBrowserRouter;

package/dist/navigation/createMemoryRouter.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+import {} from "preact/compat";
+import createStore from "../storage/index";
+import { generateURLToNavigate, isRouteMatching } from "./support/url.support";
+import { extractParamsFromURL } from "./support/params.support";
+import { extractQueryParamsFromURL } from "./support/query-params.support";
+const createMemoryRouter = (routes, { page404 } = { page404: () => _jsx(_Fragment, { children: "Page Not Found" }) }) => {
+    if (routes.length === 0) {
+        throw "Atleast one route should present";
+    }
+    ;
+    const activeRoute = createStore("active-route", { value: routes.find(() => isRouteMatching("/")) || { pathname: "/", component: page404 } });
+    const locationDetails = createStore("location-details", { value: { params: {}, queryParams: {}, ...window.location, pathname: activeRoute.value.pathname } });
+    const entries = createStore("entries", { value: ["/"] });
+    const currentIndex = createStore("current-index", { value: 0 });
+    const navigate = (to, { queryParams } = {}) => {
+        if (typeof to === "number") {
+            const targetIndex = currentIndex.value + to;
+            if (targetIndex < 0 || targetIndex >= entries.value.length)
+                return;
+            const raw = entries.value[targetIndex];
+            const url = raw.startsWith("http") ? new URL(raw).pathname + new URL(raw).search : raw;
+            currentIndex.setState({ value: targetIndex });
+            const active = routes.find(r => isRouteMatching(r.pathname, url)) || { pathname: url, component: page404 };
+            activeRoute.setState({ value: active });
+            const params = extractParamsFromURL(url, active.pathname);
+            const allQueryParams = extractQueryParamsFromURL(url);
+            locationDetails.setState({ value: { params, queryParams: allQueryParams, ...window.location, pathname: active.pathname } });
+            return;
+        }
+        const url = generateURLToNavigate(to, queryParams || {});
+        if (activeRoute.value.pathname === url)
+            return;
+        entries.setState({ value: [...entries.value, url] });
+        const active = routes.find(r => isRouteMatching(r.pathname, to)) || { pathname: to, component: page404 };
+        activeRoute.setState({ value: active });
+        const params = extractParamsFromURL(to, activeRoute.value.pathname);
+        const allQueryParams = extractQueryParamsFromURL(url);
+        locationDetails.setState({ value: { params, queryParams: allQueryParams, ...window.location, pathname: active.pathname } });
+        currentIndex.setState({ value: currentIndex.value + 1 });
+    };
+    const useLocationDetails = () => {
+        return locationDetails.value;
+    };
+    const Outlet = () => {
+        const Component = activeRoute.value.component;
+        return _jsx(Component, {});
+    };
+    return {
+        navigate,
+        useLocationDetails,
+        Outlet
+    };
+};
+export default createMemoryRouter;

package/dist/navigation/index.js

@@ -1,4 +1,2 @@
-export { default as Outlet } from "./Outlet";
-export { default as createRoutes } from "./createRoutes";
-export { default as navigate } from "./navigate";
-export { default as useLocationDetails } from "./useLocationDetails";
+export { default as createBrowserRouter } from "./createBrowserRouter";
+export { default as createMemoryRouter } from "./createMemoryRouter";

package/dist/navigation/{extractParamsFromURL.js → support/params.support.js}

@@ -3,8 +3,7 @@
  */
 export const extractParamsFromURL = (url, compareWith) => {
     const params = {};
-    const href = url.startsWith(window.location.origin) ? url.split(window.location.origin)[1] : url;
-    const parts = href.split("?");
+    const parts = url.split("?");
     if (parts.length > 2) {
         throw "Invalid URL";
     }

package/dist/navigation/support/query-params.support.js

@@ -0,0 +1,43 @@
+/**
+ * @internal
+ */
+export const createQueryParamsSearchString = (queryParams) => {
+    const keys = Object.keys(queryParams);
+    if (keys.length > 0) {
+        let search = "?";
+        for (let index = 0; index < keys.length; index++) {
+            const key = keys[index];
+            search = `${search}${key}=${queryParams[key]}`;
+            if (index !== keys.length - 1) {
+                search = search + "&";
+            }
+        }
+        return search;
+    }
+    return "";
+};
+export const extractQueryParamsFromURL = (url) => {
+    const queryObj = {};
+    const parts = url.split("?");
+    if (parts.length > 2) {
+        throw "Invalid URL";
+    }
+    ;
+    if (parts.length === 1) {
+        return queryObj;
+    }
+    ;
+    const search = parts[1];
+    if (search && search.length > 0) {
+        const queries = search.split("&");
+        for (const query of queries) {
+            const queryParts = query.split("=");
+            if (queryParts.length > 2) {
+                throw "Invalid URL";
+            }
+            const [key, value] = queryParts;
+            queryObj[decodeURIComponent(key)] = decodeURIComponent(value ?? "");
+        }
+    }
+    return queryObj;
+};

package/dist/navigation/support/url.support.js

@@ -0,0 +1,20 @@
+import { createQueryParamsSearchString, extractQueryParamsFromURL } from "./query-params.support";
+export const generateURLToNavigate = (pathname, queryParams) => {
+    const queryParamsFromPathname = extractQueryParamsFromURL(pathname);
+    const allQueryParams = createQueryParamsSearchString({ ...queryParamsFromPathname, ...queryParams });
+    const url = pathname.startsWith("/") ? `${window.location.origin}${pathname.split("?")[0]}` : `${window.location.origin}/${pathname.split("?")[0]}`;
+    const path = `${url}${allQueryParams}`;
+    return path;
+};
+export const isRouteMatching = (routePath, comparePath) => {
+    const current = comparePath ?? window.location.pathname;
+    if (routePath === "/" || routePath === "") {
+        const isRoot = current === "/" || current === "/index.html" || current === "";
+        return isRoot;
+    }
+    const routeParts = routePath.split("/").filter(Boolean);
+    const currentParts = current.split("/").filter(Boolean);
+    if (routeParts.length !== currentParts.length)
+        return false;
+    return routeParts.every((part, i) => part.startsWith(":") || part === currentParts[i]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gohanfromgoku/ui-kit",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "ui-kit is a TypeScript based UI component library designed for building modern web applications with ease and efficiency.",
   "sideEffects": false,
   "scripts": {

package/types/navigation/createBrowserRouter.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentType } from "preact/compat";
+interface Route {
+    pathname: string;
+    component: ComponentType;
+}
+declare const createBrowserRouter: (routes: Route[], { page404 }?: {
+    page404?: ComponentType;
+}) => {
+    navigate: (to: string | number, { queryParams, replace }?: {
+        queryParams?: Record<string, any>;
+        replace?: boolean;
+    }) => void;
+    useLocationDetails: () => {
+        ancestorOrigins: DOMStringList;
+        hash: string;
+        host: string;
+        hostname: string;
+        href: string;
+        toString(): string;
+        origin: string;
+        pathname: string;
+        port: string;
+        protocol: string;
+        search: string;
+        assign(url: string | URL): void;
+        reload(): void;
+        replace(url: string | URL): void;
+        params: {};
+        queryParams: {};
+    };
+    Outlet: () => import("preact").JSX.Element;
+};
+export default createBrowserRouter;

package/types/navigation/createMemoryRouter.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentType } from "preact/compat";
+interface Route {
+    pathname: string;
+    component: ComponentType;
+}
+declare const createMemoryRouter: (routes: Route[], { page404 }?: {
+    page404?: ComponentType;
+}) => {
+    navigate: (to: string | number, { queryParams }?: {
+        queryParams?: Record<string, any>;
+    }) => void;
+    useLocationDetails: () => {
+        pathname: string;
+        ancestorOrigins: DOMStringList;
+        hash: string;
+        host: string;
+        hostname: string;
+        href: string;
+        toString(): string;
+        origin: string;
+        port: string;
+        protocol: string;
+        search: string;
+        assign(url: string | URL): void;
+        reload(): void;
+        replace(url: string | URL): void;
+        params: {};
+        queryParams: {};
+    };
+    Outlet: () => import("preact").JSX.Element;
+};
+export default createMemoryRouter;

package/types/navigation/index.d.ts

@@ -1,4 +1,2 @@
-export { default as Outlet } from "./Outlet";
-export { default as createRoutes } from "./createRoutes";
-export { default as navigate } from "./navigate";
-export { default as useLocationDetails } from "./useLocationDetails";
+export { default as createBrowserRouter } from "./createBrowserRouter";
+export { default as createMemoryRouter } from "./createMemoryRouter";

package/types/navigation/{extractQueryParamsFromURL.d.ts → support/query-params.support.d.ts}

@@ -1,4 +1,5 @@
 /**
  * @internal
  */
+export declare const createQueryParamsSearchString: (queryParams: Record<string, unknown>) => string;
 export declare const extractQueryParamsFromURL: (url: string) => Record<string, any>;

package/types/navigation/support/url.support.d.ts

@@ -0,0 +1,2 @@
+export declare const generateURLToNavigate: (pathname: string, queryParams: Record<string, any>) => string;
+export declare const isRouteMatching: (routePath: string, comparePath?: string) => boolean;

package/dist/navigation/Outlet.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { activeRoute, location } from "./navigation.store";
-import { Page404 } from "./Page404";
-import { useEffect } from "preact/compat";
-import isRouteMatching from "./isRouteMatching";
-import { computed } from "@preact/signals";
-import { extractParamsFromURL } from "./extractParamsFromURL";
-import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
-const Outlet = ({ routes, page404: Page404Page = Page404 }) => {
-    const component = computed(() => activeRoute.value?.component ?? Page404Page);
-    useEffect(() => {
-        const updateLocation = () => {
-            const active = routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.href, component: Page404Page };
-            const { pathname: currentpath, href } = window.location;
-            const params = extractParamsFromURL(currentpath, active.pathname);
-            const queryParams = extractQueryParamsFromURL(href);
-            activeRoute.setState({ value: active });
-            location.setState({ value: { params, queryParams } });
-        };
-        updateLocation();
-        window.addEventListener("popstate", updateLocation);
-        return () => window.removeEventListener("popstate", updateLocation);
-    }, [routes]);
-    return _jsx(component.value, {});
-};
-export default Outlet;

package/dist/navigation/Page404.js

@@ -1,2 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
-export const Page404 = () => _jsx(_Fragment, { children: "Page Not Found" });

package/dist/navigation/createRoutes.js

@@ -1,6 +0,0 @@
-import { globalRoutes } from "./navigation.store";
-const createRoutes = (routes) => {
-    globalRoutes.setState({ value: routes });
-    return routes;
-};
-export default createRoutes;

package/dist/navigation/extractQueryParamsFromURL.js

@@ -1,24 +0,0 @@
-/**
- * @internal
- */
-export const extractQueryParamsFromURL = (url) => {
-    const query = {};
-    const href = url.startsWith(window.location.origin) ? url.split(window.location.origin)[1] : url;
-    const parts = href.split("?");
-    if (parts.length > 2) {
-        throw "Invalid URL";
-    }
-    const search = parts[1];
-    if (search && search.length > 0) {
-        const searchSegments = search.split("&");
-        for (const ss of searchSegments) {
-            const ssparts = ss.split("=");
-            if (ssparts.length > 2) {
-                throw "Invalid URL";
-            }
-            const [key, value] = ssparts;
-            query[decodeURIComponent(key)] = decodeURIComponent(value ?? "");
-        }
-    }
-    return query;
-};

package/dist/navigation/isRouteMatching.js

@@ -1,15 +0,0 @@
-/**
- * @internal
- */
-const isRouteMatching = (routePath) => {
-    const current = window.location.pathname;
-    if (routePath === "/") {
-        return current === "/";
-    }
-    const routeParts = routePath.split("/").filter(Boolean);
-    const currentParts = current.split("/").filter(Boolean);
-    if (routeParts.length !== currentParts.length)
-        return false;
-    return routeParts.every((part, i) => part.startsWith(":") || part === currentParts[i]);
-};
-export default isRouteMatching;

package/dist/navigation/navigate.js

@@ -1,41 +0,0 @@
-import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
-const createSearch = (queryParams) => {
-    const keys = Object.keys(queryParams);
-    if (keys.length > 0) {
-        let search = "?";
-        for (let index = 0; index < keys.length; index++) {
-            const key = keys[index];
-            search = `${search}${key}=${queryParams[key]}`;
-            if (index !== keys.length - 1) {
-                search = search + "&";
-            }
-        }
-        return search;
-    }
-    return "";
-};
-const generateURLFromParams = (pathname, queryParams) => {
-    const pathnameQueryParams = extractQueryParamsFromURL(pathname);
-    const allQueryParams = { ...pathnameQueryParams, ...queryParams };
-    const url = pathname.startsWith("/") ? `${window.location.origin}${pathname.split("?")[0]}` : `${window.location.origin}/${pathname.split("?")[0]}`;
-    const path = `${url}${createSearch(allQueryParams)}`;
-    return path;
-};
-const navigate = (path, { queryParams = {}, replace = false } = {}) => {
-    if (typeof path === "number") {
-        window.history.go(path);
-        return;
-    }
-    const pathname = generateURLFromParams(path, queryParams);
-    if (window.location.href === pathname) {
-        return;
-    }
-    if (replace) {
-        window.history.replaceState({}, "", pathname);
-    }
-    else {
-        window.history.pushState({}, "", pathname);
-    }
-    window.dispatchEvent(new Event("popstate"));
-};
-export default navigate;

package/dist/navigation/navigation.store.js

@@ -1,4 +0,0 @@
-import createStore from "../storage/index";
-export const location = createStore("location", { value: { params: {}, queryParams: {} } });
-export const activeRoute = createStore("activeRoute", { value: {} });
-export const globalRoutes = createStore("globalRoutes", { value: [] });

package/dist/navigation/useLocationDetails.js

@@ -1,10 +0,0 @@
-import { computed } from "@preact/signals";
-import { globalRoutes, location } from "./navigation.store";
-const useLocationDetails = () => {
-    if (globalRoutes.value.length === 0) {
-        throw "useLocationDetails cannot be used without initializing routes, use createRoutes initialize routes";
-    }
-    const values = computed(() => location.value);
-    return values.value;
-};
-export default useLocationDetails;

package/types/navigation/Outlet.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentType } from "preact";
-import type { Route } from "./createRoutes";
-declare const Outlet: ({ routes, page404: Page404Page }: {
-    routes: Route[];
-    page404?: ComponentType;
-}) => import("preact").JSX.Element;
-export default Outlet;

package/types/navigation/Page404.d.ts

@@ -1 +0,0 @@
-export declare const Page404: () => import("preact").JSX.Element;

package/types/navigation/createRoutes.d.ts

@@ -1,8 +0,0 @@
-import type { ComponentType } from "preact/compat";
-export interface Route {
-    pathname: string;
-    component: ComponentType;
-    index?: true | undefined | null;
-}
-declare const createRoutes: (routes: Route[]) => Route[];
-export default createRoutes;

package/types/navigation/isRouteMatching.d.ts

@@ -1,5 +0,0 @@
-/**
- * @internal
- */
-declare const isRouteMatching: (routePath: string) => boolean;
-export default isRouteMatching;

package/types/navigation/navigate.d.ts

@@ -1,6 +0,0 @@
-export interface NavigationProps {
-    queryParams?: Record<string, unknown>;
-    replace?: boolean;
-}
-declare const navigate: (path: string | number, { queryParams, replace }?: NavigationProps) => void;
-export default navigate;

package/types/navigation/navigation.store.d.ts

@@ -1,46 +0,0 @@
-import type { Route } from "./createRoutes";
-export declare const location: {
-    value: {
-        params: {};
-        queryParams: {};
-    };
-} & {
-    setState: (values: Partial<{
-        value: {
-            params: {};
-            queryParams: {};
-        };
-    }>) => void;
-    resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<{
-        value: {
-            params: {};
-            queryParams: {};
-        };
-    }>;
-};
-export declare const activeRoute: {
-    value: Route;
-} & {
-    setState: (values: Partial<{
-        value: Route;
-    }>) => void;
-    resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<{
-        value: Route;
-    }>;
-};
-export declare const globalRoutes: {
-    value: Route[];
-} & {
-    setState: (values: Partial<{
-        value: Route[];
-    }>) => void;
-    resetState: () => void;
-} & {
-    __signal: import("@preact/signals").Signal<{
-        value: Route[];
-    }>;
-};

package/types/navigation/useLocationDetails.d.ts

@@ -1,5 +0,0 @@
-declare const useLocationDetails: () => {
-    params: {};
-    queryParams: {};
-};
-export default useLocationDetails;