Routeless, targetless, runnable routes

Now in beta HCX (HTML Compiler eXtensions) supports routeless, targetless, runnable routes. “What does that mean?”, you might ask. An example shows best:

<script type="module" src="../hcx-router.js"></script><template id=”panelOne">
  <div>This is panel one.</div>
</template><template id="panelTwo">
  <div>This is panel two.</div>
  <script>alert("You have entered panel two.")</script>
</template><a href="#panelOne">Show Panel One</a>  
<a href="#panelTwo">Show Panel Two</a><hcx-router runnable="true"></hcx-router>

Click on “Show Panel One” and “This is panel one” will show up between the router start and end tags. Clicking on “Show Panel Two” will not only replace the content it will run the script with the alert.

For the above and additional examples in this article see the code in action .

Routing can’t get much simpler than this. Just put an <hcx-router> on your page and any time the # changes, a document element with a matching id will be sought and its contents used to replace the empty space between the start and end tags of the router. And, if you tell the router to make the content runnable, any scripts will also be executed or loaded.

Of course, you can provide a target if you wish by making changes to add a targeted location and configure the router to use it:

<div>
  <div>Dashboard</div>
  <div id="dashboard"></div>
</div><hcx-router target=”#dashboard” runnable=”true”></hcx-router>

And, naturally you can also specify paths to select which router to use:

<a href="#dash1/panelOne">Show Panel One</a>  
<a href="#dash2/panelTwo">Show Panel Two</a>
<div>
  <div>Dashboard One</div>
  <div id="dashOne"></div>
</div><div>
  <div>Dashboard Two</div>
  <div id="dashTwo"></div>
</div><hcx-router path="dash1/:$to" target="#dashOne" runnable="true">
</hcx-router><hcx-router path="dash2/:$to" target="#dashTwo" runnable="true"></hcx-router>

In this case we used a special parameterized path containing :$to to specify the source of the content. The more conventional method used by Vue is also possible if a RegExp is used for the path:

<a href="#dash1/panelOne">Show Panel One</a>  
<a href="#dash2/panelTwo">Show Panel Two</a>
<div>
  <div>Dashboard One</div>
  <div id="dashOne"></div>
</div><div>
  <div>Dashboard Two</div>
  <div id="dashTwo"></div>
</div><hcx-router path="/dash1\/.*/" target="#dashOne" runnable="true" to="#panelOne">
</hcx-router><hcx-router path="/dash2\/.*/" target="#dashTwo" runnable="true" to="#panelTwo"></hcx-router>

Through the use of a less restrictive target CSS selector, it is also possible to target multiple output locations and use multiple routers at the same time!

<a href="#panelOne">Show Panel One</a>  
<a href="#panelTwo">Show Panel Two</a><div>
  <div>Dashboard One</div>
  <div class="dashboard"></div>
</div><div>
  <div>Dashboard Two</div>
  <div class="dashboard"></div>
</div><hcx-router target=".dashboard"></hcx-router>

Intrigued? Give us a clap and head over to GitHub .