diff --git a/.changeset/hip-ways-serve.md b/.changeset/hip-ways-serve.md new file mode 100644 index 000000000..a108b2ab7 --- /dev/null +++ b/.changeset/hip-ways-serve.md @@ -0,0 +1,5 @@ +--- +'vite-plugin-kit-routes': patch +--- + +fix when route is starting with group diff --git a/.changeset/pre.json b/.changeset/pre.json index f22388144..f36f06d16 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -11,10 +11,5 @@ "vite-plugin-watch-and-run": "1.4.3", "website": "1.1.2" }, - "changesets": [ - "little-crews-smell", - "poor-starfishes-complain", - "popular-trains-swim", - "tame-jars-chew" - ] + "changesets": [] } diff --git a/packages/vite-plugin-kit-routes/src/lib/ROUTES.ts b/packages/vite-plugin-kit-routes/src/lib/ROUTES.ts index cb31d0f93..011d27c8b 100644 --- a/packages/vite-plugin-kit-routes/src/lib/ROUTES.ts +++ b/packages/vite-plugin-kit-routes/src/lib/ROUTES.ts @@ -6,6 +6,10 @@ export const PAGES = { _ROOT: `/`, + subGroup: `/subGroup`, + subGroup2: (params: { first: string | number }) => { + return `/subGroup2${appendSp({ first: params.first })}` + }, lang_contract: (params: { lang?: 'fr' | 'en' | 'hu' | 'at' | string } = {}) => { return `${params?.lang ? `/${params?.lang}` : ''}/contract` }, @@ -21,6 +25,9 @@ export const PAGES = { lang_gp_two: (params: { lang?: 'fr' | 'en' | 'hu' | 'at' | string } = {}) => { return `${params?.lang ? `/${params?.lang}` : ''}/gp/two` }, + lang_main: (params: { lang?: 'fr' | 'en' | 'hu' | 'at' | string } = {}) => { + return `${params?.lang ? `/${params?.lang}` : ''}/main` + }, lang_match_id_int: (params: { lang?: 'fr' | 'en' | 'hu' | 'at' | string id: string | number @@ -128,10 +135,13 @@ const appendSp = (sp?: Record) => { export type KIT_ROUTES = { PAGES: { _ROOT: never + subGroup: never + subGroup2: 'first' lang_contract: 'lang' lang_contract_id: 'lang' | 'id' lang_gp_one: 'lang' lang_gp_two: 'lang' + lang_main: 'lang' lang_match_id_int: 'lang' | 'id' lang_site: 'lang' | 'limit' lang_site_id: 'lang' | 'id' | 'limit' | 'demo' @@ -144,6 +154,7 @@ export type KIT_ROUTES = { lang_site_contract_siteId_contractId: 'lang' | 'siteId' | 'contractId' | 'extra' } Params: { + first: never lang: never id: never limit: never diff --git a/packages/vite-plugin-kit-routes/src/lib/plugin.ts b/packages/vite-plugin-kit-routes/src/lib/plugin.ts index ac57e5165..025e3094a 100644 --- a/packages/vite-plugin-kit-routes/src/lib/plugin.ts +++ b/packages/vite-plugin-kit-routes/src/lib/plugin.ts @@ -114,13 +114,23 @@ function generated_file_path(options?: Options) { return options?.generated_file_path ?? 'src/lib/ROUTES.ts' } +export function rmvGroups(key: string) { + let toRet = key + // rmv (groups) + .replace(/\([^)]*\)/g, '') + .replace(/\/+/g, '/') + return toRet +} + export function formatKey(key: string, options?: Options) { + let toRet = rmvGroups(key) + if (options?.object_keys_format === undefined || options?.object_keys_format === '/') { - return key + return toRet } const toReplace = ['/', '[', ']', '(', ')', '-', '='] - let toRet = key + toRet = toRet .split('') .map(c => (toReplace.includes(c) ? '_' : c)) .join('') @@ -191,7 +201,7 @@ export const fileToMetadata = ( options: Options | undefined, useWithAppendSp: boolean | undefined, ) => { - let toRet = original + let toRet = rmvGroups(original) const keyToUse = formatKey(original, options) diff --git a/packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts b/packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts index 72d54aa9c..caf914597 100644 --- a/packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts +++ b/packages/vite-plugin-kit-routes/src/lib/plugins.spec.ts @@ -59,22 +59,36 @@ describe('vite-plugin-kit-routes', () => { `) }) - it('formatKey new type', async () => { + it('formatKey default', async () => { expect(formatKey('/[param]site/[yop](group)/[id]')).toMatchInlineSnapshot( - '"/[param]site/[yop](group)/[id]"', + '"/[param]site/[yop]/[id]"', ) }) - it('formatKey group original', async () => { + it('formatKey /l', async () => { expect( formatKey('/[param]site/[yop](group)/[id]', { object_keys_format: '/' }), - ).toMatchInlineSnapshot('"/[param]site/[yop](group)/[id]"') + ).toMatchInlineSnapshot('"/[param]site/[yop]/[id]"') + }) + + it('formatKey _', async () => { + expect( + formatKey('/[param]site/[yop](group)/[id]', { object_keys_format: '_' }), + ).toMatchInlineSnapshot('"param_site_yop_id"') + }) + + it('formatKey / starting with group', async () => { + expect(formatKey('/(group)/test', { object_keys_format: '/' })).toMatchInlineSnapshot('"/test"') + }) + + it('formatKey _ starting with group', async () => { + expect(formatKey('/(group)/test', { object_keys_format: '_' })).toMatchInlineSnapshot('"test"') }) it('formatKey group original', async () => { expect( formatKey('/[param]site/[yop](group)/[id]', { object_keys_format: '_' }), - ).toMatchInlineSnapshot('"param_site_yop_group_id"') + ).toMatchInlineSnapshot('"param_site_yop_id"') }) it('formatKey ROOT', async () => { diff --git a/packages/vite-plugin-kit-routes/src/routes/(rootGroup)/subGroup/+page.svelte b/packages/vite-plugin-kit-routes/src/routes/(rootGroup)/subGroup/+page.svelte new file mode 100644 index 000000000..e69de29bb diff --git a/packages/vite-plugin-kit-routes/src/routes/(rootGroup)/subGroup2/+page.svelte b/packages/vite-plugin-kit-routes/src/routes/(rootGroup)/subGroup2/+page.svelte new file mode 100644 index 000000000..e69de29bb diff --git a/packages/vite-plugin-kit-routes/src/routes/[[lang]]/+layout.svelte b/packages/vite-plugin-kit-routes/src/routes/+layout.svelte similarity index 96% rename from packages/vite-plugin-kit-routes/src/routes/[[lang]]/+layout.svelte rename to packages/vite-plugin-kit-routes/src/routes/+layout.svelte index 2f69c32ba..833af5b22 100644 --- a/packages/vite-plugin-kit-routes/src/routes/[[lang]]/+layout.svelte +++ b/packages/vite-plugin-kit-routes/src/routes/+layout.svelte @@ -26,7 +26,7 @@
diff --git a/packages/vite-plugin-kit-routes/src/routes/+page.svelte b/packages/vite-plugin-kit-routes/src/routes/+page.svelte index e69de29bb..22b9b04f9 100644 --- a/packages/vite-plugin-kit-routes/src/routes/+page.svelte +++ b/packages/vite-plugin-kit-routes/src/routes/+page.svelte @@ -0,0 +1,22 @@ + + +

Home

+ + diff --git a/packages/vite-plugin-kit-routes/src/routes/[[lang]]/main/+page.svelte b/packages/vite-plugin-kit-routes/src/routes/[[lang]]/main/+page.svelte new file mode 100644 index 000000000..93f1e02a7 --- /dev/null +++ b/packages/vite-plugin-kit-routes/src/routes/[[lang]]/main/+page.svelte @@ -0,0 +1,7 @@ + + +

Main page from Lang

+ +{$page.params.lang} diff --git a/packages/vite-plugin-kit-routes/src/routes/[[lang]]/site_contract/[siteId]-[contractId]/+page.svelte b/packages/vite-plugin-kit-routes/src/routes/[[lang]]/site_contract/[siteId]-[contractId]/+page.svelte index 096461c1e..082a2f646 100644 --- a/packages/vite-plugin-kit-routes/src/routes/[[lang]]/site_contract/[siteId]-[contractId]/+page.svelte +++ b/packages/vite-plugin-kit-routes/src/routes/[[lang]]/site_contract/[siteId]-[contractId]/+page.svelte @@ -9,7 +9,7 @@ const contractId = $page.params.contractId // 🀞 before, random string - // const action = `/site_contract/${siteId}-${contractId}?/sendSomething` + // const action = `/en/site_contract/${siteId}-${contractId}?/sendSomething` // βœ… after, all typed & make sure it exist. // 'vite-plugin-kit-routes', const action = ACTIONS.lang_site_contract_siteId_contractId('sendSomething', { diff --git a/packages/vite-plugin-kit-routes/vite.config.ts b/packages/vite-plugin-kit-routes/vite.config.ts index 3f30b890f..6b4ef6f68 100644 --- a/packages/vite-plugin-kit-routes/vite.config.ts +++ b/packages/vite-plugin-kit-routes/vite.config.ts @@ -18,6 +18,13 @@ export default defineConfig({ extend: { PAGES: { + subGroup2: { + explicit_search_params: { + first: { + required: true, + }, + }, + }, lang_site: { // extra_search_params: 'with', explicit_search_params: { limit: { type: 'number' } }, diff --git a/website/src/pages/docs/tools/06_vite-plugin-kit-routes.mdx b/website/src/pages/docs/tools/06_vite-plugin-kit-routes.mdx index 98cbebec4..95c741039 100644 --- a/website/src/pages/docs/tools/06_vite-plugin-kit-routes.mdx +++ b/website/src/pages/docs/tools/06_vite-plugin-kit-routes.mdx @@ -2,41 +2,76 @@ import { Callout } from '@theguild/components' # ⚑How to - `vite-plugin-kit-routes` -Never be out of sync with your routes again πŸ₯³ +`vite-plugin-kit-routes` automatically updates route references in SvelteKit projects, crucial for +large applications where manual tracking of route changes is error-prone. It simplifies development +by ensuring all route links are consistent and up-to-date, saving time and preventing broken links. -It's very early, things might change! πŸ˜‰ +You will essentially have 3 objects at your disposal: `PAGES`, `SERVERS` and `ACTIONS` and instead +of hardcode strings, you will use these objects that are always up to date with your routes. -By default, no Configuration is needed, it will just infer as much as it can from your project. Then -you will be able to narrow down types & search params. +No more 🀞, now be confident βœ…! + +By default, no Configuration is requiered. Just [Install](#installation) the plugin, and use objects +available in your `$lib/ROUTES.ts` generated file _(always in sync)_. ## Examples -```svelte filename="+page.svelte" {2, 9} +```svelte filename="PAGES - First example" {2, 9} + + + +Terms + + +Terms + +``` + +```svelte filename="PAGES - With 1 route param" {2, 9} -Go to site +Go to site - -Go to site + +Go to site ``` -```svelte filename="+page.svelte" {4, 13} +```svelte filename="PAGES - With 1 Search Param*" {2, 9} + + + +Go to site + + +Go to site +``` + +* You can add a lot of configs to specify search params, types, ... + +```svelte filename="ACTIONS - With a named action" {4, 12}
@@ -54,13 +89,15 @@ npm i -D vite-plugin-kit-routes Add the plugin like this: -```js filename="vite.config.js" +```js filename="vite.config.js" {2, 9} +import { sveltekit } from '@sveltejs/kit/vite' import { kitRoutes } from 'vite-plugin-kit-routes' /** @type {import('vite').UserConfig} */ const config = { plugins: [ - // This is the plugin to add + sveltekit(), + // βœ… Add the plugin kitRoutes() ] } @@ -68,12 +105,25 @@ const config = { export default config ``` -It will create a file `./src/lib/ROUTES.ts` at the start of your dev server & any update of any of +It will generate a file `./src/lib/ROUTES.ts` at the start of your dev server & any update of any of your `+page.svelte` | `+server.ts` | `+page.server.ts`. ## Side Notes -- You can run prettier at the end of the process with something like: +You can make use of `ctrl + space` to discover config options. πŸŽ‰ + +- What kind of person are you: `PAGES['/terms']` or `PAGES.terms` ? + +_You can choose anyway 😜_ + +```ts filename="vite.config.ts" +kitRoutes({ + // object_keys_format: '/' (default) + object_keys_format: '_' +}) +``` + +- You like nice and formated files? You can add **any** cmd after the generation ```ts filename="vite.config.ts" kitRoutes({ @@ -114,7 +164,7 @@ kitRoutes({ }) ``` -- Then, you can add the `KIT_ROUTES` type... It will be crazy good! +- Then, you can add the `KIT_ROUTES` type... It will be crazy good! I'm not sure you are ready! ```ts filename="vite.config.ts" import type { KIT_ROUTES } from '$lib/ROUTES' @@ -124,3 +174,8 @@ kitRoutes({ // Conf }) ``` + +--- + +Let me know what I forgot to add on [TwiX](https://twitter.com/jycouet), or what you would like to +see in the future. πŸ™