solid-navigator 0.2.3 → 0.3.0

package/dist/dev.js

@@ -96,15 +96,31 @@ var isValidPath = (routes, pathname) => {
   });
 };
 var getHashAndSearch = () => location.hash + location.search;
+function expandOptionals(pattern) {
+  let match = /(\/?\:[^\/]+)\?/.exec(pattern);
+  if (!match)
+    return [pattern];
+  let prefix = pattern.slice(0, match.index);
+  let suffix = pattern.slice(match.index + match[0].length);
+  const prefixes = [prefix, prefix += match[1]];
+  while (match = /^(\/\:[^\/]+)\?/.exec(suffix)) {
+    prefixes.push(prefix += match[1]);
+    suffix = suffix.slice(match[0].length);
+  }
+  return expandOptionals(suffix).reduce(
+    (results, expansion) => [...results, ...prefixes.map((p) => p + expansion)],
+    []
+  );
+}
 
 // src/Router.tsx
 var RouterContext = createContext();
 function Router(props) {
-  const childRoutes = children(() => props.children).toArray;
-  const routes = createMemo(() => flattenedRoutes(childRoutes()));
   if (!props.children) {
     throw new Error("Router: No children provided.");
   }
+  const childRoutes = children(() => props.children).toArray;
+  const routes = createMemo(() => expandOptionalRoutes(flattenedRoutes(childRoutes())));
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore({});
@@ -140,6 +156,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+      return;
     const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
     if (target?.tagName !== "A")
       return;
@@ -236,6 +254,18 @@ var flattenedRoute = (route) => {
   }
   return routes;
 };
+var expandOptionalRoutes = (routes) => {
+  const newRoutes = [];
+  routes.forEach((route) => {
+    expandOptionals(route.path).forEach((path) => {
+      newRoutes.push({
+        ...route,
+        path
+      });
+    });
+  });
+  return newRoutes;
+};
 var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
   return (path, options) => {
     let newPath = path;
@@ -252,8 +282,7 @@ var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
       history.pushState({}, "", newPath);
     }
     if (!isValidPath(routes, location.pathname)) {
-      console.error("Invalid path: " + path);
-      return;
+      console.warn("Invalid path: " + path);
     }
     setPathname(location.pathname);
     setHashAndSearch(getHashAndSearch());
@@ -303,10 +332,10 @@ var Outlet = (props) => {
     }
     return component2;
   });
-  const MemodComponent = createMemo(() => {
+  const MemoComponent = createMemo(() => {
     return component()();
   });
-  return MemodComponent;
+  return MemoComponent;
 };
 var Route = (props) => {
   const childRoutes = children(() => props.children).toArray;
@@ -316,6 +345,16 @@ var Route = (props) => {
     }
   });
 };
+var matchComponent = (name) => {
+  const context = useRouterContext();
+  const component = createMemo(() => {
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {};
+    return components[name()];
+  });
+  return createMemo(() => {
+    return component()();
+  });
+};
 var _tmpl$ = /* @__PURE__ */ template(`<a sn-link>`);
 var A = (props) => {
   return (() => {
@@ -325,9 +364,19 @@ var A = (props) => {
   })();
 };
 var useMatch = (path) => {
-  const context = useRouterContext();
-  const matcher = createMemo(() => createMatcher(path()));
-  return createMemo(() => matcher()(context.location.pathname));
+  const location2 = useLocation();
+  const matchers = createMemo(() => {
+    return expandOptionals(path()).map((path2) => createMatcher(path2));
+  });
+  return createMemo(() => {
+    for (let i = 0; i < matchers().length; i++) {
+      const matcher = matchers()[i];
+      const match = matcher(location2.pathname);
+      if (match) {
+        return match;
+      }
+    }
+  });
 };
 
-export { A, Navigate, Outlet, Route, Router, useLocation, useMatch, useNavigate, useParams, useSearchParams };
+export { A, Navigate, Outlet, Route, Router, matchComponent, useLocation, useMatch, useNavigate, useParams, useSearchParams };

package/dist/dev.jsx

@@ -106,15 +106,31 @@ var isValidPath = (routes, pathname) => {
   });
 };
 var getHashAndSearch = () => location.hash + location.search;
