Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dpck/router
The Preact Router Component For Compilation With Depack.
https://github.com/dpck/router
Last synced: about 1 month ago
JSON representation
The Preact Router Component For Compilation With Depack.
- Host: GitHub
- URL: https://github.com/dpck/router
- Owner: dpck
- License: other
- Created: 2019-02-07T09:15:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-14T14:29:27.000Z (over 5 years ago)
- Last Synced: 2024-11-24T08:32:59.818Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://artd.eco/depack
- Size: 175 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @depack/router
[](https://npmjs.org/package/@depack/router)
`@depack/router` is The Preact Router Component For Compilation With Depack.
```sh
yarn add -E @depack/router
```
The original source code is from [preact-router](https://github.com/developit/preact-router) but it was modified to be able to compile front-ends that use it with Depack using Google Closure Compiler.
**DEMO**: https://dpck.github.io/router/
> *Connect your Preact components up to that address bar.*
> `preact-router` provides a component that conditionally renders its children when the URL matches their path. It also automatically wires up elements to the router.
## Table Of Contents
- [Table Of Contents](#table-of-contents)
- [API](#api)
- [Router](#router)
- [Copyright](#copyright)
## API
The package is available by importing its default function and named functions:
```js
import Router, { Link } from '@depack/router'
```
## Router
```jsx
import Router, { Link } from '@depack/router'
import { render } from 'preact'
const Main = () => (
- Home
- About
- Search
{
if (e.current && e.current.attributes.title) {
document.title = e.current.attributes.title
}
}}>
)
const Home = () => (
Home
Preact Router For Depack.
)
const About = () => (
About
Preact is a library for making single-page
websites and rendering JSX components.
Depack is front-end bundler that uses Google
Closure Compiler (as well as back-end package compiler).
)
const Search = ({ optional }) => (
Search
{optional ? `You've searched for: ${optional}` : ''}
)
render(, document.querySelector('#preact'))
```
If there is an error rendering the destination route, a 404 will be displayed.
## Copyright
© Art Deco for Depack
2019
Tech Nation Visa Sucks
