From 73fb5178e121499737c6d3d74a2dfd698e1079ad Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 20 Jan 2026 20:41:57 -0500 Subject: [PATCH] Update docs to show cookie path=/ --- integrations/next/app/components/Group.tsx | 2 +- integrations/vike/pages/index/useCookieStorage.ts | 2 +- public/generated/examples/ClientComponent.json | 2 +- public/generated/examples/cookieStorage.json | 2 +- src/routes/PersistentLayoutsServerComponentsRoute.tsx | 10 +++++++++- src/routes/PersistentLayoutsServerRenderingRoute.tsx | 8 ++++++++ src/routes/examples/ClientComponent.tsx | 2 +- src/routes/examples/cookieStorage.tsx | 2 +- 8 files changed, 23 insertions(+), 7 deletions(-) diff --git a/integrations/next/app/components/Group.tsx b/integrations/next/app/components/Group.tsx index 595700308..8fdaf436a 100644 --- a/integrations/next/app/components/Group.tsx +++ b/integrations/next/app/components/Group.tsx @@ -10,7 +10,7 @@ export default function Group(props: Omit) { { - document.cookie = `${props.id}=${JSON.stringify(layout)}`; + document.cookie = `${props.id}=${JSON.stringify(layout)}; path=/`; }} /> ); diff --git a/integrations/vike/pages/index/useCookieStorage.ts b/integrations/vike/pages/index/useCookieStorage.ts index 27debd566..18c013ace 100644 --- a/integrations/vike/pages/index/useCookieStorage.ts +++ b/integrations/vike/pages/index/useCookieStorage.ts @@ -28,7 +28,7 @@ export function useCookieStorage() { ); const setItem = useCallback((key: string, value: string) => { - document.cookie = `${key}=${value}`; + document.cookie = `${key}=${value}; path=/`; }, []); return useMemo( diff --git a/public/generated/examples/ClientComponent.json b/public/generated/examples/ClientComponent.json index 784329edb..063f4a184 100644 --- a/public/generated/examples/ClientComponent.json +++ b/public/generated/examples/ClientComponent.json @@ -1,3 +1,3 @@ { - "html": "
(\"use client\");
\n
 
\n
export default function ClientComponent({
\n
defaultLayout,
\n
groupId
\n
}: {
\n
defaultLayout: Layout | undefined;
\n
groupId: string;
\n
}) {
\n
return (
\n
<Group
\n
defaultLayout={defaultLayout}
\n
id={groupId}
\n
onLayoutChange={(layout) => {
\n
document.cookie = `${groupId}=${JSON.stringify(layout)}`;
\n
}}
\n
>
\n
<Panel id=\"left\" minSize={25}>
\n
left
\n
</Panel>
\n
<Panel id=\"right\" minSize={25}>
\n
right
\n
</Panel>
\n
</Group>
\n
);
\n
}
" + "html": "
(\"use client\");
\n
 
\n
export default function ClientComponent({
\n
defaultLayout,
\n
groupId
\n
}: {
\n
defaultLayout: Layout | undefined;
\n
groupId: string;
\n
}) {
\n
return (
\n
<Group
\n
defaultLayout={defaultLayout}
\n
id={groupId}
\n
onLayoutChange={(layout) => {
\n
document.cookie = `${groupId}=${JSON.stringify(layout)}; path=/;`;
\n
}}
\n
>
\n
<Panel id=\"left\" minSize={25}>
\n
left
\n
</Panel>
\n
<Panel id=\"right\" minSize={25}>
\n
right
\n
</Panel>
\n
</Group>
\n
);
\n
}
" } \ No newline at end of file diff --git a/public/generated/examples/cookieStorage.json b/public/generated/examples/cookieStorage.json index db843e37a..95588cc98 100644 --- a/public/generated/examples/cookieStorage.json +++ b/public/generated/examples/cookieStorage.json @@ -1,3 +1,3 @@ { - "html": "
import { type LayoutStorage } from \"react-resizable-panels\";
\n
 
\n
const cookieStorage: LayoutStorage = {
\n
getItem(key: string) {
\n
const cookies = document.cookie.split(\";\");
\n
for (const cookie of cookies) {
\n
const [name, value] = cookie.trim().split(\"=\");
\n
if (name === key) {
\n
return value;
\n
}
\n
}
\n
return null;
\n
},
\n
setItem(key: string, value: string) {
\n
document.cookie = `${key}=${value}`;
\n
}
\n
};
\n
 
\n
useDefaultLayout({
\n
id: \"unique-layout-id\",
\n
storage: cookieStorage
\n
});
" + "html": "
import { type LayoutStorage } from \"react-resizable-panels\";
\n
 
\n
const cookieStorage: LayoutStorage = {
\n
getItem(key: string) {
\n
const cookies = document.cookie.split(\";\");
\n
for (const cookie of cookies) {
\n
const [name, value] = cookie.trim().split(\"=\");
\n
if (name === key) {
\n
return value;
\n
}
\n
}
\n
return null;
\n
},
\n
setItem(key: string, value: string) {
\n
document.cookie = `${key}=${value}; path=/;`;
\n
}
\n
};
\n
 
\n
useDefaultLayout({
\n
id: \"unique-layout-id\",
\n
storage: cookieStorage
\n
});
" } \ No newline at end of file diff --git a/src/routes/PersistentLayoutsServerComponentsRoute.tsx b/src/routes/PersistentLayoutsServerComponentsRoute.tsx index 2b378822c..cb2baa2c3 100644 --- a/src/routes/PersistentLayoutsServerComponentsRoute.tsx +++ b/src/routes/PersistentLayoutsServerComponentsRoute.tsx @@ -1,4 +1,4 @@ -import { Box, Code, ExternalLink, Header } from "react-lib-tools"; +import { Box, Callout, Code, ExternalLink, Header } from "react-lib-tools"; import { html as ClientComponentExampleHTML } from "../../public/generated/examples/ClientComponent.json"; import { html as ServerComponentExampleHTML } from "../../public/generated/examples/ServerComponent.json"; @@ -19,6 +19,14 @@ export default function PersistentLayoutsServerComponentsRoute() { + + The example above includes path=/ so that saved layouts can + be shared between paths; see{" "} + + Using HTTP cookies + {" "} + for more. + ); } diff --git a/src/routes/PersistentLayoutsServerRenderingRoute.tsx b/src/routes/PersistentLayoutsServerRenderingRoute.tsx index 9b7b35e3b..d591df5a9 100644 --- a/src/routes/PersistentLayoutsServerRenderingRoute.tsx +++ b/src/routes/PersistentLayoutsServerRenderingRoute.tsx @@ -26,6 +26,14 @@ export default function PersistentLayoutsServerRenderingRoute() { . + + The example above includes path=/ so that saved layouts can + be shared between paths; see{" "} + + Using HTTP cookies + {" "} + for more. + ); } diff --git a/src/routes/examples/ClientComponent.tsx b/src/routes/examples/ClientComponent.tsx index 40cd59fa4..97ad8e95f 100644 --- a/src/routes/examples/ClientComponent.tsx +++ b/src/routes/examples/ClientComponent.tsx @@ -17,7 +17,7 @@ export default function ClientComponent({ defaultLayout={defaultLayout} id={groupId} onLayoutChange={(layout) => { - document.cookie = `${groupId}=${JSON.stringify(layout)}`; + document.cookie = `${groupId}=${JSON.stringify(layout)}; path=/;`; }} > diff --git a/src/routes/examples/cookieStorage.tsx b/src/routes/examples/cookieStorage.tsx index 1d7722ac6..b2e1eae67 100644 --- a/src/routes/examples/cookieStorage.tsx +++ b/src/routes/examples/cookieStorage.tsx @@ -16,7 +16,7 @@ const cookieStorage: LayoutStorage = { return null; }, setItem(key: string, value: string) { - document.cookie = `${key}=${value}`; + document.cookie = `${key}=${value}; path=/;`; } };