Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use the correct imports in the generated .d.ts files #1742

Merged
merged 2 commits into from
Sep 9, 2024

Conversation

adamziel
Copy link
Collaborator

@adamziel adamziel commented Sep 9, 2024

When using @wp-playground/client with TypeScript, the IDE doesn't seem
to be able to recognize types. This is because the published types
contain fragments such as:

import { Emscripten, MountHandler, PHP } from '../../../universal';

Which are relative to the build directory on the building machine.

This PR sets the pathsToAliases option of the vite-dts-plugin to
false to retain the packages names in those declaration files.

import { Emscripten, MountHandler, PHP } from '@php-wasm/universal';

Testing instruction

Run npm run build and grep the dist directory for ../../. There
should be no matches:

grep '\.\./\.\./' -R ./ | grep '\.d\.ts' | grep import

Inspect a few files, such as dist/packages/php-wasm/web/lib/get-php-loader-module.d.ts, and confirm they import from the proper package names.

Closes #1725

cc @brandonpayton

When using @wp-playground/client with TypeScript, the IDE doesn't seem
to be able to recognize types. This is because the published types
contain fragments such as:

```ts
import { Emscripten, MountHandler, PHP } from '../../../universal';
```

Which are relative to the build directory on the building machine.

This PR sets the `pathsToAliases` option of the `vite-dts-plugin` to
false to retain the packages names in those declaration files.

```ts
import { Emscripten, MountHandler, PHP } from '@php-wasm/universal';
```

 ## Testing instruction

Run `npm run build` and grep the `build` directory for `../../`. There
should be no matches:

```sh
grep '\.\./\.\./' -R ./ | grep '\.d\.ts' | grep import
```

cc @brandonpayton
@adamziel adamziel added [Type] Bug An existing feature does not function as intended [Type] Developer Experience labels Sep 9, 2024
Copy link
Member

@brandonpayton brandonpayton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this works well. Thank you!

Intuitively, I would have thought the config update would be pathsToAliases: true instead of pathsToAliases: false because, in development, @wp-playground/client maps to a relative path. In that arrangement, isn't @wp-playground/client the alias, and wouldn't that mean we'd want the build to ensure the type declarations import/export using those aliases?

Regardless of whether my understanding is conceptually correct on the TS side, it looks like pathsToAliases: false leads to the desired outcome with vite-dts-plugin.

@brandonpayton
Copy link
Member

I also inspected export ... from paths, and everything looks good!

@brandonpayton brandonpayton merged commit 2461532 into trunk Sep 9, 2024
5 checks passed
@brandonpayton brandonpayton deleted the fix-built-types-imports branch September 9, 2024 14:32
@adamziel
Copy link
Collaborator Author

adamziel commented Sep 9, 2024

Intuitively, I would have thought the config update would be pathsToAliases: true instead of pathsToAliases: false

I thought the same thing! I tried with true first, but nothing happened and I saw that was the default value so I tried false without much expectations and it worked!

@brandonpayton
Copy link
Member

I saw that was the default value so I tried false without much expectations and it worked!

I'm so glad you tried it! Thanks again :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended [Type] Developer Experience
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Type declarations broken in NPM packages
2 participants