@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:

importRouter,{Link}from'@depack/router'

Router

importRouter,{Link}from'@depack/router'import{render}from'preact'constMain=()=>(<div><ul><li><Linkhref="/router/">Home</Link></li><li><Linkhref="/about">About</Link></li><li><Linkhref="/search/example/hello">Search</Link></li></ul><RouteronChange={(e)=>{if(e.current&&e.current.attributes.title){document.title=e.current.attributes.title}}}><Homepath="/router/"title="@depack/router"/><Aboutpath="/about"title="About"/><Searchpath="/search/:query/:optional?"title="Search"/></Router></div>)constHome=()=>(<div><h3>Home</h3>
Preact Router For Depack.
</div>)constAbout=()=>(<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>)constSearch=({ 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

	© Art Deco for Depack 2019		Tech Nation Visa Sucks