# porpoise-router

> An powerful framework-agnostic routing solution.

Latest version **1.0.1** (published 2020-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install porpoise-router
pnpm add porpoise-router
yarn add porpoise-router
bun add porpoise-router
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-08-19 |
| First published | 2020-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | raghav-misra |
| Maintainers | raghavm |

## Links

- npm: https://www.npmjs.com/package/porpoise-router
- Repository: https://github.com/porpoise/porpoise-router
- Homepage: https://github.com/porpoise/porpoise-router#readme
- Issues: https://github.com/porpoise/porpoise-router/issues
- npm.io page: https://npm.io/package/porpoise-router

## Recent versions

- 1.0.1 (latest) — 2020-08-19
- 1.0.0 — 2020-08-19

## README

# `porpoise-router`

A framework-agnostic, standalone router, designed for use with Web Components

## Initialize JS:
```js
/* Initialize the router */
import { createRouter } from "porpoise-router";

const router = createRouter("root", {
    // path "/" renders 
    // <index-view></index-view>
    "/": "index-view", 

    // path "/about" renders 
    // <about-view></about-view>
    "/about": "about-view", 

    // path "/profile/:userId" renders 
    // <profile-view></profile-view>
    // "userId" access via (router.current.params.userId)
    "/profile/:userId": "profile-view",
});
```

## Initialize HTML:
```html
<p-router name="root"></p-router>
```

## Porpoise Integration (Optional): 
```js
import * as Porpoise from "porpoise";

// Allow access to the router:
Porpoise.globalize("router", () => router);

// Access the router in porpoise elements via this.$globals.router:
Porpoise.construct({
    /* your component... */
    events: {
        click() {
            this.$globals.router.push("/about");
        }
    }
})

---
_Source: https://npm.io/package/porpoise-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._