Improved server rendering support for defaultSize prop

Author: bvaughn

integrations/next/app/page.tsx

@@ -10,6 +10,7 @@ export default async function Home() {
   return (
     <div className="p-2 flex flex-col gap-2">
       <LayoutShiftDetecter />
+      <div className="text-lg">Group: Default layout</div>
       <Group
         className="h-25 gap-2"
         defaultLayout={defaultLayoutOne}
@@ -59,10 +60,32 @@ export default async function Home() {
           id: bottom
         </Panel>
       </Group>
+      <div className="text-lg">Panel: Default sizes</div>
+      <DefaultSize defaultSize="25%" />
+      <DefaultSize defaultSize="100px" />
+      <DefaultSize defaultSize="25vw" />
+      <DefaultSize defaultSize="15rem" />
     </div>
   );
 }
 
+function DefaultSize({ defaultSize }: { defaultSize: string }) {
+  return (
+    <Group className="h-25 gap-2">
+      <Panel className="bg-slate-800 rounded rounded-md p-2" id="left">
+        left
+      </Panel>
+      <Panel
+        className="bg-slate-800 rounded rounded-md p-2"
+        defaultSize={defaultSize}
+        id="right"
+      >
+        right: {defaultSize}
+      </Panel>
+    </Group>
+  );
+}
+
 async function getDefaultLayout(groupId: string) {
   const api = await cookies();
   const defaultLayoutString = api.get(groupId)?.value;

integrations/vike/pages/index/+Page.tsx

@@ -23,7 +23,7 @@ export default function Page() {
   return (
     <div className="p-2 flex flex-col gap-2">
       <LayoutShiftDetecter />
-
+      <div className="text-lg">Group: Default layout</div>
       <Group className="h-25 gap-2" {...groupOneProps}>
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
@@ -68,6 +68,28 @@ export default function Page() {
           id: bottom
         </Panel>
       </Group>
+      <div className="text-lg">Panel: Default sizes</div>
+      <DefaultSize defaultSize="25%" />
+      <DefaultSize defaultSize="100px" />
+      <DefaultSize defaultSize="25vw" />
+      <DefaultSize defaultSize="15rem" />
     </div>
   );
 }
+
+function DefaultSize({ defaultSize }: { defaultSize: string }) {
+  return (
+    <Group className="h-25 gap-2">
+      <Panel className="bg-slate-800 rounded rounded-md p-2" id="left">
+        left
+      </Panel>
+      <Panel
+        className="bg-slate-800 rounded rounded-md p-2"
+        defaultSize={defaultSize}
+        id="right"
+      >
+        right: {defaultSize}
+      </Panel>
+    </Group>
+  );
+}

integrations/vite/src/routes/Home.tsx

@@ -18,7 +18,7 @@ export function HomeRoute() {
   return (
     <div className="p-2 flex flex-col gap-2">
       <LayoutShiftDetecter />
-
+      <div className="text-lg">Group: Default layout</div>
       <Group className="h-25 gap-2" {...groupOneProps}>
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
@@ -63,6 +63,28 @@ export function HomeRoute() {
           id: bottom
         </Panel>
       </Group>
+      <div className="text-lg">Panel: Default sizes</div>
+      <DefaultSize defaultSize="25%" />
+      <DefaultSize defaultSize="100px" />
+      <DefaultSize defaultSize="25vw" />
+      <DefaultSize defaultSize="15rem" />
     </div>
   );
 }
+
+function DefaultSize({ defaultSize }: { defaultSize: string }) {
+  return (
+    <Group className="h-25 gap-2">
+      <Panel className="bg-slate-800 rounded rounded-md p-2" id="left">
+        left
+      </Panel>
+      <Panel
+        className="bg-slate-800 rounded rounded-md p-2"
+        defaultSize={defaultSize}
+        id="right"
+      >
+        right: {defaultSize}
+      </Panel>
+    </Group>
+  );
+}