@depack/router

@depack/router is The Preact Router Component For Compilation With Depack.

yarn add -E @depack/router

The original source code is from 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
• API
• Router
• Copyright

API

The package is available by importing its default function and named functions:

import Router, { Link } from '@depack/router'

Router

import Router, { Link } from '@depack/router'
import { render } from 'preact'

const Main = () => (
  <div>
    <ul>
      <li><Link href="/router/">Home</Link></li>
      <li><Link href="/about">About</Link></li>
      <li><Link href="/search/example/hello">Search</Link></li>
    </ul>
    <Router onChange={(e) => {
      if (e.current && e.current.attributes.title) {
        document.title = e.current.attributes.title
      }
    }}>
      <Home path="/router/" title="@depack/router" />
      <About path="/about" title="About" />
      <Search path="/search/:query/:optional?" title="Search" />
    </Router>
  </div>
)

const Home = () => (<div>
  <h3>Home</h3>
  Preact Router For Depack.
</div>)
const About = () => (<div>
  <h3>About</h3>
  <p><em>Preact</em> is a library for making single-page
  websites and rendering JSX components.</p>
  <p><em>Depack</em> is front-end bundler that uses Google
  Closure Compiler (as well as back-end package compiler).</p>
</div>)
const Search = ({ optional }) => (<div>
  <h3>Search</h3>
  {optional ? `You've searched for: ${optional}` : ''}
</div>)

render(<Main />, document.querySelector('#preact'))

If there is an error rendering the destination route, a 404 will be displayed.

Copyright