search

ember-cli / ember-page-title

Page title management for Ember.js Apps
https://ember-cli.github.io/ember-page-title/
Other
188 stars 57 forks source link

Loose mode types glint errors #287

Closed tcjr closed 9 months ago

tcjr commented 9 months ago

I'm trying to use the types provided by v8.2.0 in a brand new Ember app.

Here's my starting point, adding the page-title registry entry manually:

import '@glint/environment-ember-loose';
import { ComponentLike, HelperLike } from '@glint/template';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry {
    WelcomePage: ComponentLike;
    'page-title': HelperLike<{
      Args: { Positional: [title: string] };
      Return: void;
    }>;
  }
}

With the above, glint runs with no errors.

Now, when I update the file to use the real types, like this:

import '@glint/environment-ember-loose';
import { ComponentLike } from '@glint/template';
import type PageTitle from 'ember-page-title/template-registry';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry extends PageTitle {
    WelcomePage: ComponentLike;
  }
}

Running glint produces lots of glint/typescript errors that I don't completely understand.

glint output ``` > glint app/templates/application.hbs:1:3 - error TS2769: The given value does not appear to be usable as a component, modifier or helper. No overload matches this call. Overload 1 of 3, '(item: DirectInvokable): AnyFunction', gave the following error. Argument of type 'typeof PageTitle' is not assignable to parameter of type 'DirectInvokable'. Property '[InvokeDirect]' is missing in type 'typeof PageTitle' but required in type 'DirectInvokable'. Overload 2 of 3, '(item: (abstract new (owner: Owner) => InvokableInstance) | null | undefined): (...args: any) => any', gave the following error. Argument of type 'typeof PageTitle' is not assignable to parameter of type 'abstract new (owner: Owner) => InvokableInstance'. Types of construct signatures are incompatible. Type 'new (owner: Owner) => PageTitle' is not assignable to type 'abstract new (owner: Owner) => InvokableInstance'. Property '[Invoke]' is missing in type 'PageTitle' but required in type 'InvokableInstance'. Overload 3 of 3, '(item: ((...params: any) => any) | null | undefined): (...params: any) => any', gave the following error. Argument of type 'typeof PageTitle' is not assignable to parameter of type '(...params: any) => any'. Type 'typeof PageTitle' provides no match for the signature '(...params: any): any'. 1 {{page-title "MyApp"}} ~~~~~~~~~~ node_modules/.pnpm/@glint+template@1.2.1/node_modules/@glint/template/-private/integration.d.ts:19:70 19 export type DirectInvokable = { [InvokeDirect]: T }; ~~~~~~~~~~~~~~ '[InvokeDirect]' is declared here. node_modules/.pnpm/@glint+template@1.2.1/node_modules/@glint/template/-private/integration.d.ts:22:72 22 export type InvokableInstance = { [Invoke]: T }; ~~~~~~~~ '[Invoke]' is declared here. node_modules/.pnpm/ember-page-title@8.2.0_ember-source@5.4.0/node_modules/ember-page-title/declarations/helpers/page-title.d.ts:30:40 - error TS2689: Cannot extend an interface 'Helper'. Did you mean 'implements'? 30 export default class PageTitle extends Helper { ~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/component/helper.d.ts:7:10 - error TS2307: Cannot find module '@ember/-internals/glimmer' or its corresponding type declarations. 7 } from '@ember/-internals/glimmer'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/owner/index.d.ts:33:21 - error TS2307: Cannot find module '@ember/-internals/owner' or its corresponding type declarations. 33 import Owner from '@ember/-internals/owner'; ~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/owner/index.d.ts:88:10 - error TS2307: Cannot find module '@ember/-internals/owner' or its corresponding type declarations. 88 } from '@ember/-internals/owner'; ~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/owner-ext.d.ts:5:31 - error TS2307: Cannot find module '@ember/routing/location' or its corresponding type declarations. 5 import type { Registry } from '@ember/routing/location'; ~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:7:54 - error TS2307: Cannot find module '@ember/routing/-internals' or its corresponding type declarations. 7 import { RouteInfo, RouteInfoWithAttributes } from '@ember/routing/-internals'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:8:48 - error TS2307: Cannot find module '@ember/routing/lib/utils' or its corresponding type declarations. 8 import type { RouteArgs, RouteOptions } from '@ember/routing/lib/utils'; ~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:48:26 - error TS2307: Cannot find module '@ember/-internals/owner' or its corresponding type declarations. 48 (new (owner?: import('@ember/-internals/owner').default | undefined) => Service) & ~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:49:5 - error TS2707: Generic type 'Mixin' requires between 1 and 2 type arguments. 49 import('@ember/object/mixin').default; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:474:32 - error TS2536: Type '"currentRouteName"' cannot be used to index type 'this["_router"]'. 474 readonly currentRouteName: this['_router']['currentRouteName']; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:501:26 - error TS2536: Type '"currentURL"' cannot be used to index type 'this["_router"]'. 501 readonly currentURL: this['_router']['currentURL']; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/routing/router-service.d.ts:595:28 - error TS2536: Type '"currentRoute"' cannot be used to index type 'this["_router"]'. 595 readonly currentRoute: this['_router']['currentRoute']; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/service/index.d.ts:2:35 - error TS2307: Cannot find module '@ember/object/-internals' or its corresponding type declarations. 2 import { FrameworkObject } from '@ember/object/-internals'; ~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/service/index.d.ts:3:71 - error TS2307: Cannot find module '@ember/-internals/metal' or its corresponding type declarations. 3 import type { DecoratorPropertyDescriptor, ElementDescriptor } from '@ember/-internals/metal'; ~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/ember-source@5.4.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source/types/stable/@ember/service/owner-ext.d.ts:9:5 - error TS2717: Subsequent property declarations must have the same type. Property 'service' must be of type 'Registry', but here has type 'Registry'. 9 service: Registry; ~~~~~~~ node_modules/.pnpm/@types+ember__service@4.0.6_@babel+core@7.23.2/node_modules/@types/ember__service/index.d.ts:29:9 29 service: Registry; ~~~~~~~ 'service' was also declared here.  ELIFECYCLE  Command failed with exit code 1. ```

