viewport-truth 1.0.5 → 1.0.7
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 +21 -15
- package/package.json +13 -2
package/README.md
CHANGED
|
@@ -11,6 +11,13 @@
|
|
|
11
11
|
|
|
12
12
|
Stop guessing mobile viewport sizes. viewport-truth delivers stable, keyboard-aware visible viewport metrics (VisualViewport-first) across iOS Safari, Android Chrome, PWAs, and webviews—framework adapters included, SSR-safe, zero runtime deps.
|
|
13
13
|
|
|
14
|
+
<p align="center">
|
|
15
|
+
<img src="./assets/demo.min.gif" width="900" alt="Demo: stable visible viewport when keyboard opens">
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
*Demo: tracks the **visible** viewport (VisualViewport), keeping UI stable when the URL bar / keyboard changes the viewport.*
|
|
19
|
+
|
|
20
|
+
|
|
14
21
|
```bash
|
|
15
22
|
npm i viewport-truth
|
|
16
23
|
# or: yarn add viewport-truth
|
|
@@ -18,7 +25,7 @@ npm i viewport-truth
|
|
|
18
25
|
```
|
|
19
26
|
|
|
20
27
|
|
|
21
|
-
|
|
28
|
+
## Quick Start
|
|
22
29
|
Minimal flow: import → create → subscribe → get { width, height, isKeyboardOpen, isStable }.
|
|
23
30
|
|
|
24
31
|
```js
|
|
@@ -39,11 +46,8 @@ const unsub = vt.subscribe((v) => {
|
|
|
39
46
|
// vt.destroy();
|
|
40
47
|
```
|
|
41
48
|
|
|
42
|
-
##
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
> Run it in a real page (Vite/Parcel/Next) — the snippet won’t execute inside README.
|
|
46
|
-
> On mobile: scroll a bit (URL bar), then focus the input (keyboard).
|
|
49
|
+
## Demo snippet (keyboard + URL bar)
|
|
50
|
+
Use this in a real page (Vite/Parcel/Next). On mobile: scroll a bit (URL bar), then focus the input (keyboard).
|
|
47
51
|
|
|
48
52
|
```html
|
|
49
53
|
<div id="app" style="padding:16px 16px 96px">
|
|
@@ -97,10 +101,6 @@ stable: ${v.isStable}`;
|
|
|
97
101
|
</script>
|
|
98
102
|
```
|
|
99
103
|
|
|
100
|
-
### Smoke test (clean environment)
|
|
101
|
-
Step-by-step guide: **[smoke-test.md](https://github.com/AntonVoronezh/viewport-truth/blob/main//docs/smoke-test.md)**.
|
|
102
|
-
|
|
103
|
-
|
|
104
104
|
## Features
|
|
105
105
|
A few concrete, technical reasons it behaves well on mobile:
|
|
106
106
|
|
|
@@ -134,13 +134,19 @@ Framework adapters:
|
|
|
134
134
|
|
|
135
135
|
Full types and signatures: see `dist/*.d.ts` (or TypeScript IntelliSense).
|
|
136
136
|
|
|
137
|
-
Adapter Docs: [React](https://github.
|
|
138
|
-
[Vue](https://github.
|
|
139
|
-
[Svelte](https://github.
|
|
140
|
-
[Solid](https://github.
|
|
141
|
-
[Angular](https://github.
|
|
137
|
+
Adapter Docs: [React](https://antonvoronezh.github.io/viewport-truth/react) •
|
|
138
|
+
[Vue](https://antonvoronezh.github.io/viewport-truth/vue) •
|
|
139
|
+
[Svelte](https://antonvoronezh.github.io/viewport-truth/svelte) •
|
|
140
|
+
[Solid](https://antonvoronezh.github.io/viewport-truth/solid) •
|
|
141
|
+
[Angular](https://antonvoronezh.github.io/viewport-truth/angular)
|
|
142
142
|
> **Tip:** Open links in a new tab with **Ctrl+Click** (Windows/Linux) or **Cmd+Click** (macOS).
|
|
143
143
|
|
|
144
|
+
### Links
|
|
145
|
+
[FAQ](https://antonvoronezh.github.io/viewport-truth/faq) •
|
|
146
|
+
[Common pitfalls](https://antonvoronezh.github.io/viewport-truth/common-pitfalls) •
|
|
147
|
+
[Smoke test (clean environment)](https://antonvoronezh.github.io/viewport-truth/smoke-test) •
|
|
148
|
+
[Versioning policy](https://github.com/AntonVoronezh/viewport-truth/blob/main/SEMVER_POLICY.md)
|
|
149
|
+
|
|
144
150
|
## Support the project
|
|
145
151
|
|
|
146
152
|
> “We ate the Geometry Hell for you: jumping `100vh`, jittery `resize`, modals under the keyboard.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "viewport-truth",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Tiny zero‑config VisualViewport-first store for accurate visible viewport size in CSS pixels. Detects virtual keyboard, stabilizes resize/scroll jitter, and is SSR-safe across frameworks.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "AntonVoronezh",
|
|
@@ -35,7 +35,10 @@
|
|
|
35
35
|
"clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
|
|
36
36
|
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
37
37
|
"test": "vitest run",
|
|
38
|
-
"test:watch": "vitest"
|
|
38
|
+
"test:watch": "vitest",
|
|
39
|
+
"docs:dev": "vitepress dev docs",
|
|
40
|
+
"docs:build": "vitepress build docs",
|
|
41
|
+
"docs:preview": "vitepress preview docs"
|
|
39
42
|
},
|
|
40
43
|
"keywords": [
|
|
41
44
|
"viewport",
|
|
@@ -103,6 +106,12 @@
|
|
|
103
106
|
"devDependencies": {
|
|
104
107
|
"@angular/common": "^17.3.0",
|
|
105
108
|
"@angular/core": "^17.3.0",
|
|
109
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
110
|
+
"@semantic-release/commit-analyzer": "^11.1.0",
|
|
111
|
+
"@semantic-release/git": "^10.0.1",
|
|
112
|
+
"@semantic-release/github": "^10.3.5",
|
|
113
|
+
"@semantic-release/npm": "^13.1.3",
|
|
114
|
+
"@semantic-release/release-notes-generator": "^12.1.0",
|
|
106
115
|
"@types/node": "^22.0.0",
|
|
107
116
|
"@types/react": "^18.3.0",
|
|
108
117
|
"@types/react-dom": "^18.3.0",
|
|
@@ -111,9 +120,11 @@
|
|
|
111
120
|
"react": "^18.3.0",
|
|
112
121
|
"react-dom": "^18.3.0",
|
|
113
122
|
"rxjs": "^7.8.0",
|
|
123
|
+
"semantic-release": "^23.1.1",
|
|
114
124
|
"solid-js": "^1.9.0",
|
|
115
125
|
"svelte": "^4.2.0",
|
|
116
126
|
"typescript": "^5.5.4",
|
|
127
|
+
"vitepress": "^1.6.4",
|
|
117
128
|
"vitest": "^4.0.18",
|
|
118
129
|
"vue": "^3.5.0"
|
|
119
130
|
},
|