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.

Sign up for GitHub

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

Jump to bottom

[v5] [core] feat: remove @juggle/resize-observer in favor of native API #6234

Merged
merged 3 commits into from
Jun 22, 2023
Merged

[v5] [core] feat: remove @juggle/resize-observer in favor of native API #6234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bfe25c4
remove use of @juggle/resize-observer in favor of native API
jkillian Jun 22, 2023
1688841
Merge branch 'next' into jk/remove-resize-observer-polyfill
adidahiya Jun 22, 2023
6cfc345
fix backwards-compatible type export
adidahiya Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
"dependencies": {
"@blueprintjs/colors": "^5.0.0-beta.1",
"@blueprintjs/icons": "^5.0.0-beta.1",
"@juggle/resize-observer": "^3.4.0",
"@popperjs/core": "^2.11.7",
"classnames": "^2.3.1",
"normalize.css": "^8.0.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/overflow-list/overflow-list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ The `items` prop accepts an array of generic objects. The required
The required `overflowRenderer` callback prop receives all overflowed items
and renders the overflow indicator.

This component uses a polyfill for the [proposed `ResizeObserver` API][resizeobserver]
This component uses [the `ResizeObserver` API][resizeobserver]
to efficiently detect when its dimensions change. Use the `observeParents` prop
to watch for resizing further up in the DOM tree.

[resizeobserver]: https://developers.google.com/web/updates/2016/10/resizeobserver
[resizeobserver]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

@reactExample OverflowListExample

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/resize-sensor/resize-sensor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
__ResizeSensor__ observes the DOM and provides a callback for `"resize"` events on a single child element.
It is a thin wrapper around [`ResizeObserver`][resizeobserver] to provide React bindings.

[resizeobserver]: https://developers.google.com/web/updates/2016/10/resizeobserver
[resizeobserver]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
<h5 class="@ns-heading">DOM ref required</h5>
Expand Down
12 changes: 8 additions & 4 deletions packages/core/src/components/resize-sensor/resizeSensor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@
* limitations under the License.
*/

import { ResizeObserver, ResizeObserverEntry } from "@juggle/resize-observer";
import * as React from "react";

import { AbstractPureComponent, DISPLAYNAME_PREFIX } from "../../common";

// backwards-compatible with @blueprintjs/core v4.x
export { ResizeObserverEntry as ResizeEntry };
export type ResizeEntry = ResizeObserverEntry;

/** `ResizeSensor` requires a single DOM element child and will error otherwise. */
export interface ResizeSensorProps {
Expand Down Expand Up @@ -75,7 +74,8 @@ export class ResizeSensor extends AbstractPureComponent<ResizeSensorProps> {

private prevElement: HTMLElement | undefined = undefined;

private observer = new ResizeObserver(entries => this.props.onResize?.(entries));
private observer =
globalThis.ResizeObserver != null ? new ResizeObserver(entries => this.props.onResize?.(entries)) : undefined;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unsure if this is the best way to make things work correctly in an isomorphic setting, but it seemed reasonable to me and got the tests to pass locally

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems fine


public render(): React.ReactNode {
const onlyChild = React.Children.only(this.props.children);
Expand All @@ -97,7 +97,7 @@ export class ResizeSensor extends AbstractPureComponent<ResizeSensorProps> {
}

public componentWillUnmount() {
this.observer.disconnect();
this.observer?.disconnect();
this.prevElement = undefined;
}

Expand All @@ -107,6 +107,10 @@ export class ResizeSensor extends AbstractPureComponent<ResizeSensorProps> {
* re-observe.
*/
private observeElement(force = false) {
if (this.observer == null) {
return;
}

if (!(this.targetRef.current instanceof Element)) {
// stop everything if not defined
this.observer.disconnect();
Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -693,11 +693,6 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"

"@juggle/resize-observer@^3.4.0":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==

"@leichtgewicht/ip-codec@^2.0.1":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
Expand Down