@sapui5/ts-types-esm - third party types (three, jquery, qunit) should be listed as dependencies in package.json

[DetachHead]

otherwise you get all these compile errors, then you have to track down the missing dependency manually:

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19001:19 - error TS2503: Cannot find namespace 'THREE'.

19001       parentNode: THREE.Object3D,
                        ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19010:25 - error TS2503: Cannot find namespace 'THREE'.

19010       insertBeforeNode: THREE.Object3D,
                              ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19019:8 - error TS2503: Cannot find namespace 'THREE'.

19019     ): THREE.Object3D;
             ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19210:8 - error TS2503: Cannot find namespace 'THREE'.

19210     ): THREE.Object3D[];
             ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19374:37 - error TS2503: Cannot find namespace 'THREE'.

19374       materialToReplace: Material | THREE.Material,
                                          ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19378:28 - error TS2503: Cannot find namespace 'THREE'.

19378       material: Material | THREE.Material
                                 ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19436:20 - error TS2503: Cannot find namespace 'THREE'.

19436       boundingBox: THREE.Box3
                         ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19445:20 - error TS2503: Cannot find namespace 'THREE'.

19445       boundingBox: THREE.Box3
                         ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19517:20 - error TS2503: Cannot find namespace 'THREE'.

19517       boundingBox: THREE.Box3
                         ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19563:14 - error TS2503: Cannot find namespace 'THREE'.

19563       scene: THREE.Scene
                   ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19606:20 - error TS2503: Cannot find namespace 'THREE'.

19606     getSceneRef(): THREE.Scene;
                         ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19614:17 - error TS2503: Cannot find namespace 'THREE'.

19614       nodeRefs: THREE.Object3D | THREE.Object3D[]
                      ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19614:34 - error TS2503: Cannot find namespace 'THREE'.

19614       nodeRefs: THREE.Object3D | THREE.Object3D[]
                                       ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19624:8 - error TS2503: Cannot find namespace 'THREE'.

19624     ): THREE.Object3D | THREE.Object3D[];
             ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19624:25 - error TS2503: Cannot find namespace 'THREE'.

19624     ): THREE.Object3D | THREE.Object3D[];
                              ~~~~~

node_modules/@sapui5/ts-types-esm/types/sap.ui.vk.d.ts:19959:19 - error TS2503: Cannot find namespace 'THREE'.

19959       quaternion: THREE.Quaternion,

[akudev]

Hi, thanks for the suggestion!
I triggered changes that add

  "dependencies": {
    "@types/jquery": "3.6.0",
    "@types/qunit": "2.3.2",
    "@types/three": "0.125.3"
}

for SAPUI5 and

  "dependencies": {
    "@types/jquery": "3.6.0",
    "@types/qunit": "2.3.2"
  }

for OpenUI5.
That's referencing the currently included version of each library, but in case of THREE.js, there are no type definitions for the currently used version r119, so I used the next higher version to ensure all potentially used APIs are covered.

That's only ts-types-esm so far, I'll check the legacy types later.

[akudev]

Unfortunately too late for 1.97, which has just been released. -> 1.98

[codeworrior]

@akudev didn't we explicitly decide against such dependencies as we didn't want to enforce a certain ts-wrapper? Esp. for jQuery, we saw this as an issue.

[DetachHead]

@codeworrior perhaps optionalDependencies could be used instead then? https://docs.npmjs.com/cli/v8/configuring-npm/package-json#optionaldependencies

or maybe just document somewhere the "recommended" types package for ones like jquery where there could be multiple options?

[akudev]

@codeworrior did we? Hm. Then can we revisit in favor of easier usage?

@DetachHead What to install for jQuery is documented in various places, e.g. in the step-by-step setup guide.

But a) that's one step more to do and b) from the fact that the mentioned versions are already out of sync with the ones bundled in UI5, one can see that it's not a good idea. So I would love to find an automatic solution.

I'd be satisfied if one could actively opt OUT of using the default jQuery types in the rare cases where this is desired. This works by setting the @types in tsconfig.json and explicitly enumerating the types that should be used, thus ignoring all others:

"compilerOptions": {
   "types": [ "@openui5/ts-types-esm" ]
}

What do you think @codeworrior ?

Interestingly, DefinitelyTyped automatically adds the qunit and jquery dependencies to package.json (this file is not added by us). possibly triggered by them being referenced in index.d.ts. But DefinitelyTyped uses "*" as version.

This means @types/openui5 come with jQuery included (but possibly the wrong version of it) and @openui5/ty-types-esm come without (unless I do the suggested change).

optionalDependencies don't seem right, as they ARE always installed when available. They are just not causing issues when unavailable.

[akudev]

@DetachHead Not sure whether this was mentioned before, but with skipLibCheck: true you will not see these errors.

But regardless, we have decided to add the dependencies. The change has now been submitted (in an internal repo for build stuff) and will be in effect with version 1.100, as the codesplit for 1.99 has already happened.

SAPUI5 types have then the following:
"dependencies": {
"@types/jquery": "3.5.13",
"@types/qunit": "2.5.4",
"@types/three": "0.125.3",
"@types/offscreencanvas": "2019.6.4"
}
(always the highest patch version of the closest major/minor version available)
The last one is needed due to types referenced internally in THREE.js.

Thanks!