Skip to content

Commit ae4bb0e

Browse files
committed
Switch 'module' and 'jsnext:main' fields to the es6 module bundle
* Deprecate the global version * Remove dependency on gulp * Remove minified versions
1 parent 8343dff commit ae4bb0e

13 files changed

+1215
-154
lines changed

README.md

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ ResizeObserver Polyfill
66

77
A polyfill for the Resize Observer API.
88

9-
Implementation is based on the MutationObserver (no polling unless DOM changes) with a fall back to a continuous dirty checking cycle if the first one is not supported. Handles non-delayed CSS transitions/animations and can optionally observe resizing of a `<textarea>` element along with changes caused by the `:hover` pseudo-class.
9+
Implementation is based on the MutationObserver (no polling unless DOM changes) with a fall back to a continuous dirty checking cycle if the first one is not supported. Doesn't modify observed elements. Handles non-delayed CSS transitions/animations and can optionally observe resizing of a `<textarea>` element along with changes caused by the `:hover` pseudo-class.
1010

11-
Compliant with the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. Doesn't contain any publicly available methods except for those described in spec. The size is _3.0kb_ when minified and gzipped.
11+
Compliant with the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. The size is _3.0kb_ when minified and gzipped.
1212

1313
[Live demo](http://que-etc.github.io/resize-observer-polyfill) (has style problems in IE10 and lower).
1414

@@ -43,7 +43,6 @@ Polyfill has been tested and known to work in the following browsers:
4343

4444
## Usage Examples
4545

46-
### Local export
4746
It's recommended to use this library in the form of the [ponyfill](https://github.com/sindresorhus/ponyfill), which doesn't inflict modifications of the global object.
4847

4948
```javascript
@@ -61,64 +60,54 @@ const ro = new ResizeObserver((entries, observer) => {
6160

6261
ro.observe(document.body);
6362
```
64-
65-
Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) module and it will be dynamically substituted by the ES6 version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) or `module` fields, e.g. for [Rollup](https://github.com/rollup/rollup).
66-
67-
In case you want to specify which version to use, you can either take `resize-observer-polyfill/index` for ES6 modules or `resize-observer-polyfill/dist/ResizeObserver` for UMD.
68-
69-
### Global export
70-
Use following versions if you want polyfill to extend global object.
71-
72-
ES6 module:
63+
Though you always can extend the global object manually if you need it.
7364

7465
```javascript
75-
import 'resize-observer-polyfill/index.global';
66+
import ResizeObserver from 'resize-observer-polyfill';
7667

77-
const ro = new ResizeObserver(() => {});
68+
window.ResizeObserver = ResizeObserver;
7869
```
7970

80-
UMD version: `resize-observer-polyfill/dist/ResizeObserver.global`.
71+
Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) module and it will be dynamically substituted by the ES6 version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) or `module` fields, e.g. for [Rollup](https://github.com/rollup/rollup) or [Webpack 2](https://webpack.js.org/).
8172

82-
You can also take minified bundles: `ResizeObserver.min.js` or `ResizeObserver.global.min.js`.
73+
**Note**: global versions (`index.global` and `dist/ResizeObserver.global`) and will be removed in the next major release.
8374

8475
## Configuration
8576

8677
`ResizeObserver` class additionally implements following static accessor property:
8778

8879
### continuousUpdates
8980

90-
By default things like resizing of a `<textarea>` element, changes caused by the CSS `:hover` pseudo-class and delayed CSS transitions are not tracked. To handle them you can set `ResizeObserver.continuousUpdates = true` which in turn will start a continuous update cycle which runs every `100` milliseconds (as a RAF callback, of course). Keep in mind that this is going to affect the performance.
81+
By default things like resizing of a `<textarea>` element, changes caused by the CSS `:hover` pseudo-class and delayed CSS transitions are not tracked. To handle them you can set `ResizeObserver.continuousUpdates = true` which in turn will start a continuous update cycle which runs every `100` milliseconds (as a RAF callback). Keep in mind that this is going to affect the performance.
9182

9283
**NOTE:** changes made to this property affect all existing and future instances of ResizeObserver.
9384

9485
## Building and testing
9586

96-
First make sure that you have all dependencies installed by running `npm install`. Then you can execute following tasks either with a gulp CLI or with the `npm run gulp` command.
97-
98-
To build polyfill. This will create UMD bundles in the `dist` folder:
87+
To build polyfill. Creates UMD bundle in the `dist` folder:
9988

10089
```sh
101-
gulp build
90+
npm run build
10291
```
10392

10493
To run a code style test:
10594
```sh
106-
gulp test:lint
95+
npm run test:lint
10796
```
10897

109-
Functional tests for all available browsers defined in `karma.config.js` file:
98+
Running unit tests:
11099
```sh
111-
gulp test:spec
100+
npm run test:spec
112101
```
113102

114103
To test in a browser that is not present in karmas' config file:
115104
```sh
116-
gulp test:spec:custom
105+
npm run test:spec:custom
117106
```
118107

119108
Testing against a native implementation:
120109
```sh
121-
gulp test:spec:native
110+
npm run test:spec:native
122111
```
123112

124113
**NOTE:** after you invoke `spec:native` and `spec:custom` commands head to the `http://localhost:9876/debug.html` page.

bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
"name": "resize-observer-polyfill",
33
"description": "A polyfill for the Resize Observer API",
44
"authors": [
5-
"Denis Rul <que.etc@bgmail.com>"
5+
"Denis Rul <que.etc@gmail.com>"
66
],
77
"moduleType": [
88
"globals",
99
"amd",
1010
"node",
1111
"es6"
1212
],
13-
"version": "1.2.1",
13+
"version": "1.3.0",
1414
"main": [
1515
"dist/ResizeObserver.js"
1616
],

0 commit comments

Comments
 (0)