@aaronshaf/html-router - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

		@@ -6,3 +6,3 @@ import pathToRegexp from "./vendor/path-to-regexp/index.js";

		class Switch extends HTMLElement {
		export class Switch extends HTMLElement {
		constructor() {
		@@ -18,2 +18,5 @@ super();
		updateMatch(pathname) {
		if (pathname === "") {
		pathname = "/";
		}
		let matchFound = false;
		@@ -38,27 +41,1 @@
		}

		export class HashSwitch extends Switch {
		constructor() {
		super();
		this.handleHashChange = this.handleHashChange.bind(this);
		this.handleHashChange();
		}

		handleHashChange() {
		const path = location.hash.slice(1);
		this.updateMatch(path);
		}

		connectedCallback() {
		window.addEventListener("hashchange", this.handleHashChange);
		}

		disconnectedCallback() {
		window.removeEventListener("hashchange", this.handleHashChange);
		}
		}

		if (!window.customElements.get("hash-switch")) {
		window.HashSwitch = HashSwitch;
		window.customElements.define("hash-switch", HashSwitch);
		}

package.json

README.md

		@@ -5,7 +5,17 @@ Drop-in router.

		### Hash router

		```html
		<script src="https://unpkg.com/@aaronshaf/html-router/index.js" type="module"></script>
		<script src="https://unpkg.com/@aaronshaf/html-router@0/hash.js" type="module"></script>
		```

		```html
		<ul>
		<li><a href="#/foo">Foo</a></li>
		<li><a href="#/bar">Bar</a></li>
		<li><a href="#/baz">Baz</a></li>
		</ul>
		```

		```html
		<hash-switch>
		@@ -19,13 +29,56 @@ <div data-path="/foo">
		</div>

		<div data-path="(.*)">
		<h1>Not found</h1>
		</div>
		</hash-switch>
		```

		### Pathname router

		```html
		<script src="https://unpkg.com/@aaronshaf/html-router@0/pathname.js" type="module"></script>
		```

		```html
		<ul>
		<li><a href="#/foo">Foo</a></li>
		<li><a href="#/bar">Bar</a></li>
		<li><a href="#/baz">Baz</a></li>
		<li>
		<pushstate-link><a href="/foo">Foo</a></pushstate-link>
		</li>
		<li>
		<pushstate-link><a href="/bar">Bar</a></pushstate-link>
		</li>
		<li>
		<pushstate-link><a href="/baz">Baz</a></pushstate-link>
		</li>
		</ul>
		```

		```html
		<pathname-switch>
		<div data-path="/foo">
		<h1>Foo</h1>
		</div>

		<div data-path="/bar">
		<h1>Bar</h1>
		</div>

		<div data-path="(.*)">
		<h1>Not found</h1>
		</div>
		</pathname-switch>
		```

		## Prevent flash of undefined content

		```html
		<style>
		hash-switch:not(:defined),
		pathname-switch:not(:defined) {
		visibility: hidden;
		}
		</style>
		```

		## Web components polyfill
		@@ -32,0 +85,0 @@

New alerts