Add array search params

packages/vite-plugin-kit-routes/src/lib/ROUTES.ts

@@ -84,6 +84,12 @@ const PAGES = {
   '/sp': (sp?: Record<string, string | number>) => {
     return `/sp${appendSp(sp)}`
   },
+  '/spArray': (params: { ids: number[] }) => {
+    return `/spArray${appendSp({ ids: params.ids })}`
+  },
+  '/spArrayComma': (params: { ids: number[] }) => {
+    return `/spArrayComma${appendSp({ ids: params.ids.join(',') })}`
+  },
 }
 
 /**
@@ -176,18 +182,34 @@ const LINKS = {
   },
 }
 
+type ParamValue = string | number | undefined
+
 /**
  * Append search params to a string
  */
-const appendSp = (sp?: Record<string, string | number | undefined>, prefix: '?' | '&' = '?') => {
+const appendSp = (sp?: Record<string, ParamValue | ParamValue[]>, prefix: '?' | '&' = '?') => {
   if (sp === undefined) return ''
-  const mapping = Object.entries(sp)
-    .filter(c => c[1] !== undefined)
-    .map(c => [c[0], String(c[1])])
 
-  const formated = new URLSearchParams(mapping).toString()
-  if (formated) {
-    return `${prefix}${formated}`
+  const params = new URLSearchParams()
+  const append = (n: string, v: ParamValue) => {
+    if (v !== undefined) {
+      params.append(n, String(v))
+    }
+  }
+
+  for (const [name, val] of Object.entries(sp)) {
+    if (Array.isArray(val)) {
+      for (const v of val) {
+        append(name, v)
+      }
+    } else {
+      append(name, val)
+    }
+  }
+
+  const formatted = params.toString()
+  if (formatted) {
+    return `${prefix}${formatted}`
   }
   return ''
 }
@@ -275,6 +297,8 @@ export type KIT_ROUTES = {
     '/lay/root-layout': never
     '/lay/skip': never
     '/sp': never
+    '/spArray': never
+    '/spArrayComma': never
   }
   SERVERS: {
     'GET /server_func_get': never
@@ -304,6 +328,7 @@ export type KIT_ROUTES = {
     siteId: never
     contractId: never
     rest: never
+    ids: never
     locale: never
     redirectTo: never
     extra: never

packages/vite-plugin-kit-routes/src/lib/format.ts

@@ -19,18 +19,34 @@ export const format = (margin: { left?: number; top?: number; bottom?: number },
   )
 }
 
-export const appendSp = `/**
+export const appendSp = `type ParamValue = string | number | undefined
+
+/**
  * Append search params to a string
  */
-const appendSp = (sp?: Record<string, string | number | undefined>, prefix: '?' | '&' = '?') => {
+const appendSp = (sp?: Record<string, ParamValue | ParamValue[]>, prefix: '?' | '&' = '?') => {
   if (sp === undefined) return ''
-  const mapping = Object.entries(sp)
-    .filter(c => c[1] !== undefined)
-    .map(c => [c[0], String(c[1])])
 
-  const formated = new URLSearchParams(mapping).toString()
-  if (formated) {
-    return \`\${prefix}\${formated}\`
+  const params = new URLSearchParams()
+  const append = (n: string, v: ParamValue) => {
+    if (v !== undefined) {
+      params.append(n, String(v))
+    }
+  }
+
+  for (const [name, val] of Object.entries(sp)) {
+    if (Array.isArray(val)) {
+      for (const v of val) {
+        append(name, v)
+      }
+    } else {
+      append(name, val)
+    }
+  }
+
+  const formatted = params.toString()
+  if (formatted) {
+    return \`\${prefix}\${formatted}\`
   }
   return ''
 }

packages/vite-plugin-kit-routes/src/lib/plugin.ts

@@ -234,6 +234,7 @@ export type ExtendParam = {
 
 export type ExplicitSearchParam = ExtendParam & {
   required?: boolean
+  joinArray?: boolean
 }
 
 export const log = new Log('Kit Routes')
@@ -532,8 +533,9 @@ export function buildMetadata(
         default: sp[1].default,
         isArray: false,
       })
+      const opt = sp[1].required ? '' : '?'
       explicit_search_params_to_function.push(
-        `${sp[0]}: params${sp[1].required ? '' : '?'}.${sp[0]}`,
+        `${sp[0]}: params${opt}.${sp[0]}${sp[1].joinArray ? `${opt}.join(',')` : ''}`,
       )
     })
   }

packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts

@@ -824,6 +824,8 @@ describe('rmv Helper', () => {
         "lay/+layout.svelte",
         "page_server_woAction/+page.server.ts",
         "sp/+page.svelte",
+        "spArray/+page.svelte",
+        "spArrayComma/+page.svelte",
       ]
     `)
   })
@@ -870,6 +872,8 @@ describe('rmv Helper', () => {
         "lay/+layout.svelte",
         "page_server_woAction/+page.server.ts",
         "sp/+page.svelte",
+        "spArray/+page.svelte",
+        "spArrayComma/+page.svelte",
       ]
     `)
 
@@ -909,6 +913,8 @@ describe('rmv Helper', () => {
         "lay/+layout.svelte",
         "page_server_woAction/+page.server.ts",
         "sp/+page.svelte",
+        "spArray/+page.svelte",
+        "spArrayComma/+page.svelte",
       ]
     `)
   })
@@ -951,6 +957,8 @@ describe('rmv Helper', () => {
         "lay/+layout.svelte",
         "page_server_woAction/+page.server.ts",
         "sp/+page.svelte",
+        "spArray/+page.svelte",
+        "spArrayComma/+page.svelte",
       ]
     `)
   })

packages/vite-plugin-kit-routes/src/routes/+layout.svelte

@@ -82,7 +82,9 @@
     <a href={route('/lay/skip')}>Layout Skip</a>
   </li>
   <li>
-    <a href={route('/sp')}>Search Params</a>
+    <a href={route('/sp')}>Search Params</a> |
+    <a href={route('/spArray', { ids: [1, 2, 3] })}>Array Search Params</a> |
+    <a href={route('/spArrayComma', { ids: [1, 2, 3] })}>Array Search Params (comma-separated)</a>
   </li>
 </ul>
 

packages/vite-plugin-kit-routes/src/routes/spArray/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+  const ids: number[] =
+    $page.url.searchParams
+      .getAll('ids')
+      ?.map(id => parseInt(id)) ?? []
+</script>
+
+<h2>Array Search Params</h2>
+
+<pre>{JSON.stringify(ids)}</pre>

packages/vite-plugin-kit-routes/src/routes/spArrayComma/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+  const ids: number[] =
+    $page.url.searchParams
+      .get('ids')
+      ?.split(',')
+      ?.map(id => parseInt(id)) ?? []
+</script>
+
+<h2>Array Search Params (comma-separated)</h2>
+
+<pre>{JSON.stringify(ids)}</pre>

packages/vite-plugin-kit-routes/src/test/ROUTES_base.ts

@@ -50,7 +50,9 @@ const PAGES = {
   "/lay/normal": `${base}/lay/normal`,
   "/lay/root-layout": `${base}/lay/root-layout`,
   "/lay/skip": `${base}/lay/skip`,
-  "/sp": `${base}/sp`
+  "/sp": `${base}/sp`,
+  "/spArray": `${base}/spArray`,
+  "/spArrayComma": `${base}/spArrayComma`
 }
 
 /**
@@ -106,18 +108,34 @@ const LINKS = {
 
 }
 
+type ParamValue = string | number | undefined
+
 /**
  * Append search params to a string
  */
-const appendSp = (sp?: Record<string, string | number | undefined>, prefix: '?' | '&' = '?') => {
+const appendSp = (sp?: Record<string, ParamValue | ParamValue[]>, prefix: '?' | '&' = '?') => {
   if (sp === undefined) return ''
-  const mapping = Object.entries(sp)
-    .filter(c => c[1] !== undefined)
-    .map(c => [c[0], String(c[1])])
 
-  const formated = new URLSearchParams(mapping).toString()
-  if (formated) {
-    return `${prefix}${formated}`
+  const params = new URLSearchParams()
+  const append = (n: string, v: ParamValue) => {
+    if (v !== undefined) {
+      params.append(n, String(v))
+    }
+  }
+
+  for (const [name, val] of Object.entries(sp)) {
+    if (Array.isArray(val)) {
+      for (const v of val) {
+        append(name, v)
+      }
+    } else {
+      append(name, val)
+    }
+  }
+
+  const formatted = params.toString()
+  if (formatted) {
+    return `${prefix}${formatted}`
   }
   return ''
 }
@@ -182,7 +200,7 @@ export function route<T extends keyof AllTypes>(key: T, ...params: any[]): strin
 * ```
 */
 export type KIT_ROUTES = { 
-  PAGES: { '/': never, '/subGroup': never, '/subGroup/user': never, '/subGroup2': never, '/contract': 'lang', '/contract/[id]': 'id' | 'lang', '/gp/one': 'lang', '/gp/two': 'lang', '/main': 'lang', '/match/[id=ab]': 'id' | 'lang', '/match/[id=int]': 'id' | 'lang', '/site': 'lang', '/site/[id]': 'id' | 'lang', '/site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang', '/a/[...rest]/z': 'rest', '/lay/normal': never, '/lay/root-layout': never, '/lay/skip': never, '/sp': never }
+  PAGES: { '/': never, '/subGroup': never, '/subGroup/user': never, '/subGroup2': never, '/contract': 'lang', '/contract/[id]': 'id' | 'lang', '/gp/one': 'lang', '/gp/two': 'lang', '/main': 'lang', '/match/[id=ab]': 'id' | 'lang', '/match/[id=int]': 'id' | 'lang', '/site': 'lang', '/site/[id]': 'id' | 'lang', '/site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang', '/a/[...rest]/z': 'rest', '/lay/normal': never, '/lay/root-layout': never, '/lay/skip': never, '/sp': never, '/spArray': never, '/spArrayComma': never }
   SERVERS: { 'GET /server_func_get': never, 'POST /server_func_post': never, 'GET /contract': 'lang', 'POST /contract': 'lang', 'GET /site': 'lang', 'GET /api/graphql': never, 'POST /api/graphql': never, 'GET /data/errors/[locale].json': 'locale' }
   ACTIONS: { 'default /contract/[id]': 'id' | 'lang', 'create /site': 'lang', 'update /site/[id]': 'id' | 'lang', 'delete /site/[id]': 'id' | 'lang', 'noSatisfies /site_contract': 'lang', 'send /site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang' }
   LINKS: Record<string, never>

packages/vite-plugin-kit-routes/src/test/ROUTES_format-object-path.ts

@@ -54,7 +54,9 @@ export const PAGES = {
   "/lay/normal": `/lay/normal`,
   "/lay/root-layout": `/lay/root-layout`,
   "/lay/skip": `/lay/skip`,
-  "/sp": `/sp`
+  "/sp": `/sp`,
+  "/spArray": `/spArray`,
+  "/spArrayComma": `/spArrayComma`
 }
 
 /**
@@ -119,18 +121,34 @@ export const LINKS = {
   }
 }
 
+type ParamValue = string | number | undefined
+
 /**
  * Append search params to a string
  */
-const appendSp = (sp?: Record<string, string | number | undefined>, prefix: '?' | '&' = '?') => {
+const appendSp = (sp?: Record<string, ParamValue | ParamValue[]>, prefix: '?' | '&' = '?') => {
   if (sp === undefined) return ''
-  const mapping = Object.entries(sp)
-    .filter(c => c[1] !== undefined)
-    .map(c => [c[0], String(c[1])])
 
-  const formated = new URLSearchParams(mapping).toString()
-  if (formated) {
-    return `${prefix}${formated}`
+  const params = new URLSearchParams()
+  const append = (n: string, v: ParamValue) => {
+    if (v !== undefined) {
+      params.append(n, String(v))
+    }
+  }
+
+  for (const [name, val] of Object.entries(sp)) {
+    if (Array.isArray(val)) {
+      for (const v of val) {
+        append(name, v)
+      }
+    } else {
+      append(name, val)
+    }
+  }
+
+  const formatted = params.toString()
+  if (formatted) {
+    return `${prefix}${formatted}`
   }
   return ''
 }
@@ -168,7 +186,7 @@ export const currentSp = () => {
 * ```
 */
 export type KIT_ROUTES = { 
-  PAGES: { '/': never, '/subGroup': never, '/subGroup/user': never, '/subGroup2': never, '/contract': 'lang', '/contract/[id]': 'id' | 'lang', '/gp/one': 'lang', '/gp/two': 'lang', '/main': 'lang', '/match/[id=ab]': 'id' | 'lang', '/match/[id=int]': 'id' | 'lang', '/site': 'lang', '/site/[id]': 'lang' | 'id', '/site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang', '/a/[...rest]/z': 'rest', '/lay/normal': never, '/lay/root-layout': never, '/lay/skip': never, '/sp': never }
+  PAGES: { '/': never, '/subGroup': never, '/subGroup/user': never, '/subGroup2': never, '/contract': 'lang', '/contract/[id]': 'id' | 'lang', '/gp/one': 'lang', '/gp/two': 'lang', '/main': 'lang', '/match/[id=ab]': 'id' | 'lang', '/match/[id=int]': 'id' | 'lang', '/site': 'lang', '/site/[id]': 'lang' | 'id', '/site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang', '/a/[...rest]/z': 'rest', '/lay/normal': never, '/lay/root-layout': never, '/lay/skip': never, '/sp': never, '/spArray': never, '/spArrayComma': never }
   SERVERS: { 'GET /server_func_get': never, 'POST /server_func_post': never, 'GET /contract': 'lang', 'POST /contract': 'lang', 'GET /site': 'lang', 'GET /api/graphql': never, 'POST /api/graphql': never, 'GET /data/errors/[locale].json': 'locale' }
   ACTIONS: { 'default /contract/[id]': 'id' | 'lang', 'create /site': 'lang', 'update /site/[id]': 'id' | 'lang', 'delete /site/[id]': 'id' | 'lang', 'noSatisfies /site_contract': 'lang', 'send /site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang' }
   LINKS: { 'twitter': never, 'twitter_post': 'name' | 'id', 'gravatar': 'str' }

packages/vite-plugin-kit-routes/src/test/ROUTES_format-object-path_shortened.ts

@@ -54,7 +54,9 @@ export const PAGES = {
   "/lay/normal": `/lay/normal`,
   "/lay/root-layout": `/lay/root-layout`,
   "/lay/skip": `/lay/skip`,
-  "/sp": `/sp`
+  "/sp": `/sp`,
+  "/spArray": `/spArray`,
+  "/spArrayComma": `/spArrayComma`
 }
 
 /**
@@ -120,18 +122,34 @@ export const LINKS = {
   }
 }
 
+type ParamValue = string | number | undefined
+
 /**
  * Append search params to a string
  */
-const appendSp = (sp?: Record<string, string | number | undefined>, prefix: '?' | '&' = '?') => {
+const appendSp = (sp?: Record<string, ParamValue | ParamValue[]>, prefix: '?' | '&' = '?') => {
   if (sp === undefined) return ''
-  const mapping = Object.entries(sp)
-    .filter(c => c[1] !== undefined)
-    .map(c => [c[0], String(c[1])])
 
-  const formated = new URLSearchParams(mapping).toString()
-  if (formated) {
-    return `${prefix}${formated}`
+  const params = new URLSearchParams()
+  const append = (n: string, v: ParamValue) => {
+    if (v !== undefined) {
+      params.append(n, String(v))
+    }
+  }
+
+  for (const [name, val] of Object.entries(sp)) {
+    if (Array.isArray(val)) {
+      for (const v of val) {
+        append(name, v)
+      }
+    } else {
+      append(name, val)
+    }
+  }
+
+  const formatted = params.toString()
+  if (formatted) {
+    return `${prefix}${formatted}`
   }
   return ''
 }
@@ -169,7 +187,7 @@ export const currentSp = () => {
 * ```
 */
 export type KIT_ROUTES = { 
-  PAGES: { '/': never, '/subGroup': never, '/subGroup/user': never, '/subGroup2': never, '/contract': 'lang', '/contract/[id]': 'lang' | 'id', '/gp/one': 'lang', '/gp/two': 'lang', '/main': 'lang', '/match/[id=ab]': 'lang' | 'id', '/match/[id=int]': 'lang' | 'id', '/site': 'lang', '/site/[id]': 'lang' | 'id', '/site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang', '/a/[...rest]/z': 'rest', '/lay/normal': never, '/lay/root-layout': never, '/lay/skip': never, '/sp': never }
+  PAGES: { '/': never, '/subGroup': never, '/subGroup/user': never, '/subGroup2': never, '/contract': 'lang', '/contract/[id]': 'lang' | 'id', '/gp/one': 'lang', '/gp/two': 'lang', '/main': 'lang', '/match/[id=ab]': 'lang' | 'id', '/match/[id=int]': 'lang' | 'id', '/site': 'lang', '/site/[id]': 'lang' | 'id', '/site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang', '/a/[...rest]/z': 'rest', '/lay/normal': never, '/lay/root-layout': never, '/lay/skip': never, '/sp': never, '/spArray': never, '/spArrayComma': never }
   SERVERS: { 'GET /server_func_get': never, 'POST /server_func_post': never, 'GET /contract': 'lang', 'POST /contract': 'lang', 'GET /site': 'lang', 'GET /api/graphql': never, 'POST /api/graphql': never, 'GET /data/errors/[locale].json': 'locale' }
   ACTIONS: { 'default /contract/[id]': 'lang' | 'id', 'create /site': 'lang', 'update /site/[id]': 'lang' | 'id', 'delete /site/[id]': 'lang' | 'id', 'noSatisfies /site_contract': 'lang', 'send /site_contract/[siteId]-[contractId]': 'siteId' | 'contractId' | 'lang' }
   LINKS: { 'twitter': never, 'twitter_post': 'name' | 'id', 'gravatar': 'str' }