Skip to content

Commit d43a10b

Browse files
Rich-Harrisdummdidumm
Rich-Harris
and
dummdidumm
authored
feat: add svelte/reactivity/window module (#14660)
* feat: add `svelte/reactivity/window` module * lint * fix * hide private types * online binding * tweak docs * tweak * add @SInCE tags --------- Co-authored-by: Simon Holthausen <[email protected]>
1 parent a2539cf commit d43a10b

File tree

9 files changed

+289
-23
lines changed

9 files changed

+289
-23
lines changed

‎.changeset/orange-ducks-obey.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': minor
3+
---
4+
5+
feat: add `svelte/reactivity/window` module

‎documentation/docs/98-reference/21-svelte-reactivity-window.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: svelte/reactivity/window
3+
---
4+
5+
This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.
6+
7+
```svelte
8+
<script>
9+
import { innerWidth, innerHeight } from 'svelte/reactivity/window';
10+
</script>
11+
12+
<p>{innerWidth.current}x{innerHeight.current}</p>
13+
```
14+
15+
> MODULE: svelte/reactivity/window

‎packages/svelte/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@
7373
"browser": "./src/reactivity/index-client.js",
7474
"default": "./src/reactivity/index-server.js"
7575
},
76+
"./reactivity/window": {
77+
"types": "./types/index.d.ts",
78+
"default": "./src/reactivity/window/index.js"
79+
},
7680
"./server": {
7781
"types": "./types/index.d.ts",
7882
"default": "./src/server/index.js"

‎packages/svelte/scripts/generate-types.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ await createBundle({
3535
[`${pkg.name}/legacy`]: `${dir}/src/legacy/legacy-client.js`,
3636
[`${pkg.name}/motion`]: `${dir}/src/motion/public.d.ts`,
3737
[`${pkg.name}/reactivity`]: `${dir}/src/reactivity/index-client.js`,
38+
[`${pkg.name}/reactivity/window`]: `${dir}/src/reactivity/window/index.js`,
3839
[`${pkg.name}/server`]: `${dir}/src/server/index.d.ts`,
3940
[`${pkg.name}/store`]: `${dir}/src/store/public.d.ts`,
4041
[`${pkg.name}/transition`]: `${dir}/src/transition/public.d.ts`,

‎packages/svelte/src/internal/client/dom/task.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { run_all } from '../../shared/utils.js';
22

33
// Fallback for when requestIdleCallback is not available
4-
const request_idle_callback =
4+
export const request_idle_callback =
55
typeof requestIdleCallback === 'undefined'
66
? (/** @type {() => void} */ cb) => setTimeout(cb, 1)
77
: requestIdleCallback;

‎packages/svelte/src/reactivity/media-query.js

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { createSubscriber } from './create-subscriber.js';
21
import { on } from '../events/index.js';
2+
import { ReactiveValue } from './reactive-value.js';
33

44
/**
55
* Creates a media query and provides a `current` property that reflects whether or not it matches.
@@ -16,26 +16,19 @@ import { on } from '../events/index.js';
1616
*
1717
* <h1>{large.current ? 'large screen' : 'small screen'}</h1>
1818
* ```
19+
* @extends {ReactiveValue<boolean>}
1920
* @since 5.7.0
2021
*/
21-
export class MediaQuery {
22-
#query;
23-
#subscribe = createSubscriber((update) => {
24-
return on(this.#query, 'change', update);
25-
});
26-
27-
get current() {
28-
this.#subscribe();
29-
30-
return this.#query.matches;
31-
}
32-
22+
export class MediaQuery extends ReactiveValue {
3323
/**
3424
* @param {string} query A media query string
35-
* @param {boolean} [matches] Fallback value for the server
25+
* @param {boolean} [fallback] Fallback value for the server
3626
*/
37-
constructor(query, matches) {
38-
// For convenience (and because people likely forget them) we add the parentheses; double parentheses are not a problem
39-
this.#query = window.matchMedia(`(${query})`);
27+
constructor(query, fallback) {
28+
const q = window.matchMedia(`(${query})`);
29+
super(
30+
() => q.matches,
31+
(update) => on(q, 'change', update)
32+
);
4033
}
4134
}

‎packages/svelte/src/reactivity/reactive-value.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createSubscriber } from './create-subscriber.js';
2+
3+
/**
4+
* @template T
5+
*/
6+
export class ReactiveValue {
7+
#fn;
8+
#subscribe;
9+
10+
/**
11+
*
12+
* @param {() => T} fn
13+
* @param {(update: () => void) => void} onsubscribe
14+
*/
15+
constructor(fn, onsubscribe) {
16+
this.#fn = fn;
17+
this.#subscribe = createSubscriber(onsubscribe);
18+
}
19+
20+
get current() {
21+
this.#subscribe();
22+
return this.#fn();
23+
}
24+
}

‎packages/svelte/src/reactivity/window/index.js

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { BROWSER } from 'esm-env';
2+
import { on } from '../../events/index.js';
3+
import { ReactiveValue } from '../reactive-value.js';
4+
import { get } from '../../internal/client/index.js';
5+
import { set, source } from '../../internal/client/reactivity/sources.js';
6+
7+
/**
8+
* `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
9+
* @since 5.11.0
10+
*/
11+
export const scrollX = new ReactiveValue(
12+
BROWSER ? () => window.scrollX : () => undefined,
13+
(update) => on(window, 'scroll', update)
14+
);
15+
16+
/**
17+
* `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
18+
* @since 5.11.0
19+
*/
20+
export const scrollY = new ReactiveValue(
21+
BROWSER ? () => window.scrollY : () => undefined,
22+
(update) => on(window, 'scroll', update)
23+
);
24+
25+
/**
26+
* `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
27+
* @since 5.11.0
28+
*/
29+
export const innerWidth = new ReactiveValue(
30+
BROWSER ? () => window.innerWidth : () => undefined,
31+
(update) => on(window, 'resize', update)
32+
);
33+
34+
/**
35+
* `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
36+
* @since 5.11.0
37+
*/
38+
export const innerHeight = new ReactiveValue(
39+
BROWSER ? () => window.innerHeight : () => undefined,
40+
(update) => on(window, 'resize', update)
41+
);
42+
43+
/**
44+
* `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
45+
* @since 5.11.0
46+
*/
47+
export const outerWidth = new ReactiveValue(
48+
BROWSER ? () => window.outerWidth : () => undefined,
49+
(update) => on(window, 'resize', update)
50+
);
51+
52+
/**
53+
* `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
54+
* @since 5.11.0
55+
*/
56+
export const outerHeight = new ReactiveValue(
57+
BROWSER ? () => window.outerHeight : () => undefined,
58+
(update) => on(window, 'resize', update)
59+
);
60+
61+
/**
62+
* `screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
63+
* @since 5.11.0
64+
*/
65+
export const screenLeft = new ReactiveValue(
66+
BROWSER ? () => window.screenLeft : () => undefined,
67+
(update) => {
68+
let value = window.screenLeft;
69+
70+
let frame = requestAnimationFrame(function check() {
71+
frame = requestAnimationFrame(check);
72+
73+
if (value !== (value = window.screenLeft)) {
74+
update();
75+
}
76+
});
77+
78+
return () => {
79+
cancelAnimationFrame(frame);
80+
};
81+
}
82+
);
83+
84+
/**
85+
* `screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
86+
* @since 5.11.0
87+
*/
88+
export const screenTop = new ReactiveValue(
89+
BROWSER ? () => window.screenTop : () => undefined,
90+
(update) => {
91+
let value = window.screenTop;
92+
93+
let frame = requestAnimationFrame(function check() {
94+
frame = requestAnimationFrame(check);
95+
96+
if (value !== (value = window.screenTop)) {
97+
update();
98+
}
99+
});
100+
101+
return () => {
102+
cancelAnimationFrame(frame);
103+
};
104+
}
105+
);
106+
107+
/**
108+
* `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
109+
* @since 5.11.0
110+
*/
111+
export const online = new ReactiveValue(
112+
BROWSER ? () => navigator.onLine : () => undefined,
113+
(update) => {
114+
const unsub_online = on(window, 'online', update);
115+
const unsub_offline = on(window, 'offline', update);
116+
return () => {
117+
unsub_online();
118+
unsub_offline();
119+
};
120+
}
121+
);
122+
123+
/**
124+
* `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
125+
* Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
126+
* on Firefox and Safari it won't.
127+
* @type {{ get current(): number }}
128+
* @since 5.11.0
129+
*/
130+
export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {
131+
#dpr = source(BROWSER ? window.devicePixelRatio : undefined);
132+
133+
#update() {
134+
const off = on(
135+
window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`),
136+
'change',
137+
() => {
138+
set(this.#dpr, window.devicePixelRatio);
139+
140+
off();
141+
this.#update();
142+
}
143+
);
144+
}
145+
146+
constructor() {
147+
this.#update();
148+
}
149+
150+
get current() {
151+
get(this.#dpr);
152+
return window.devicePixelRatio;
153+
}
154+
})();

‎packages/svelte/types/index.d.ts

Lines changed: 75 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1900,16 +1900,15 @@ declare module 'svelte/reactivity' {
19001900
*
19011901
* <h1>{large.current ? 'large screen' : 'small screen'}</h1>
19021902
* ```
1903+
* @extends {ReactiveValue<boolean>}
19031904
* @since 5.7.0
19041905
*/
1905-
export class MediaQuery {
1906+
export class MediaQuery extends ReactiveValue<boolean> {
19061907
/**
19071908
* @param query A media query string
1908-
* @param matches Fallback value for the server
1909+
* @param fallback Fallback value for the server
19091910
*/
1910-
constructor(query: string, matches?: boolean | undefined);
1911-
get current(): boolean;
1912-
#private;
1911+
constructor(query: string, fallback?: boolean | undefined);
19131912
}
19141913
/**
19151914
* Returns a `subscribe` function that, if called in an effect (including expressions in the template),
@@ -1953,6 +1952,77 @@ declare module 'svelte/reactivity' {
19531952
* @since 5.7.0
19541953
*/
19551954
export function createSubscriber(start: (update: () => void) => (() => void) | void): () => void;
1955+
class ReactiveValue<T> {
1956+
1957+
constructor(fn: () => T, onsubscribe: (update: () => void) => void);
1958+
get current(): T;
1959+
#private;
1960+
}
1961+
1962+
export {};
1963+
}
1964+
1965+
declare module 'svelte/reactivity/window' {
1966+
/**
1967+
* `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
1968+
* @since 5.11.0
1969+
*/
1970+
export const scrollX: ReactiveValue<number | undefined>;
1971+
/**
1972+
* `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
1973+
* @since 5.11.0
1974+
*/
1975+
export const scrollY: ReactiveValue<number | undefined>;
1976+
/**
1977+
* `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
1978+
* @since 5.11.0
1979+
*/
1980+
export const innerWidth: ReactiveValue<number | undefined>;
1981+
/**
1982+
* `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
1983+
* @since 5.11.0
1984+
*/
1985+
export const innerHeight: ReactiveValue<number | undefined>;
1986+
/**
1987+
* `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
1988+
* @since 5.11.0
1989+
*/
1990+
export const outerWidth: ReactiveValue<number | undefined>;
1991+
/**
1992+
* `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
1993+
* @since 5.11.0
1994+
*/
1995+
export const outerHeight: ReactiveValue<number | undefined>;
1996+
/**
1997+
* `screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
1998+
* @since 5.11.0
1999+
*/
2000+
export const screenLeft: ReactiveValue<number | undefined>;
2001+
/**
2002+
* `screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
2003+
* @since 5.11.0
2004+
*/
2005+
export const screenTop: ReactiveValue<number | undefined>;
2006+
/**
2007+
* `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
2008+
* @since 5.11.0
2009+
*/
2010+
export const online: ReactiveValue<boolean | undefined>;
2011+
/**
2012+
* `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
2013+
* Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
2014+
* on Firefox and Safari it won't.
2015+
* @since 5.11.0
2016+
*/
2017+
export const devicePixelRatio: {
2018+
get current(): number;
2019+
};
2020+
class ReactiveValue<T> {
2021+
2022+
constructor(fn: () => T, onsubscribe: (update: () => void) => void);
2023+
get current(): T;
2024+
#private;
2025+
}
19562026

19572027
export {};
19582028
}

0 commit comments

Comments
 (0)