feat: Add defaultState option to remove a cookie for a specified de…

…fault state

Discussed in #17

Closes #17

demo/store.ts

@@ -61,6 +61,7 @@ const makeStore = wrapMakeStore(() =>
 							cookieName: "NEXT_LOCALE",
 							serializationFunction: String,
 							deserializationFunction: String,
+							defaultState: pageSlice.getInitialState().locale,
 						},
 					],
 				})

main/src/config.ts

@@ -37,6 +37,21 @@ export interface SubtreeConfig extends CookieOptions {
 	 */
 	cookieName?: string;
 
+	/**
+	 * If this option is set and no cookie exists for the subtree, the subtree's state will be set to
+	 * the provided `defaultState`. Similarly, if the subtree's state becomes the provided
+	 * `defaultState` and a cookie exists for the subtree, the cookie will be deleted.
+	 *
+	 * An example use case for the `defaultState` option are authorization cookies that are created
+	 * when a client logs in, and removed when the auth-related state is reset on logout.
+	 *
+	 * @note `defaultState` masks the subtree's initial Redux state, i.e., when `defaultState` differs
+	 * from the initial state, the initial state will always be replaced by `defaultState`. Hence,
+	 * when you provide a `defaultState`, it is recommended that it equals the subtree's initial Redux
+	 * state.
+	 */
+	defaultState?: unknown;
+
 	/**
 	 * Whether or not to compress cookie values using lz-string. Defaults to `true` if
 	 * {@link SubtreeConfig.serializationFunction} and {@link SubtreeConfig.deserializationFunction}
@@ -122,10 +137,11 @@ export function processMiddlewareConfig(
 				}
 
 				const {
-					ignoreStateFromStaticProps,
-					compress,
 					subtree,
+					ignoreStateFromStaticProps,
 					cookieName,
+					defaultState,
+					compress,
 					serializationFunction,
 					deserializationFunction,
 					...cookieOptions
@@ -135,10 +151,11 @@ export function processMiddlewareConfig(
 					...current,
 				};
 				return {
-					ignoreStateFromStaticProps,
-					compress: compress ?? !(serializationFunction ?? deserializationFunction),
 					subtree,
+					ignoreStateFromStaticProps,
 					cookieName,
+					defaultState,
+					compress: compress ?? !(serializationFunction ?? deserializationFunction),
 					serializationFunction,
 					deserializationFunction,
 					cookieOptions,

main/src/cookies.ts

@@ -2,7 +2,7 @@
 
 import {compressToEncodedURIComponent, decompressFromEncodedURIComponent} from "lz-string";
 import {GetServerSidePropsContext, NextPageContext} from "next";
-import {parseCookies, setCookie} from "nookies";
+import {destroyCookie, parseCookies, setCookie} from "nookies";
 import {SetRequired} from "type-fest";
 
 import {InternalSubtreeConfig} from "./config";
@@ -17,7 +17,12 @@ export type CookieContext = SetRequired<
 
 export type CookieConfig = Pick<
 	InternalSubtreeConfig,
-	"cookieName" | "compress" | "cookieOptions" | "serializationFunction" | "deserializationFunction"
+	| "cookieName"
+	| "defaultState"
+	| "compress"
+	| "cookieOptions"
+	| "serializationFunction"
+	| "deserializationFunction"
 >;
 
 /**
@@ -66,13 +71,17 @@ export class StateCookies {
 		// Parse cookies if they have not been parsed, always re-parse cookies on the client
 		if (typeof this._cookies === "undefined" || isClient()) {
 			this._cookies = {};
-			for (const [name, value] of Object.entries(
-				parseCookies(this._context, {decode: (value: string) => value})
-			)) {
-				const cookieConfig = this._config.get(name);
-				if (cookieConfig) {
+			const allCookies = parseCookies(this._context, {decode: String});
+
+			for (const [cookieName, cookieConfig] of this._config.entries()) {
+				if (typeof allCookies[cookieName] !== "undefined") {
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-					this._cookies[name] = StateCookies._decodeState(value, cookieConfig);
+					this._cookies[cookieName] = StateCookies._decodeState(
+						allCookies[cookieName],
+						cookieConfig
+					);
+				} else if (typeof cookieConfig.defaultState !== "undefined") {
+					this._cookies[cookieName] = cookieConfig.defaultState;
 				}
 			}
 		}
@@ -90,4 +99,12 @@ export class StateCookies {
 			httpOnly: false,
 		});
 	}
+
+	public delete(name: string) {
+		const {cookieOptions} = this._config.get(name)!;
+		destroyCookie(this._context, name, {
+			...cookieOptions,
+			httpOnly: false,
+		});
+	}
 }

main/src/index.ts

@@ -132,9 +132,17 @@ export const nextReduxCookieMiddleware: (config: NextReduxCookieMiddlewareConfig
 					if (cookies) {
 						walkState(
 							subtrees,
-							({cookieName}, oldSubtreeState, newSubtreeState) => {
+							({cookieName, defaultState}, oldSubtreeState, newSubtreeState) => {
 								if (!isEqual(oldSubtreeState, newSubtreeState)) {
-									cookies.set(cookieName, newSubtreeState);
+									// Subtree state has changed
+									if (
+										typeof defaultState !== "undefined" &&
+										isEqual(newSubtreeState, defaultState)
+									) {
+										cookies.delete(cookieName);
+									} else {
+										cookies.set(cookieName, newSubtreeState);
+									}
 								}
 							},
 							oldState,

main/src/state-walker.ts

@@ -34,7 +34,7 @@ export const walkState = <State extends JsonObject>(
 	stateA: State,
 	stateB?: State
 ) =>
-	// The following TS error is only reported when testing via TSDX, hence not using ts-expect-error here
+	// The following TS error is only reported when testing, hence not using ts-expect-error here
 	// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 	// @ts-ignore https://github.com/immerjs/immer/issues/839
 	produce(stateA, (draftState) => {

main/test/__snapshots__/config.spec.ts.snap

@@ -9,6 +9,7 @@ Object {
     "sameSite": false,
     "secure": true,
   },
+  "defaultState": undefined,
   "deserializationFunction": undefined,
   "ignoreStateFromStaticProps": false,
   "serializationFunction": undefined,
@@ -25,6 +26,7 @@ Object {
     "sameSite": false,
     "secure": true,
   },
+  "defaultState": undefined,
   "deserializationFunction": undefined,
   "ignoreStateFromStaticProps": false,
   "serializationFunction": undefined,

main/test/cookies.client.spec.ts

@@ -7,7 +7,7 @@ import {destroyCookie} from "nookies";
 import {StateCookies} from "../src/cookies";
 
 describe("StateCookies on the client", () => {
-	it("should be able to set and get cookies", () => {
+	it("should be able to set, get, and delete cookies", () => {
 		const cookies = new StateCookies();
 		cookies.setConfigurations([
 			{cookieName: "cookie1", compress: true, cookieOptions: {}},
@@ -24,8 +24,10 @@ describe("StateCookies on the client", () => {
 		cookies.set("cookie2", cookie2);
 		expect(cookies.getAll()).toEqual({cookie1, cookie2});
 
-		destroyCookie(null, "cookie1");
-		destroyCookie(null, "cookie2");
+		cookies.delete("cookie2");
+		expect(cookies.getAll()).toEqual({cookie1});
+
+		cookies.delete("cookie1");
 		expect(cookies.getAll()).toEqual({});
 	});
 
@@ -68,4 +70,16 @@ describe("StateCookies on the client", () => {
 			deserializationFunction.mockClear();
 		}
 	});
+
+	it("should respect a cookie's `defaultState` option", () => {
+		const cookies = new StateCookies();
+		cookies.setConfigurations([
+			{cookieName: "myCookie", compress: true, defaultState: "default", cookieOptions: {}},
+		]);
+
+		expect(cookies.getAll()).toEqual({myCookie: "default"});
+
+		cookies.set("myCookie", "custom");
+		expect(cookies.getAll()).toEqual({myCookie: "custom"});
+	});
 });

main/test/cookies.server.spec.ts

@@ -8,9 +8,10 @@ import {CookieContext, StateCookies} from "../src/cookies";
 
 export function parseSetCookieHeaders(response: ServerResponse) {
 	const headers = response.getHeader("set-cookie") as string | string[];
-
 	return Object.fromEntries(
-		parse(headers, {decodeValues: false}).map((cookie) => [cookie.name, cookie.value])
+		Object.entries(parse(headers, {map: true, decodeValues: false}))
+			.filter(([, cookie]) => cookie.maxAge !== -1)
+			.map(([key, cookie]) => [key, cookie.value])
 	);
 }
 
@@ -27,18 +28,23 @@ describe("StateCookies on the server", () => {
 		context = createMocks();
 	});
 
-	it("should be able to set and get cookies", () => {
+	it("should be able to set, get, and delete cookies", () => {
 		const cookies = new StateCookies(context);
 		cookies.setConfigurations([
 			{cookieName: "cookie1", compress: true, cookieOptions: {}},
 			{cookieName: "cookie2", compress: false, cookieOptions: {path: "/"}},
+			{cookieName: "cookie3", compress: true, cookieOptions: {}},
 		]);
 
 		const cookie1 = {my: {fancy: "state"}};
 		const cookie2 = {second: "state"};
 		cookies.set("cookie1", cookie1);
 		cookies.set("cookie2", cookie2);
 
+		const cookie3 = {second: "state"};
+		cookies.set("cookie3", cookie3);
+		cookies.delete("cookie3");
+
 		// Parse the set-cookie header from the response
 		const parsedCookies = parseSetCookieHeaders(context.res);
 		expect(parsedCookies).toEqual({
@@ -56,4 +62,13 @@ describe("StateCookies on the server", () => {
 		// object (request cookies do not change)
 		expect(cookies.getAll()).toBe(retrievedCookies);
 	});
+
+	it("should respect a cookie's `defaultState` option", () => {
+		const cookies = new StateCookies();
+		cookies.setConfigurations([
+			{cookieName: "myCookie", compress: true, defaultState: "default", cookieOptions: {}},
+		]);
+
+		expect(cookies.getAll()).toEqual({myCookie: "default"});
+	});
 });

main/test/index.client.spec.ts

@@ -123,4 +123,26 @@ describe("nextReduxCookieMiddleware() on the client", () => {
 			["cookie2", "incoming2"],
 		]);
 	});
+
+	it("should delete state cookies that match their `defaultState`s", () => {
+		const {next, invoke, setState} = createMiddlewareTestFunctions({
+			subtrees: [{subtree: "mySubtree", cookieName: "myCookie", defaultState: {the: "default"}}],
+		});
+		const stateCookies = getStateCookiesInstance();
+
+		setState({mySubtree: {custom: "state"}});
+
+		// Simulate an action that resets the state to the default state
+		next.mockImplementationOnce(() => {
+			setState({mySubtree: {the: "default"}});
+		});
+		invoke({type: "some-action"});
+
+		// The middleware should not have set myCookie
+		expect(stateCookies.set).toHaveBeenCalledTimes(0);
+
+		// Instead, myCookie should have been deleted
+		expect(stateCookies.delete).toHaveBeenCalledTimes(1);
+		expect(stateCookies.delete).toHaveBeenCalledWith("myCookie");
+	});
 });