Readme & Wiki incorrect
safaalai opened this issue · comments
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:
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)?
I've ditched it and rolled my own, there is no evidence to suggest this repo is maintained.
Are there any alternative routers can be used in Stencil application?
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.
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
fileexport 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.