{"id":13525525,"url":"https://github.com/prateekbh/preact-async-route","last_synced_at":"2025-04-06T04:14:55.459Z","repository":{"id":17529037,"uuid":"82140643","full_name":"prateekbh/preact-async-route","owner":"prateekbh","description":"Async route component for preact-router","archived":false,"fork":false,"pushed_at":"2022-12-06T18:53:30.000Z","size":692,"stargazers_count":138,"open_issues_count":19,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-15T07:27:21.723Z","etag":null,"topics":["code-splitting","preact","preact-router","prpl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prateekbh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-16T04:53:37.000Z","updated_at":"2024-02-16T16:07:49.000Z","dependencies_parsed_at":"2023-01-13T19:22:33.919Z","dependency_job_id":null,"html_url":"https://github.com/prateekbh/preact-async-route","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prateekbh%2Fpreact-async-route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prateekbh%2Fpreact-async-route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prateekbh%2Fpreact-async-route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prateekbh%2Fpreact-async-route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prateekbh","download_url":"https://codeload.github.com/prateekbh/preact-async-route/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430963,"owners_count":20937875,"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":["code-splitting","preact","preact-router","prpl"],"created_at":"2024-08-01T06:01:19.684Z","updated_at":"2025-04-06T04:14:55.348Z","avatar_url":"https://github.com/prateekbh.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# preact-async-route\n[![build](https://api.travis-ci.org/prateekbh/preact-async-route.svg?branch=master)](https://api.travis-ci.org/prateekbh/preact-async-route.svg?branch=master)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/preact-async-route/dist/index.min.js?compression=gzip)](https://unpkg.com/preact-async-route/dist/index.min.js)\n\n## Deprecation notice\n`preact-x` supports `Lazy` component, which can be used as shown [here](https://reactjs.org/docs/code-splitting.html#reactlazy).\nPrefer using the `Lazy` component along with `Suspense` instead of this package.\n\nThis package is still useful for preact versions \u003c 10\n\n--------------------\n\nAsync route component for [preact-router](https://github.com/developit/preact-router)\n\n`npm i -D preact-async-route`\n\npreact-async-route provides `\u003cAsyncRoute\u003e ` tag to load your components lazily.\n\n`\u003cAsyncRoute\u003e ` provides similar props to return a lazily loaded component either as a Promise resolving to the component or return the component in a callback.\n\n`\u003cAsyncRoute\u003e `  also has a loading props, to which you can pass a component to be shown while the component is being lazily loaded.\n\n## Version 2.0\nVersion 2.0 brings support for a new prop `component`\nin order to make usage of already imported components now preact-async-route will support 2 props\n\n1. `component` this will just take the JSX component itself and NOT the function\n2. for function calls `getComponent` is the prop\n\ncheck README :point_down:\n\n\n## Usage Example\n```js\n  import { h, render } from 'preact';\n  import Router, from 'preact-router';\n  import AsyncRoute from 'preact-async-route';\n  import Home from './Components/Home/Home.jsx';\n  import Terms from './Components/Terms/Terms.jsx';\n  import Loading from './Components/Loading/Loading.jsx';\n  /** @jsx h */\n\n  /**\n    arguments passed to getComponent:\n      url -- matched url\n      cb  -- in case you are not returning a promise\n      props -- props that component will recive upon being loaded\n  */\n  function getProfile(url, cb, props){\n  \treturn import('../component/Profile/Profile.jsx').then(module =\u003e module.default);\n  }\n\n  const Main = () =\u003e (\n  \t\u003cRouter\u003e\n  \t\t\u003cHome path=\"/\" /\u003e\n  \t\t\u003cTerms path=\"/terms\" /\u003e\n  \t\t\u003cAsyncRoute path=\"/profile/:userid\" component={Home} /\u003e\n  \t\t\u003cAsyncRoute path=\"/friends/:userid\" getComponent={getProfile}\n            loading={()=\u003e{return \u003cLoading/\u003e}} /\u003e\n  \t\u003c/Router\u003e\n  );\n  ```\n\n### License\n\n[MIT]\n\n[MIT]: http://choosealicense.com/licenses/mit/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprateekbh%2Fpreact-async-route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprateekbh%2Fpreact-async-route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprateekbh%2Fpreact-async-route/lists"}