solid-navigator 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 SupertigerDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=solid-navigator&background=tiles&project=%20" alt="solid-navigator">
+</p>
+
+# solid-navigator
+
+[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
+
+Solid Navigator is a library that is inspired by vue router and solid router.
+
+
+## Quick start
+
+Install it:
+
+```bash
+npm i solid-navigator
+# or
+pnpm add solid-navigator
+```
+
+Use it:
+
+```tsx
+import { useNavigate, Outlet, Route, Router, useLocation, useParams, A } from 'solid-navigator'
+```
+
+
+## Methods
+
+### `useNavigate`
+```js
+const navigate = useNavigate();
+navigate("/app", {replace: true})
+```
+
+### `useLocation`  
+```js
+// path: /app?id=1
+const location = useLocation();
+{
+  query: {id: string} 
+  search: string
+  pathname: string
+  hash: string
+}
+```
+
+### `useParams`
+```js
+// path: /chats/:id
+const params = useParams<{id: string}>();
+{
+  id: string
+}
+```
+
+## Components
+
+### `Router`  
+```jsx
+const Root = () => {
+  return (
+    <div>
+      <h1>Header</h1>
+      <Outlet/>
+    </div>
+  )
+}
+
+const Main = () => {
+  return (
+    <Router root={Root}>
+      // Routes go here
+    </Router>
+  )
+}
+```
+
+### `Outlet`
+```jsx
+const Main = () => {
+
+  const AppComponent = () => {
+    return (
+      <div>
+        <div><Outlet name="drawer"/></div>
+        <div><Outlet name="content"/></div>
+      </div>
+    )
+  }
+
+  return (
+    <Router root={Root}>
+      <Route path="/" component={AppComponent}>
+        <Route 
+          components={{
+            drawer: Drawer,
+            content: Content
+          }} 
+        />
+      </Route>
+    </Router>
+  )
+}
+```
+
+### `A` 
+```tsx
+const App = () => {
+  return (
+    <A href="/" replace />
+  )
+}
+```
+
+### `Navigate` 
+```tsx
+const App = () => {
+  return (
+    <Navigate to="/" />
+  )
+}
+

package/dist/dev.js

@@ -0,0 +1,314 @@
+import { createComponent, spread, template } from 'solid-js/web';
+import { createContext, children, createMemo, createSignal, onMount, onCleanup, mergeProps, createEffect, on, useContext } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
+
+// src/Router.tsx
+
+// src/utils/matcher.ts
+function createMatcher(path, partial, matchFilters) {
+  const [pattern, splat] = path.split("/*", 2);
+  const segments = pattern.split("/").filter(Boolean);
+  const len = segments.length;
+  return (location2) => {
+    const locSegments = location2.split("/").filter(Boolean);
+    const lenDiff = locSegments.length - len;
+    if (lenDiff < 0 || lenDiff > 0 && splat === void 0 && !partial) {
+      return null;
+    }
+    const match = {
+      path: len ? "" : "/",
+      params: {}
+    };
+    const matchFilter = (s) => matchFilters === void 0 ? void 0 : matchFilters[s];
+    for (let i = 0; i < len; i++) {
+      const segment = segments[i];
+      const locSegment = locSegments[i];
+      const dynamic = segment[0] === ":";
+      const key = dynamic ? segment.slice(1) : segment;
+      if (dynamic && matchSegment(locSegment, matchFilter(key))) {
+        match.params[key] = locSegment;
+      } else if (dynamic || !matchSegment(locSegment, segment)) {
+        return null;
+      }
+      match.path += `/${locSegment}`;
+    }
+    if (splat) {
+      const remainder = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
+      if (matchSegment(remainder, matchFilter(splat))) {
+        match.params[splat] = remainder;
+      } else {
+        return null;
+      }
+    }
+    return match;
+  };
+}
+function matchSegment(input, filter) {
+  const isEqual = (s) => s.localeCompare(input, void 0, { sensitivity: "base" }) === 0;
+  if (filter === void 0) {
+    return true;
+  } else if (typeof filter === "string") {
+    return isEqual(filter);
+  } else if (typeof filter === "function") {
+    return filter(input);
+  } else if (Array.isArray(filter)) {
+    return filter.some(isEqual);
+  } else if (filter instanceof RegExp) {
+    return filter.test(input);
+  }
+  return false;
+}
+var createLocation = (path) => {
+  const [query, setQuery] = createStore({});
+  const url = createMemo(() => {
+    return new URL(path(), "http://owo");
+  });
+  createEffect(
+    on(url, () => {
+      const newQuery = {};
+      url().searchParams.forEach((value, key) => {
+        newQuery[key] = value;
+      });
+      setQuery(reconcile(newQuery));
+    })
+  );
+  const search = createMemo(() => url().search);
+  const pathname = createMemo(() => url().pathname);
+  const hash = createMemo(() => url().hash);
+  return {
+    query,
+    get search() {
+      return search();
+    },
+    get pathname() {
+      return pathname();
+    },
+    get hash() {
+      return hash();
+    }
+  };
+};
+
+// src/utils/utils.ts
+var isValidPath = (routes, pathname) => {
+  return routes().find((route) => {
+    const matcher = createMatcher(route.path);
+    return matcher(pathname);
+  });
+};
+var getHashAndSearch = () => location.hash + location.search;
+
+// 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 [pathname, setPathname] = createSignal(location.pathname);
+  const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
+  const [params, setParams] = createStore({});
+  const pathnameWithHashAndSearch = createMemo(() => pathname() + hashAndSearch());
+  const loc = createLocation(pathnameWithHashAndSearch);
+  const matched = createMemo(() => {
+    if (!routes())
+      return;
+    let pathMatch = null;
+    let matchedRoute;
+    for (const route of routes()) {
+      const matcher = createMatcher(route.path);
+      const match = matcher(pathname());
+      if (match) {
+        pathMatch = match;
+        matchedRoute = route;
+        break;
+      }
+    }
+    setParams(reconcile(pathMatch?.params || {}));
+    if (!matchedRoute || !pathMatch) {
+      return void 0;
+    }
+    return {
+      match: pathMatch,
+      route: matchedRoute
+    };
+  });
+  const navigate = createNavigate(routes, pathname, setPathname, setHashAndSearch);
+  const onPopState = (_event) => {
+    setPathname(location.pathname);
+    setHashAndSearch(getHashAndSearch());
+  };
+  const onClick = (event) => {
+    const target = event.target;
+    if (target.tagName !== "A")
+      return;
+    if (!target.hasAttribute("sn-link"))
+      return;
+    event.preventDefault();
+    const href = target.getAttribute("href") || "";
+    navigate(href, {
+      replace: target.hasAttribute("replace")
+    });
+  };
+  onMount(() => {
+    window.addEventListener("popstate", onPopState);
+    document.addEventListener("click", onClick);
+    onCleanup(() => {
+      window.removeEventListener("popstate", onPopState);
+      document.removeEventListener("click", onClick);
+    });
+  });
+  return createComponent(RouterContext.Provider, {
+    value: {
+      routes,
+      matched,
+      navigate,
+      params,
+      location: loc,
+      setHashAndSearch,
+      setPathname
+    },
+    get children() {
+      return props.root?.();
+    }
+  });
+}
+var useRouterContext = () => {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error("Router: cannot find a RouterContext");
+  }
+  return context;
+};
+function useParams() {
+  const context = useRouterContext();
+  return context.params;
+}
+var useLocation = () => useRouterContext().location;
+var flattenedRoutes = (routes) => {
+  return routes.map((route) => flattenedRoute(route)).flat();
+};
+var flattenedRoute = (route) => {
+  const routes = [];
+  const components = route.components || {};
+  let lastComponent = void 0;
+  if (route.component) {
+    lastComponent = route.component;
+  }
+  routes.push({
+    ...route,
+    components: {
+      ...components
+    },
+    mergedComponents: components,
+    component: route.component || lastComponent
+  });
+  if (!route.children)
+    return routes;
+  for (let i = 0; i < route.children.length; i++) {
+    const child = route.children[i];
+    if (!child)
+      continue;
+    if (child.components) {
+      Object.assign(components, child.components);
+    }
+    if (child.component) {
+      lastComponent = child.component;
+    }
+    if (!child.path.startsWith("/")) {
+      if (!child.component) {
+        throw new Error("Route: No component for " + child.path);
+      }
+      components[child.path] = child.component;
+      continue;
+    }
+    routes.push(...flattenedRoute({
+      ...child,
+      path: route.path + child.path,
+      components: {
+        ...components
+      },
+      mergedComponents: components,
+      component: child.component || lastComponent
+    }));
+  }
+  return routes;
+};
+
+// src/navigator.ts
+var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
+  return (path, options) => {
+    let newPath = path;
+    let currentPathname = pathname();
+    if (currentPathname.endsWith("/")) {
+      currentPathname = currentPathname.slice(0, -1);
+    }
+    if (newPath.startsWith("./")) {
+      newPath = currentPathname + "/" + newPath.slice(2);
+    }
+    if (options?.replace) {
+      history.replaceState({}, "", newPath);
+    } else {
+      history.pushState({}, "", newPath);
+    }
+    if (!isValidPath(routes, location.pathname)) {
+      console.error("Invalid path: " + path);
+      return;
+    }
+    setPathname(location.pathname);
+    setHashAndSearch(getHashAndSearch());
+  };
+};
+var useNavigate = () => {
+  const context = useRouterContext();
+  return context.navigate;
+};
+var Navigate = (props) => {
+  const navigate = useNavigate();
+  navigate(props.href, { replace: true });
+  return null;
+};
+var Fragment = () => [];
+var Outlet = (props) => {
+  const context = useRouterContext();
+  const matched = () => context.matched();
+  const getName = () => props.name || props.children;
+  const component = createMemo(() => {
+    const name = getName();
+    if (!name) {
+      const rootComponent = matched()?.route.component;
+      if (!rootComponent) {
+        console.warn("Outlet: No component for root.");
+        return Fragment;
+      }
+      return rootComponent;
+    }
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {};
+    const component2 = components[name];
+    if (!component2) {
+      console.warn("Outlet: No component for " + name);
+      return Fragment;
+    }
+    return component2;
+  });
+  return component;
+};
+var Route = (props) => {
+  const childRoutes = children(() => props.children).toArray;
+  return mergeProps(props, {
+    get children() {
+      return childRoutes();
+    }
+  });
+};
+var _tmpl$ = /* @__PURE__ */ template(`<a sn-link>`);
+var A = (props) => {
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, props, false, false);
+    return _el$;
+  })();
+};
+
+export { A, Navigate, Outlet, Route, Router, useLocation, useNavigate, useParams };