+function expandOptionals(pattern) {
+  let match = /(\/?\:[^\/]+)\?/.exec(pattern);
+  if (!match)
+    return [pattern];
+  let prefix = pattern.slice(0, match.index);
+  let suffix = pattern.slice(match.index + match[0].length);
+  const prefixes = [prefix, prefix += match[1]];
+  while (match = /^(\/\:[^\/]+)\?/.exec(suffix)) {
+    prefixes.push(prefix += match[1]);
+    suffix = suffix.slice(match[0].length);
+  }
+  return expandOptionals(suffix).reduce(
+    (results, expansion) => [...results, ...prefixes.map((p) => p + expansion)],
+    []
+  );
+}
 
 // src/Router.tsx
 var RouterContext = createContext();
 function Router(props) {
-  const childRoutes = children(() => props.children).toArray;
-  const routes = createMemo2(() => flattenedRoutes(childRoutes()));
   if (!props.children) {
     throw new Error("Router: No children provided.");
   }
+  const childRoutes = children(() => props.children).toArray;
+  const routes = createMemo2(() => expandOptionalRoutes(flattenedRoutes(childRoutes())));
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore2({});
@@ -147,6 +163,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+      return;
     const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
     if (target?.tagName !== "A")
       return;
@@ -238,6 +256,15 @@ var flattenedRoute = (route) => {
   }
   return routes;
 };
+var expandOptionalRoutes = (routes) => {
+  const newRoutes = [];
+  routes.forEach((route) => {
+    expandOptionals(route.path).forEach((path) => {
+      newRoutes.push({ ...route, path });
+    });
+  });
+  return newRoutes;
+};
 
 // src/navigator.ts
 import { reconcile as reconcile3 } from "solid-js/store";
@@ -257,8 +284,7 @@ var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
       history.pushState({}, "", newPath);
     }
     if (!isValidPath(routes, location.pathname)) {
-      console.error("Invalid path: " + path);
-      return;
+      console.warn("Invalid path: " + path);
     }
     setPathname(location.pathname);
     setHashAndSearch(getHashAndSearch());
@@ -311,14 +337,14 @@ var Outlet = (props) => {
     }
     return component2;
   });
