Support TypeScript "moduleResolution": "node16"

[hirasso]

Description of the issue

If a consumer project's compilerOptions.moduleResolution is set to node16, swup's types can't be resolved anymore. Here's a screenshot:

And one of the index.d.ts:

How to reproduce the issue

Add this to the tsconfig.json of a project that imports "swup":

{
  "compilerOptions": {
    "moduleResolution": "node16",
  }
}

Now TypeScript can't resolve swup's types anymore, since they are all using unqualified imports.

Proposed Solution

All types should use qualified exports. So for index.d.ts, instead of

import Swup, { Options } from './Swup';
import { Plugin } from './modules/plugins';
import { Handler } from './modules/events';
export default Swup;
export * from './helpers';
export * from './utils';
export type { Options, Plugin, Handler };

it should be:

import Swup, { Options } from './Swup.js';
import { Plugin } from './modules/plugins.js';
import { Handler } from './modules/events.js';
export default Swup;
export * from './helpers.js';
export * from './utils.js';
export type { Options, Plugin, Handler };

and so on. I tested this and it works with both moduleResolution: node as well as moduleResolution: node16. EDIT: Weird... it just worked for a bit with the qualified imports in the d.ts files, but now it doesn't anymore. Not sure what changed... 🤔

Before creating this issue...

• Have you provided all helpful information available?
• Have you checked closed issues for similar/related problems?

[hirasso]

Found the issue. Seems like the "type" field in swup's package.json isn't working in node16. When adding apath to swup's types manually, the resolution starts working:

{
  "compilerOptions": {
    "moduleResolution": "node16",
    "paths": {
      "swup": ["./node_modules/swup/dist/types/index.d.ts"]
    }
  }
}

[daun]

So is there an obvious solution? Adding file extensions? Maybe it's looking for a types property, not type?

[hirasso]

No obvious solution, yet... swup is already using the types property:

{
  "types": "dist/types/index.d.ts",
}

@gmrchk do you have an idea what's going on?

[hirasso]

I think I found the issue. Swup just needs to use fully qualified imports throughout it's code base as well. Then microbundle will also export the correct types, as described here. I'll create a PR.

[hirasso]

Scratch that – I was able to switch from jest to vitest to allow for esm types, but actually forgot that I still had the "paths" option set in my test project's package.json file 🤦:

{
  "compilerOptions": {
    "moduleResolution": "node16",
    "paths": {
      "swup": ["./node_modules/swup/dist/types/index.d.ts"]
    }
  }
}

THIS is what makes it work. I don't get it...