Is there a way to properly type cookies

[kesdigital]

My current implementation is this,

//  types.d.ts
type Theme = 'dark' | 'light' | 'system';

/**
 * CookieFactory - no pun intended
 * @param fixedProps contains all extra types to be added to the default cookie type
 * @param dynamicProps the default cookie type
 * @returns
 */
function CookieFactory(fixedProps: { theme?: Theme }, dynamicProps: Record<string, string>) {
	return Object.assign({}, dynamicProps, fixedProps);
}

type ExtendedCookies = ReturnType<typeof CookieFactory>;

// I got the CookieFactory code from StackOverflow and have no idea how it works since am new to typescript

export let handle: Handle = async ({ event, resolve }) => {
	const reqCookies: ExtendedCookies = cookie.parse(event.request.headers.get('Cookie') || '');

	if (reqCookies.theme) {
		event.locals.theme = reqCookies.theme;
	} else {
		event.locals.theme = defaultTheme;
	}

        / .......

	return response;
};

Any help will be greatly appreciated

[theetherGit]

Have you tried new cookie implementation of kit??

[kesdigital]

Just tried it

// types.d.ts
type Theme = 'system' | 'dark' | 'light';

// layout.server.ts

import type { LayoutServerLoad } from './$types';

import { defaultTheme } from '$lib/config';

export let load: LayoutServerLoad = ({ locals, cookies, request }) => {
  let theme: Theme;
  const cookieTheme = cookies.get('theme');
  if (cookieTheme) {
    theme = cookieTheme // ERROR 'type string is not assignable to type Theme'
  } else {
    cookies.set('theme', defaultTheme, { secure: false, httpOnly: false });
    theme = defaultTheme;
  }
  return {theme}
}

I would really like for my theme to be typed as 'system' or 'light' or 'dark', not just any string.

[theetherGit]

I can suggest a post which explains typescript types handling click here

[kesdigital]

This helped clear things out for me, thanks
Here is the new code

// types
import type { LayoutServerLoad } from './$types';

export let load: LayoutServerLoad = ({ locals, cookies, request }) => {
  let theme: Theme = 'system';
  const cookieTheme = cookies.get('theme');
  if (cookieTheme) {
    theme = cookieTheme as Theme;
  } else {
    cookies.set('theme', 'system', { secure: false, httpOnly: false })
  }
  return {theme}
}

[theetherGit]

// types
import type { LayoutServerLoad } from './$types';

export let load: LayoutServerLoad = ({ cookies }) => {
  let theme: Theme = 'system';
  const cookieTheme = cookies.get('theme');
  if (cookieTheme) {
    theme = cookieTheme as Theme;
  } else {
    cookies.set('theme', 'system', { secure: false, httpOnly: false })
  }
  return {theme}
}

There is an alternative to this one where you are handling themes using cookie like you can use stores for themes which is more preferable (according to me).

[kesdigital]

My plan is to use both, a cookie during ssr, then mutating the cookie and store on the client when the user changes it. But am open to easier implementations.
You mention using a store, do stores run on the server during ssr?

[theetherGit]

No, svelte stores not run on server.