Typescript support OOTB - almost there, something @glimmer/validator is missing

[gossi]

Heyo,

I was updating my OSS packages the past days and was happy to see the typescript changes in action, this is amazing 🎉👏

Typescript support was delievered out of the box, after I upgraded those packages. Except, I had to pull in an updated dependency of @glimmer/validator - which my guess is one of these packages needs to declare this as dependency itself - I dunno which one though (which I'm opening the ticket for)

Here is the main packages I upgraded to make this work. This is an ember (test) app (with ember-cli-typescript) (usually as part of an addon v2), so pretty basic and "empty". Here are the relevant dependencies:

{
  "devDependencies": {
    "@types/eslint": "^8.4.10",
    "@types/qunit": "^2.19.3",
    "@types/rsvp": "^4.0.4",
    "ember-qunit": "^6.1.1",
    "ember-resolver": "^9.0.0",
    "ember-source": "~4.9.3",
  }
}

Here is types/index.d.t.s for completeness (link for repo at the end):

import 'ember-source/types';
import 'ember-source/types/preview';

so, these are the @types/* packages left, that are still needed (for me). When I run tsc --noEmit, I'm down to this error:

> tsc --noEmit

../../node_modules/.pnpm/@[email protected]/node_modules/@glimmer/validator/dist/types/lib/validators.d.ts:78:45 - error TS2422: A class can only implement an object type or intersection of object types with statically known members.

78 declare class MonomorphicTagImpl implements MonomorphicTag {
                                               ~~~~~~~~~~~~~~


Found 1 error in ../../node_modules/.pnpm/@[email protected]/node_modules/@glimmer/validator/dist/types/lib/validators.d.ts:78

 ELIFECYCLE  Command failed with exit code 2.

This is trying to consume @glimmer/[email protected] but at the time of writing this, @glimmer/validator is available in version v0.84.2 - almost quite doubled the version. When I add this as dev dependency: @glimmer/[email protected] - then checking for types does not complain anything.

Reference repo: https://github.com/gossi/frontend-configs/tree/main/testing/ember-app

Ref: #20162

[NullVoxPopuli]

I'm thinking for apps and v1 addons, we should generate a .npmrc
with resolution-mode=highest... or make glimmer v1.
this is mostly a problem pre v1 where every version is a breaking change, and we don't want to install the "lowest in-range version for maximum compatibility testing" (which is why the behavior exists).

For those running in to this right now though, you can work around the issue by setting overrides/resolutions for @glimmer/validator (and any other @Glimmer package you see pre v0.84), and pin it to ~ v84 (or whatever the latest is)

example:
https://github.com/NullVoxPopuli/limber/blob/main/package.json#L47-L52

  "pnpm": {
    "overrides": {
      "@glimmer/compiler": "^0.84.3",
      "@glimmer/syntax": "^0.84.3",
      "@glimmer/validator": "^0.84.3",
      "@glimmer/reference": "^0.84.3",
      "@glimmer/manager": "^0.84.3",
      "@glimmer/interfaces": "^0.84.3",

[boris-petrov]

@NullVoxPopuli there's also @glimmer/util which also is duplicated with an old version because of @glimmer/component.

[leepfrog]

I was diagnosing a type checking issue that happens when using ember-source based types with a fresh application generated from [email protected] (read more here). The type checking error happened because older versions of @glimmer/validator were installed by default.

I updated my .npmrc with resolution-mode=highest, deleted my pnpm lock file/node modules, and re-ran pnpm install to try to fix the issue. The older versions of @glimmer/validator were still installed -- so the type checking error persisted.

I then updated my package.json with the pnpm overrides suggested above and ran pnpm install. This does resolve the type checking issue.

---

A separate troubleshooting step I took was to install [email protected], generate a new application from that, and test. After generating the application, I updated global.d.ts to import the ember-source types, and removed the appropriate @types/ember* packages. This worked without encountering any type checking issues.