Demo/dxa quirks

apps/csk-v-next/package.json

@@ -51,6 +51,7 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "ua-parser-js": "^2.0.3",
     "use-debounce": "^10.0.4",
     "zod": "^3.24.2"
   },

apps/csk-v-next/src/app/[[...path]]/page.tsx

@@ -1,26 +1,40 @@
+import { cookies } from 'next/headers';
 import {
   PageParameters,
   UniformComposition,
+  createServerUniformContext,
   isIncontextEditingEnabled,
   retrieveRoute,
+  ContextUpdateTransfer,
 } from '@uniformdev/canvas-next-rsc';
 import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
 import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
 import { componentResolver } from '@/components';
 
 export default async function Home(props: PageParameters) {
+  const cookieStore = await cookies();
+  const deviceType = cookieStore.get('deviceType')?.value || '';
   const route = await retrieveRoute(props);
-
   const searchParams = await props.searchParams;
+  const serverContext = await createServerUniformContext({
+    searchParams,
+  });
   const isPreviewMode = isIncontextEditingEnabled({ searchParams });
   return (
     <DesignExtensionsProvider isPreviewMode={isPreviewMode}>
+      <ContextUpdateTransfer
+        serverContext={serverContext}
+        update={{
+          quirks: { ...(deviceType ? { deviceType } : undefined) },
+        }}
+      />
       <UniformComposition
         {...props}
         route={route}
         resolveComponent={componentResolver}
         mode="server"
         resolveEmptyPlaceholder={emptyPlaceholderResolver}
+        serverContext={serverContext}
       />
     </DesignExtensionsProvider>
   );

apps/csk-v-next/src/components/custom-ui/DeviceTypeSetter.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useUniformContext } from '@uniformdev/canvas-next-rsc/component';
+
+enum DeviceType {
+  MOBILE = 'm',
+  TABLET = 't',
+  DESKTOP = 'd',
+}
+
+const DEVICE_RESOLUTION = {
+  [DeviceType.MOBILE]: 360,
+  [DeviceType.TABLET]: 768,
+  [DeviceType.DESKTOP]: 1280,
+};
+
+const determineDeviceType = (width: number): DeviceType => {
+  if (width < DEVICE_RESOLUTION[DeviceType.TABLET]) {
+    return DeviceType.MOBILE;
+  } else if (width < DEVICE_RESOLUTION[DeviceType.DESKTOP]) {
+    return DeviceType.TABLET;
+  } else {
+    return DeviceType.DESKTOP;
+  }
+};
+
+export const DeviceTypeSetter = () => {
+  const { context } = useUniformContext();
+
+  const deviceType = DeviceType.DESKTOP;
+
+  useEffect(() => {
+    const updateDeviceType = () => {
+      const width = window.innerWidth;
+      const deviceType = determineDeviceType(width);
+      context?.update({
+        quirks: { deviceType },
+      });
+    };
+
+    updateDeviceType();
+
+    window.addEventListener('resize', updateDeviceType);
+    return () => window.removeEventListener('resize', updateDeviceType);
+  }, [context, deviceType]);
+
+  return null;
+};

apps/csk-v-next/src/middleware.ts

@@ -1,7 +1,21 @@
-import createMiddleware from 'next-intl/middleware';
+import { NextRequest } from 'next/server';
+import createIntlMiddleware from 'next-intl/middleware';
+import { UAParser } from 'ua-parser-js';
 import { routing } from './i18n/routing';
 
-export default createMiddleware(routing);
+const intlMiddleware = createIntlMiddleware(routing);
+
+export default async function middleware(request: NextRequest) {
+  const userAgent = request.headers.get('user-agent') || 'unknown';
+  const parser = new UAParser(userAgent);
+  const deviceInfo = parser.getDevice();
+  const deviceType = deviceInfo && deviceInfo.type ? deviceInfo.type.toLowerCase() : 'desktop';
+
+  const response = await intlMiddleware(request);
+  response.cookies.set('deviceType', deviceType.substring(0, 1));
+
+  return response;
+}
 
 export const config = {
   // Match all routes but exclude _next, static, and API routes