This is a new Ember app that I added ember-template-imports to. The package.json is:

{
  "name": "my-app",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for my-app goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
    "lint:css": "stylelint \"**/*.css\"",
    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "lint:types": "glint",
    "start": "ember serve",
    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
    "test:ember": "ember test"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@ember/optional-features": "^2.0.0",
    "@ember/string": "^3.1.1",
    "@ember/test-helpers": "^3.2.0",
    "@embroider/compat": "^3.2.3",
    "@embroider/core": "^3.3.0",
    "@embroider/webpack": "^3.2.0",
    "@glimmer/component": "^1.1.2",
    "@glimmer/tracking": "^1.1.2",
    "@glint/core": "^1.2.1",
    "@glint/environment-ember-loose": "^1.2.1",
    "@glint/environment-ember-template-imports": "^1.2.1",
    "@glint/template": "^1.2.1",
    "@tsconfig/ember": "^3.0.2",
    "@types/ember": "^4.0.8",
    "@types/ember-data": "^4.4.13",
    "@types/ember-data__adapter": "^4.0.4",
    "@types/ember-data__model": "^4.0.3",
    "@types/ember-data__serializer": "^4.0.4",
    "@types/ember-data__store": "^4.0.5",
    "@types/ember__application": "^4.0.9",
    "@types/ember__array": "^4.0.7",
    "@types/ember__component": "^4.0.19",
    "@types/ember__controller": "^4.0.9",
    "@types/ember__debug": "^4.0.6",
    "@types/ember__destroyable": "^4.0.3",
    "@types/ember__engine": "^4.0.8",
    "@types/ember__error": "^4.0.4",
    "@types/ember__helper": "^4.0.4",
    "@types/ember__modifier": "^4.0.7",
    "@types/ember__object": "^4.0.9",
    "@types/ember__owner": "^4.0.7",
    "@types/ember__polyfills": "^4.0.4",
    "@types/ember__routing": "^4.0.17",
    "@types/ember__runloop": "^4.0.7",
    "@types/ember__service": "^4.0.6",
    "@types/ember__string": "^3.16.3",
    "@types/ember__template": "^4.0.4",
    "@types/ember__test": "^4.0.4",
    "@types/ember__utils": "^4.0.5",
    "@types/qunit": "^2.19.7",
    "@types/rsvp": "^4.0.6",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "broccoli-asset-rev": "^3.0.0",
    "concurrently": "^8.2.2",
    "ember-auto-import": "^2.6.3",
    "ember-cli": "~5.4.1",
    "ember-cli-app-version": "^6.0.1",
    "ember-cli-babel": "^8.2.0",
    "ember-cli-clean-css": "^3.0.0",
    "ember-cli-dependency-checker": "^3.3.2",
    "ember-cli-htmlbars": "^6.3.0",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-data": "~5.3.0",
    "ember-fetch": "^8.1.2",
    "ember-load-initializers": "^2.1.2",
    "ember-modifier": "^4.1.0",
    "ember-page-title": "^8.2.0",
    "ember-qunit": "^8.0.1",
    "ember-resolver": "^11.0.1",
    "ember-source": "~5.4.0",
    "ember-template-imports": "^4.0.0",
    "ember-template-lint": "^5.11.2",
    "eslint": "^8.52.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-ember": "^11.11.1",
    "eslint-plugin-n": "^16.2.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-qunit": "^8.0.1",
    "loader.js": "^4.7.0",
    "prettier": "^3.0.3",
    "prettier-plugin-ember-template-tag": "^1.1.0",
    "qunit": "^2.20.0",
    "qunit-dom": "^2.0.0",
    "stylelint": "^15.11.0",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-prettier": "^4.0.2",
    "tracked-built-ins": "^3.3.0",
    "typescript": "^5.2.2",
    "webpack": "^5.89.0"
  },
  "engines": {
    "node": ">= 18"
  },
  "ember": {
    "edition": "octane"
  }
}

Is there a dependency or upgrade I'm missing? Any ideas? Thanks.

knownasilya commented 9 months ago

I think https://github.com/ember-cli/ember-page-title/pull/283 fixes this. A new release should be out soon.

knownasilya commented 9 months ago

Edit: It's already out as part of 8.2.1

tcjr commented 9 months ago

Edit: It's already out as part of 8.2.1

Updated to 8.2.1 and it works perfectly. Thank you!