{"bugs":{"url":"https://github.com/solidjs/solid-app-router/issues"},"dist":{"shasum":"ce02adf843db73fa4fe3f370b1d8ed87b1bf485a","tarball":"https://registry.npmjs.org/solid-app-router/-/solid-app-router-0.2.0-beta.0.tgz","fileCount":15,"integrity":"sha512-rzfkK2mDU3jAUvXmm9JVXOh9CB+MwXckxMXY6mJkbO35A8BLqNwArD9B0I74lKVv4kC4hEf+1/DmaEXUfpz8yg==","signatures":[{"sig":"MEQCIBDCP1ZmTb5bAAyHe21EQBkKS7iN9higabmuXV/LocHzAiAetwAFB7TtkDJ2lzULKtazzXTogSOTsv4AVd+77cgpYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0Cq1CRA9TVsSAnZWagAArp8P/in0Ce7fkUZ9yJ5KYu3E\nCC5nZhmZpLcUpFzNJ6AM1u+8r4YNzDrv6dGJXjNOdkZ1Vz2c9t8plATn5Zd5\n5tEBnV/Iy9jwTwsnmMDun6wErffy7yd/SFOT/L9gPIfAa+L1uR1uL8spdBKK\nFi9SYlKvN61vKvpWMYB3o+fZcwr2g8wFZSpjCitRr5KaVqH/4e+DmENTUId7\nSg6wt1QhdZV/WOc6L1Jv5LvSLWwUoGiOlSRFmrlogBnG0lYHV9l7dQWAWll3\nTlSlehbjFtlI3CHbB8eqYaTtLZku1ePAnOtT1Agnt5c61a2/Ei1mh7KLfB3X\nlWxgc6m+0raS9vM9B5eABPLP4si2yxhmkRfp4QIziRnXlTVXRqtt/xFzaXY/\nTDAg3mnT2+iQPhzJCNCcuTX9dCkssror2Hd4PcgQc3yeUAuY+0zH0qAD23Xf\nJzHDtfh4U6pRptLJtAON2StjFYHPeR4wrEcgh46SkS6ENbcLr1a+fcvVfAhf\nQnCm1gDSq3p3A4p7+6Qd9YuDCAquVkEUYbOoGFX2/4SiJ7Rvhj7teLniGEpb\nWVgfBl6dvJ17rg9v1R6E/IV5bFzQXt+8XLQYxj7FXBHwIngHNYaW35C/Wwnq\nukN8BGARetZ0bXklttLKBXEUH4bHExlBoov754S0GQXklJHz8ppGXws95j2K\nw5mq\r\n=lA3R\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"preset":"solid-jest/preset/browser"},"main":"dist/index.js","name":"solid-app-router","type":"module","types":"dist/index.d.ts","author":{"name":"Ryan Carniato"},"readme":"# Solid App Router\n\nSolid App Router is a universal router for SolidJS that combines paradigms of React Router and Ember Router. Routes can be defined both in the JSX and as a JSON object for file-system based routing and supports Nested Routing.\n\nIt supports all Solid's SSR methods and has Solid's Transitions baked in, so use freely with Suspense, Resources, and Lazy components. Solid App Router also allows you to define a Data function that loads in parallel of the Routes to allow automatic fetch-as-you-render that removes client side request waterfalls.\n\n## Getting Started\n\n```sh\n> npm i solid-app-router\n```\n\nInstall then wrap your application with the Router component:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router } from \"solid-app-router\";\nimport App from \"./App\";\n\nrender(\n () => (\n \n \n \n ),\n document.getElementById(\"app\")\n);\n```\n\n## JSX Based\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Routes, Route, Link } from \"solid-app-router\";\n\nconst Users = lazy(() => import(\"/pages/users.js\"));\nconst User = lazy(() => import(\"/pages/users/[id].js\"));\nconst UserHome = lazy(() => import(\"/pages/users/[id]/index.js\"));\nconst UserSettings = lazy(() => import(\"/pages/users/[id]/settings.js\"));\nconst UserNotFound = lazy(() => import(\"/pages/users/[id]/[...all].js\"));\nconst Home = lazy(() => import(\"/pages/index.js\"));\nconst NotFound = lazy(() => import(\"/pages/[...all].js\"));\n\nfunction App() {\n return (\n <>\n
\n \n Home\n \n \n Users\n \n \n \n );\n}\n\nrender(\n () => (\n \n \n \n ),\n document.getElementById(\"app\")\n);\n```\n\n## Creating Links\n\nSolid App Router provides `` component to provides links in your application. By default all Routes and Links are relative to the parent that created them.\n\nSolid App Router provides a `` component that applies the `active` class when the current route matches its path. It has an `end` prop to indicate if it is the end of the path.\n\nSolid App Router also has a `` component useful for inlining redirects.\n\nThese Components all use `href` to define the path.\n\n```jsx\n<>\n Home\n About\n Other\n\n```\n\n## Router Primitives\n\nSolid App Router provides a number of primitives that read off the Router and Route context.\n\n### useParams\n\nRetrieves an object containing the route path parameters as defined in the Route.\n\n```js\nconst params = useParams();\n\n// fetch user based on the id path parameter\nconst [user] = createResource(() => params.id, fetchUser);\n```\n\n### useNavigate\n\nRetrieves method to do navigation. The method accepts a path to navigate to and an optional object with the following options:\n- resolve (*boolean*, default `true`): resolve the path against the current route\n- replace (*boolean*, default `false`): replace the history entry\n- scroll (*boolean*, default `true`): scroll to top after navigation\n- state (*any*, default `undefined`): pass custom state to `location.state`\n\n```js\nconst navigate = useNavigate();\n\nif (unauthorized) {\n navigate(\"/login\", { replace: true });\n}\n```\n\n### useLocation\n\nRetrieves reactive `location` object useful for getting things like `pathname`\n\n```js\nconst location = useLocation();\n\nconst createMemo(() => parsePath(location.pathname));\n```\n\n### useSearchParams\n\nRetrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them. The object is a proxy so you must access properties to subscribe to reactive updates. Note values will be strings and property names will retain their casing.\n\nThe setter method accepts an object whos entries will be merged into the current query string. Values `''`, `undefined` and `null` will remove the key from the resulting query string. Updates will behave just like a navigation and the setter accepts the same optional second parameter as `navigate` and auto-scrolling is disabled by default.\n\n```js\nconst [searchParams, setSearchParams] = useSearchParams();\n\nreturn
\n Page: {searchParams.page}\n \n
\n```\n\n### useIsRouting\n\nRetrieves signal that indicates whether the route is currently in a Transition. Useful for showing stale/pending state when the route resolution is Suspended during concurrent rendering.\n\n```js\nconst isRouting = useIsRouting();\n\nreturn
\n \n
\n```\n\n### useData\n\nRetrieves the return value from the data function. You can access parent data by passing a number to indicate ancestor. No argument is the route's own data, `1` is the immediate parent, `2` is the parent's parent, and so on.\n\n```js\nconst user = useData();\n\nreturn
{user().name}
;\n```\n\n### useMatch\n\n`useMatch` takes an accessor that returns the path and creates a Memo that returns match information if the current path matches the provided path. Useful for determining if a given path matches the current route.\n\n```js\nconst match = useMatch(() => props.href);\n\nreturn \n```\n\n### useRoutes\n\nUsed to define routes via a config object instead of JSX. See `Config Based` above.\n\n## Nested Routing\n\nYou can define long paths on your routes and they are handle independently. But with nested Routing we can automatically set up nested layouts. Need to share a header between pages, nest it as children. You can see examples above.\n\nHowever, while `` serve as the entry point for the navigation, for nested routes you need to indicate where the nested route should be inserted. You use the `` component to do that.\n\n```jsx\nimport { Outlet, useData } from \"solid-app-router\";\n\nfunction User() {\n const user = useData();\n return (\n <>\n
{user()?.name}
\n {/* Insert nested Route Here */}\n \n \n );\n}\n```\n\n## Data Functions\n\nData functions are designed to load in parallel to your lazy loaded routes. They get bundled with your main bundle allowing your page code to be separated and loaded on demand in parallel. You can pass in the `data` prop to your Route definition.\n\n```js\nimport { lazy } from \"solid-js\";\nimport { Route } from \"solid-app-router\";\nimport UserData from \"./pages/users/[id].data.js\";\n\nconst User = lazy(() => import(\"/pages/users/[id].js\"));\n\n// In the Route definition\n} data={UserData} />\n```\n\n```js\n// pages/users/[id].data.js\nimport { createResource } from \"solid-js\";\n\nfunction fetchUser(userId) { /* fetching logic */ }\n\nexport default function UserData({ params, location, navigate }) {\n const [user] = createResource(() => params.id, fetchUser);\n\n return user;\n}\n```\n\nData function should create reactive values and return synchronously so that they can be accessed in the case that the route loads before the data does.\n","exports":{".":{"solid":"./dist/index.jsx","default":"./dist/index.js"}},"gitHead":"c43cceffa121aca98a0866b382f73cb88f9a2818","license":"MIT","scripts":{"test":"jest && npm run test:types","build":"tsc && rollup -c","test:types":"tsc --project tsconfig.test.json","test:watch":"jest --watch","test:coverage":"jest --coverage && npm run test:types","prepublishOnly":"npm run build"},"_npmUser":{"name":"ryansolid","email":"ryansolid@gmail.com"},"homepage":"https://github.com/solidjs/solid-app-router#readme","repository":{"url":"git+https://github.com/solidjs/solid-app-router.git","type":"git"},"_npmVersion":"7.21.0","description":"Universal router for SolidJS","directories":{},"maintainers":[{"name":"ryansolid","email":"ryansolid@gmail.com"}],"sideEffects":false,"_nodeVersion":"16.8.0","contributors":[{"name":"Ryan Turnquist"}],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^27.2.5","rollup":"^2.52.1","solid-js":"^1.3.0-rc.2","solid-jest":"^0.2.0","typescript":"~4.4.3","@babel/core":"^7.15.8","@types/jest":"^27.0.2","@types/node":"^16.10.3","babel-preset-solid":"^1.3.0-rc.2","@rollup/plugin-babel":"5.3.0","rollup-plugin-terser":"^7.0.2","@babel/preset-typescript":"^7.15.0","@rollup/plugin-node-resolve":"13.0.5"},"peerDependencies":{"solid-js":"^1.3.0"},"_npmOperationalInternal":{"tmp":"tmp/solid-app-router_0.2.0-beta.0_1641032373041_0.209410891982442","host":"s3://npm-registry-packages"},"_id":"solid-app-router@0.2.0-beta.0","version":"0.2.0-beta.0"}