components icon indicating copy to clipboard operation
components copied to clipboard

TonicRouter seems to have issues working with hash fragments

Open keks opened this issue 2 years ago • 0 comments

I want to host my Tonic app using static file hosting, so I can't have users request paths that don't really exist (actually I am experimenting with web extensions, so it's not really hosted at all). That's why I keep my application paths inside the hash fragment of the URL. I can't get TonicRouter to match these, though.

Initially I only got a blank page (so not even the none router matched), but I managed to resolve that using the pushState-hack. but still, I am not able to get it to match the itworks-router.

Is this intended?

import Tonic from '@socketsupply/tonic';
import {TonicRouter} from '@socketsupply/components/router';

class MWE extends Tonic {
   connected () {
    window.history.pushState({},"", window.location); // HACK
    this.addEventListener('match', this.reRender);
  }
  
  render () {
    return this.html`
      <tonic-router id="itworks-router" path="/#/itworks">
        it works
      </tonic-router>
      
      <tonic-router id="notfound-router" none>
        it at least sort of works
      </tonic-router>
    `;
  }
}

Tonic.add(TonicRouter);
Tonic.add(MWE);

document.body.innerHTML = '<m-w-e id="container"></m-w-e>';

keks avatar Feb 07 '23 18:02 keks