Readme & Wiki incorrect

[safaalai]

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/core@2.13.0

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

None of the imports or the way the code is described to work on the router actually work in practice. In addition, there is no backward compatibility despite the wiki showing that the functions exist.

Expected behavior:

Should work as shown on readme. Wiki should show what is actually available.
Better yet: be backward compatible. Why strip out the old functions?

Steps to reproduce:

npm init stencil
... complete prompts to create simple standalone stencil app
npm install
npm start ==> everything works
npm uninstall @stencil/router
npm install @stencil-community/router --save-dev
npm start ==> things break
.. try to do what the readme suggests:
... cannot import createRouter or Route

Related code:

insert any relevant code here

Other information:

[minecrawler]

Is this router dead? I just tried to create a stencil application, and the template just leads to bugs and the code doesn't reflect how this router should work and I'm very confused. Can one even create applications with Stencil right now (using this router)?

[gregorypratt]

I've ditched it and rolled my own, there is no evidence to suggest this repo is maintained.

[Blackmegg1]

Are there any alternative routers can be used in Stencil application?

[gregorypratt]

In my app-root.tsx file

@State() path: string = location.pathname;

componentWillLoad() {
  addEventListener('locationChange', () => (this.path = location.pathname));
  addEventListener('popstate', () => (this.path = location.pathname));
}

render() {
  if (this.path === '/') return <home-page />;
  if (this.path === '/login') return <login-page />;
  return <page-not-found />;
}

In a utils.ts file

export function navigate(path: string) {
  history.pushState({}, '', path);
  dispatchEvent(new Event('locationChange'));
}

In components that need to query location

if (location.pathname.includes('login')) { ... }

And for things like URL params I just use regex matching where needed.

It all seems to work quite well.

[Blackmegg1]

In my app-root.tsx file

@State() path: string = location.pathname;

componentWillLoad() {
  addEventListener('locationChange', () => (this.path = location.pathname));
  addEventListener('popstate', () => (this.path = location.pathname));
}

render() {
  if (this.path === '/') return <home-page />;
  if (this.path === '/login') return <login-page />;
  return <page-not-found />;
}

In a utils.ts file

export function navigate(path: string) {
  history.pushState({}, '', path);
  dispatchEvent(new Event('locationChange'));
}

In components that need to query location

if (location.pathname.includes('login')) { ... }

And for things like URL params I just use regex matching where needed.

It all seems to work quite well.

Thanks! It was very helpful.