From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 25 Jul 2025 12:35:13 +0000 (+0200)
Subject: chore: add nested and layouts
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=99cfc82f62f48a6b1630215d7a1040f55ab5c272;p=thirdparty%2Fvuejs%2Frouter.git

chore: add nested and layouts
---

diff --git a/packages/experiments-playground/src/App.vue b/packages/experiments-playground/src/App.vue
index db6d3c35..3518cfd5 100644
--- a/packages/experiments-playground/src/App.vue
+++ b/packages/experiments-playground/src/App.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
+const router = useRouter()
+const url = ref('')
 </script>
 
 <template>
@@ -10,7 +13,19 @@ const route = useRoute()
       <RouterLink to="/">Home</RouterLink>
       |
       <RouterLink to="/about">About</RouterLink>
+      |
+      <RouterLink to="/nested">Nested</RouterLink>
     </nav>
+    <form @submit.prevent="router.push(url)">
+      <label for="path">Path:</label>
+      <input
+        id="path"
+        type="text"
+        v-model="url"
+        placeholder="/go/somewhere?nice"
+      />
+      <button type="submit">Go</button>
+    </form>
   </header>
 
   <p>
diff --git a/packages/experiments-playground/src/assets/main.css b/packages/experiments-playground/src/assets/main.css
index e69de29b..4b9521c7 100644
--- a/packages/experiments-playground/src/assets/main.css
+++ b/packages/experiments-playground/src/assets/main.css
@@ -0,0 +1,3 @@
+:root {
+  color-scheme: light dark;
+}
diff --git a/packages/experiments-playground/src/pages/nested.vue b/packages/experiments-playground/src/pages/nested.vue
new file mode 100644
index 00000000..f0984a0b
--- /dev/null
+++ b/packages/experiments-playground/src/pages/nested.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <h1>Nested.vue</h1>
+
+    <RouterView />
+  </div>
+</template>
diff --git a/packages/experiments-playground/src/router/index.ts b/packages/experiments-playground/src/router/index.ts
index 078ba57b..64db4029 100644
--- a/packages/experiments-playground/src/router/index.ts
+++ b/packages/experiments-playground/src/router/index.ts
@@ -12,6 +12,18 @@ import type {
 } from 'vue-router/experimental'
 import PageHome from '../pages/(home).vue'
 
+type ExtractMatcherQueryParams<T> =
+  T extends MatcherPatternQuery<infer P> ? P : never
+
+// type CombineMatcherParams<T extends readonly MatcherPatternQuery[]> =
+//   T extends readonly [infer First, ...infer Rest]
+//     ? First extends MatcherPatternQuery
+//       ? Rest extends readonly MatcherPatternQuery[]
+//         ? ExtractMatcherQueryParams<First> & CombineMatcherParams<Rest>
+//         : ExtractMatcherQueryParams<First>
+//       : never
+//     : {}
+
 const PAGE_QUERY_PATTERN_MATCHER: MatcherPatternQuery<{ page: number }> = {
   match: query => {
     const page = Number(query.page)
@@ -22,16 +34,77 @@ const PAGE_QUERY_PATTERN_MATCHER: MatcherPatternQuery<{ page: number }> = {
   build: params => ({ page: String(params.page) }),
 }
 
+const QUERY_PATTERN_MATCHER: MatcherPatternQuery<{ q: string }> = {
+  match: query => {
+    return {
+      q: typeof query.q === 'string' ? query.q : '',
+    }
+  },
+  build: params => {
+    return { q: params.q || '' }
+  },
+}
+
+// function combineQueryMatchers<const T extends MatcherPatternQuery[]>(
+//   ...matchers: T
+// ): MatcherPatternQuery<CombineMatcherParams<T>> {
+//   return {
+//     match: (query: MatcherQueryParams): CombineMatcherParams<T> => {
+//       return matchers.reduce((acc, matcher) => {
+//         return { ...acc, ...matcher.match(query) }
+//       }, {} as CombineMatcherParams<T>)
+//     },
+//     build: (
+//       params: CombineMatcherParams<T>
+//     ): Record<string, string | string[]> => {
+//       return matchers.reduce(
+//         (acc, matcher) => {
+//           return { ...acc, ...matcher.build(params) }
+//         },
+//         {} as Record<string, string | string[]>
+//       )
+//     },
+//   }
+// }
+//
+// const a = combineQueryMatchers(
+//   PAGE_QUERY_PATTERN_MATCHER,
+//   QUERY_PATTERN_MATCHER
+// )
+
+const QUERY_MATCHER_COMBINED: MatcherPatternQuery<{
+  page: number
+  q: string
+}> = {
+  match: query => {
+    return {
+      ...PAGE_QUERY_PATTERN_MATCHER.match(query),
+      ...QUERY_PATTERN_MATCHER.match(query),
+    }
+  },
+  build: params => ({
+    ...PAGE_QUERY_PATTERN_MATCHER.build(params),
+    ...QUERY_PATTERN_MATCHER.build(params),
+  }),
+}
+
 const ANY_HASH_PATTERN_MATCHER: MatcherPatternHash<// hash could be named anything, in this case it creates a param named hash
 { hash: string | null }> = {
   match: hash => ({ hash: hash ? hash.slice(1) : null }),
   build: ({ hash }) => (hash ? `#${hash}` : ''),
 }
 
+const r_group = normalizeRouteRecord({
+  meta: {
+    fromGroup: 'r_group',
+  },
+})
+
 const r_home = normalizeRouteRecord({
   name: 'home',
   path: new MatcherPatternPathStatic('/'),
-  query: PAGE_QUERY_PATTERN_MATCHER,
+  query: QUERY_MATCHER_COMBINED,
+  parent: r_group,
   components: { default: PageHome },
 })
 
@@ -42,10 +115,32 @@ const r_about = normalizeRouteRecord({
   components: { default: () => import('../pages/about.vue') },
 })
 
+const r_profile_layout = normalizeRouteRecord({
+  components: {},
+  meta: {
+    layout: 'profile',
+  },
+})
+
+const r_nested = normalizeRouteRecord({
+  name: 'nested',
+  components: { default: () => import('../pages/nested.vue') },
+  path: new MatcherPatternPathStatic('/nested'),
+})
+
+const r_nested_a = normalizeRouteRecord({
+  name: 'nested-a',
+  components: { default: () => import('../pages/nested/a.vue') },
+  parent: r_nested,
+  path: new MatcherPatternPathStatic('/nested/a'),
+})
+
 export const router = experimental_createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(),
   resolver: createStaticResolver<EXPERIMENTAL_RouteRecordNormalized_Matchable>([
     r_home,
     r_about,
+    r_nested,
+    r_nested_a,
   ]),
 })
diff --git a/packages/router/src/experimental/index.ts b/packages/router/src/experimental/index.ts
index 30ec7c68..8af1615a 100644
--- a/packages/router/src/experimental/index.ts
+++ b/packages/router/src/experimental/index.ts
@@ -14,6 +14,10 @@ export type {
 } from './router'
 
 export { createStaticResolver } from './route-resolver/resolver-static'
+export type {
+  MatcherQueryParams,
+  MatcherQueryParamsValue,
+} from './route-resolver/resolver'
 export {
   MatcherPatternPathDynamic,
   MatcherPatternPathStatic,