Dear dudes. SvelteKit 2 is released. That means that my previous post on that topic is garbage now.
For those, who builds enterprise projects, not just landing-pages, and want to name your files and organise your folders based on domains (DDD), or based on technical convenience, rather than on url structure dictated by “marketing needs”; and get full control and flexibility, like — two different urls match one component etc. — please — welcome.
So. After a full day of research and code I’ve ended up with..
As a first step, let’s check what is going on in SvelteKit’s depths. Open file:
node_modules/@sveltejs/kit/src/core/sync/create_manifest_data/index.js Navigate to:
292: prevent_conflicts(routes);
And print:
+ 293: console.log(routes);
So, this complex array of objects it the result of defaults walking through file structure. And that’s exactly what we have to define somehow and somewhere in code.
So, what literally have I done…
I. In root of src/ create routes.js…
… where I’ve places both routes array with custom basic rules and router() function that transforms that rules to array of objects that we’ve seen in console.log(routes):
const routes = [
{id: 'home', pattern: /^/$/, page: 'home.svelte', layout: 'layout.svelte', segment: ''},
{id: 'article', pattern: /^/([^/]+?)/?$/, params: ['slug'], page: 'article/article.svelte', layout: 'article/layout.svelte', parent_layout_segment: ''}
]
export function router(routes_dir) {
const result = []
for (const route of routes) {
const parent = result.find(o => o.segment === route.parent_layout_segment)
const new_route = {
parent: parent,
id: route.id,
segment: route.segment,
pattern: route.pattern,
params: (route.params || []).map((param, index) => ({name: param, matcher: undefined, optional: false, rest: false, chained: false})),
layout: {
depth: route.layout_depth || route.depth || 0,
child_pages: [],
component:route.layout && routes_dir + route.layout,
shared: route.layout_js && routes_dir + route.layout_js,
server: route.layout_server_js && routes_dir + route.layout_server_js,
},
error: {
depth: route.error_depth || route.depth || 0,
component: route.error && routes_dir + route.error
},
leaf: {
depth: route.leaf_depth || route.depth || 0,
shared: route.page_js && routes_dir + route.page_js,
server: route.page_server_js && routes_dir + route.page_server_js,
component: routes_dir + route.page,
},
endpoint: route.server_js && {
file: routes_dir + route.server_js,
},
page: null, // Have no idea what is it for, but let it be here, just not to forget
}
result.push(new_route)
}
return result;
}
About params in routes object:
-
id — just need to be unique. And! It is something that is accessible in
$pagestore fromimport {page} from '$app/stores';, and can be used as main container css class, etc. -
segment — also need to be unique, and it is needed to create nested layouts. So, another rule can use
parent_layout_segmentto refer parent layout (empty string is also ok). -
params — needed in case of dynamic slugs. Each round parentheses in
patternshould be presented inparamsarray, like:{pattern: /^/(d+)/(d+)/?$/}, params: ['year', 'month']} - You know, SvelteKit do not have only
+page.svelteand+layout.svelte, but also: -
+page.jsso{ ... page_js: 'my_page.js' ... }could be passed in rule; -
+page.server.js—>page_server_js; -
+server.js—>server_js; -
+layout.js—>layout_js; -
+layout.server.js—>layout.server_js; - Didn’t notice any changes in playing with some
depthparam, but, just in case we can pass: -
layout_depth; -
page_depth; -
error_depth; -
depth(global);
Just in case we’ll find one day that it matters)
II. In svelte.config.js
import adapter from '@sveltejs/adapter-auto';
+ import {router} from './routes.js'; // <— add this
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ routes: router(), // <— add this
kit: {
adapter: adapter(),
}
};
export default config;
III. In svelte.config.js
In already familiar
node_modules/@sveltejs/kit/src/core/sync/create_manifest_data/index.js:
1) Replace file system walking result with our code routes
292: prevent_conflicts(routes);
+ 293: routes.length = 0;
+ 294: routes.push(...config.routes);
2) We do not need any magic sorting any more
372: return {
373: nodes,
- 374: routes: sort_routes(routes)
+ 375: routes: routes
376: };
IV. Install patch-package, so this changes will be automatically applied in future without manual hacks:
> npm i patch-package
> npx patch-package @sveltejs/kit
package.json:
{
...
"scripts": {
...
"postinstall": "patch-package" // <— add this
That’s all! Easy 😀
