{"id":13566940,"url":"https://github.com/hazae41/chemin","last_synced_at":"2025-04-19T21:37:38.268Z","repository":{"id":249547494,"uuid":"831277461","full_name":"hazae41/chemin","owner":"hazae41","description":"Create infinite virtual subpaths for your React webapp","archived":false,"fork":false,"pushed_at":"2024-12-07T22:55:43.000Z","size":118,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T13:51:51.917Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hazae41.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["hazae41"],"patreon":"hazae41"}},"created_at":"2024-07-20T05:40:53.000Z","updated_at":"2024-12-07T22:55:46.000Z","dependencies_parsed_at":"2024-08-13T19:30:06.640Z","dependency_job_id":"4ed70766-80ab-48a0-898c-17e1b6a52092","html_url":"https://github.com/hazae41/chemin","commit_stats":null,"previous_names":["hazae41/chemin"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazae41%2Fchemin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazae41%2Fchemin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazae41%2Fchemin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hazae41%2Fchemin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hazae41","download_url":"https://codeload.github.com/hazae41/chemin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249811514,"owners_count":21328814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:02:20.015Z","updated_at":"2025-04-19T21:37:38.237Z","avatar_url":"https://github.com/hazae41.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hazae41","https://patreon.com/hazae41"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Chemin\n\nCreate infinite virtual subpaths for your React webapp\n\n```bash\nnpm i @hazae41/chemin\n```\n\n[**Node Package 📦**](https://www.npmjs.com/package/@hazae41/chemin)\n\n## Features\n\n### Current features\n- 100% TypeScript and ESM\n- No external dependencies\n- Compatible with your framework\n- Uses only web standards\n- Infinite virtual subpaths\n- Element coordinates to URL\n- Search params to React state\n\n## What?\n\nThis library allows you to create infinite virtual hash-based and search-based subpaths\n\ne.g. `https://example.com/chat/#/settings/user?left=/tree\u0026right=/page`\n\nAll the paths in this URL are easily routed and modified with React components\n\n```\nhttps://example.com/chat ┐\n                         └ # = /settings/user ┐\n                                              ├ left = /tree\n                                              └ right = /page\n```\n\nThis allows creating dialogs, subdialogs, things on left and right, and many more\n\n## Usage\n\n### Hash-based path\n\nYou can use `HashPathProvider` to provide a hash-based path for your app\n\n```tsx\nimport { HashPathProvider } from \"@hazae41/chemin\"\n\nexport function App() {\n  const [client, setClient] = useState(false)\n\n  useEffect(() =\u003e {\n    setClient(true)\n  }, [])\n\n  if (!client)\n    return null\n\n  return \u003cHashPathProvider\u003e\n    \u003cRouter /\u003e\n  \u003c/HashPathProvider\u003e\n}\n```\n\ne.g. `https://example.com/app/#/this/is/the/pathname`\n\n```tsx\nconsole.log(usePathContext().unwrap().url.pathname)\n```\n\nThis will display `/this/is/the/pathname`\n\n### Root-based path\n\nYou can also provide root-based path for your app\n\n#### Use Next.js router\n\n```tsx\nimport { useRouter } from \"next/router\"\n\nexport function NextPathProvider(props: { children?: ReactNode }) {\n  const router = useRouter()\n  const { children } = props\n\n  const [raw, setRaw] = useState\u003cstring\u003e()\n\n  useEffect(() =\u003e {\n    const onRouteChangeComplete = () =\u003e setRaw(location.href)\n\n    router.events.on(\"routeChangeComplete\", onRouteChangeComplete)\n    return () =\u003e router.events.off(\"routeChangeComplete\", onRouteChangeComplete)\n  }, [])\n\n  useEffect(() =\u003e {\n    const onHashChangeComplete = () =\u003e setRaw(location.href)\n\n    router.events.on(\"hashChangeComplete\", onHashChangeComplete)\n    return () =\u003e router.events.off(\"hashChangeComplete\", onHashChangeComplete)\n  }, [])\n\n  const get = useCallback(() =\u003e {\n    return new URL(location.href)\n  }, [raw])\n\n  const url = useMemo(() =\u003e {\n    return get()\n  }, [get])\n\n  const go = useCallback((hrefOrUrl: string | URL) =\u003e {\n    return new URL(hrefOrUrl, location.href)\n  }, [])\n\n  const handle = useMemo(() =\u003e {\n    return { url, get, go } satisfies PathHandle\n  }, [url, get, go])\n\n  return \u003cPathContext.Provider value={handle}\u003e\n    {children}\n  \u003c/PathContext.Provider\u003e\n}\n```\n\n```tsx\nexport function App() {\n  const [client, setClient] = useState(false)\n\n  useEffect(() =\u003e {\n    setClient(true)\n  }, [])\n\n  if (!client)\n    return null\n\n  return \u003cNextPathProvider\u003e\n    \u003cRouter /\u003e\n  \u003c/NextPathProvider\u003e\n}\n```\n\n#### Use Navigation API\n\nThis uses the modern [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) that only works on some browsers for now \n\n```tsx\nimport { RootPathProvider } from \"@hazae41/chemin\"\n\nexport function App() {\n  const [client, setClient] = useState(false)\n\n  useEffect(() =\u003e {\n    setClient(true)\n  }, [])\n\n  if (!client)\n    return null\n\n  return \u003cRootPathProvider\u003e\n    \u003cRouter /\u003e\n  \u003c/RootPathProvider\u003e\n}\n```\n\ne.g. `https://example.com/this/is/the/pathname`\n\n```tsx\nconsole.log(usePathContext().unwrap().url.pathname)\n```\n\nThis will display `/this/is/the/pathname`\n\nYou may need to disable client-side navigation from your framework\n\n```tsx\ndeclare const navigation: Nullable\u003cany\u003e\n\nexport default function App({ Component, pageProps, router }: AppProps) {\n  useEffect(() =\u003e {\n    /**\n     * Disable Next.js client-side navigation\n     */\n    removeEventListener(\"popstate\", router.onPopState)\n  }, [router])\n\n  useEffect(() =\u003e {\n    /**\n     * Enable modern client-side navigation\n     */\n    navigation?.addEventListener(\"navigate\", (event: any) =\u003e event.intercept())\n  }, [])\n\n  return \u003cComponent {...pageProps} /\u003e\n}\n```\n\nAnd rewrite all URLs to a common one\n\n```tsx\nrewrites() {\n  return [\n    {\n      source: \"/:path*\",\n      destination: \"/\",\n    },\n  ]\n}\n```\n\n### Simple router\n\nYou can route things with `usePathContext()`\n\n```tsx\nimport { usePathContext } from \"@hazae41/chemin\"\n\nfunction Router() {\n  const path = usePathContext().unwrap()\n\n  if (path.url.pathname === \"/home\")\n    return \u003cHomePage /\u003e\n\n  return \u003cNotFoundPage /\u003e\n}\n```\n\n### Pattern router\n\nYou can route things with pattern-matching via regexes\n\n```tsx\nimport { usePathContext } from \"@hazae41/chemin\"\n\nfunction Router() {\n  const path = usePathContext().unwrap()\n\n  let matches: RegExpMatchArray | null\n\n  if ((matches = path.url.pathname.match(/^\\/$/)))\n    return \u003cLandingPage /\u003e\n\n  if (matches = path.url.pathname.match(/^\\/home(\\/)?$/))\n    return \u003cHomePage /\u003e\n\n  if (matches = path.url.pathname.match(/^\\/home\\/settings(\\/)?$/))\n    return \u003cHomeSettingsPage /\u003e\n\n  if (matches = path.url.pathname.match(/^\\/user\\/([^\\/]+)(\\/)?$/))\n    return \u003cUserPage uuid={matches[1]} /\u003e\n\n  return \u003cNotFoundPage /\u003e\n}\n```\n\n### Inline router\n\nYou can also route things inside a component\n\n```tsx\nimport { usePathContext } from \"@hazae41/chemin\"\n\nfunction FunPage() {\n  const path = usePathContext().unwrap()\n\n  return \u003c\u003e\n    {path.url.pathname === \"/help\" \u0026\u0026\n      \u003cHelpDialog /\u003e}\n    {path.url.pathname === \"/send\" \u0026\u0026\n      \u003cSendDialog /\u003e}\n    \u003cdiv\u003e\n      Have fun!\n    \u003c/div\u003e\n  \u003c/\u003e\n}\n```\n\n### Navigation\n\nYou can use anchors and buttons to declaratively and imperatively navigate\n\n```tsx\nimport { usePathContext } from \"@hazae41/chemin\"\n\nfunction LandingPage() {\n  const path = usePathContext().unwrap()\n\n  const onHelpClick = useCallback(() =\u003e {\n    location.replace(path.go(\"/help\"))\n  }, [path])\n\n  return \u003c\u003e\n    \u003cdiv\u003e\n      Welcome!\n    \u003c/div\u003e\n    \u003ca href={path.go(\"/home\").href}\u003e\n      Home\n    \u003c/a\u003e\n    \u003cbutton onClick={onHelpClick}\u003e\n      Help\n    \u003c/button\u003e\n  \u003c/\u003e\n}\n```\n\n### Hash-based subpath\n\nYou can create hash-based subroutes\n\ne.g. `https://example.com/home/#/secret`\n\n```tsx\nimport { usePathContext, useHashSubpath, HashSubpathProvider } from \"@hazae41/chemin\"\n\nfunction HomePageSubrouter() {\n  const path = usePathContext().unwrap()\n\n  if (path.url.pathname === \"/secret\")\n    return \u003cSecretDialog /\u003e\n\n  return null\n}\n\nfunction HomePage() {\n  const path = usePathContext().unwrap()\n  const hash = useHashSubpath(path)\n\n  const onSecretButtonClick = useCallback(() =\u003e {\n    location.replace(hash.go(\"/secret\"))\n  }, [hash])\n\n  return \u003c\u003e\n    \u003cHashSubpathProvider\u003e\n      \u003cHomePageSubrouter /\u003e\n    \u003c/HashSubpathProvider\u003e\n    \u003cdiv\u003e\n      Hello world!\n    \u003c/div\u003e\n    \u003ca href={hash.go(\"/secret\").href}\u003e\n      Secret anchor\n    \u003c/a\u003e\n    \u003cbutton onClick={onSecretButtonClick}\u003e\n      Secret button\n    \u003c/button\u003e\n  \u003c/\u003e\n}\n```\n\n### Search-based subpath\n\nYou can create search-based subroutes\n\ne.g. `https://example.com/home?left=/football\u0026right=/baseball`\n\n```tsx\nimport { usePathContext, useSearchSubpath, SearchSubpathProvider } from \"@hazae41/chemin\"\n\nfunction PanelRouter() {\n  const path = usePathContext().unwrap()\n\n  if (path.url.pathname === \"/football\")\n    return \u003cFootballPanel /\u003e\n\n  if (path.url.pathname === \"/baseball\")\n    return \u003cBaseballPanel /\u003e\n\n  return \u003cEmptyPanel /\u003e\n}\n\nfunction HomePage() {\n  const path = usePathContext().unwrap()\n\n  const left = useSearchSubpath(path, \"left\")\n  const right = useSearchSubpath(path, \"right\")\n\n  return \u003c\u003e\n    \u003cdiv\u003e\n      Hello world!\n    \u003c/div\u003e\n    \u003ca href={left.go(\"/football\").href}\u003e\n      Show football on left\n    \u003c/a\u003e\n    \u003ca href={right.go(\"/baseball\").href}\u003e\n      Show baseball on right\n    \u003c/a\u003e\n    \u003cdiv className=\"flex\"\u003e\n      \u003cSearchSubpathProvider key=\"left\"\u003e\n        \u003cPanelRouter /\u003e\n      \u003c/SearchSubpathProvider\u003e\n      \u003cSearchSubpathProvider key=\"right\"\u003e\n        \u003cPanelRouter /\u003e\n      \u003c/SearchSubpathProvider\u003e\n    \u003c/div\u003e\n  \u003c/\u003e\n}\n```\n\n### Search-based value\n\nYou can also create search-based non-path values\n\n```tsx\nimport { usePathContext, useSearchState } from \"@hazae41/chemin\"\n\nfunction Page() {\n  const path = usePathContext().unwrap()\n\n  const user = useSearchValue(path, \"user\")\n\n  if (user.value === \"root\")\n    return \u003c\u003eHello root!\u003c/\u003e\n\n  return \u003ca href={user.set(\"root\").href}\u003e\n    Login as root\n  \u003c/a\u003e\n}\n```\n\n### Search-based state\n\nYou can even create search-based non-path React state\n\n```tsx\nimport { usePathContext, useSearchState } from \"@hazae41/chemin\"\n\nfunction Page() {\n  const path = usePathContext().unwrap()\n\n  const [counter, setCounter] = useSearchState(path, \"counter\")\n\n  const onClick = useCallback(() =\u003e {\n    setCounter(previous =\u003e String(Number(previous) + 1))\n  }, [])\n\n  return \u003cbutton onClick={onClick}\u003e\n    Add\n  \u003c/button\u003e\n}\n```\n\n### Coords\n\nYou can use `useCoords(path, url)` with an HTML element to pass the element's X-Y coordinates to the URL\n\n```tsx\nfunction Page() {\n  const path = usePathContext().unwrap()\n  const hash = useHashSubpath(path)\n\n  const settings = useCoords(hash, \"/settings\")\n\n  return \u003c\u003e\n    \u003cHashSubpathProvider\u003e\n      {hash.url.pathname === \"/settings\" \u0026\u0026\n        \u003cDialog\u003e\n          Settings\n        \u003c/Dialog\u003e}\n    \u003c/HashSubpathProvider\u003e\n    \u003ca className=\"anchor\"\n      href={settings.href}\n      onClick={settings.onClick}\n      onKeyDown={settings.onKeyDown}\u003e\n      Open settings\n    \u003c/a\u003e\n  \u003c/\u003e\n}\n```\n\nThen you can consume those coordinates to add fancy animations and positioning\n\n```tsx\nfunction Dialog(props: ChildrenProps) {\n  const { children } = props\n\n  const path = usePathContext().unwrap()\n  \n  const x = path.url.searchParams.get(\"x\") || 0\n  const y = path.url.searchParams.get(\"x\") || 0\n\n  return \u003cdiv style={{ \"--x\": `${x}px`, \"--y\": `${y}px` }}\u003e\n    \u003cdiv className=\"dialog\"\u003e\n      {children}\n    \u003c/div\u003e\n  \u003c/div\u003e\n}\n```\n\nHint: `x` is `element.clientX` and `y` is `element.clientY`\n\nYou can also navigate on right-click using `onContextMenu`\n\n```tsx\nfunction Page() {\n  const path = usePathContext().unwrap()\n  const hash = useHashSubpath(path)\n\n  const menu = useCoords(hash, \"/menu\")\n\n  return \u003c\u003e\n    \u003cHashSubpathProvider\u003e\n      {hash.url.pathname === \"/menu\" \u0026\u0026\n        \u003cMenu\u003e\n          \u003cbutton\u003eShare\u003c/button\u003e\n        \u003c/Menu\u003e}\n    \u003c/HashSubpathProvider\u003e\n    \u003cdiv className=\"card\"\n      onContextMenu={menu.onContextMenu}\u003e\n      Right-click me\n    \u003c/div\u003e\n  \u003c/\u003e\n}\n```\n\n### Closeful\n\nAll providers of `PathContext` are also providers of [`CloseContext`](https://github.com/hazae41/react-close-context)\n\nYou can use the provided `CloseContext` to go back to the root of the current path\n\ne.g. `https://example.com/home/#/aaa/bbb/ccc` -\u003e `https://example.com/home`\n\ne.g. `https://example.com/home/#/aaa/#/bbb/#/ccc` -\u003e `https://example.com/home/#/aaa/#/bbb`\n\nYou can consume `CloseContext` in any component with a `close()` feature\n\n```tsx\nimport { useCloseContext } from \"@hazae41/chemin\"\n\nfunction Dialog(props: ChildrenProps) {\n  const { children } = props\n\n  const close = useCloseContext().unwrap()\n\n  const onClose = useCallback(() =\u003e {\n    close()\n  }, [close])\n  \n  return \u003cdiv\u003e\n    \u003cbutton onClick={onClose}\u003e\n      Close\n    \u003c/button\u003e\n    \u003cdiv\u003e\n      {children}\n    \u003c/div\u003e\n  \u003c/div\u003e\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhazae41%2Fchemin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhazae41%2Fchemin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhazae41%2Fchemin/lists"}