SvelteKit: How to make code-based router, instead of file-based router [July 2022]

This is an old article. See newer instruction

Hello dudes.
Just wanted to share how do I route SvelteKit in JS.

In node_modules/@sveltejs/kit/dist/chunks/sync.js:471 there is an iteration over some units object that was constructed based on .svelte files in routes/ folder in order to construct some final a little bit more complex routes object, that will actually serve routes:

Array.from(units.values())
    .sort(compare)
    .forEach((unit) => {
        ...
        routes.push({...})
        ...

console.log(units.values()) will give us something like:

[Map Iterator] {
  {
    id: '',
    pattern: /^\/$/,
    segments: [],
    page: { a: [Array], b: [Array] },
    endpoint: undefined
  },
  {
    id: '[id]',
    pattern: /^\/([^/]+?)\/?$/,
    segments: [ [Array] ],
    page: { a: [Array], b: [Array] },
    endpoint: undefined
  }
}

So, the goal is to create our custom units somewhere, let's say urls and make SvelteKit iterate of it instead of units object.

So, what literally has to be done:

0) First, we have to check, that __layout.svelte at least with <slot/> tag inside, and __error.svelte already exist in our routes/ folder.
1) Create src/urls.jswith our routes, let's say — to home.svelte with '/' and article.svelte mapped by any string in browser's url:

const l = 'src/routes/__layout.svelte';
const b = ['src/routes/__error.svelte'];

const urls = [
    {pattern: /^\/$/, id: '', page: {a: [l, 'src/routes/home.svelte'], b }},
    {pattern: /^\/([^/]+?)\/?$/, id: '[id]', page: {a: [l, 'src/routes/article.svelte'], b }},
]

export default urls;

2) In svelte.config.js:

import urls from './src/urls.js'; // <— add this

const config = {
  urls, // <— add this
  kit: {
    adapter: adapter()
  }
};

3) In node_modules/@sveltejs/kit/dist/chunks/sync.js:

- Array.from(units.values())
-    .sort(compare)
+ Array.from(config.urls.values())

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!