Skip to content

Commit

Permalink
Switch 'module' and 'jsnext:main' fields to the es6 module bundle
Browse files Browse the repository at this point in the history
* Deprecate the global version
* Remove dependency on gulp
* Remove minified versions
  • Loading branch information
que-etc committed Dec 16, 2016
1 parent 8343dff commit ae4bb0e
Show file tree
Hide file tree
Showing 13 changed files with 1,215 additions and 154 deletions.
41 changes: 15 additions & 26 deletions README.md
Expand Up @@ -6,9 +6,9 @@ ResizeObserver Polyfill

A polyfill for the Resize Observer API.

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.
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.

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.
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.

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

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

## Usage Examples

### Local export
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.

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

ro.observe(document.body);
```

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).

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.

### Global export
Use following versions if you want polyfill to extend global object.

ES6 module:
Though you always can extend the global object manually if you need it.

```javascript
import 'resize-observer-polyfill/index.global';
import ResizeObserver from 'resize-observer-polyfill';

const ro = new ResizeObserver(() => {});
window.ResizeObserver = ResizeObserver;
```

UMD version: `resize-observer-polyfill/dist/ResizeObserver.global`.
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/).

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

## Configuration

`ResizeObserver` class additionally implements following static accessor property:

### continuousUpdates

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.
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.

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

## Building and testing

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.

To build polyfill. This will create UMD bundles in the `dist` folder:
To build polyfill. Creates UMD bundle in the `dist` folder:

```sh
gulp build
npm run build
```

To run a code style test:
```sh
gulp test:lint
npm run test:lint
```

Functional tests for all available browsers defined in `karma.config.js` file:
Running unit tests:
```sh
gulp test:spec
npm run test:spec
```

To test in a browser that is not present in karmas' config file:
```sh
gulp test:spec:custom
npm run test:spec:custom
```

Testing against a native implementation:
```sh
gulp test:spec:native
npm run test:spec:native
```

**NOTE:** after you invoke `spec:native` and `spec:custom` commands head to the `http://localhost:9876/debug.html` page.
Expand Down
4 changes: 2 additions & 2 deletions bower.json
Expand Up @@ -2,15 +2,15 @@
"name": "resize-observer-polyfill",
"description": "A polyfill for the Resize Observer API",
"authors": [
"Denis Rul <que.etc@bgmail.com>"
"Denis Rul <que.etc@gmail.com>"
],
"moduleType": [
"globals",
"amd",
"node",
"es6"
],
"version": "1.2.1",
"version": "1.3.0",
"main": [
"dist/ResizeObserver.js"
],
Expand Down

0 comments on commit ae4bb0e

Please sign in to comment.