Error {$page.status}
7 |{$page.error?.message}
8 || ID | 11 |Title | 12 |SEO friendly URL | 13 |ID URL | 14 |
|---|---|---|---|
| {id} | 20 |{title} | 21 |22 | 23 | /{healer.createUrl(id, title)} 24 | 25 | | 26 |27 | /{id} 28 | | 29 |
{$page.error?.message}
8 |{JSON.stringify(data.article, null, 4)}
10 |
11 | 12 | You can change or remove the URL before the ID ({data.article.id}) and the page should 13 | still load. 14 |
15 | 16 | Go deeper 17 | -------------------------------------------------------------------------------- /src/routes/[id]/details/+page.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | You have reached the details page! 5 | -------------------------------------------------------------------------------- /src/routes/[id]/details/[innerId]/+page.server.ts: -------------------------------------------------------------------------------- 1 | import type { PageServerLoad } from './$types.js'; 2 | import { healer } from '$lib/selfheal.js'; 3 | import { error, redirect } from '@sveltejs/kit'; 4 | import { db } from '$lib/db.js'; 5 | 6 | export const load: PageServerLoad = async ({ params, url }) => { 7 | const identifier = healer.parseId(params.innerId); 8 | 9 | const article = db.articles.find((article) => String(article.id) === identifier); 10 | if (!article) throw error(404, `Article "${identifier}" not found`); 11 | 12 | const expectedUrl = healer.createUrl(article.id, article.title, url.searchParams); 13 | 14 | const valid = healer.validate(expectedUrl, params.innerId, url.searchParams); 15 | if (!valid) throw redirect(301, expectedUrl); 16 | 17 | return { article, slug: params.innerId }; 18 | }; 19 | -------------------------------------------------------------------------------- /src/routes/[id]/details/[innerId]/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | Home 6 | 7 |{JSON.stringify(data.article, null, 4)}
10 |
11 | 12 | You can change or remove the URL before the ID ({data.article.id}) and the page should 13 | still load. 14 |
15 |16 | Note, however, that changing the parent slug will not heal that part of the URL as there is 17 | currently no clean way (that I know) to "listen" to that and invalidate it without checking on 18 | every nested child request, which is likely wasted performance and sacrifices loading time for 19 | little gains. 20 |
21 | -------------------------------------------------------------------------------- /src/tests/identifier-handlers/hyphen-identifier-handler.test.ts: -------------------------------------------------------------------------------- 1 | import { HyphenIdentifierHandler } from '$lib/identifier-handlers/hyphen-identifier-handler.js'; 2 | import { describe, expect, it } from 'vitest'; 3 | 4 | describe('HyphenIdentifierHandler', () => { 5 | it('adds a hyphen between the slug and identifier', () => { 6 | const slug = 'any-given-slug'; 7 | const identifier = '123'; 8 | expect(HyphenIdentifierHandler.join(slug, identifier)).toBe('any-given-slug-123'); 9 | }); 10 | 11 | it('separates the slug from the identifier', () => { 12 | const slug = 'any-given-slug-123'; 13 | expect(HyphenIdentifierHandler.separate(slug)).toEqual({ 14 | identifier: '123', 15 | slug: 'any-given-slug' 16 | }); 17 | }); 18 | 19 | it('returns only the ID if the slug is empty', () => { 20 | const slug = ''; 21 | const identifier = '123'; 22 | expect(HyphenIdentifierHandler.join(slug, identifier)).toBe('123'); 23 | }); 24 | 25 | 26 | it('handles multiple hyphens in the slug when separating', () => { 27 | const slug = 'multiple-hyphen-test-identifier'; 28 | expect(HyphenIdentifierHandler.separate(slug)).toEqual({ 29 | identifier: 'identifier', 30 | slug: 'multiple-hyphen-test' 31 | }); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /src/tests/route-comparators/named-comparator.test.ts: -------------------------------------------------------------------------------- 1 | import { NamedComparator } from '$lib/route-comparators/named-comparator.js'; 2 | import { describe, expect, it } from 'vitest'; 3 | 4 | describe('NamedComparator', () => { 5 | it.each([ 6 | { 7 | description: 'returns true because both values are the same object', 8 | input: ['any-given-slug-123', 'any-given-slug-123'], 9 | expected: true, 10 | }, 11 | { 12 | description: 'returns false because values are unequal using ===', 13 | input: ['any-given-slug-123', 'any-given-slug-456'], 14 | expected: false, 15 | }, 16 | { 17 | description: 'returns false because the named comparator simply checks for equality of the strings', 18 | input: ['any-given-slug-123', 'any-given-slug-123?foo=bar'], 19 | expected: false, 20 | }, 21 | ])('%s', ({ input, expected }: { input: string[], expected: boolean }) => { 22 | const [a, b] = input; 23 | expect(NamedComparator(a, b)).toBe(expected); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/tests/slug-sanitizers/kebab-slug-sanitizer.test.ts: -------------------------------------------------------------------------------- 1 | import { KebabSlugSanitizer } from '$lib/slug-sanitizers/kebab-slug-sanitizer.js'; 2 | import { describe, expect, it } from 'vitest'; 3 | 4 | describe('KebabSlugSanitizer', () => { 5 | it('makes the slug lowercase', () => { 6 | const slug = 'AN UPPERCASE SLUG'; 7 | expect(KebabSlugSanitizer(slug)).toBe('an-uppercase-slug'); 8 | }); 9 | 10 | it('removes non-alphanumeric characters', () => { 11 | const badCharacters = [ 12 | '!', 13 | '@', 14 | '#', 15 | '$', 16 | '%', 17 | '^', 18 | '&', 19 | '*', 20 | '(', 21 | ')', 22 | '=', 23 | '+', 24 | '[', 25 | ']', 26 | '{', 27 | '}', 28 | '|', 29 | '\\', 30 | '/', 31 | '<', 32 | '>', 33 | '?', 34 | ',', 35 | '.', 36 | '`', 37 | '~', 38 | "'", 39 | '"', 40 | ';', 41 | ':', 42 | ]; 43 | 44 | badCharacters.forEach((char) => { 45 | it(`removes ${char}`, () => { 46 | expect(KebabSlugSanitizer(char)).toBe(''); 47 | }); 48 | }); 49 | }); 50 | 51 | it('replaces spaces with hyphens and removes multiple hyphens', () => { 52 | const testCases = [ 53 | { input: 'any given slug', expected: 'any-given-slug' }, 54 | { input: 'any--given------slug-123', expected: 'any-given-slug-123' }, 55 | { input: '-any-given-slug-', expected: 'any-given-slug' }, 56 | ]; 57 | 58 | testCases.forEach(({ input, expected }) => { 59 | it(`transforms "${input}" correctly`, () => { 60 | expect(KebabSlugSanitizer(input)).toBe(expected); 61 | }); 62 | }); 63 | }); 64 | 65 | it('handles special characters and accents', () => { 66 | const testCases = [ 67 | { input: 'cliché café', expected: 'cliche-cafe' }, 68 | { input: 'mötörhëäd', expected: 'motorhead' }, 69 | ]; 70 | 71 | testCases.forEach(({ input, expected }) => { 72 | it(`transforms "${input}" correctly`, () => { 73 | expect(KebabSlugSanitizer(input)).toBe(expected); 74 | }); 75 | }); 76 | }); 77 | 78 | it('handles edge cases', () => { 79 | const testCases = [ 80 | { input: '', expected: '' }, // Empty string 81 | { input: ' leading-trailing-whitespaces ', expected: 'leading-trailing-whitespaces' }, 82 | { input: '___underscores___', expected: 'underscores' }, 83 | { input: ' multiple spaces ', expected: 'multiple-spaces' }, 84 | ]; 85 | 86 | testCases.forEach(({ input, expected }) => { 87 | it(`transforms "${input}" correctly`, () => { 88 | expect(KebabSlugSanitizer(input)).toBe(expected); 89 | }); 90 | }); 91 | }); 92 | }); 93 | -------------------------------------------------------------------------------- /src/tests/usage.test.ts: -------------------------------------------------------------------------------- 1 | import { selfheal } from '$lib/index.js'; 2 | import { describe, expect, it } from 'vitest'; 3 | 4 | // Init a healer using the default configuration 5 | const healer = selfheal(); 6 | 7 | describe('URL creator', () => { 8 | it('sanitizes the slug and joins it with the identifier', () => { 9 | const slug = 'An unformatted SLUG'; 10 | const identifier = '123'; 11 | expect(healer.createUrl(identifier, slug)).toBe('an-unformatted-slug-123'); 12 | }); 13 | 14 | it('appends any given search params to the URL', () => { 15 | const slug = 'An unformatted SLUG'; 16 | const identifier = '123'; 17 | const params = new URLSearchParams({ test: 'true', numbers: '999' }); 18 | 19 | expect(healer.createUrl(identifier, slug, params)).toBe( 20 | 'an-unformatted-slug-123?test=true&numbers=999' 21 | ); 22 | }); 23 | 24 | it('handles default configuration if no parameters are provided', () => { 25 | const slug = 'An unformatted SLUG'; 26 | const identifier = '123'; 27 | expect(healer.createUrl(identifier, slug)).toBe('an-unformatted-slug-123'); 28 | }); 29 | 30 | it('handles default configuration if only slug and identifier are provided', () => { 31 | const slug = 'An unformatted SLUG'; 32 | const identifier = '123'; 33 | expect(healer.createUrl(identifier, slug)).toBe('an-unformatted-slug-123'); 34 | }); 35 | }); 36 | 37 | describe('URL parseId helper', () => { 38 | it('helper returns the correct identifier from the URL', () => { 39 | expect(healer.parseId('an-unformatted-slug-123')).toBe('123'); 40 | }); 41 | 42 | it('handles default configuration if only slug is provided', () => { 43 | const slug = 'an-unformatted-slug-123'; 44 | expect(healer.parseId(slug)).toBe('123'); 45 | }); 46 | 47 | it('handles default configuration if empty slug is provided', () => { 48 | const slug = ''; 49 | expect(healer.parseId(slug)).toBe(''); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dominic-schmid/svelte-selfheal/5cd0438bb43115e486acd3e89499932b6c3b035c/static/favicon.png -------------------------------------------------------------------------------- /static/svelte-selfheal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dominic-schmid/svelte-selfheal/5cd0438bb43115e486acd3e89499932b6c3b035c/static/svelte-selfheal.gif -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter() 15 | } 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vitest/config'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | test: { 7 | include: ['src/**/*.{test,spec}.{js,ts}'] 8 | } 9 | }); 10 | --------------------------------------------------------------------------------