joicomponents/test/route/route2.html

Design patterns to build native web components

<script type="module">

  import {SlashDotsRouter} from "../../src/router/HashDotRouter.js";

  const router = new SlashDotsRouter([
    "/red:A = /orange:A",
    "/orange:A = /yellow:A",
    "/chp2 = /chp2_1/chp2_2",
    "/chp2_1 = /intro_mixin/ex_mixin_basic/ref.mix1.johnG.IvarO",
    "/chp2_2 = /mixin_global/ex_mixin_global/ref.mix1.IvarO.MaxH",
    "/black = /grey",
    "/grey = /white"
  ]);
  window.addEventListener("routechange", e => {
    const dump = document.querySelector("#dump");
    console.log(e.detail.right);
    dump.innerText = "left: " + e.detail.left.map(dot => dot.toString()).join("") + "\n";
    dump.innerText += "middle: " + e.detail.middle.map(dot => dot.toString()).join("") + "\n";
    dump.innerText += "right: " + e.detail.right.map(dot => dot.toString()).join("") + "\n";
  });
</script>
<base href="/test/route/" />

<a href="red.re">Red</a><br>
<a href="orange.or">Orange</a><br>
<a href="yellow.ye">Yellow</a><br>
<hr>
<a href="chp2">/chp2</a><br>
<a href="chp2_1/chp2_2">/chp2_1/chp2_2</a><br>
<a href="chp2_1">/chp2_1</a><br>
<a href="intro_mixin/ex_mixin_basic/ref.mix1.johnG.IvarO">/intro_mixin/ex_mixin_basic/ref.mix1.johnG.IvarO</a><br>
<hr>
<a href="black">Black</a><br>
<a href="grey">Grey</a><br>
<a href="white">White</a><br>
<hr>
<a href="blue.a.b">blue.a.b</a><br>
<hr>
<pre id="dump"></pre>

<hash-comp></hash-comp>