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

ResizeObserver API declarations missing #28502

Closed
ITsvetkoFF opened this issue Nov 13, 2018 · 27 comments
Closed

ResizeObserver API declarations missing #28502

ITsvetkoFF opened this issue Nov 13, 2018 · 27 comments

Comments

@ITsvetkoFF
Copy link

@ITsvetkoFF ITsvetkoFF commented Nov 13, 2018

Search Terms

ResizeObserver

Suggestion

lib.dom.ts does not include ResizeObserver API declarations.

Use Cases

ResizeObserver is a thing that is getting some support in 2018 and I've found no mention about ResizeObserver here.

Checklist

My suggestion meets these guidelines:

  • This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • This wouldn't change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
  • This feature would agree with the rest of TypeScript's Design Goals.
@MartinJohns
Copy link
Contributor

@MartinJohns MartinJohns commented Nov 13, 2018

I think it is intentional that the standard type definitions don't come with experimental APIs, especially if browser support is nearly not existing.

@weswigham
Copy link
Member

@weswigham weswigham commented Nov 13, 2018

We generate the lib over at https://github.com/Microsoft/TSJS-lib-generator from the standarized web IDL files now. This file contains the list of IDLs we generate the lib from. Once the feature hits, eg, the whatwg common dom interfaces IDL, we'll sync and have it. It's going to be some time (and probably much better browser support) until that happens. I'd recommend just adding the extra declarations locally to your project in the meantime, as I don't think we'd take a PR for an override for something that's still experimental.

@ITsvetkoFF
Copy link
Author

@ITsvetkoFF ITsvetkoFF commented Nov 14, 2018

@weswigham good to know! Thank you.

I'd recommend just adding the extra declarations locally to your project in the meantime

What is the correct place to put these declarations from Typescript perspective? Taking into account the code of resize-observer-polyfill

@weswigham
Copy link
Member

@weswigham weswigham commented Nov 14, 2018

Any file in your project will do. Many people would recommend a separate globals.d.ts or the like for things like this.

@lozandier
Copy link

@lozandier lozandier commented Jul 3, 2019

@weswigham This seemingly should be revisited these days?

All major browsers support it with the evergreen model in mind: Firefox (68-69), Safari (Tech Preview for availability in next Safari to launch alongside MacOS Catalina without a doubt), Chrome, Edge w/ Chromium, & so on.

There's also updated CaniUse data on the matter now, IIRC: https://caniuse.com/#search=ResizeObserver

@typescript-bot
Copy link
Collaborator

@typescript-bot typescript-bot commented Jul 13, 2019

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.

@lozandier
Copy link

@lozandier lozandier commented Jul 13, 2019

This should re-open; I’m of the opinion the reason it’s closed is questionable.

The premise of not adding interface for ResizeObserver API is obsolete and needs an update.

/cc @weswigham

@heruan
Copy link

@heruan heruan commented Aug 29, 2019

@weswigham Any update on this?

@weswigham
Copy link
Member

@weswigham weswigham commented Sep 3, 2019

Still marked as experimental on mdn, so no. When the spec is moved out of draft state and accepted, it's associated IDL should get pulled in by TS and automatically included, but that hasn't happened yet.

@SeanHub
Copy link

@SeanHub SeanHub commented Nov 7, 2019

@weswigham MDN no longer lists this API as experimental. Currently getting "Cannot find name 'ResizeObserver'" when trying to use the API with TypeScript 3.7.2

@Adamman48
Copy link

@Adamman48 Adamman48 commented Nov 13, 2019

This issue should be reopened as it is no longer experimental and all major browsers support it.

@MartinJohns
Copy link
Contributor

@MartinJohns MartinJohns commented Nov 13, 2019

According to MDN it's still only part of an Editor's Draft, and not all major browsers support it.

@lozandier
Copy link

@lozandier lozandier commented Nov 13, 2019

@puema
Copy link

@puema puema commented Nov 28, 2019

Any updates here?

@yinonov
Copy link

@yinonov yinonov commented Dec 5, 2019

that's one of the more bizarre issues I encountered. i've heard way much about this API the past year for it to be unfamiliar by typescript

@SephReed
Copy link

@SephReed SephReed commented Feb 4, 2020

@waterplea
Copy link

@waterplea waterplea commented Apr 6, 2020

Time to add it, it has shipped to Safari last month. This means literally all browsers support it.

@manucorporat manucorporat mentioned this issue Apr 9, 2020
5 of 5 tasks complete
@gtteamamxx
Copy link

@gtteamamxx gtteamamxx commented Jul 24, 2020

Up

@denexapp
Copy link

@denexapp denexapp commented Oct 17, 2020

While the typings aren't merged into typescript yet, you can use a package from npm with ResizeObserver typings: https://www.npmjs.com/package/@types/resize-observer-browser

@subdavis
Copy link

@subdavis subdavis commented Dec 7, 2020

To add to @denexapp's response:

  1. install https://www.npmjs.com/package/@types/resize-observer-browser
  2. /// <reference types="resize-observer-browser" /> at the top of the file where you need to use it.
iamricard added a commit to iamricard/svelte that referenced this issue Jan 15, 2021
As discussed in sveltejs#4233, ResizeObserver is now widely available (>90% as
of 15/01/2021) so we can use it instead of a custom-built solution to
listen to resizes.

I also needed to add @types/resize-observer-browser because the type
definition for `ResizeObserver` hasn't landed in TS yet (see
microsoft/TypeScript#28502).

Closes sveltejs#4233.
iamricard added a commit to iamricard/svelte that referenced this issue Jan 15, 2021
As discussed in sveltejs#4233, ResizeObserver is now widely available (~90% as
of 15/01/2021, [source](http://caniuse.com/?search=ResizeObserver)) so
we can use it instead of a custom-built solution to listen to resizes.

I also needed to add @types/resize-observer-browser because the type
definition for `ResizeObserver` hasn't landed in TS yet (see
microsoft/TypeScript#28502).

Closes sveltejs#4233.
@Fi1osof
Copy link

@Fi1osof Fi1osof commented Feb 2, 2021

Still marked as experimental on mdn, so no. When the spec is moved out of draft state and accepted, it's associated IDL should get pulled in by TS and automatically included, but that hasn't happened yet.

Why does not just ResizeObserver | undefined type?

@vimcaw
Copy link

@vimcaw vimcaw commented May 10, 2021

To me, the solution is:

  1. install @types/resize-observer-browser.
  2. add @types/resize-observer-browser to types field in tsconfig.json file.

Just like:

{
  "compilerOptions": {
    "types": ["@types/resize-observer-browser"],
    ...
  },
  ...
}
@wKich
Copy link

@wKich wKich commented May 11, 2021

@vimcaw , they already merged types in microsoft/TypeScript-DOM-lib-generator#948

@vimcaw
Copy link

@vimcaw vimcaw commented May 12, 2021

@wKich Thanks for letting me know this, but I have included DOM in the lib field of tsconfig.json, why it is still unavailable?

My tsconfig.json (TypeScript v4.1) is:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["./src"]
}
@MartinJohns
Copy link
Contributor

@MartinJohns MartinJohns commented May 12, 2021

@vimcaw Because your TypeScript version is outdated.

@vimcaw
Copy link

@vimcaw vimcaw commented May 12, 2021

@MartinJohns Yeah, after upgrading to 4.2.3, it works perfectly, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet