pull/14660/head
Rich Harris 2 years ago
parent cb2efe6c65
commit 42b8d773ad

@ -2,7 +2,7 @@
title: svelte/reactivity/window title: svelte/reactivity/window
--- ---
This module exports reactive versions of various `window` properties, which you can use in components and [deriveds]($derived) and [effects]($effect) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners. 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.
```svelte ```svelte
<script> <script>

@ -5,7 +5,7 @@ import { get } from '../../internal/client/index.js';
import { set, source } from '../../internal/client/reactivity/sources.js'; import { set, source } from '../../internal/client/reactivity/sources.js';
/** /**
* `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined` * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
*/ */
export const scrollX = new ReactiveValue( export const scrollX = new ReactiveValue(
BROWSER ? () => window.scrollX : () => undefined, BROWSER ? () => window.scrollX : () => undefined,
@ -13,7 +13,7 @@ export const scrollX = new ReactiveValue(
); );
/** /**
* `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined` * `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
*/ */
export const scrollY = new ReactiveValue( export const scrollY = new ReactiveValue(
BROWSER ? () => window.scrollY : () => undefined, BROWSER ? () => window.scrollY : () => undefined,
@ -21,7 +21,7 @@ export const scrollY = new ReactiveValue(
); );
/** /**
* `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined` * `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
*/ */
export const innerWidth = new ReactiveValue( export const innerWidth = new ReactiveValue(
BROWSER ? () => window.innerWidth : () => undefined, BROWSER ? () => window.innerWidth : () => undefined,
@ -29,7 +29,7 @@ export const innerWidth = new ReactiveValue(
); );
/** /**
* `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined` * `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
*/ */
export const innerHeight = new ReactiveValue( export const innerHeight = new ReactiveValue(
BROWSER ? () => window.innerHeight : () => undefined, BROWSER ? () => window.innerHeight : () => undefined,
@ -37,7 +37,7 @@ export const innerHeight = new ReactiveValue(
); );
/** /**
* `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined` * `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
*/ */
export const outerWidth = new ReactiveValue( export const outerWidth = new ReactiveValue(
BROWSER ? () => window.outerWidth : () => undefined, BROWSER ? () => window.outerWidth : () => undefined,
@ -45,7 +45,7 @@ export const outerWidth = new ReactiveValue(
); );
/** /**
* `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined` * `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
*/ */
export const outerHeight = new ReactiveValue( export const outerHeight = new ReactiveValue(
BROWSER ? () => window.outerHeight : () => undefined, BROWSER ? () => window.outerHeight : () => undefined,
@ -53,7 +53,7 @@ export const outerHeight = new ReactiveValue(
); );
/** /**
* `screenLeft.current` is a reactive view of `window.screenLeft`. On the server it is `undefined` * `screenLeft.current` is a reactive view of `window.screenLeft`. On the server it is `undefined`.
*/ */
export const screenLeft = new ReactiveValue( export const screenLeft = new ReactiveValue(
BROWSER ? () => window.screenLeft : () => undefined, BROWSER ? () => window.screenLeft : () => undefined,
@ -75,7 +75,7 @@ export const screenLeft = new ReactiveValue(
); );
/** /**
* `screenTop.current` is a reactive view of `window.screenTop`. On the server it is `undefined` * `screenTop.current` is a reactive view of `window.screenTop`. On the server it is `undefined`.
*/ */
export const screenTop = new ReactiveValue( export const screenTop = new ReactiveValue(
BROWSER ? () => window.screenTop : () => undefined, BROWSER ? () => window.screenTop : () => undefined,
@ -97,7 +97,7 @@ export const screenTop = new ReactiveValue(
); );
/** /**
* `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined` * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
*/ */
export const online = new ReactiveValue( export const online = new ReactiveValue(
BROWSER ? () => navigator.onLine : () => undefined, BROWSER ? () => navigator.onLine : () => undefined,
@ -114,7 +114,7 @@ export const online = new ReactiveValue(
/** /**
* `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`. * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
* Note that behaviour differs between browsers on Chrome it will respond to the current zoom level, * Note that behaviour differs between browsers on Chrome it will respond to the current zoom level,
* on Firefox and Safari it won't * on Firefox and Safari it won't.
* @type {{ get current(): number }} * @type {{ get current(): number }}
*/ */
export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio { export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {

@ -1964,45 +1964,45 @@ declare module 'svelte/reactivity' {
declare module 'svelte/reactivity/window' { declare module 'svelte/reactivity/window' {
/** /**
* `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined` * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
*/ */
export const scrollX: ReactiveValue<number | undefined>; export const scrollX: ReactiveValue<number | undefined>;
/** /**
* `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined` * `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
*/ */
export const scrollY: ReactiveValue<number | undefined>; export const scrollY: ReactiveValue<number | undefined>;
/** /**
* `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined` * `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
*/ */
export const innerWidth: ReactiveValue<number | undefined>; export const innerWidth: ReactiveValue<number | undefined>;
/** /**
* `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined` * `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
*/ */
export const innerHeight: ReactiveValue<number | undefined>; export const innerHeight: ReactiveValue<number | undefined>;
/** /**
* `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined` * `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
*/ */
export const outerWidth: ReactiveValue<number | undefined>; export const outerWidth: ReactiveValue<number | undefined>;
/** /**
* `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined` * `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
*/ */
export const outerHeight: ReactiveValue<number | undefined>; export const outerHeight: ReactiveValue<number | undefined>;
/** /**
* `screenLeft.current` is a reactive view of `window.screenLeft`. On the server it is `undefined` * `screenLeft.current` is a reactive view of `window.screenLeft`. On the server it is `undefined`.
*/ */
export const screenLeft: ReactiveValue<number | undefined>; export const screenLeft: ReactiveValue<number | undefined>;
/** /**
* `screenTop.current` is a reactive view of `window.screenTop`. On the server it is `undefined` * `screenTop.current` is a reactive view of `window.screenTop`. On the server it is `undefined`.
*/ */
export const screenTop: ReactiveValue<number | undefined>; export const screenTop: ReactiveValue<number | undefined>;
/** /**
* `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined` * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
*/ */
export const online: ReactiveValue<boolean | undefined>; export const online: ReactiveValue<boolean | undefined>;
/** /**
* `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`. * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
* Note that behaviour differs between browsers on Chrome it will respond to the current zoom level, * Note that behaviour differs between browsers on Chrome it will respond to the current zoom level,
* on Firefox and Safari it won't * on Firefox and Safari it won't.
* */ * */
export const devicePixelRatio: { export const devicePixelRatio: {
get current(): number; get current(): number;

Loading…
Cancel
Save