SvelteKit에서 JS를 통해 경로 정의

안녕 친구들.
JS에서 SvelteKit을 라우팅하는 방법을 공유하고 싶었습니다.
node_modules/@sveltejs/kit/dist/chunks/sync.js:471에는 units 폴더에 있는 .svelte 파일을 기반으로 구성된 일부 routes/ 객체에 대한 반복이 있어 최종적으로 조금 더 복잡한routes 객체를 구성하여 실제로 경로를 제공합니다.

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

console.log(units.values())는 다음과 같은 정보를 제공합니다.

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

따라서 목표는 어딘가에 사용자 정의units를 생성하고 urls SvelteKit이 units 객체 대신 이를 반복하도록 만드는 것입니다.

따라서 문자 그대로 수행해야 하는 작업은 다음과 같습니다.

0) 먼저 __layout.svelte가 내부에 <slot/> 태그가 있고 __error.svelte가 이미 routes/ 폴더에 있는지 확인해야 합니다.
1) 경로로 src/urls.js를 생성합니다. 예를 들어 '/'를 사용하여 home.svelte에 브라우저 URL의 문자열로 매핑된 article.svelte를 생성합니다.

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) svelte.config.js에서:

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

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

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

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

4) patch-package를 설치하면 이 변경 사항이 나중에 수동 해킹 없이 자동으로 적용됩니다.

> npm i patch-package
> npx patch-package @sveltejs/kit

package.json :

{
  ...
  "scripts": {
    ...
    "postinstall": "patch-package" // <— add this

그게 다야!

이제 원하는 대로 모든 파일의 이름을 지정하고 저장할 수 있습니다.

SvelteKit 1.0.0-next.377에서 테스트됨