Support for descendant selector, like `document.querySelector("form input");`.

[lukaszpolowczyk]

Such a selector does not work, it returns Element | null, instead of HTMLInputElement | null:

document.querySelector("form input");

It is definitely about descendant selector. Just "input" works, but "form input" does not.

"form > input" does not work either.

[g-plane]

I can't reproduce: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAchgTzAUwCYFoCOBXNKZLAZzQBs0BjGaBAKHowirxDQDsYA6fQ5AMoVqtKAAoEAM2gg4wDmDwwEASiA . Have you configured your project correctly?

[lukaszpolowczyk]

@g-plane Here you can see: https://codesandbox.io/s/support-for-descendant-selector-in-typed-query-selector-test-mnqvi2?file=/src/index.js

Type Element in the hint:

Type HTMLInputElement in the hint:

[g-plane]

You need to import this library.

[lukaszpolowczyk]

@g-plane In codesanbox it helped, but locally in VSCode it still doesn't work:

What information is needed?

package.json:

{
  "name": "web-ext",
  "version": "1.0.0",
  "description": "",
  "main": "background.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Łukasz Polowczyk",
  "license": "ISC",
  "devDependencies": {
    "@types/firefox-webext-browser": "^94.0.1"
  },
  "dependencies": {
    "typed-query-selector": "^2.6.1"
  }
}

jsconfig.json:

{
    "include": ["*"],
    "exclude": [],
    "compilerOptions": {
        "strict": true,
        "checkJs": true,
        "module":"es2022",
        "target":"es2022",
        "lib": ["DOM","ES2022"]
    }
}

VSCode info:

Version: 1.67.0
Commit: 57fd6d0195bb9b9d1b49f6da5db789060795de47
Date: 2022-05-04T12:08:42.978Z
Electron: 17.4.1
Chromium: 98.0.4758.141
Node.js: 16.13.0
V8: 9.8.177.13-electron.0
OS: Linux x64 5.10.7-arch1-1

---

I read in the README.md of the project that if you don't use bundlers or build tools, you have to import like this: import type {} from 'typed-query-selector'. but this only works for ts files, not for js files: 'import type' declarations can only be used in TypeScript files.ts(8006).

So in my case it still all doesn't work. :/

I don't understand why it works without any import, but only partially? After all "input" itself supports, only with "form input" it has a problem. :/

I used an unrecommended solution:

{
    "include": ["*"],
    "exclude": [],
    "compilerOptions": {
        "strict": true,
        "checkJs": true,
        "module":"es2022",
        "target":"es2022",
        "lib": ["DOM","ES2022"],
        "types": ["typed-query-selector", "@types/firefox-webext-browser"]
    }
}

And only now is it working. But as you can see, I also had to append "@types/firefox-webext-browser", which normally didn't need to be appended because it worked without appending.

Should it stay like this? Shouldn't it work without importing and without the "types" property?

---

Summary:

• no jsconfig file - works without any import
• jsconfig file with "types" property: ["typed-query-selector"] - works without any import
• jsconfig file without "types" property: ["typed-query-selector"] - partially works ("input" yes, "form input" no) without any import

I think there should be completed support for the third situation. This is more of an internal bug, something that I'm sure can be fixed. Or not?

[g-plane]

Yes, you may need to configure it in jsconfig.json if you don't use TypeScript.

[lukaszpolowczyk]

@g-plane But do you check if it is possible to implement support without bundler, with jsconfig file etc.? After all, you see that it partially works, so it's not a jsconfig file or import issue, but something else?

[g-plane]

No. It's required to configure jsconfig.json, otherwise TypeScript doesn't know this library is used.

[lukaszpolowczyk]

@g-plane But this is a situation where you don't use TypeScript, just pure JS, no bundlers etc, you just have type hints in the JS file in VSCode. You use JSDoc and VSCode, without compiling with TypeScript.

And VSCode sees the types when there is a jsconfig file, and there is no compilerOptions.types set in it at all.

VSCode itself catches the installed typed-query-selector package, and for example the @types/firefox-webext-browser package. The @types/firefox-webext-browser package works fully all the time, the typed-query-selector package works partially because it bypasses some selectors, but this is an internal issue for that package, not VSCode, nor TypeScript, nor jsconfig file, nor bundler! :D

I'm sure this can be fixed internally in typed-query-selector. :D

[g-plane]

Contributions are welcomed.

[g-plane]

Lack of activity. Closing now.