Merge branch 'resolve-route' into route-option

e2e/docs/.vuepress/config.ts

@@ -3,6 +3,7 @@ import { viteBundler } from '@vuepress/bundler-vite'
 import { webpackBundler } from '@vuepress/bundler-webpack'
 import { defineUserConfig } from 'vuepress'
 import { path } from 'vuepress/utils'
+import { fooPlugin } from './plugins/foo/fooPlugin.js'
 import { e2eTheme } from './theme/node/e2eTheme.js'
 
 const E2E_BASE = (process.env.E2E_BASE ?? '/') as '/' | `/${string}/`
@@ -80,4 +81,6 @@ export default defineUserConfig({
       }
     }
   },
+
+  plugins: [fooPlugin],
 })

e2e/docs/.vuepress/plugins/foo/fooPlugin.ts

@@ -0,0 +1,11 @@
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export const fooPlugin = {
+  name: 'test-plugin',
+  clientConfigFile: path.resolve(
+    __dirname,
+    './nonDefaultExportClientConfig.js',
+  ),
+}

e2e/docs/.vuepress/plugins/foo/nonDefaultExportClientConfig.js

@@ -0,0 +1,2 @@
+// test non-default-export clientConfig
+import './test.css'

e2e/docs/.vuepress/plugins/foo/test.css

@@ -0,0 +1,3 @@
+#non-default-export {
+  font-size: 123px;
+}

e2e/docs/.vuepress/theme/client/layouts/NotFound.vue

@@ -1,3 +1,4 @@
 <template>
   <div class="e2e-theme-not-found">404 Not Found</div>
+  <div class="e2e-theme-not-found-content"><Content /></div>
 </template>

e2e/docs/404.md

@@ -2,3 +2,5 @@
 routeMeta:
   foo: bar
 ---
+
+## NotFound H2

e2e/docs/README.md

@@ -1 +1,3 @@
 foo
+
+## Home H2

e2e/docs/client-config/non-default-export.md

@@ -0,0 +1 @@
+# non-default-export

e2e/docs/router/navigate-by-link.md

