@aaronshaf/html-router - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -26,4 +26,3 @@ import pathToRegexp from "./vendor/path-to-regexp/index.js";
       const path = node.dataset.path;
-      const keys = [];
-      const re = pathToRegexp(path, keys);
+      const re = pathToRegexp(path);
       const result = re.exec(pathname);
@@ -40,1 +39,28 @@
 }
+
+export class Route extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    const node = document.createElement("slot");
+    node.setAttribute("name", "unmatched");
+    shadowRoot.appendChild(node);
+    this.updateMatch = this.updateMatch.bind(this);
+  }
+
+  updateMatch(pathname) {
+    if (pathname === "") {
+      pathname = "/";
+    }
+
+    const path = this.getAttribute("path");
+    const re = pathToRegexp(path);
+    const result = re.exec(pathname);
+
+    if (result) {
+      this.shadowRoot.firstChild.removeAttribute("name");
+    } else {
+      this.shadowRoot.firstChild.setAttribute("name", "unmatched");
+    }
+  }
+}

package.json

@@ -8,3 +8,3 @@ {
   ],
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "index.js",
@@ -11,0 +11,0 @@ "repository": {

README.md

@@ -7,4 +7,2 @@ Drop-in router.
 
-Renders first match.
-
 ```html
@@ -14,2 +12,4 @@ <script src="https://unpkg.com/@aaronshaf/html-router@0/hash.js" type="module"></script>
 
+#### Render first match ([example](https://aaronshaf.github.io/html-router/examples/hash-switch.html))
+
 ```html
@@ -39,10 +39,34 @@ <ul>
 
-### Pathname router
+#### Standalone routes ([example](https://aaronshaf.github.io/html-router/examples/hash-route.html))
 
-Renders first match.
+```html
+<ul>
+  <li><a href="#/">Home</a></li>
+  <li><a href="#/foo">Foo</a></li>
+  <li><a href="#/foo/bar">Foo and Bar</a></li>
+</ul>
+```
 
 ```html
+<hash-route path="/">
+  <h2>Home</h2>
+</hash-route>
+
+<hash-route path="/foo(.*)">
+  <h2>Foo</h2>
+</hash-route>
+
+<hash-route path="/foo/bar">
+  <h2>Bar</h2>
+</hash-route>
+```
+
+### Pathname router
+
+```html
 <script src="https://unpkg.com/@aaronshaf/html-router@0/pathname.js" type="module"></script>
 ```
 
+#### Render first match ([example](https://aaronshaf.github.io/html-router/examples/pathname-switch.html))
+
 ```html
@@ -78,2 +102,25 @@ <ul>
 
+#### Standalone routes ([example](https://aaronshaf.github.io/html-router/examples/pathname-route.html))
+
+```html
+<ul>
+  <li>
+    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
+  </li>
+  <li>
+    <pushstate-link><a href="/foo/bar">Foo & Bar</a></pushstate-link>
+  </li>
+</ul>
+```
+
+```html
+<pathname-route path="/foo(.*)">
+  <h2>Foo</h2>
+</pathname-route>
+
+<pathname-route path="/foo/bar">
+  <h2>Bar</h2>
+</pathname-route>
+```
+
 ## Prevent flash of undefined content
@@ -93,3 +140,3 @@
 ```html
-<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.4/webcomponents-loader.js"></script>
+<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15671

increased by12.02%

Lines of code

404

increased by5.76%

Number of lines in readme file

138

increased by51.65%

No dependency changes