fix(trusted-types): Use 'trusted-types/lib'

[donmccurdy]

Summary

Replaces 'trusted-types' import with 'trusted-type/lib', as described at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/trusted-types#library-usage.

Background & Context

In a private project (apologies, I've so far been unable to reproduce the issue in a standalone example) I'm seeing seemingly-unrelated errors from TypeScript after updating to dompurify@v3. The errors all seem related to Redux usage. For example:

src/path/to/file.tsx:550:14 - error TS2554: Expected 1 arguments, but got 0.

550     dispatch(setCurrentConnection())
                 ~~~~~~~~~~~~~~~~~~~~

It's not obvious to me how trusted-types would affect Redux or other types, but the only two ways I've found to avoid the error were to (1) make this change to dompurify, or (2) to use package.json#resolutions to point to a non-existent folder and prevent the installation of @type/trusted-types in the first place. While @type/trusted-types is an optional dependency, Yarn currently doesn't provide a real way to prevent installation of a specific optional dependency.

Tasks

I've tested this in my own project with yarn link, and it worked well, but I don't know what "compilation errors for certain configurations" refers to in fix-types.js, so perhaps some testing is needed to make sure my changes do not cause those same errors?

Thanks!

[reduckted]

This breaks the reproduction provided here:
#1035 (comment)

1. Extract the archive.
2. npm i
3. npm i @ngstack/translate
4. Edit node_modules/dompurify/dist/purify.es.d.mts to reference trusted-types/lib instead of trusted-types.
5. npm run build:app

Error: node_modules/dompurify/dist/purify.es.d.mts:171:28 - error TS2304: Cannot find name 'TrustedTypePolicy'.

171     TRUSTED_TYPES_POLICY?: TrustedTypePolicy | undefined;
                               ~~~~~~~~~~~~~~~~~


Error: node_modules/dompurify/dist/purify.es.d.mts:246:9 - error TS2304: Cannot find name 'TrustedHTML'.

246     }): TrustedHTML;
            ~~~~~~~~~~~


Error: node_modules/dompurify/dist/purify.es.d.mts:436:34 - error TS2339: Property 'trustedTypes' does not exist on type 'Window & typeof globalThis'.

436     trustedTypes?: typeof window.trustedTypes;
                                     ~~~~~~~~~~~~

[cure53]

cc @donmccurdy pretty please, and thank you, @reduckted

[donmccurdy]

Thanks @reduckted! Will have a look at this in the next few days.

[donmccurdy]

If we replace the triple-slash directive with this import in purify.es.d.mts...

import type { TrustedHTML, TrustedTypePolicy, TrustedTypePolicyFactory } from 'trusted-types/lib';

...

type WindowLike = Pick<typeof globalThis, 'DocumentFragment' | 'HTMLTemplateElement' | 'Node' | 'Element' | 'NodeFilter' | 'NamedNodeMap' | 'HTMLFormElement' | 'DOMParser'> & {
    ...
    trustedTypes?: TrustedTypePolicyFactory;
};

... the reproduction above is fixed, as well as the issue described in my PR description above. I expect that we don't need the triple-slash directive for ESM code, and this is inside the fixEsmTypes function... but the change affects the CJS types too, and I don't think this is valid for CJS. Hm.

Would it be reasonable to use triple-slash directives from trusted-types for CJS and type imports from trusted-types/lib for ESM?

[reduckted]

@donmccurdy I think you've found the solution. I've created #1075 to assist with verifying the changes to the type declarations.

I think we can even go one step better than modifying the type declarations as a post-build step, and instead actually import from trusted-types/lib as part of the library itself.

In config.ts we can add:

import type { TrustedTypePolicy } from 'trusted-types/lib';

And in purify.ts we can add:

import type { TrustedHTML, TrustedTypesWindow } from 'trusted-types/lib';

and change the WindowLike type like this:

@@ -2006,5 +2007,4 @@ export type WindowLike = Pick<
 > & {
   document?: Document;
   MozNamedAttrMap?: typeof window.NamedNodeMap;
-  trustedTypes?: typeof window.trustedTypes;
-};
+} & Pick<TrustedTypesWindow, 'trustedTypes'>;

The addTrustedTypesReference function can then be removed from fix-types.js. The result of those changes is that purify.es.d.mts ends up with this automatically:

import { TrustedTypePolicy, TrustedHTML, TrustedTypesWindow } from 'trusted-types/lib';

and the same import appears in purify.cjs.d.ts, which seems to work fine according to the TypeScript verification that I added. 🤞

[donmccurdy]

@reduckted those test cases are an awesome addition, thank you!

I've updated this PR to use ESM type imports in the source files as you suggested, and removed the addTrustedTypesReference function. The new tests pass locally.

[cure53]

Thanks everyone :)