@@ -0,0 +1,20 @@
+## Markdown Links with html
+
+- [Home with query](/?home=true)
+- [Home with query and hash](/?home=true#home)
+- [404 with hash](/404.html#404)
+- [404 with hash and query](/404.html#404?notFound=true)
+
+## Markdown Links with md
+
+- [Home with query](/README.md?home=true)
+- [Home with query and hash](/README.md?home=true#home)
+- [404 with hash](/404.md#404)
+- [404 with hash and query](/404.md#404?notFound=true)
+
+## HTML Links
+
+<a href="/?home=true" class="home-with-query">Home</a>
+<a href="/?home=true#home" class="home-with-query-and-hash">Home</a>
+<a href="/404.html#404" class="not-found-with-hash">404</a>
+<a href="/404.html#404?notFound=true" class="not-found-with-hash-and-query">404</a>

e2e/docs/router/navigate-by-router.md

@@ -0,0 +1,26 @@
+<button id="home-with-query" @click="goHomeWithQuery">Home</button>
+<button id="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
+<button id="not-found-with-hash" @click="go404WithHash">404</button>
+<button id="not-found-with-hash-and-query" @click="go404WithHashAndQuery">404</button>
+
+<script setup lang="ts">
+import { useRouter } from 'vuepress/client';
+
+const router = useRouter();
+
+const goHomeWithQuery = () => {
+  router.push('/?home=true');
+}
+
+const goHomeWithQueryAndHash = () => {
+  router.push('/?home=true#home');
+}
+
+const go404WithHash = () => {
+  router.push('/404.html#404');
+}
+
+const go404WithHashAndQuery = () => {
+  router.push('/404.html#404?notFound=true');
+}
+</script>

e2e/tests/client-config/non-default-export.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+test('should apply styles correctly if the client config file does not have default export', async ({
+  page,
+}) => {
+  await page.goto('client-config/non-default-export.html')
+  await expect(page.locator('#non-default-export')).toHaveCSS(
+    'font-size',
+    '123px',
+  )
+})

e2e/tests/router/navigate-by-link.spec.ts

@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test'
+import { BASE } from '../../utils/env'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('router/navigate-by-link.html')
+})
+
+test.describe('should preserve query', () => {
+  test('markdown links with html suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-html + ul > li > a').nth(0).click()
+    await expect(page).toHaveURL(`${BASE}?home=true`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('markdown links with md suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-md + ul > li > a').nth(0).click()
+    await expect(page).toHaveURL(`${BASE}?home=true`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('html links', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(0).click()
+    await expect(page).toHaveURL(`${BASE}?home=true`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+})
+
+test.describe('should preserve query and hash', () => {
+  test('markdown links with html suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-html + ul > li > a').nth(1).click()
+    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('markdown links with md suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-md + ul > li > a').nth(1).click()
+    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('html links', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(1).click()
+    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+})
+
+test.describe('should preserve hash', () => {
+  test('markdown links with html suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-html + ul > li > a').nth(2).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+
+  test('markdown links with md suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-md + ul > li > a').nth(2).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+
+  test('html links', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(2).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+})
+
+test.describe('should preserve hash and query', () => {
+  test('markdown links with html suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-html + ul > li > a').nth(3).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+
+  test('markdown links with md suffix', async ({ page }) => {
+    await page.locator('#markdown-links-with-md + ul > li > a').nth(3).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+
+  test('html links', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(3).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+})

e2e/tests/router/navigate-by-router.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+import { BASE } from '../../utils/env'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('router/navigate-by-router.html')
+})
+
+test('should preserve query', async ({ page }) => {
+  await page.locator('#home-with-query').click()
+  await expect(page).toHaveURL(`${BASE}?home=true`)
+  await expect(page.locator('#home-h2')).toHaveText('Home H2')
+})
+
+test('should preserve query and hash', async ({ page }) => {
+  await page.locator('#home-with-query-and-hash').click()
+  await expect(page).toHaveURL(`${BASE}?home=true#home`)
+  await expect(page.locator('#home-h2')).toHaveText('Home H2')
+})
+
+test('should preserve hash', async ({ page }) => {
+  await page.locator('#not-found-with-hash').click()
+  await expect(page).toHaveURL(`${BASE}404.html#404`)
+  await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+})
+
+test('should preserve hash and query', async ({ page }) => {
+  await page.locator('#not-found-with-hash-and-query').click()
+  await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
+  await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+})

packages/client/src/router/resolveRoute.ts

@@ -1,4 +1,4 @@
-import { resolvePathInfo, resolveRoutePathWithExt } from '@vuepress/shared'
+import { resolveRoutePathWithExt, splitPath } from '@vuepress/shared'
 import { routes } from '../internal/routes.js'
 import type { Route, RouteMeta } from '../types/index.js'
 import { resolveRouteKey } from './resolveRouteKey.js'
@@ -17,7 +17,7 @@ export const resolveRoute = <T extends RouteMeta = RouteMeta>(
   currentPath?: string,
 ): ResolvedRoute<T> => {
   // get only the pathname from the path
-  const [pathname, hashAndQueries] = resolvePathInfo(path)
+  const { pathname, hashAndQueries } = splitPath(path)
 
   // resolve the route path
   const routeKey = resolveRouteKey(pathname, currentPath)

packages/client/src/router/resolveRouteFullPath.ts

@@ -1,4 +1,4 @@
-import { resolvePathInfo } from '@vuepress/shared'
+import { splitPath } from '@vuepress/shared'
 import { resolveRoutePath } from './resolveRoutePath.js'
 
 /**
@@ -8,7 +8,6 @@ export const resolveRouteFullPath = (
   path: string,
   currentPath?: string,
 ): string => {
-  const [pathname, hashAndQueries] = resolvePathInfo(path)
-
+  const { pathname, hashAndQueries } = splitPath(path)
   return resolveRoutePath(pathname, currentPath) + hashAndQueries
 }

packages/core/src/app/prepare/prepareClientConfigs.ts

@@ -11,12 +11,14 @@ export const prepareClientConfigs = async (app: App): Promise<void> => {
   // generate client config files entry
   const content = `\
 ${clientConfigFiles
-  .map((filePath, index) => `import clientConfig${index} from '${filePath}'`)
+  .map(
+    (filePath, index) => `import * as clientConfig${index} from '${filePath}'`,
+  )
   .join('\n')}
 
 export const clientConfigs = [
 ${clientConfigFiles.map((_, index) => `  clientConfig${index},`).join('\n')}
-]
+].map((m) => m.default).filter(Boolean)
 `
 
   await app.writeTemp('internal/clientConfigs.js', content)

packages/shared/src/utils/routes/index.ts

@@ -3,4 +3,4 @@ export * from './normalizeRoutePath.js'
 export * from './resolveRoutePathWithExt.js'
 export * from './resolveLocalePath.js'
 export * from './resolveRoutePathFromUrl.js'
-export * from './resolvePathInfo.js'
+export * from './splitPath.js'

packages/shared/src/utils/routes/splitPath.ts

@@ -0,0 +1,17 @@
+const SPLIT_CHAR_REGEXP = /(#|\?)/
+
+/**
+ * Split a path into pathname and hashAndQueries
+ */
+export const splitPath = (
+  path: string,
+): {
+  pathname: string
+  hashAndQueries: string
+} => {
+  const [pathname, ...hashAndQueries] = path.split(SPLIT_CHAR_REGEXP)
+  return {
+    pathname,
+    hashAndQueries: hashAndQueries.join(''),
+  }
+}

packages/shared/tests/routes/splitPath.spec.ts

@@ -0,0 +1,22 @@
+import { expect, it } from 'vitest'
+import { splitPath } from '../../src/index.js'
+
+const testCases: [string, ReturnType<typeof splitPath>][] = [
+  ['/a/b/c/', { pathname: '/a/b/c/', hashAndQueries: '' }],
+  ['/a/b/c/?a=1', { pathname: '/a/b/c/', hashAndQueries: '?a=1' }],
+  ['/a/b/c/#b', { pathname: '/a/b/c/', hashAndQueries: '#b' }],
+  ['/a/b/c/?a=1#b', { pathname: '/a/b/c/', hashAndQueries: '?a=1#b' }],
+  ['a/index.html', { pathname: 'a/index.html', hashAndQueries: '' }],
+  ['/a/index.html?a=1', { pathname: '/a/index.html', hashAndQueries: '?a=1' }],
+  ['/a/index.html#a', { pathname: '/a/index.html', hashAndQueries: '#a' }],
+  [
+    '/a/index.html?a=1#b',
+    { pathname: '/a/index.html', hashAndQueries: '?a=1#b' },
+  ],
+]
+
+testCases.forEach(([source, expected]) => {
+  it(`${source} -> ${expected}`, () => {
+    expect(splitPath(source)).toEqual(expected)
+  })
+})