search

facebook / react-strict-dom

React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets
MIT License
3k stars 148 forks source link

Typescript types for StrictHTMLFormElements are broken in 0.0.6 #92

Closed kelset closed 2 months ago

kelset commented 2 months ago

Describe the issue

While trying to bump RSD to latest in our fluent repo (https://github.com/microsoft/fluentui/tree/xplat/apps/xplat-v9) I hit the current set of errors during the build step:

Error log ``` node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:39:3 - error TS1131: Property or signature expected. 39 @@iterator(): Iterator; ~ node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:39:15 - error TS1109: Expression expected. 39 @@iterator(): Iterator; node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:40:3 - error TS1128: Declaration or statement expected. 40 readonly length: number; ~~~~~~~~ node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:41:18 - error TS1005: ']' expected. 41 readonly [index: number | string]: Elem; ~ node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:41:35 - error TS1005: ';' expected. 41 readonly [index: number | string]: Elem; ~ node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:41:36 - error TS1128: Declaration or statement expected. 41 readonly [index: number | string]: Elem; ~ node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:42:1 - error TS1128: Declaration or statement expected. 42 } ~ Found 7 errors in the same file, starting at: node_modules/react-strict-dom/dist/types/StrictHTMLFormElements.d.ts:39 ```

After some digging, it seems that this is caused by this new StrictHTMLCollection interface added a few days ago in this commit by @nmn https://github.com/facebook/react-strict-dom/commit/2c06e8437b8c367482a72cb11a16d89c4e065f11

What happens is that the Typescript types generated for it are like so:

export interface StrictHTMLCollection<Elem extends StrictHTMLElement> {
  @@iterator(): Iterator<Elem>;
  readonly length: number;
  readonly [index: number | string]: Elem;
}

In StrictHTMLFormElements.d.ts - which I can't link because it looks like the TS types are only generated at bundling time for new npm releases(?)

And that @@iterator(): Iterator<Elem>; line is not valid TS syntax. It should be [Symbol.iterator](): IterableIterator<Elem>;. So probably it's more of a root problem on flow-api-translator but until this type is fixed in RSD we can't bump to 0.0.6.

Expected behavior

Types are correct and tsc builds successfully.

Steps to reproduce

  1. create a new react-native project (npx react-native@latest init RSDBaseProject)
  2. add import type {StrictHTMLCollection} from 'react-strict-dom/dist/types/StrictHTMLFormElements'; around L20 or so in App.tsx
  3. yarn tsc

Test case

No response

Additional comments

No response