Svelte 5 Window Screen width size for Mobile and desktop functionalities.

[rchavezj]

Describe the problem

In svelte 4 I had the following file device.js

import {writable, derived} from 'svelte/store';
// a SvelteKit provided variable that indicates if we're on browser
import {browser} from '$app/environment';

//default to 0 width - this won't be updated server side because svelte:window won't work server side
export const width = writable(0);
//this will be set server side, from the __layout.svelte component
export const mobile = writable(true);

//This store computes what device to render for
export const device = derived([width, mobile], ([width, mobile]) => {
    // if width is >800 (px) or we're not on browser and a mobile view hasn't been requested
    if (width > 800 || (!browser && !mobile)) {
        //then we're on desktop
        return 'desktop';
    // if width is >420 (px) then we're on the browser and we're on a tablet
    } else if (width > 420) {
        // we're on a tablet
        return 'tablet';
    } else {
        // if none of the previous conditions were satisfied, we're either not on a device >420px, 
        // or we're on the server, and a mobile view has been requested
        return 'mobile';
    }
});


export const navbar_device = derived([width, mobile], ([width, mobile]) => {
    // if width is >800 (px) or we're not on browser and a mobile view hasn't been requested
    if (width > 1125 || (!browser && !mobile)) {
        //then we're on desktop
        return 'desktop_nav';
    // if width is >420 (px) then we're on the browser and we're on a tablet
    } else if (width > 420) {
        // we're on a tablet
        return 'tablet_nav';
    } else {
        // if none of the previous conditions were satisfied, we're either not on a device >420px, 
        // or we're on the server, and a mobile view has been requested
        return 'mobile_nav';
    }
})

But I want to recreate this file to support svelte 5 signals $state but keep having issues getting the latest data of the windows width

Describe the proposed solution

Something close to this

// import {writable, derived} from 'svelte/store';
// a SvelteKit provided variable that indicates if we're on browser
import {browser} from '$app/environment';

//default to 0 width - this won't be updated server side because svelte:window won't work server side
export const width = $state(0);
//this will be set server side, from the __layout.svelte component
export const mobile = $state(true);

//This store computes what device to render for
export const device = $derived.by(() => {
    // if width is >800 (px) or we're not on browser and a mobile view hasn't been requested
    if (width > 800 || (!browser && !mobile)) {
        //then we're on desktop
        return 'desktop';
    // if width is >420 (px) then we're on the browser and we're on a tablet
    } else if (width > 420) {
        // we're on a tablet
        return 'tablet';
    } else {
        // if none of the previous conditions were satisfied, we're either not on a device >420px, 
        // or we're on the server, and a mobile view has been requested
        return 'mobile';
    }
});


export const navbar_device = $derived.by(() => {
    // if width is >800 (px) or we're not on browser and a mobile view hasn't been requested
    if (width > 1125 || (!browser && !mobile)) {
        //then we're on desktop
        return 'desktop_nav';
    // if width is >420 (px) then we're on the browser and we're on a tablet
    } else if (width > 420) {
        // we're on a tablet
        return 'tablet_nav';
    } else {
        // if none of the previous conditions were satisfied, we're either not on a device >420px, 
        // or we're on the server, and a mobile view has been requested
        return 'mobile_nav';
    }
})

Importance

i cannot use svelte without it

[Conduitry]

If you have a concrete bug, please open another issue with a minimal reproduction.

At a high level, I would suggest https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery and https://svelte.dev/docs/svelte/svelte-reactivity-window as a way to get Svelte 5 fine-grained reactive object that you can build $deriveds on top of.