solid-navigator 0.0.1

package/dist/index.jsx

@@ -0,0 +1,316 @@
+// src/Router.tsx
+import {
+  children,
+  createContext,
+  createMemo as createMemo2,
+  createSignal,
+  onCleanup,
+  onMount,
+  useContext
+} from "solid-js";
+import { createStore as createStore2, reconcile as reconcile2 } from "solid-js/store";
+
+// 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;
+}
+
+// src/createLocation.ts
+import { createEffect, createMemo, on } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+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 = createMemo2(() => 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] = createStore2({});
+  const pathnameWithHashAndSearch = createMemo2(() => pathname() + hashAndSearch());
+  const loc = createLocation(pathnameWithHashAndSearch);
+  const matched = createMemo2(() => {
+    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(reconcile2(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 <RouterContext.Provider
+    value={{ routes, matched, navigate, params, location: loc, setHashAndSearch, setPathname }}
+  >{props.root?.()}</RouterContext.Provider>;
+}
+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)) {
+      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;
+};
+
+// src/Outlet.tsx
+import { createMemo as createMemo3 } from "solid-js";
+var Fragment = () => <></>;
+var Outlet = (props) => {
+  const context = useRouterContext();
+  const matched = () => context.matched();
+  const getName = () => props.name || props.children;
+  const component = createMemo3(() => {
+    const name = getName();
+    if (!name) {
+      const rootComponent = matched()?.route.component;
+      if (!rootComponent) {
+        return Fragment;
+      }
+      return rootComponent;
+    }
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {};
+    const component2 = components[name];
+    if (!component2) {
+      return Fragment;
+    }
+    return component2;
+  });
+  return <>{component}</>;
+};
+
+// src/Route.ts
+import { children as children2, mergeProps } from "solid-js";
+var Route = (props) => {
+  const childRoutes = children2(() => props.children).toArray;
+  return mergeProps(props, {
+    get children() {
+      return childRoutes();
+    }
+  });
+};
+
+// src/Link.tsx
+var A = (props) => {
+  return <a sn-link {...props} />;
+};
+export {
+  A,
+  Navigate,
+  Outlet,
+  Route,
+  Router,
+  useLocation,
+  useNavigate,
+  useParams
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "solid-navigator",
+  "version": "0.0.1",
+  "description": "Solid Navigator is a library that is inspired by vue router and solid router.",
+  "license": "MIT",
+  "author": "SupertigerDev",
+  "contributors": [],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SupertigerDev/solid-navigator.git"
+  },
+  "homepage": "https://github.com/SupertigerDev/solid-navigator#readme",
+  "bugs": {
+    "url": "https://github.com/SupertigerDev/solid-navigator/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "exports": {
+    "solid": {
+      "development": "./dist/dev.jsx",
+      "import": "./dist/index.jsx"
+    },
+    "development": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/dev.js"
+      }
+    },
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {},
+  "peerDependencies": {
+    "solid-js": "^1.6.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.19.11",
+    "esbuild-plugin-solid": "^0.5.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-no-only-tests": "^3.1.0",
+    "jsdom": "^23.2.0",
+    "prettier": "3.2.4",
+    "solid-js": "^1.8.11",
+    "tsup": "^8.0.1",
+    "tsup-preset-solid": "^2.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-solid": "^2.8.1",
+    "vitest": "^1.2.1"
+  },
+  "keywords": [
+    "solid"
+  ],
+  "packageManager": "pnpm@8.6.0",
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=8.6.0"
+  },
+  "scripts": {
+    "dev": "vite serve dev",
+    "build": "tsup",
+    "format": "prettier --ignore-path .gitignore -w \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"dev/**/*.{js,ts,json,css,tsx,jsx}\"",
+    "lint": "concurrently pnpm:lint:*",
+    "lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{js,ts,tsx,jsx}",
+    "lint:types": "tsc --noEmit",
+    "update-deps": "pnpm up -Li"
+  }
+}