-  const MemodComponent = createMemo3(() => {
+  const MemoComponent = createMemo3(() => {
     return component()();
   });
-  return <>{MemodComponent}</>;
+  return <>{MemoComponent}</>;
 };
 
 // src/Route.ts
-import { children as children2, mergeProps } from "solid-js";
+import { children as children2, createMemo as createMemo4, mergeProps } from "solid-js";
 var Route = (props) => {
   const childRoutes = children2(() => props.children).toArray;
   return mergeProps(props, {
@@ -327,16 +353,37 @@ var Route = (props) => {
     }
   });
 };
+var matchComponent = (name) => {
+  const context = useRouterContext();
+  const matched = () => context.matched();
+  const component = createMemo4(() => {
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {};
+    return components[name()];
+  });
+  return createMemo4(() => {
+    return component()();
+  });
+};
 
 // src/Link.tsx
-import { createMemo as createMemo4 } from "solid-js";
+import { createMemo as createMemo5 } from "solid-js";
 var A = (props) => {
   return <a sn-link {...props} />;
 };
 var useMatch = (path) => {
-  const context = useRouterContext();
-  const matcher = createMemo4(() => createMatcher(path()));
-  return createMemo4(() => matcher()(context.location.pathname));
+  const location2 = useLocation();
+  const matchers = createMemo5(() => {
+    return expandOptionals(path()).map((path2) => createMatcher(path2));
+  });
+  return createMemo5(() => {
+    for (let i = 0; i < matchers().length; i++) {
+      const matcher = matchers()[i];
+      const match = matcher(location2.pathname);
+      if (match) {
+        return match;
+      }
+    }
+  });
 };
 export {
   A,
@@ -344,6 +391,7 @@ export {
   Outlet,
   Route,
   Router,
+  matchComponent,
   useLocation,
   useMatch,
   useNavigate,

package/dist/index.d.ts

@@ -1,15 +1,16 @@
 import * as solid_js from 'solid-js';
-import { JSX } from 'solid-js';
+import { JSX, Component } from 'solid-js';
 
 interface RouteObject {
     path: string;
     children?: RouteObject[];
     component?: () => JSX.Element;
-    components?: Record<string, () => JSX.Element>;
+    components?: Record<string, () => JSX.Element | undefined>;
 }
 declare const Route: (props: Omit<RouteObject, 'children'> & {
     children?: JSX.Element;
 }) => JSX.Element;
+declare const matchComponent: (name: () => string) => Component;
 
 interface NavigateOptions {
     replace?: boolean;
@@ -48,6 +49,6 @@ type LinkProps = {
     replace?: boolean;
 } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;
 declare const A: (props: LinkProps) => JSX.Element;
-declare const useMatch: (path: () => string) => solid_js.Accessor<PathMatch | null>;
+declare const useMatch: (path: () => string) => solid_js.Accessor<PathMatch | undefined>;
 
-export { A, Navigate, type NavigateOptions, Outlet, Route, type RouteObject, Router, type RouterProps, useLocation, useMatch, useNavigate, useParams, useSearchParams };
+export { A, Navigate, type NavigateOptions, Outlet, Route, type RouteObject, Router, type RouterProps, matchComponent, useLocation, useMatch, useNavigate, useParams, useSearchParams };

package/dist/index.js

@@ -96,15 +96,31 @@ var isValidPath = (routes, pathname) => {
   });
 };
 var getHashAndSearch = () => location.hash + location.search;
+function expandOptionals(pattern) {
+  let match = /(\/?\:[^\/]+)\?/.exec(pattern);
+  if (!match)
+    return [pattern];
+  let prefix = pattern.slice(0, match.index);
+  let suffix = pattern.slice(match.index + match[0].length);
+  const prefixes = [prefix, prefix += match[1]];
+  while (match = /^(\/\:[^\/]+)\?/.exec(suffix)) {
+    prefixes.push(prefix += match[1]);
+    suffix = suffix.slice(match[0].length);
+  }
+  return expandOptionals(suffix).reduce(
+    (results, expansion) => [...results, ...prefixes.map((p) => p + expansion)],
+    []
+  );
+}
 
 // src/Router.tsx
 var RouterContext = createContext();
 function Router(props) {
-  const childRoutes = children(() => props.children).toArray;
-  const routes = createMemo(() => flattenedRoutes(childRoutes()));
   if (!props.children) {
     throw new Error("Router: No children provided.");
   }
+  const childRoutes = children(() => props.children).toArray;
+  const routes = createMemo(() => expandOptionalRoutes(flattenedRoutes(childRoutes())));
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore({});
@@ -140,6 +156,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+      return;
     const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
     if (target?.tagName !== "A")
       return;
@@ -236,6 +254,18 @@ var flattenedRoute = (route) => {
   }
   return routes;
 };
+var expandOptionalRoutes = (routes) => {
+  const newRoutes = [];
+  routes.forEach((route) => {
+    expandOptionals(route.path).forEach((path) => {
+      newRoutes.push({
+        ...route,
+        path
+      });
+    });
+  });
+  return newRoutes;
+};
 var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
   return (path, options) => {
     let newPath = path;
@@ -251,9 +281,7 @@ var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
     } else {
       history.pushState({}, "", newPath);
     }
-    if (!isValidPath(routes, location.pathname)) {
-      return;
-    }
+    if (!isValidPath(routes, location.pathname)) ;
     setPathname(location.pathname);
     setHashAndSearch(getHashAndSearch());
   };
@@ -300,10 +328,10 @@ var Outlet = (props) => {
     }
     return component2;
   });
-  const MemodComponent = createMemo(() => {
+  const MemoComponent = createMemo(() => {
     return component()();
   });
-  return MemodComponent;
+  return MemoComponent;
 };
 var Route = (props) => {
   const childRoutes = children(() => props.children).toArray;
@@ -313,6 +341,16 @@ var Route = (props) => {
     }
   });
 };
+var matchComponent = (name) => {
+  const context = useRouterContext();
+  const component = createMemo(() => {
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {};
+    return components[name()];
+  });
+  return createMemo(() => {
+    return component()();
+  });
+};
 var _tmpl$ = /* @__PURE__ */ template(`<a sn-link>`);
 var A = (props) => {
   return (() => {
@@ -322,9 +360,19 @@ var A = (props) => {
   })();
 };
 var useMatch = (path) => {
-  const context = useRouterContext();
-  const matcher = createMemo(() => createMatcher(path()));
-  return createMemo(() => matcher()(context.location.pathname));
+  const location2 = useLocation();
+  const matchers = createMemo(() => {
+    return expandOptionals(path()).map((path2) => createMatcher(path2));
+  });
+  return createMemo(() => {
+    for (let i = 0; i < matchers().length; i++) {
+      const matcher = matchers()[i];
+      const match = matcher(location2.pathname);
+      if (match) {
+        return match;
+      }
+    }
+  });
 };
 
-export { A, Navigate, Outlet, Route, Router, useLocation, useMatch, useNavigate, useParams, useSearchParams };
+export { A, Navigate, Outlet, Route, Router, matchComponent, useLocation, useMatch, useNavigate, useParams, useSearchParams };

package/dist/index.jsx

@@ -106,15 +106,31 @@ var isValidPath = (routes, pathname) => {
   });
 };
 var getHashAndSearch = () => location.hash + location.search;
