@revivejs/resize-observer 4.0.4 → 4.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +98 -70
- package/package.json +11 -3
package/README.md
CHANGED
|
@@ -1,65 +1,71 @@
|
|
|
1
1
|
# @revivejs/resize-observer
|
|
2
2
|
|
|
3
|
-
> A maintained ResizeObserver ponyfill for browser applications, with support for content-box
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@revivejs/resize-observer)
|
|
6
|
+
[](https://www.npmjs.com/package/@revivejs/resize-observer)
|
|
7
|
+
[](https://www.npmjs.com/package/@revivejs/resize-observer)
|
|
8
|
+
[](https://github.com/alexandroit/resize-observer/blob/HEAD/LICENSE)
|
|
9
|
+
[](https://developer.mozilla.org/docs/Web/JavaScript)
|
|
10
|
+
[](https://www.typescriptlang.org)
|
|
10
11
|
[](https://github.com/alexandroit/resize-observer/stargazers)
|
|
11
12
|
|
|
12
|
-
**[Documentation &
|
|
13
|
+
**[Documentation & Live Demos](https://alexandroit.github.io/resize-observer/)** | **[npm](https://www.npmjs.com/package/@revivejs/resize-observer)** | **[Issues](https://github.com/alexandroit/resize-observer/issues)** | **[Repository](https://github.com/alexandroit/resize-observer)**
|
|
14
|
+
|
|
15
|
+
**Latest version:** `4.0.5`
|
|
13
16
|
|
|
14
17
|
---
|
|
15
18
|
|
|
16
19
|
> **Credits:** Original project by Juggle.
|
|
17
|
-
> Maintained and
|
|
20
|
+
> Maintained and republished by Alexandroit under the ReviveJS scope.
|
|
18
21
|
|
|
19
22
|
---
|
|
20
23
|
|
|
21
|
-
## Why this
|
|
22
|
-
|
|
23
|
-
`@revivejs/resize-observer` preserves the proven upstream ResizeObserver polyfill while updating the package metadata, docs, demo pipeline, and repository automation for the current maintainer. It stays framework-agnostic, so Angular, React, Vue, Web Components, and plain browser apps can all use the same entry point.
|
|
24
|
+
## Why this library?
|
|
24
25
|
|
|
25
|
-
|
|
26
|
+
`@revivejs/resize-observer` keeps the proven ResizeObserver ponyfill API available under active
|
|
27
|
+
package ownership for teams that still need a browser-safe observer implementation with box-size
|
|
28
|
+
support. The package stays intentionally close to the maintained 4.0.x line while cleaning up
|
|
29
|
+
metadata, documentation, and GitHub Pages delivery.
|
|
26
30
|
|
|
27
31
|
## Features
|
|
28
32
|
|
|
29
33
|
| Feature | Supported |
|
|
30
34
|
| :--- | :---: |
|
|
31
|
-
| ResizeObserver ponyfill
|
|
32
|
-
| `content-box`
|
|
33
|
-
| `
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
40
|
-
---
|
|
35
|
+
| Maintained ResizeObserver 4.0.x ponyfill line | ✅ |
|
|
36
|
+
| `content-box`, `border-box`, and `device-pixel-content-box` | ✅ |
|
|
37
|
+
| Classic `contentRect` plus box-size arrays | ✅ |
|
|
38
|
+
| HTML, inline, and SVG targets | ✅ |
|
|
39
|
+
| Transition, animation, and lifecycle observation demos | ✅ |
|
|
40
|
+
| ESM and UMD bundles | ✅ |
|
|
41
|
+
| TypeScript declaration files | ✅ |
|
|
42
|
+
| Versioned docs per published package release | ✅ |
|
|
41
43
|
|
|
42
44
|
## Table of Contents
|
|
43
45
|
|
|
44
|
-
1. [
|
|
46
|
+
1. [Published Version Compatibility](#published-version-compatibility)
|
|
45
47
|
2. [Installation](#installation)
|
|
46
|
-
3. [
|
|
47
|
-
4. [
|
|
48
|
-
5. [
|
|
49
|
-
6. [
|
|
50
|
-
7. [
|
|
51
|
-
8. [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
##
|
|
56
|
-
|
|
57
|
-
| Package
|
|
58
|
-
|
|
|
59
|
-
| 4.
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
3. [Setup](#setup)
|
|
49
|
+
4. [Basic Usage](#basic-usage)
|
|
50
|
+
5. [Core APIs](#core-apis)
|
|
51
|
+
6. [Box Options and Output](#box-options-and-output)
|
|
52
|
+
7. [Browser Assets](#browser-assets)
|
|
53
|
+
8. [Run Locally](#run-locally)
|
|
54
|
+
9. [Publishing](#publishing)
|
|
55
|
+
10. [License](#license)
|
|
56
|
+
|
|
57
|
+
## Published Version Compatibility
|
|
58
|
+
|
|
59
|
+
| Package version | Maintained line | Runtime target | TypeScript declarations | Demo link |
|
|
60
|
+
| :---: | :---: | :--- | :--- | :--- |
|
|
61
|
+
| **4.0.5** | **ResizeObserver 4.0.x** | **Modern browsers with ES2018 demo bundle** | **`lib/exports/resize-observer.d.ts`** | [ResizeObserver 4.0.5 docs](https://alexandroit.github.io/resize-observer/v4.0.5/) |
|
|
62
|
+
| **4.0.4** | **ResizeObserver 4.0.x** | **Modern browsers with ES2018 demo bundle** | **`lib/exports/resize-observer.d.ts`** | [ResizeObserver 4.0.4 docs](https://alexandroit.github.io/resize-observer/v4.0.4/) |
|
|
63
|
+
| 4.0.3 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | `lib/exports/resize-observer.d.ts` | [ResizeObserver 4.0.3 docs](https://alexandroit.github.io/resize-observer/v4.0.3/) |
|
|
64
|
+
| 4.0.2 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | `lib/exports/resize-observer.d.ts` | [ResizeObserver 4.0.2 docs](https://alexandroit.github.io/resize-observer/v4.0.2/) |
|
|
65
|
+
| 4.0.1 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | `lib/exports/resize-observer.d.ts` | [ResizeObserver 4.0.1 docs](https://alexandroit.github.io/resize-observer/v4.0.1/) |
|
|
66
|
+
| 4.0.0 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | `lib/exports/resize-observer.d.ts` | [ResizeObserver 4.0.0 docs](https://alexandroit.github.io/resize-observer/v4.0.0/) |
|
|
67
|
+
|
|
68
|
+
Earlier `3.x` releases were published from the original upstream package line at `@juggle/resize-observer`.
|
|
63
69
|
|
|
64
70
|
---
|
|
65
71
|
|
|
@@ -71,58 +77,78 @@ npm install @revivejs/resize-observer
|
|
|
71
77
|
|
|
72
78
|
---
|
|
73
79
|
|
|
74
|
-
##
|
|
80
|
+
## Setup
|
|
75
81
|
|
|
76
82
|
```ts
|
|
77
83
|
import { ResizeObserver } from '@revivejs/resize-observer';
|
|
78
84
|
|
|
79
|
-
const
|
|
85
|
+
const observer = new ResizeObserver((entries) => {
|
|
80
86
|
for (const entry of entries) {
|
|
81
|
-
|
|
82
|
-
entry.target.setAttribute(
|
|
83
|
-
'data-size',
|
|
84
|
-
`${Math.round(inlineSize)} x ${Math.round(blockSize)}`
|
|
85
|
-
);
|
|
87
|
+
console.log(entry.contentRect.width, entry.contentRect.height);
|
|
86
88
|
}
|
|
87
89
|
});
|
|
88
|
-
|
|
89
|
-
ro.observe(document.body, { box: 'content-box' });
|
|
90
90
|
```
|
|
91
91
|
|
|
92
92
|
---
|
|
93
93
|
|
|
94
|
-
##
|
|
94
|
+
## Basic Usage
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
```ts
|
|
97
|
+
import { ResizeObserver } from '@revivejs/resize-observer';
|
|
97
98
|
|
|
98
|
-
|
|
99
|
+
const target = document.querySelector('[data-resize-target]');
|
|
99
100
|
|
|
100
|
-
|
|
101
|
+
const observer = new ResizeObserver((entries) => {
|
|
102
|
+
for (const entry of entries) {
|
|
103
|
+
const contentSize = entry.contentBoxSize[0];
|
|
104
|
+
console.log({
|
|
105
|
+
width: entry.contentRect.width,
|
|
106
|
+
height: entry.contentRect.height,
|
|
107
|
+
inlineSize: contentSize?.inlineSize,
|
|
108
|
+
blockSize: contentSize?.blockSize
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
});
|
|
101
112
|
|
|
102
|
-
|
|
113
|
+
observer.observe(target, { box: 'content-box' });
|
|
114
|
+
```
|
|
103
115
|
|
|
104
|
-
|
|
116
|
+
---
|
|
105
117
|
|
|
106
|
-
|
|
118
|
+
## Core APIs
|
|
107
119
|
|
|
108
|
-
|
|
120
|
+
| API | Description |
|
|
121
|
+
| :--- | :--- |
|
|
122
|
+
| `new ResizeObserver(callback)` | Creates an observer that receives `ResizeObserverEntry[]` and the active observer instance. |
|
|
123
|
+
| `observe(target, options?)` | Starts observing an `Element` with an optional box selection. |
|
|
124
|
+
| `unobserve(target)` | Stops observing one target while leaving the observer active for others. |
|
|
125
|
+
| `disconnect()` | Stops every active observation on the observer. |
|
|
109
126
|
|
|
110
|
-
|
|
127
|
+
---
|
|
111
128
|
|
|
112
|
-
|
|
129
|
+
## Box Options and Output
|
|
113
130
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
131
|
+
| Option / Field | Description |
|
|
132
|
+
| :--- | :--- |
|
|
133
|
+
| `box: 'content-box'` | Measures the content box and maps naturally to text and padding-free layouts. |
|
|
134
|
+
| `box: 'border-box'` | Includes padding and borders for container-style sizing workflows. |
|
|
135
|
+
| `box: 'device-pixel-content-box'` | Exposes device-pixel measurements when the runtime supports them. |
|
|
136
|
+
| `contentRect` | Legacy rectangle snapshot used widely in existing production code. |
|
|
137
|
+
| `contentBoxSize` | Logical inline/block sizes for the content box. |
|
|
138
|
+
| `borderBoxSize` | Logical inline/block sizes for the border box. |
|
|
139
|
+
| `devicePixelContentBoxSize` | Logical inline/block sizes expressed in device pixels. |
|
|
118
140
|
|
|
119
141
|
---
|
|
120
142
|
|
|
121
|
-
##
|
|
143
|
+
## Browser Assets
|
|
144
|
+
|
|
145
|
+
The published package keeps the maintained distribution layout:
|
|
122
146
|
|
|
123
|
-
|
|
|
124
|
-
| :--- | :--- |
|
|
125
|
-
| `
|
|
147
|
+
| File | Description |
|
|
148
|
+
| :--- | :--- |
|
|
149
|
+
| `lib/exports/resize-observer.js` | ESM bundle |
|
|
150
|
+
| `lib/exports/resize-observer.umd.js` | UMD/browser-compatible bundle |
|
|
151
|
+
| `lib/exports/resize-observer.d.ts` | TypeScript declarations |
|
|
126
152
|
|
|
127
153
|
---
|
|
128
154
|
|
|
@@ -132,6 +158,7 @@ Stops all active observations for the observer.
|
|
|
132
158
|
npm install
|
|
133
159
|
npm test
|
|
134
160
|
npm run build
|
|
161
|
+
npm run build:docs:all
|
|
135
162
|
npm start
|
|
136
163
|
```
|
|
137
164
|
|
|
@@ -149,11 +176,12 @@ npm publish --access public
|
|
|
149
176
|
|
|
150
177
|
## License
|
|
151
178
|
|
|
152
|
-
Apache-2.0
|
|
179
|
+
Apache-2.0. See [LICENSE](LICENSE).
|
|
153
180
|
|
|
154
181
|
---
|
|
155
182
|
|
|
156
183
|
## Credits
|
|
157
184
|
|
|
158
185
|
- Original project: Juggle
|
|
159
|
-
-
|
|
186
|
+
- Upstream repository: https://github.com/juggle/resize-observer
|
|
187
|
+
- Maintained by: Alexandroit
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revivejs/resize-observer",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.5",
|
|
4
4
|
"description": "Polyfills the ResizeObserver API and supports box size options from the latest spec",
|
|
5
5
|
"main": "lib/exports/resize-observer.umd.js",
|
|
6
6
|
"module": "lib/exports/resize-observer.js",
|
|
@@ -18,13 +18,21 @@
|
|
|
18
18
|
"lib/**/*.{js,ts}"
|
|
19
19
|
],
|
|
20
20
|
"scripts": {
|
|
21
|
-
"clean": "rm -rf lib docs/index.html docs/page.js docs/page.css",
|
|
21
|
+
"clean": "rm -rf lib docs/v* docs/index.html docs/page.js docs/page.css docs/.nojekyll",
|
|
22
22
|
"build": "npm run clean && npm run build:lib && npm run build:docs",
|
|
23
23
|
"build:lib": "npm run build:esm && npm run build:umd",
|
|
24
24
|
"build:esm": "tsc",
|
|
25
25
|
"build:umd": "rollup -c",
|
|
26
|
-
"build:docs": "node scripts/build-docs.mjs",
|
|
26
|
+
"build:docs": "node scripts/build-docs.mjs --all",
|
|
27
|
+
"build:docs:all": "node scripts/build-docs.mjs --all",
|
|
28
|
+
"build:docs:v4.0.0": "node scripts/build-docs.mjs v4.0.0",
|
|
29
|
+
"build:docs:v4.0.1": "node scripts/build-docs.mjs v4.0.1",
|
|
30
|
+
"build:docs:v4.0.2": "node scripts/build-docs.mjs v4.0.2",
|
|
31
|
+
"build:docs:v4.0.3": "node scripts/build-docs.mjs v4.0.3",
|
|
32
|
+
"build:docs:v4.0.4": "node scripts/build-docs.mjs v4.0.4",
|
|
33
|
+
"build:docs:v4.0.5": "node scripts/build-docs.mjs v4.0.5",
|
|
27
34
|
"build:package": "npm run build",
|
|
35
|
+
"docs:build": "npm run build:docs",
|
|
28
36
|
"pack:check": "npm pack --dry-run",
|
|
29
37
|
"start": "npm run build:docs && serve docs -l 4173",
|
|
30
38
|
"ci": "npm test && npm run build && npm run pack:check",
|