Skip to content

Commit 0078147

Browse files
posvaposva
committed
fix(hash): use location.pathname
Fix #261
1 parent fc7b9ec commit 0078147

File tree

4 files changed

+86
-7
lines changed

4 files changed

+86
-7
lines changed

‎__tests__/history/hash.spec.ts

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,18 @@ describe('History Hash', () => {
3737
})
3838

3939
it('should use a correct base', () => {
40+
dom.reconfigure({ url: 'https://esm.dev' })
41+
console.log(location.host, location.pathname)
4042
createWebHashHistory()
43+
// starts with a `/`
4144
expect(createWebHistory).toHaveBeenCalledWith('/#')
4245
})
4346

47+
it('does not append a # if the user provides one', () => {
48+
createWebHashHistory('/#/app')
49+
expect(createWebHistory).toHaveBeenCalledWith('/#/app')
50+
})
51+
4452
it('should be able to provide a base', () => {
4553
createWebHashHistory('/folder/')
4654
expect(createWebHistory).toHaveBeenCalledWith('/folder/#')
@@ -58,6 +66,26 @@ describe('History Hash', () => {
5866
createWebHashHistory('/bar/')
5967
expect(createWebHistory).toHaveBeenCalledWith('/bar/#')
6068
})
69+
70+
describe('url with pathname', () => {
71+
it('keeps the pathname as base', () => {
72+
dom.reconfigure({ url: 'https://esm.dev/subfolder' })
73+
createWebHashHistory()
74+
expect(createWebHistory).toHaveBeenCalledWith('/subfolder#')
75+
})
76+
77+
it('keeps the pathname without a trailing slash as base', () => {
78+
dom.reconfigure({ url: 'https://esm.dev/subfolder#/foo' })
79+
createWebHashHistory()
80+
expect(createWebHistory).toHaveBeenCalledWith('/subfolder#')
81+
})
82+
83+
it('keeps the pathname with trailing slash as base', () => {
84+
dom.reconfigure({ url: 'https://esm.dev/subfolder/#/foo' })
85+
createWebHashHistory()
86+
expect(createWebHistory).toHaveBeenCalledWith('/subfolder/#')
87+
})
88+
})
6189
})
6290

6391
describe('file://', () => {
@@ -68,9 +96,7 @@ describe('History Hash', () => {
6896
it('should use a correct base', () => {
6997
createWebHashHistory()
7098
// both, a trailing / and none work
71-
expect(createWebHistory).toHaveBeenCalledWith(
72-
expect.stringMatching(/^#\/?$/)
73-
)
99+
expect(createWebHistory).toHaveBeenCalledWith('/usr/some-file.html#')
74100
})
75101
})
76102
})

‎__tests__/history/html5.spec.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,4 +74,35 @@ describe('History HTMl5', () => {
7474
expect(createWebHistory('#/bar').base).toBe('#/bar')
7575
expect(createWebHistory('#/bar/').base).toBe('#/bar')
7676
})
77+
78+
it('prepends the host to support // urls', () => {
79+
let history = createWebHistory()
80+
let spy = jest.spyOn(window.history, 'pushState')
81+
history.push('/foo')
82+
expect(spy).toHaveBeenCalledWith(
83+
expect.anything(),
84+
expect.any(String),
85+
'https://example.com/foo'
86+
)
87+
history.push('//foo')
88+
expect(spy).toHaveBeenLastCalledWith(
89+
expect.anything(),
90+
expect.any(String),
91+
'https://example.com//foo'
92+
)
93+
spy.mockRestore()
94+
})
95+
96+
it('works with file:/// urls and a base', () => {
97+
dom.reconfigure({ url: 'file:///usr/etc/index.html' })
98+
let history = createWebHistory('/usr/etc/index.html#/')
99+
let spy = jest.spyOn(window.history, 'pushState')
100+
history.push('/foo')
101+
expect(spy).toHaveBeenCalledWith(
102+
expect.anything(),
103+
expect.any(String),
104+
'file:///usr/etc/index.html#/foo'
105+
)
106+
spy.mockRestore()
107+
})
77108
})

‎__tests__/utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function createDom(options?: ConstructorOptions) {
9494
const dom = new JSDOM(
9595
`<!DOCTYPE html><html><head></head><body></body></html>`,
9696
{
97-
url: 'https://example.org/',
97+
url: 'https://example.com/',
9898
referrer: 'https://example.com/',
9999
contentType: 'text/html',
100100
...options,

‎src/history/hash.ts

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,31 @@ import { createWebHistory } from './html5'
44
/**
55
* Creates a hash history.
66
*
7-
* @param base - optional base to provide. Defaults to `/`
7+
* @param base - optional base to provide. Defaults to `location.pathname` or
8+
* `/` if at root. If there is a `base` tag in the `head`, its value will be
9+
* **ignored**.
10+
*
11+
* @example
12+
* ```js
13+
* // at https://example.com/folder
14+
* createWebHashHistory() // gives a url of `https://example.com/folder#`
15+
* createWebHashHistory('/folder/') // gives a url of `https://example.com/folder/#`
16+
* // if the `#` is provided in the base, it won't be added by `createWebHashHistory`
17+
* createWebHashHistory('/folder/#/app/') // gives a url of `https://example.com/folder/#/app/`
18+
* // you should avoid doing this because it changes the original url and breaks copying urls
19+
* createWebHashHistory('/other-folder/') // gives a url of `https://example.com/other-folder/#`
20+
*
21+
* // at file:///usr/etc/folder/index.html
22+
* // for locations with no `host`, the base is ignored
23+
* createWebHashHistory('/iAmIgnored') // gives a url of `file:///usr/etc/folder/index.html#`
24+
* ```
825
*/
9-
export function createWebHashHistory(base: string = '/'): RouterHistory {
26+
export function createWebHashHistory(base?: string): RouterHistory {
1027
// Make sure this implementation is fine in terms of encoding, specially for IE11
11-
return createWebHistory(location.host ? base + '#' : '#')
28+
// for `file://`, directly use the pathname and ignore the base
29+
// location.pathname contains an initial `/` even at the root: `https://example.com`
30+
base = location.host ? base || location.pathname : location.pathname
31+
// allow the user to provide a `#` in the middle: `/base/#/app`
32+
if (base.indexOf('#') < 0) base += '#'
33+
return createWebHistory(base)
1234
}

0 commit comments

Comments
 (0)