joicomponents/test/route/route1.html

Design patterns to build native web components

<script type="module">

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

  const router = new HashDotsRouter(`
    #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>

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