Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use this in typescript node project #87

Closed
biojet1 opened this issue Jul 22, 2021 · 12 comments
Closed

How to use this in typescript node project #87

biojet1 opened this issue Jul 22, 2021 · 12 comments
Labels
wontfix This will not be worked on

Comments

@biojet1
Copy link

biojet1 commented Jul 22, 2021

I installed it using:
npm install linkedom --save

Then I run script:
import {DOMParser, parseHTML} from 'linkedom';

I got:

........
node_modules/linkedom/types/svg/element.d.ts:4:14 - error TS2420: Class 'import("/mnt/META/wrx/ts/anim8/node_modules/linkedom/types/svg/element").SVGElement' incorrectly implements interface 'SVGElement'.
  Type 'SVGElement' is missing the following properties from type 'SVGElement': viewportElement, addEventListener, removeEventListener, refId, and 134 more.

4 export class SVGElement extends Element implements globalThis.SVGElement {
               ~~~~~~~~~~

node_modules/linkedom/types/xml/document.d.ts:4:14 - error TS2420: Class 'import("/mnt/META/wrx/ts/anim8/node_modules/linkedom/types/xml/document").XMLDocument' incorrectly implements interface 'XMLDocument'.
  Type 'XMLDocument' is missing the following properties from type 'XMLDocument': addEventListener, removeEventListener, URL, alinkColor, and 177 more.

4 export class XMLDocument extends Document implements globalThis.XMLDocument {
               ~~~~~~~~~~~


Found 153 errors.
@WebReflection
Copy link
Owner

I have no idea. I was hoping TypeScript would've been smarter there, as everything is defined in the extend.

I don't use TS neither, so I wouldn't know how to fix this. If there's anything one could do at JSDoc level, please file a PR, otherwise this will be parked for long time.

@biojet1
Copy link
Author

biojet1 commented Jul 22, 2021

I modified the file linkedin/types/svg/element.d.ts I removed implements globalThis.SVGElement

/**
 * @implements globalThis.SVGElement
 */
export class SVGElement extends Element XXX<implements globalThis.SVGElement>XXX {
    constructor(ownerDocument: any, localName: any, ownerSVGElement?: any);
    ownerSVGElement: any;
}
import { Element } from "../interface/element.js";

Then run again:

import {DOMParser, parseHTML} from 'linkedom';

I got 1 less error:

.......
node_modules/linkedom/types/svg/document.d.ts:4:14 - error TS2420: Class 'SVGDocument' incorrectly implements interface 'Document'.
  Type 'SVGDocument' is missing the following properties from type 'Document': URL, alinkColor, all, anchors, and 177 more.

4 export class SVGDocument extends Document implements globalThis.Document {
               ~~~~~~~~~~~

node_modules/linkedom/types/xml/document.d.ts:4:14 - error TS2420: Class 'import("/mnt/META/wrx/ts/anim8/node_modules/linkedom/types/xml/document").XMLDocument' incorrectly implements interface 'XMLDocument'.
  Type 'XMLDocument' is missing the following properties from type 'XMLDocument': addEventListener, removeEventListener, URL, alinkColor, and 177 more.

4 export class XMLDocument extends Document implements globalThis.XMLDocument {
               ~~~~~~~~~~~


Found 152 errors.

That's the culprit!.

@WebReflection
Copy link
Owner

so ... basically ... if I remove all the @implements deno is happy? it's funny 'cause those implements were asked by TS users ... what does deno do here differently, in case you know?

@biojet1
Copy link
Author

biojet1 commented Jul 22, 2021

I don't use deno, I use typescript node project, It transpiles to javascript .
I think you don't need those @implements globalThis.* on every class.
Otherwise you have to implement every method and properties of DOM.
Please remove.

@WebReflection
Copy link
Owner

Are those two classes the only affected?

@biojet1
Copy link
Author

biojet1 commented Jul 22, 2021

Its every class that has @implements globalThis.*.
The output I shown is just the tail of 152 errors.

@WebReflection
Copy link
Owner

Right .. my counter-argument is: I use VS Code and adding those implements helped my IDE suggesting methods and everything else as soon as I type an instance name plus a . dot ... I wonder why a TS project couldn't be more relaxed about this, as once again, all implementations actually expose, implement, or mimic, the globals they are bound to.

Dropping all implements will break users expectations to date, so I am trying to understand what TS needs to be able to assume something is implementing what it says it's implementing, without bothering developers.

The definition was also a PR from a TS user, so, as I am not one of those, it looks like we need to be aligned/sync'd and find the best solution that works for us all.

@WebReflection
Copy link
Owner

P.S. quick example: reading addEventListener is not implemented is a lie, because it's there, in extended classes, just to name one.

@biojet1
Copy link
Author

biojet1 commented Jul 22, 2021

I removed all implements globalThis.* under types directory using this command

cd types
grep -rl ' implements globalThis.'| xargs -i@ sed -i 's/ *implements *globalThis[.][a-zA-Z0-9]*//g' @

Then run again:

import {DOMParser, parseHTML} from 'linkedom';

It now has only 32 errors:

node_modules/linkedom/types/interface/document.d.ts:182:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

182             [CLASS_LIST]: import("../dom/token-list.js").DOMTokenList;
                ~~~~~~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:182:14 - error TS2304: Cannot find name 'CLASS_LIST'.

182             [CLASS_LIST]: import("../dom/token-list.js").DOMTokenList;
                 ~~~~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:183:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

183             [DATASET]: import("../dom/string-map.js").DOMStringMap;
                ~~~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:183:14 - error TS2304: Cannot find name 'DATASET'.

183             [DATASET]: import("../dom/string-map.js").DOMStringMap;
                 ~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:184:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

184             [STYLE]: import("./css-style-declaration.js").CSSStyleDeclaration;
                ~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:184:14 - error TS2304: Cannot find name 'STYLE'.

184             [STYLE]: import("./css-style-declaration.js").CSSStyleDeclaration;
                 ~~~~~

node_modules/linkedom/types/interface/document.d.ts:205:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

205             [PRIVATE]: any;
                ~~~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:205:14 - error TS2304: Cannot find name 'PRIVATE'.

205             [PRIVATE]: any;
                 ~~~~~~~

node_modules/linkedom/types/interface/document.d.ts:206:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

206             [NEXT]: import("../mixin/parent-node.js").NodeStruct;
                ~~~~~~

node_modules/linkedom/types/interface/document.d.ts:206:14 - error TS2304: Cannot find name 'NEXT'.

206             [NEXT]: import("../mixin/parent-node.js").NodeStruct;
                 ~~~~

node_modules/linkedom/types/interface/document.d.ts:207:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

207             [END]: import("../mixin/parent-node.js").NodeStruct;
                ~~~~~

node_modules/linkedom/types/interface/document.d.ts:207:14 - error TS2304: Cannot find name 'END'.

207             [END]: import("../mixin/parent-node.js").NodeStruct;
                 ~~~

node_modules/linkedom/types/interface/document.d.ts:224:13 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

224             [PREV]: any;
                ~~~~~~

node_modules/linkedom/types/interface/document.d.ts:224:14 - error TS2304: Cannot find name 'PREV'.

224             [PREV]: any;
                 ~~~~

node_modules/linkedom/types/interface/image.d.ts:144:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

144         [CLASS_LIST]: import("../dom/token-list.js").DOMTokenList;
            ~~~~~~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:144:10 - error TS2304: Cannot find name 'CLASS_LIST'.

144         [CLASS_LIST]: import("../dom/token-list.js").DOMTokenList;
             ~~~~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:145:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

145         [DATASET]: import("../dom/string-map.js").DOMStringMap;
            ~~~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:145:10 - error TS2304: Cannot find name 'DATASET'.

145         [DATASET]: import("../dom/string-map.js").DOMStringMap;
             ~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:146:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

146         [STYLE]: import("./css-style-declaration.js").CSSStyleDeclaration;
            ~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:146:10 - error TS2304: Cannot find name 'STYLE'.

146         [STYLE]: import("./css-style-declaration.js").CSSStyleDeclaration;
             ~~~~~

node_modules/linkedom/types/interface/image.d.ts:167:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

167         [PRIVATE]: any;
            ~~~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:167:10 - error TS2304: Cannot find name 'PRIVATE'.

167         [PRIVATE]: any;
             ~~~~~~~

node_modules/linkedom/types/interface/image.d.ts:168:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

168         [NEXT]: import("../mixin/parent-node.js").NodeStruct;
            ~~~~~~

node_modules/linkedom/types/interface/image.d.ts:168:10 - error TS2304: Cannot find name 'NEXT'.

168         [NEXT]: import("../mixin/parent-node.js").NodeStruct;
             ~~~~

node_modules/linkedom/types/interface/image.d.ts:169:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

169         [END]: import("../mixin/parent-node.js").NodeStruct;
            ~~~~~

node_modules/linkedom/types/interface/image.d.ts:169:10 - error TS2304: Cannot find name 'END'.

169         [END]: import("../mixin/parent-node.js").NodeStruct;
             ~~~

node_modules/linkedom/types/interface/image.d.ts:186:9 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

186         [PREV]: any;
            ~~~~~~

node_modules/linkedom/types/interface/image.d.ts:186:10 - error TS2304: Cannot find name 'PREV'.

186         [PREV]: any;
             ~~~~

node_modules/linkedom/types/mixin/parent-node.d.ts:25:5 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

25     [typeof NEXT]: NodeStruct;
       ~~~~~~~~~~~~~

node_modules/linkedom/types/mixin/parent-node.d.ts:26:5 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

26     [typeof PREV]: NodeStruct;
       ~~~~~~~~~~~~~

node_modules/linkedom/types/mixin/parent-node.d.ts:27:5 - error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

27     [typeof START]: NodeStruct;
       ~~~~~~~~~~~~~~

node_modules/linkedom/types/shared/node.d.ts:8:36 - error TS2538: Type 'unique symbol' cannot be used as an index type.

8 export function previousSibling({ [PREV]: prev }: {
                                     ~~~~


Found 32 errors.

And it has nothing todo with TS2420: errors

@biojet1
Copy link
Author

biojet1 commented Jul 22, 2021

I don't know how to fix those remaining errors.
I think its better to convert this project to Typescript.
VSCode has good Typescript support. And you don't need those JSDoc comments to mark its type

@WebReflection
Copy link
Owner

I don't know how to fix those remaining errors.

Neither do I, nor I have time to do so, as I don't use TS.

I think its better to convert this project to Typescript.

Not going to happen here, sorry. Feel free to fork this project.

VSCode has good Typescript support. And you don't need those JSDoc comments to mark its type

I use code and those JSDoc comments helps a lot me daily, as they do a very good job, without getting on my way, to suggest all the things.

But even removing those, TS complains about internal implementation details, and this, I am afraid, is not really my problem.

Closing, as this is clearly a won't fix at this point.

@WebReflection WebReflection added the wontfix This will not be worked on label Jul 22, 2021
@KirianCaumes
Copy link

As it might help someone, here is how I fixed this problem in my Typescript project. 😉
Use this in command line: --skipLibCheck or add that in you tsconfig.json:

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

3 participants