Automatically populate compilerOptions.paths in the generated .svelte-kit/tsconfig.json file based on svelte.config.js

[aradalvand]

Describe the problem

Currently, when you want to add aliases you need to add them in two places, namely svelte.config.js and tsconfig.json, and also remember to always keep them in sync.
So, for example:
svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),
    kit: {
        vite: {
            resolve: {
                alias: {
                    $components: path.resolve('./src/lib/components'),
                    $actions: path.resolve('./src/lib/actions'),
                    $common: path.resolve('./src/lib/common'),
                    $stores: path.resolve('./src/lib/stores'),
                },
            },
        },
    },
};

export default config;

You'll have to have:
tsconfig.json:

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "paths": {
            "$components/*": ["src/lib/components/*"],
            "$actions/*": ["src/lib/actions/*"],
            "$common/*": ["src/lib/common/*"],
            "$stores/*": ["src/lib/stores/*"]
        }
    }
}

Actually, you also have to add the default $lib alias to your tsconfig.json as well, since otherwise SvelteKit will display a warning complaining about this. So it'll be more like:
tsconfig.json:

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "paths": {
            "$lib":["src/lib"],
            "$lib/*":["src/lib/*"],
            "$components/*": ["src/lib/components/*"],
            "$actions/*": ["src/lib/actions/*"],
            "$common/*": ["src/lib/common/*"],
            "$stores/*": ["src/lib/stores/*"]
        }
    }
}

Which is not exactly a great developer experience.

Describe the proposed solution

Since we now have a tsconfig.json in the .svelte-kit directory, it would be nice if the aliases defined in svelte.config.js were automatically detected and added to the auto-generated .svelte-kit/tsconfig.json file, so as to eliminate the need for the developer to do this manually.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

[dominikg]

This might help https://github.com/aleclarson/vite-tsconfig-paths

[RB-Lab]

@aradalvand, if it is not unavoidable for you to have alias in vite config, if you move it two levels upward at kit level (as described in doc), Svelte-kit seems to be already auto-populating .svelte-kit/tsconfig.json with those. And it also looks like when you describe aliases in vite section it breaks this behavior for $lib as well. I.e.

kit: {
  preprocess: preprocess(),
  alias: {
    $stores: path.resolve('./src/lib/stores'),
  }
},

Works, adds

"paths": {
  "$lib": [
    "src/lib"
  ],
  "$lib/*": [
    "src/lib/*"
  ],
  "$stores": [
    "src/lib/stores"
  ],
  "$stores/*": [
    "src/lib/stores/*"
  ]
},

to .svelte-kit/tsconfig.json

However

  kit: {
    preprocess: preprocess(),
    vite: {
      resolve: {
        alias: {
          $stores: path.resolve('./src/lib/stores'),
        },
      },
    },
  },

Doesn't works and breaks $lib as well.

[dummdidumm]

Duplicate of #4734, was solved through #4964