+function expandOptionals(pattern) {
+  let match = /(\/?\:[^\/]+)\?/.exec(pattern);
+  if (!match)
+    return [pattern];
+  let prefix = pattern.slice(0, match.index);
+  let suffix = pattern.slice(match.index + match[0].length);
+  const prefixes = [prefix, prefix += match[1]];
+  while (match = /^(\/\:[^\/]+)\?/.exec(suffix)) {
+    prefixes.push(prefix += match[1]);
+    suffix = suffix.slice(match[0].length);
+  }
+  return expandOptionals(suffix).reduce(
+    (results, expansion) => [...results, ...prefixes.map((p) => p + expansion)],
+    []
+  );
+}
 
 // src/Router.tsx
 var RouterContext = createContext();
 function Router(props) {
-  const childRoutes = children(() => props.children).toArray;
-  const routes = createMemo2(() => flattenedRoutes(childRoutes()));
   if (!props.children) {
     throw new Error("Router: No children provided.");
   }
+  const childRoutes = children(() => props.children).toArray;
+  const routes = createMemo2(() => expandOptionalRoutes(flattenedRoutes(childRoutes())));
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore2({});
@@ -147,6 +163,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+      return;
     const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
     if (target?.tagName !== "A")
       return;
@@ -238,6 +256,15 @@ var flattenedRoute = (route) => {
   }
   return routes;
 };
+var expandOptionalRoutes = (routes) => {
+  const newRoutes = [];
+  routes.forEach((route) => {
+    expandOptionals(route.path).forEach((path) => {
+      newRoutes.push({ ...route, path });
+    });
+  });
+  return newRoutes;
+};
 
 // src/navigator.ts
 import { reconcile as reconcile3 } from "solid-js/store";
@@ -257,7 +284,6 @@ var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
       history.pushState({}, "", newPath);
     }
     if (!isValidPath(routes, location.pathname)) {
-      return;
     }
     setPathname(location.pathname);
     setHashAndSearch(getHashAndSearch());
@@ -308,14 +334,14 @@ var Outlet = (props) => {
     }
     return component2;
   });
-  const MemodComponent = createMemo3(() => {
+  const MemoComponent = createMemo3(() => {
     return component()();
   });
-  return <>{MemodComponent}</>;
+  return <>{MemoComponent}</>;
 };
 
 // src/Route.ts
-import { children as children2, mergeProps } from "solid-js";
+import { children as children2, createMemo as createMemo4, mergeProps } from "solid-js";
 var Route = (props) => {
   const childRoutes = children2(() => props.children).toArray;
   return mergeProps(props, {
@@ -324,16 +350,37 @@ var Route = (props) => {
     }
   });
 };
+var matchComponent = (name) => {
+  const context = useRouterContext();
+  const matched = () => context.matched();
+  const component = createMemo4(() => {
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {};
+    return components[name()];
+  });
+  return createMemo4(() => {
+    return component()();
+  });
+};
 
 // src/Link.tsx
-import { createMemo as createMemo4 } from "solid-js";
+import { createMemo as createMemo5 } from "solid-js";
 var A = (props) => {
   return <a sn-link {...props} />;
 };
 var useMatch = (path) => {
-  const context = useRouterContext();
-  const matcher = createMemo4(() => createMatcher(path()));
-  return createMemo4(() => matcher()(context.location.pathname));
+  const location2 = useLocation();
+  const matchers = createMemo5(() => {
+    return expandOptionals(path()).map((path2) => createMatcher(path2));
+  });
+  return createMemo5(() => {
+    for (let i = 0; i < matchers().length; i++) {
+      const matcher = matchers()[i];
+      const match = matcher(location2.pathname);
+      if (match) {
+        return match;
+      }
+    }
+  });
 };
 export {
   A,
@@ -341,6 +388,7 @@ export {
   Outlet,
   Route,
   Router,
+  matchComponent,
   useLocation,
   useMatch,
   useNavigate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-navigator",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Solid Navigator is a library that is inspired by vue router and solid router.",
   "license": "MIT",
   "author": "SupertigerDev",