Dash (#830)

* 🚧 UPDATE: should look like this (probably) * 🚧 UPDATE: v0 * tmp tests * only when needed escape param * fix #828 ( add changeset * should be good * log content * log info * rmv login
jycouet · Jan 12, 2025 · b1d5a15 · b1d5a15
1 parent 0cfeafb
commit b1d5a15
Show file tree

Hide file tree

Showing 27 changed files with 667 additions and 617 deletions.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,16 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@kitql-old/all-in": "0.9.6",
+    "@kitql/eslint-config": "0.5.1",
+    "@kitql/handles": "0.2.3",
+    "@kitql/helpers": "0.8.11",
+    "@kitql/internals": "0.10.1",
+    "vite-plugin-kit-routes": "0.7.5",
+    "vite-plugin-stripper": "0.6.2",
+    "vite-plugin-watch-and-run": "1.7.3",
+    "website": "1.1.2"
+  },
+  "changesets": []
+}
diff --git a/.changeset/wicked-nails-travel.md b/.changeset/wicked-nails-travel.md
@@ -0,0 +1,5 @@
+---
+'vite-plugin-kit-routes': patch
+---
+
+manage search-params with dash
diff --git a/packages/vite-plugin-kit-routes/src/lib/ROUTES.ts b/packages/vite-plugin-kit-routes/src/lib/ROUTES.ts
@@ -12,62 +12,63 @@ const PAGES = {
   '/subGroup': `/subGroup`,
   '/subGroup/user': `/subGroup/user`,
   '/subGroup2': (params: { first: string | number }) => {
-    return `/subGroup2${appendSp({ first: params.first })}`
+    return `/subGroup2${appendSp({ first: params['first'] })}`
   },
   '/contract': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/contract`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/contract`
   },
   '/contract/[id]': (params: {
     id: string | number
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/contract/${params.id}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/contract/${params['id']}`
   },
   '/gp/one': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/gp/one`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/gp/one`
   },
   '/gp/two': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/gp/two`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/gp/two`
   },
   '/main': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/main`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/main`
   },
   '/match/[id=ab]': (params: {
     id: Parameters<typeof import('../params/ab.ts').match>[0]
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/match/${params.id}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/match/${params['id']}`
   },
   '/match/[id=int]': (params: { id: number; lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/match/${params.id}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/match/${params['id']}`
   },
   '/site': (
     params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string; limit?: number },
     sp?: Record<string, string | number>,
   ) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site${appendSp({ ...sp, limit: params?.limit })}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site${appendSp({ ...sp, limit: params?.['limit'] })}`
   },
   '/site/[id]': (params?: {
     lang?: 'fr' | 'hu' | undefined
     id?: string
     limit?: number
     demo?: string
+    'da-sh'?: string
   }) => {
     params = params ?? {}
-    params.lang = params.lang ?? 'fr'
-    params.id = params.id ?? 'Vienna'
-    return `${params?.lang ? `/${params?.lang}` : ''}/site/${params.id}${appendSp({ limit: params.limit, demo: params.demo })}`
+    params['lang'] = params['lang'] ?? 'fr'
+    params['id'] = params['id'] ?? 'Vienna'
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site/${params['id']}${appendSp({ limit: params['limit'], demo: params['demo'], 'da-sh': params['da-sh'] })}`
   },
   '/site_contract/[siteId]-[contractId]': (params: {
     siteId: string | number
     contractId: string | number
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
     limit?: number
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site_contract/${params.siteId}-${params.contractId}${appendSp({ limit: params.limit })}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site_contract/${params['siteId']}-${params['contractId']}${appendSp({ limit: params['limit'] })}`
   },
   '/a/[...rest]/z': (params: { rest: (string | number)[] }) => {
-    return `/a/${params.rest?.join('/')}/z`
+    return `/a/${params['rest']?.join('/')}/z`
   },
   '/lay/normal': `/lay/normal`,
   '/lay/root-layout': `/lay/root-layout`,
@@ -76,10 +77,10 @@ const PAGES = {
     return `/sp${appendSp(sp)}`
   },
   '/spArray': (params: { ids: number[] }) => {
-    return `/spArray${appendSp({ ids: params.ids })}`
+    return `/spArray${appendSp({ ids: params['ids'] })}`
   },
   '/spArrayComma': (params: { ids: number[] }) => {
-    return `/spArrayComma${appendSp({ ids: String(params.ids) })}`
+    return `/spArrayComma${appendSp({ ids: String(params['ids']) })}`
   },
 }
 
@@ -91,18 +92,18 @@ const SERVERS = {
   'GET /server_func_get_and_': `/server_func_get_and_`,
   'POST /server_func_post': `/server_func_post`,
   'GET /contract': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/contract`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/contract`
   },
   'POST /contract': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/contract`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/contract`
   },
   'GET /site': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site`
   },
   'GET /api/graphql': `/api/graphql`,
   'POST /api/graphql': `/api/graphql`,
   'GET /data/errors/[locale].json': (params: { locale: string | number }) => {
-    return `/data/errors/${params.locale}.json`
+    return `/data/errors/${params['locale']}.json`
   },
 }
 
@@ -115,37 +116,37 @@ const ACTIONS = {
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
     limit?: number
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/contract/${params.id}${appendSp({ limit: params.limit })}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/contract/${params['id']}${appendSp({ limit: params['limit'] })}`
   },
   'create /site': (params?: {
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
     redirectTo?: 'list' | 'new' | 'detail'
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site?/create${appendSp({ redirectTo: params?.redirectTo }, '&')}`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site?/create${appendSp({ redirectTo: params?.['redirectTo'] }, '&')}`
   },
   'update /site/[id]': (params: {
     id: string | number
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site/${params.id}?/update`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site/${params['id']}?/update`
   },
   'delete /site/[id]': (params: {
     id: string | number
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
   }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site/${params.id}?/delete`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site/${params['id']}?/delete`
   },
   'noSatisfies /site_contract': (params?: { lang?: 'fr' | 'en' | 'hu' | 'at' | string }) => {
-    return `${params?.lang ? `/${params?.lang}` : ''}/site_contract?/noSatisfies`
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site_contract?/noSatisfies`
   },
   'send /site_contract/[siteId]-[contractId]': (params: {
     siteId: string | number
     contractId: string | number
     lang?: 'fr' | 'en' | 'hu' | 'at' | string
     extra?: 'A' | 'B'
   }) => {
-    params.extra = params.extra ?? 'A'
-    return `${params?.lang ? `/${params?.lang}` : ''}/site_contract/${params.siteId}-${params.contractId}?/send${appendSp({ extra: params.extra }, '&')}`
+    params['extra'] = params['extra'] ?? 'A'
+    return `${params?.['lang'] ? `/${params?.['lang']}` : ''}/site_contract/${params['siteId']}-${params['contractId']}?/send${appendSp({ extra: params['extra'] }, '&')}`
   },
 }
 
@@ -155,12 +156,12 @@ const ACTIONS = {
 const LINKS = {
   twitter: `https://twitter.com/jycouet`,
   twitter_post: (params: { name: string | number; id: string | number }) => {
-    return `https://twitter.com/${params.name}/status/${params.id}`
+    return `https://twitter.com/${params['name']}/status/${params['id']}`
   },
   gravatar: (params: { str: string; s?: number; d?: 'retro' | 'identicon' }) => {
-    params.s = params.s ?? 75
-    params.d = params.d ?? 'identicon'
-    return `https://www.gravatar.com/avatar/${params.str}${appendSp({ s: params.s, d: params.d })}`
+    params['s'] = params['s'] ?? 75
+    params['d'] = params['d'] ?? 'identicon'
+    return `https://www.gravatar.com/avatar/${params['str']}${appendSp({ s: params['s'], d: params['d'] })}`
   },
 }
 
@@ -258,7 +259,7 @@ export function route<T extends keyof AllTypes>(key: T, ...params: any[]): strin
  *
  * Full example:
  * ```ts
- * import type { KIT_ROUTES } from '$_lib/ROUTES'
+ * import type { KIT_ROUTES } from '$lib/ROUTES'
  * import { kitRoutes } from 'vite-plugin-kit-routes'
  *
  * kitRoutes<KIT_ROUTES>({
@@ -318,6 +319,7 @@ export type KIT_ROUTES = {
     id: never
     limit: never
     demo: never
+    'da-sh': never
     siteId: never
     contractId: never
     rest: never

diff --git a/packages/vite-plugin-kit-routes/src/lib/plugin.ts b/packages/vite-plugin-kit-routes/src/lib/plugin.ts
@@ -546,28 +546,31 @@ export function buildMetadata(
 
     // Very special case (only an optional param)
     if (toRet === `/[[${c.name + sMatcher}]]`) {
-      toRet = `\${params?.${c.name} ? \`/\${params?.${c.name}}\`: '/'}`
+      toRet = `\${params?.['${c.name}'] ? \`/\${params?.['${c.name}']}\`: '/'}`
     } else {
       // Always 2 cases, with "/" prefix and without
       const cases = ['/', '']
       // First -> optionnals
       cases.forEach((prefix) => {
         toRet = toRet.replaceAll(
           `${prefix}[[${c.name + sMatcher}]]`,
-          `\${params?.${c.name} ? \`${prefix}\${params?.${c.name}}\`: ''}`,
+          `\${params?.['${c.name}'] ? \`${prefix}\${params?.['${c.name}']}\`: ''}`,
         )
       })
 
       // Second -> params
       cases.forEach((prefix) => {
-        toRet = toRet.replaceAll(`${prefix}[${c.name + sMatcher}]`, `${prefix}\${params.${c.name}}`)
+        toRet = toRet.replaceAll(
+          `${prefix}[${c.name + sMatcher}]`,
+          `${prefix}\${params['${c.name}']}`,
+        )
       })
 
       // Third -> [...rest]
       cases.forEach((prefix) => {
         toRet = toRet.replaceAll(
           `${prefix}[...${c.name + sMatcher}]`,
-          `${prefix}\${params.${c.name}?.join('/')}`,
+          `${prefix}\${params['${c.name}']?.join('/')}`,
         )
       })
     }
@@ -612,7 +615,7 @@ export function buildMetadata(
     }
 
     Object.entries(customConf.explicit_search_params).forEach((sp) => {
-      const val = `params${paramsIsOptional ? '?' : ''}.${sp[0]}`
+      const val = paramsIsOptional ? `params?.['${sp[0]}']` : `params['${sp[0]}']`
 
       explicit_search_params_to_function.push([sp[0], getSpValue(val, sp[1])])
     })
@@ -635,14 +638,14 @@ export function buildMetadata(
         explicit_search_params_to_function[0][1] = getSpValue(paramsReq[0].name, sp)
       } else {
         // in params
-        toRet = toRet.replaceAll(`params.${paramsReq[0].name}`, paramsReq[0].name)
+        toRet = toRet.replaceAll(`params['${paramsReq[0].name}']`, paramsReq[0].name)
       }
     }
     params.push(`params${isAllOptional ? '?' : ''}: { ${formatArgs(paramsFromPath, options)} }`)
   }
 
   const explicit_search_params = explicit_search_params_to_function
-    .map(([param, val]) => (param === val ? param : `${param}: ${val}`))
+    .map(([param, val]) => (param === val ? param : `'${param}': ${val}`))
     .join(', ')
 
   let fullSP = ''
@@ -665,7 +668,7 @@ export function buildMetadata(
   let paramsDefaults = paramsFromPath
     .filter((c) => c.default !== undefined)
     .map((c) => {
-      return `params.${c.name} = params.${c.name} ?? ${c.default}; `
+      return `params['${c.name}'] = params['${c.name}'] ?? ${c.default}; `
     })
 
   if (paramsDefaults.length > 0 && isAllOptional) {
@@ -779,8 +782,10 @@ const formatArg = (c: Param, o: Options) => {
     override_param = override_params[0][1]?.type
   }
 
+  const nameEscaped = c.name.includes('-') ? `'${c.name}'` : c.name
+
   return (
-    `${c.name}${c.optional ? '?' : ''}: ` +
+    `${nameEscaped}${c.optional ? '?' : ''}: ` +
     `(${c.type ?? override_param ?? options?.default_type ?? 'string | number'})` +
     `${c.isArray ? '[]' : ''}`
   )
@@ -995,7 +1000,7 @@ ${objTypes
   Params${arrayToRecord([
     ...new Set(
       objTypes.flatMap((c) =>
-        c.files.flatMap((d) => d.paramsFromPath.map((e) => `${e.name}: never`)),
+        c.files.flatMap((d) => d.paramsFromPath.map((e) => `'${e.name}': never`)),
       ),
     ),
   ])}
@@ -1050,8 +1055,7 @@ ${objTypes
   return false
 }
 
-// const dolLib = ['$', 'lib'].join('')
-const dolLib = ['$', '_', 'lib'].join('')
+const dolLib = ['$', 'lib'].join('')
 
 function theEnd(
   atStart: boolean,

diff --git a/packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts b/packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts
@@ -179,7 +179,7 @@ describe('vite-plugin-kit-routes', () => {
             ],
             "strDefault": "",
             "strParams": "params?: { lang?: (string | number) }",
-            "strReturn": "\`\${params?.lang ? \`/\${params?.lang}\`: '/'}\`",
+            "strReturn": "\`\${params?.['lang'] ? \`/\${params?.['lang']}\`: '/'}\`",
           },
         ]
       `)
@@ -207,7 +207,7 @@ describe('vite-plugin-kit-routes', () => {
             ],
             "strDefault": "",
             "strParams": "params?: { lang?: (string | number) }",
-            "strReturn": "\`\${params?.lang ? \`/\${params?.lang}\`: ''}/about\`",
+            "strReturn": "\`\${params?.['lang'] ? \`/\${params?.['lang']}\`: ''}/about\`",
           },
         ]
       `)
@@ -235,7 +235,7 @@ describe('vite-plugin-kit-routes', () => {
             ],
             "strDefault": "",
             "strParams": "params?: { lang?: (string | number) }",
-            "strReturn": "\`/prefix-\${params?.lang ? \`\${params?.lang}\`: ''}/about\`",
+            "strReturn": "\`/prefix-\${params?.['lang'] ? \`\${params?.['lang']}\`: ''}/about\`",
           },
         ]
       `)
@@ -285,7 +285,7 @@ describe('vite-plugin-kit-routes', () => {
             ],
             "strDefault": "",
             "strParams": "params: { snapshot: (string | number), id: (string | number) }",
-            "strReturn": "\`/subscriptions/\${params.snapshot}/\${params.id}\`",
+            "strReturn": "\`/subscriptions/\${params['snapshot']}/\${params['id']}\`",
           },
         ]
       `)
@@ -338,7 +338,11 @@ describe('run()', async () => {
         extra_search_params: 'with',
       },
       site_id: {
-        explicit_search_params: { limit: { type: 'number' }, demo: { type: 'string' } },
+        explicit_search_params: {
+          limit: { type: 'number' },
+          demo: { type: 'string' },
+          'da-sh': { type: 'string' },
+        },
         params: {
           id: { type: 'string', default: '"Vienna"' },
           lang: { type: "'fr' | 'hu' | undefined", default: '"fr"' },
@@ -836,9 +840,11 @@ describe('run()', async () => {
       path_base: true,
     })
 
-    expect(read(generated_file_path)?.includes('import { base } from')).toBe(true)
-    expect(read(generated_file_path)?.includes('$app/paths')).toBe(true)
-    expect(read(generated_file_path)?.includes('${base}')).toBe(true)
+    const content = read(generated_file_path) ?? ''
+
+    expect(content.includes('import { base } from')).toBe(true)
+    expect(content.includes('$app/paths')).toBe(true)
+    expect(content.includes('${base}')).toBe(true)
   })
 
   it('with router hash', async () => {

diff --git a/packages/vite-plugin-kit-routes/src/routes/+layout.svelte b/packages/vite-plugin-kit-routes/src/routes/+layout.svelte
@@ -47,7 +47,13 @@
     <a href={route('/site', { lang: $page.params.lang, limit: 2 })}>Sites (with Search Param)</a>
   </li>
   <li>
-    <a href={route('/site/[id]', { lang: getLang($page.params.lang), id: 'Paris' })}>Site Paris</a>
+    <a
+      href={route('/site/[id]', {
+        lang: getLang($page.params.lang),
+        id: 'Paris',
+        'da-sh': 'coucou',
+      })}>Site Paris</a
+    >
   </li>
   <li>
     <!-- 🤞 before, hardcoded string, error prone -->