juggle / resize-observer Goto Github PK
View Code? Open in Web Editor NEWPolyfills the ResizeObserver API.
Home Page: https://juggle.studio/resize-observer
License: Apache License 2.0
Polyfills the ResizeObserver API.
Home Page: https://juggle.studio/resize-observer
License: Apache License 2.0
This major version upgrade will update the library to cover the new shape of the ResizeObserverEntry
.
entry = {
target: <element>,
contentRect: { /* v1 backwards compat */ },
borderBox: null,
contentBox: {
inline: 300,
block: 200
}
}
Confirmed changes:
scrollBox
support.devicePixelBorderBox
support.borderBoxSize
to borderBox
.contentSize
to contentBox
.inlineSize
to inline
.blockSize
to block
.device-pixel-border-box
.Needs confirmation:
Additional updates:
Potential upcoming changes:
Currently failing web platform test:
https://github.com/web-platform-tests/wpt/blob/master/resize-observer/observe.html#L200
Describe the bug
The latest release 2.0.1 has no lib folder with build artifacts (https://unpkg.com/@juggle/[email protected]/lib/ResizeObserver.js).
The previous 2.0.0 release works correctly (https://unpkg.com/@juggle/[email protected]/lib/ResizeObserver.js).
To Reproduce
Steps to reproduce the behavior:
npm i @juggle/resize-observer
import ResizeObserver from '@juggle/resize-observer'
/lib/ResizeObserver.js
cannot be found.Expected behavior
The release has the lib folder with build artifacts.
Additional context
Thank you for developing this great polyfill :)
If many events happen at the same time, it can impair performance. Most events do not require this additional logic, as they are from user interaction, however, animation events can me fired multiple times in the same frame and this should be handled and improved.
Potential Fix:
Currently failing web platform tests:
https://github.com/web-platform-tests/wpt/blob/master/resize-observer/observe.html#L424
https://github.com/web-platform-tests/wpt/blob/master/resize-observer/observe.html#L482
https://github.com/web-platform-tests/wpt/blob/master/resize-observer/observe.html#L523
When writing mode changes, the box algorithm should use the correct value for both inlineSize
and blockSize
. Chrome currently has the same bug which can be found here.
Demo: https://jsfiddle.net/dholbert/ce094nxj/
<style>
.outer {
display: inline-block;
}
.outer:hover {
writing-mode: vertical-rl;
}
#divA {
width: 300px;
height: 200px;
border: 1px solid black;
background: yellow;
}
#divB {
inline-size: 300px;
block-size: 200px;
border: 1px solid black;
background: pink
}
</style>
<div class="outer">
<div id="divA">My physical dimensions never change (which means my inline-size/block-size get swapped on hover)</div>
</div>
<div class="outer">
<div id="divB">My logical dimensions never change</div>
</div>
Example:
const ro = new ResizeObserver(); // should throw, as no callback is provided.
Improve TypeScript support by adding types
field to package.json
.
Currently the delayed shutdown of notification events is broken due to removal from controller.
Move notify()
out of controller and create a scheduler module.
Wondering whether to add a compiled ES5 version of the library which polyfills the global ResizeObserver
on the window
.
This makes it easier to integrate into older projects.
Would this be helpful?
Describe the bug
In IE11 I have a problem with "TypeError: Invalid calling object" in the console. In other browsers (Chrome, Firefox, Safari) everything works correctly.
Error in mounted hook: "TypeError: Invalid calling object"
found in
---> <App> at src/App.vue
<Root>
Sample Code
Please fork this Debug Template and help identify the issue.
Desktop (please complete the following information):
Additional context
My script:
const ro = new ResizeObserver((entries, observer) => {
for (var entry of entries) {
this.$store.dispatch('changeScreenSize', entry.contentRect.width);
this.$emit('embedResized');
}
});
ro.observe(wrapperEl);
Currently the library only listens to mutations on the main document level. This means that any non-user actioned DOM changes inside a shadow root will not be noticed.
Most of the time this will not be an issue, as user interaction is usually the main cause for resizing to take place. That being said, there are some circumstances where this will cause issues.
NaN
can be returned in some entries entries. This happens when auto
is returned from cs.width
or cs.height
, due to an element's display style being set to none
.
Describe the bug
Too many change detection triggered when we use ResizeObserver inside a polymer webcomponent placed in an Angular application. At the same time if we are not using ResizeObserver Angular change detection's number is very few.
To Reproduce
Steps to reproduce the behavior:
this.resizeObserver = new ResizeObserver((entries, observer) => { self.handleChange(); });
Expected behavior
Change detection gets triggered only once for resize or UI modification.
Sample Code
if(this.active === true) {
console.log("observing");
this.resizeObserver.observe(_this);
} else {
console.log("unobserved");
this.resizeObserver.unobserve(_this);
}
Desktop (please complete the following information):
Additional context
Why a webcomponent inside Angular is triggering too many change detections, when observe(element) is on.
Note: The resize observer correctly notifies about the size change and we could respond to it. Only thing is the Angular change detection getting triggered more number of times (in IE11) when observe is ON.
Regards
Basanth
Describe the bug
Resize loop error is fired when element is removed from the DOM
To Reproduce
Steps to reproduce the behavior:
Expected behavior
An observation should be reported and no resize loop error should be fired
If a device supports touch events, these should be used to detect any changes
This is here to gather feedback on the need for this. Please comment below ๐
Describe the bug
The package causes the build system to crash when used in server-side rendering app
To Reproduce
Cannot be reproduced in an online platform, but try to include the package in any server-side rendering environment
Expected behavior
Should support server-side rendering
The error thrown by the compiler:
var requestAnimationFrame = window.requestAnimationFrame;
ReferenceError: window is not defined
Adding a browserlist configuration file will enable transpilation in packagers such as Parcel, enabling easier use in older browsers.
Describe the bug
No resize observations are fired
To Reproduce
Steps to reproduce the behavior:
function loop () {
requestAnimationFrame(loop);
}
loop();
Expected behavior
Resize observation should still work and notifications should be sent.
Additional context
This is happening because the scheduled task is always being pushed to the next frame, so no calculations will take place until the animation loop has stopped.
Currently this library modifys the native RAF to make sure that ResizeObserver callbacks are executed at the very end of the frame. Instead of this, it would be good to use a MicroTask to schedule the last RAF in the chain. This will prevent merging all callbacks into one RAF and will keep it inline with the native implementation.
A side effect of this, is that any other RAF which is also scheduled in a MicroTask could cause ResizeObserver callbacks to be executed before the final RAF. This is extremely unlikely though, as it doesn't exactly make sense to do this when using RAF normally.
Currently failing web platform test:
https://github.com/web-platform-tests/wpt/blob/master/resize-observer/observe.html#L568
Describe the bug
I'm using nrwl/nx and jest to build my angular app.
I want to use @juggle/resize-observer in the project.
It works great when developing and in production,
but jest doesn't seem to like the library.
When running my tests I get
Test suite failed to run
/Users/leon/Projects/myproject/node_modules/@juggle/resize-observer/lib/ResizeObserver.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { ResizeObserverController } from './ResizeObserverController';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import { Observable } from 'rxjs'
> 2 | import { ResizeObserver } from '@juggle/resize-observer'
| ^
3 |
4 | /**
5 | * Create an observable which will emit every time the passed in elements get resized
at ScriptTransformer._transformAndBuildScript (../../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (../../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous> (../../view/ui/src/lib/resize-observable.ts:2:1)
I know this isn't your problem, it's a jest problem, but I thought that I won't be the only one getting this error, so I thought we could try to find a solution together.
To Reproduce
create a nx workspace with an angular app
add a component
import @juggle/resize-observer
in the component
then run npm test
Expected behavior
That the library should work when testing using jest.
Frameworks/Libraries used
Angular
Jest
Desktop (please complete the following information):
Additional context
It has something to do with how the library is packaged and that it has es2015 imports.
maybe we need to have a both a "main" field in the package.json which points to a commonjs version, and a "module" version which points to a es2015 version?
ResizeObservation should be fired when display:none
is toggled
Describe the bug
I'm using this package as a polyfill for window.ResizeObserver
when the native one is not available. However, this package will unconditionally override the global RAF callback, which may conflict with the RAF override provided in Angular zone.js package, causing the loss of zone information.
The underlying requestAnimationFrame
is called only for the first RAF call during a frame, and all the queued RAF callbacks are executed in the same "zone" (i.e. the "zone" of first RAF callback.)
resize-observer/src/utils/scheduler.ts
Lines 133 to 139 in 0d8bc59
I understand working with multiple polyfills can be tricky. However, I think it would be better if you do not apply the RAF polyfill when importing the module, but when the first ResizeObserver
instance from this library is created. In this case, at least I can ensure RAF is not replaced when I'm using Browser's native ResizeObserver
(e.g. on Chrome).
To Reproduce
See https://angular-cqmqgl.stackblitz.io/ . Open the console to see the error. See the Expected behavior part for full project.
Basically, what I have done is:
@juggle/resize-observer
module.requestAnimationFrame
both inside and outside NgZone, in a way that the RAF callbacks are executed in the same frame. Check if we are inside Angular zone in the RAF callbacks with NgZone.assertInAngularZone
and NgZone.assertNotInAngularZone()
.import { Component, NgZone } from '@angular/core';
import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myText = String(ResizeObserverPolyfill);
constructor(private _zone: NgZone) {
}
ngOnInit() {
// RAF callback inside NgZone
rafCallback(this._zone, true, true);
// RAF callback outside NgZone
rafCallback(this._zone, false, true);
}
}
function rafCallback(zone: NgZone, isInZone: boolean, suppressAssertion?: boolean) {
if (isInZone) {
suppressAssertion || NgZone.assertInAngularZone();
zone.run(() => window.requestAnimationFrame(() => rafCallback(zone, isInZone)));
} else {
suppressAssertion || NgZone.assertNotInAngularZone();
zone.runOutsideAngular(() => window.requestAnimationFrame(() => rafCallback(zone, isInZone)));
}
}
Expected behavior
The assertNotInAngularZone
call should pass.
Sample Code
See https://stackblitz.com/edit/angular-cqmqgl .
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Initial checklist for v1.0.0
release!
Required:
Nice to have:
It would be great to have a .min.js file in every release, so that it can be used in the extremely simple way of doing nothing but <script src="ResizeObserver.min.js"></script>
.
Describe the bug
react-three-fiber is using this lib and I'm trying to use it with next.js.
I'm getting this error
Unexpected token {
./node_modules/@juggle/resize-observer/lib/ResizeObserver.js:1
(function (exports, require, module, __filename, __dirname) { import { ResizeObserverController } from './ResizeObserverController';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (./node_modules/react-three-fiber/web.cjs.js:17:22)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
which you can see in the code sandbox example below.
To Reproduce
Here is code sandbox reproduction https://codesandbox.io/s/resize-observer-issue-98jp2
Expected behavior
Should work without error.
Frameworks/Libraries used
Next.js, React, react-three-fiber
Desktop (please complete the following information):
Describe the bug
On occasions, notifications are not being sent when a transition starts to change an elements dimensions.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Notifications should be sent if possible.
Additional context
There is code in the library to help with this however this seems to being skipped after some performance improvements were added.
When a window is dragged across screens with different resolutions, no notification is fired when observing device-pixel-content-box
. To improve this, use matchMedia
API to watch for resolution changes.
matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
.addEventListener('change', schedule);
Currently there is no documentation for using the polyfill in IE.
Add documentation for:
Currently the library calculates the borderBoxSize
without worrying about scrollbars as there is additional cost involved when calculating scrollbar thickness.
The ResizeObserverEntry
should return an array of fragment sizes.
{
...
contentBoxSize: [{
inlineSize: number,
blockSize: number
}]
}
This will be a breaking change and will need to be pushed to the next major release.
I've never seen a "source" key in a package.json before.
What is the intent behind that, given that sources aren't being distributed in the npm package?
When writing mode changes, the box algorithm should use the correct value for both inlineSize
and blockSize
. Chrome currently has the same bug which can be found here.
Demo: https://jsfiddle.net/dholbert/ce094nxj/
<style>
.outer {
display: inline-block;
}
.outer:hover {
writing-mode: vertical-rl;
}
#divA {
width: 300px;
height: 200px;
border: 1px solid black;
background: yellow;
}
#divB {
inline-size: 300px;
block-size: 200px;
border: 1px solid black;
background: pink
}
</style>
<div class="outer">
<div id="divA">My physical dimensions never change (which means my inline-size/block-size get swapped on hover)</div>
</div>
<div class="outer">
<div id="divB">My logical dimensions never change</div>
</div>
The spec looks to be changing in regards to svg root elements. If they themselves create a css layout box, they should be included in the standard observation strategy.
Describe the bug
Size returned is NaN
To Reproduce
Steps to reproduce the behavior:
Expected behavior
There should be no observation as the element has no display.
On an svg with percentage width it wont trigger after normal resize by the resize of the surrounding elements. I didnt test if it works on other kinds of css width or height definition.
I imagine the svg elements are taken into account on the api but im not sure if im missing something.
It's unlikely that the library will be added and not used, however, it seems pointless to have event listeners and mutation observers running, when there are no resize watchers added.
As there is limited support for transitionstart
events, we need another way to detect when a transition has started.
I think we can catch most transitions, which do not have a delayed start time, by always checking next render.
Currently fails web platform test:
https://github.com/web-platform-tests/wpt/blob/master/resize-observer/notify.html#L195
Describe the bug
devicePixelBorderBoxSize
gets reported, even on non-canvas elements.
To Reproduce
Steps to reproduce the behavior:
HTMLDivElement
devicePixelBorderBoxSize
gets reportedExpected behavior
devicePixelBorderBoxSize
should return null
, as it's currently only for canvas elements.
Currently the methods on the object are not set to be enumerable and the following code will print nothing.
const ro = new ResizeObserver(() => {});
for (let key in ro) {
console.log(ro);
}
// observe
// unobserve
// disconnect
Print (CMD+P) should recalculate dimensions on elements, as they are likely to resize and may need some programmatic adjustment.
Add support for observing a new box size option, device-pixel-content-box
.
const canvasEl = document.querySelector('canvas');
const ro = new ResizeObserver((entries, observer) => {
...
});
// Observes the actual device pixel dimensions of the element
ro.observe(canvasEl, { box: 'device-pixel-content-box' });
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.