✨ NEW: format: Variables

.changeset/little-parrots-hug.md

@@ -0,0 +1,5 @@
+---
+'vite-plugin-kit-routes': patch
+---
+
+add new format: variables

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

@@ -38,10 +38,10 @@ export const PAGES = {
     return `${params?.lang ? `/${params?.lang}` : ''}/site${appendSp({ limit: params.limit })}`
   },
   lang_site_id: (
-    params: { lang?: 'fr' | 'hu' | undefined; id?: number; limit?: number; demo?: string } = {},
+    params: { lang?: 'fr' | 'hu' | undefined; id?: string; limit?: number; demo?: string } = {},
   ) => {
     params.lang = params.lang ?? 'fr'
-    params.id = params.id ?? 7
+    params.id = params.id ?? 'Vienna'
     return `${params?.lang ? `/${params?.lang}` : ''}/site/${params.id}${appendSp({
       limit: params.limit,
       demo: params.demo,

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

@@ -50,7 +50,7 @@ export type Options<T extends ExtendTypes = ExtendTypes> = {
    * PAGES.site_id_two_hello
    * ```
    */
-  format?: '/' | '_'
+  format?: '/' | '_' | 'variables'
 
   /**
    * default is: `string | number`
@@ -621,13 +621,25 @@ export const run = (options?: Options) => {
  */
 `,
       // consts
-      objTypes
-        .map(c => {
-          return `export const ${c.type} = {
+      options?.format === 'variables'
+        ? objTypes
+            .map(c => {
+              return c.files
+                .map(key => {
+                  const [first, ...rest] = key.prop.split(':')
+
+                  return `export const ${c.type}_${first.slice(1, -1)} = ${rest.join(':')}`
+                })
+                .join('\n')
+            })
+            .join(`\n\n`)
+        : objTypes
+            .map(c => {
+              return `export const ${c.type} = {
   ${c.files.map(key => key.prop).join(',\n  ')}
 }`
-        })
-        .join(`\n\n`),
+            })
+            .join(`\n\n`),
       `
 const appendSp = (sp?: Record<string, string | number | undefined>) => {
   if (sp === undefined) return ''

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

@@ -233,7 +233,7 @@ describe('run()', () => {
         lang_site_id: {
           explicit_search_params: { limit: { type: 'number' }, demo: { type: 'string' } },
           params: {
-            id: { type: 'number', default: 7 },
+            id: { type: 'string', default: '"Vienna"' },
             lang: { type: "'fr' | 'hu' | undefined", default: '"fr"' },
           },
         },
@@ -250,7 +250,7 @@ describe('run()', () => {
       ACTIONS: {
         lang_site_contract_siteId_contractId: {
           explicit_search_params: {
-            extra: { type: "'A' | 'B'", default: 'A' },
+            extra: { type: "'A' | 'B'", default: '"A"' },
           },
         },
       },
@@ -291,9 +291,9 @@ describe('run()', () => {
         \\"lang_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 })}\`
             },
-        \\"lang_site_id\\": (params: {lang?: ('fr' | 'hu' | undefined), id?: (number), limit?: (number), demo?: (string)}= {}) =>  {
+        \\"lang_site_id\\": (params: {lang?: ('fr' | 'hu' | undefined), id?: (string), limit?: (number), demo?: (string)}= {}) =>  {
           params.lang = params.lang ?? \\"fr\\"; 
-          params.id = params.id ?? 7; 
+          params.id = params.id ?? \\"Vienna\\"; 
               return \`\${params?.lang ? \`/\${params?.lang}\`: ''}/site/\${params.id}\${appendSp({ limit: params.limit, demo: params.demo })}\`
             },
         \\"lang_site_contract_siteId_contractId\\": (params: {lang?: ('fr' | 'en' | 'hu' | 'at' | string), siteId: (string | number), contractId: (string | number), limit?: (number)}) =>  {
@@ -324,7 +324,7 @@ describe('run()', () => {
               return \`\${params?.lang ? \`/\${params?.lang}\`: ''}/site?/\${action}\`
             },
         \\"lang_site_contract_siteId_contractId\\": (action: 'sendSomething', params: {lang?: ('fr' | 'en' | 'hu' | 'at' | string), siteId: (string | number), contractId: (string | number), extra?: ('A' | 'B')}) =>  {
-          params.extra = params.extra ?? A; 
+          params.extra = params.extra ?? \\"A\\"; 
               return \`\${params?.lang ? \`/\${params?.lang}\`: ''}/site_contract/\${params.siteId}-\${params.contractId}?/\${action}\${appendSp({ extra: params.extra })}\`
             }
       }

packages/vite-plugin-kit-routes/vite.config.ts

@@ -34,7 +34,7 @@ export default defineConfig({
         lang_site_id: {
           explicit_search_params: { limit: { type: 'number' }, demo: { type: 'string' } },
           params: {
-            id: { type: 'number', default: 7 },
+            id: { type: 'string', default: '"Vienna"' },
             lang: { type: "'fr' | 'hu' | undefined", default: '"fr"' },
           },
         },

website/src/pages/docs/tools/06_vite-plugin-kit-routes.mdx

@@ -152,6 +152,8 @@ your `+page.svelte` | `+server.ts` | `+page.server.ts`.
 
 <Callout>You can make use of `ctrl + space` to discover config options. 🎉</Callout>
 
+---
+
 - What kind of person are you: `PAGES['/info/terms']` or `PAGES.info_terms` ?
 
 _You can choose anyway_ 😜
@@ -212,6 +214,27 @@ kitRoutes<KIT_ROUTES>({
 })
 ```
 
+- You are concerned about `code splitting` and/or `privacy` ? Let's generate variables instead of
+  objects!
+
+```ts filename="vite.config.ts"
+kitRoutes({
+  format: 'variables'
+})
+```
+
+```ts filename="src/lib/ROUTES.ts" {7-9}
+// With format: '_', it was like 👇
+// export const PAGES: {
+//  main: '/main',
+//  about '/about'
+// }
+
+// With format: 'variables' it's like 👇
+export const PAGES_main = '/main'
+export const PAGES_about '/about'
+```
+
 - You want to use some `LINKS` in different places in your app? Let's show you what we can do:
 
 ```ts filename="vite.config.ts"