Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stencil-router fail to handle absolute root url #112

Open
ptrot001 opened this issue May 28, 2020 · 0 comments
Open

stencil-router fail to handle absolute root url #112

ptrot001 opened this issue May 28, 2020 · 0 comments

Comments

@ptrot001
Copy link

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): 1.12.2

-- @stencil/core@1.12.2
-- @stencil/router@1.0.1

I'm submitting a ...
[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:
I have a use case where I have a baseURI on a different domain than the origin of the page. It requires me to use absolutes urls with the stencil router to make everything work. I've tried many things, debug all the code, and finally I think I could make it work by specifying an absolute root on the router, for example root="https://foo.com/path_to_app/".

Having read all the stencil-router code, this should work, but I found that the following utility function breaks the logic and makes my usecase fail :

File : location-utils.ts :

const isAbsolute = (pathname: string) => {
  return pathname.charAt(0) === '/';
}

Expected behavior:
I would expect to be able to use the stencil-router with absolutes urls in a context where the baseURI is different than the location.origin.

I would expect the function isAbsolute to return true if it receives an absolute url like "https://foo.com/path_to_app/home".

I tried to fork the repo and fix the function isAbsolute like this and it worked :

const isAbsolute = (pathname: string) => {
  return pathname.charAt(0) !== '/';
}

But, since there is no unit test I can't be sure I'm not causing problems elsewhere...

Also, when I forked the repo it didn't build sucessfully. I'm getting this error :
[ ERROR ] TypeScript: ./....\packages\router\src\utils\createBrowserHistory.ts:67:5
Type 'LocationSegments | {}' is not assignable to type
'LocationSegments'. Type '{}' is missing the following properties
from type 'LocationSegments': pathname, query, key

 L66:  const getDOMLocation = (historyState: LocationSegments) => {
 L67:    historyState = historyState || {};
 L68:    const { key, state } = historyState;

Again, I'm lacking expertise on this code to understand why it's doing this.

For these reasons, I would rather like somebody to help me on this problem. It seems easy to fix though.

Related code:

  render() {
    return (          
      <stencil-router root={this.getRoot()}>
        <stencil-route-switch scrollTopOffset={0}>
          <stencil-route url='/home' component='app-home' />
          <stencil-route url='/detail' component='app-detail' />
          <stencil-route component='app-not-found'/>
        </stencil-route-switch>
      </stencil-router>
    );
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant