chore: update Uniform dependencies + enable cacheComponents

Author: trsergey25

apps/csk-marketing-site/next.config.ts

@@ -1,12 +1,13 @@
 import { NextConfig } from 'next';
-import { withUniformConfig } from '@uniformdev/canvas-next-rsc-v2/config';
+import { withUniformConfig } from '@uniformdev/next-app-router/config';
 
 /** @type {NextConfig} */
 const nextConfig: NextConfig = {
   images: {
     remotePatterns: [{ protocol: 'https', hostname: '*' }],
     deviceSizes: [320, 420, 640, 768, 1024, 1280, 1536],
   },
+  cacheComponents:true,
 };
 
 export default withUniformConfig(nextConfig);

apps/csk-marketing-site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-marketing-site",
-  "version": "6.1.59",
+  "version": "6.1.60",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",
@@ -37,14 +37,14 @@
     "make-components-preview": "tsx ./src/scripts/make-preview-images.ts"
   },
   "dependencies": {
-    "@uniformdev/assets": "20.7.1-alpha.106",
-    "@uniformdev/canvas": "20.7.1-alpha.106",
-    "@uniformdev/canvas-next-rsc-client-v2": "20.7.1-alpha.106",
-    "@uniformdev/canvas-next-rsc-shared-v2": "20.7.1-alpha.106",
-    "@uniformdev/canvas-next-rsc-v2": "20.7.1-alpha.106",
-    "@uniformdev/context": "20.7.1-alpha.106",
+    "@uniformdev/assets": "20.7.1-alpha.120",
+    "@uniformdev/canvas": "20.7.1-alpha.120",
+    "@uniformdev/context": "20.7.1-alpha.120",
     "@uniformdev/csk-components": "*",
     "@uniformdev/design-extensions-tools": "*",
+    "@uniformdev/next-app-router": "20.7.1-alpha.120",
+    "@uniformdev/next-app-router-client": "20.7.1-alpha.120",
+    "@uniformdev/next-app-router-shared": "20.7.1-alpha.120",
     "next": "^16.0.10",
     "next-themes": "^0.4.6",
     "react": "^19.2.3",
@@ -58,7 +58,7 @@
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@uniformdev/cli": "20.7.1-alpha.106",
+    "@uniformdev/cli": "20.7.1-alpha.120",
     "@uniformdev/csk-cli": "*",
     "cross-env": "^10.1.0",
     "eslint": "^9.31.0",

apps/csk-marketing-site/src/app/api/preview/route.ts

@@ -2,7 +2,7 @@ import {
   createPreviewGETRouteHandler,
   createPreviewPOSTRouteHandler,
   createPreviewOPTIONSRouteHandler,
-} from '@uniformdev/canvas-next-rsc-v2/handler';
+} from '@uniformdev/next-app-router/handler';
 
 export const GET = createPreviewGETRouteHandler();
 export const POST = createPreviewPOSTRouteHandler();

apps/csk-marketing-site/src/app/playground/[code]/page.tsx

@@ -1,21 +1,31 @@
-import { resolvePlaygroundRoute, UniformPageParameters, UniformPlayground } from '@uniformdev/canvas-next-rsc-v2';
+import { Suspense } from 'react';
 import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
 import { compositionCache } from '@uniformdev/csk-components/utils/getSlotComponents';
 import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
+import { PlaygroundParameters, resolvePlaygroundRoute, UniformPlayground } from '@uniformdev/next-app-router';
 import { componentResolver } from '@/components';
 
-export default async function PlaygroundPage(props: UniformPageParameters) {
-  const result = await resolvePlaygroundRoute(props);
+async function PlaygroundContent({ params }: PlaygroundParameters) {
+  const { code } = await params;
   return (
     <DesignExtensionsProvider>
       <div className="px-4 py-14">
         <UniformPlayground
-          route={result}
+          code={code}
+          resolveRoute={resolvePlaygroundRoute}
+          compositionCache={compositionCache}
           resolveComponent={componentResolver}
           resolveEmptyPlaceholder={emptyPlaceholderResolver}
-          compositionCache={compositionCache}
         />
       </div>
     </DesignExtensionsProvider>
   );
 }
+
+export default async function PlaygroundPage({ params }: PlaygroundParameters) {
+  return (
+    <Suspense>
+      <PlaygroundContent params={params} />
+    </Suspense>
+  );
+}

apps/csk-marketing-site/src/app/uniform/[code]/page.tsx

@@ -1,16 +1,13 @@
-import { Suspense } from 'react';
-import { notFound } from 'next/navigation';
 import { CANVAS_EDITOR_STATE } from '@uniformdev/canvas';
+import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
+import { compositionCache } from '@uniformdev/csk-components/utils/getSlotComponents';
+import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
 import {
   createUniformStaticParams,
   resolveRouteFromCode,
   UniformComposition,
-  UniformContext,
   UniformPageParameters,
-} from '@uniformdev/canvas-next-rsc-v2';
-import { emptyPlaceholderResolver } from '@uniformdev/csk-components/components/canvas/emptyPlaceholders';
-import { compositionCache } from '@uniformdev/csk-components/utils/getSlotComponents';
-import { DesignExtensionsProvider } from '@uniformdev/design-extensions-tools/components/providers/server';
+} from '@uniformdev/next-app-router';
 import { componentResolver } from '@/components';
 import getAllStaticGeneratedPages from '@/utils/getAllStaticGeneratedPages';
 
@@ -19,26 +16,28 @@ export const generateStaticParams = async () => {
   return createUniformStaticParams({ paths });
 };
 
-export default async function UniformPage(props: UniformPageParameters) {
-  const result = await resolveRouteFromCode(props);
-
-  if (!result.route) {
-    notFound();
-  }
+const resolveRouteFromCodeWithCache = async (code: string) => {
+  'use cache';
+  const result = await resolveRouteFromCode({
+    params: Promise.resolve({ code }),
+  });
+  return result;
+};
 
+export default async function UniformPage({ params }: UniformPageParameters) {
+  const { code } = await params;
+  const result = await resolveRouteFromCodeWithCache(code);
   return (
     <>
       <DesignExtensionsProvider isPreviewMode={result.pageState.compositionState === CANVAS_EDITOR_STATE}>
         <UniformComposition
-          {...result}
+          code={code}
+          resolveRoute={resolveRouteFromCode}
           resolveComponent={componentResolver}
           resolveEmptyPlaceholder={emptyPlaceholderResolver}
           compositionCache={compositionCache}
         />
       </DesignExtensionsProvider>
-      <Suspense>
-        <UniformContext result={result} />
-      </Suspense>
     </>
   );
 }

apps/csk-marketing-site/src/components/custom-canvas/ComponentDetailsPage/index.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc-v2/component';
 import { PageProps, PageParameters } from '@uniformdev/csk-components/components/canvas/serverClient';
 import { Page } from '@uniformdev/csk-components/components/ui';
 import { withFlattenParameters } from '@uniformdev/csk-components/utils/withFlattenParameters';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import { DEFAULT_COMPONENT_DETAILS_PAGE_ID } from '@/components/custom-canvas/AnchorLinks';
 
 export const ComponentDetailsPage: FC<PageProps & PageParameters> = ({ slots, backgroundColor }) => (

apps/csk-marketing-site/src/components/custom-canvas/DemoCard/demoCard.tsx

@@ -5,10 +5,10 @@ import Link from 'next/link';
 import classNames from 'classnames';
 import { useTheme } from 'next-themes';
 import { ComponentInstance } from '@uniformdev/canvas';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc-v2/component';
 import { Container, Image } from '@uniformdev/csk-components/components/ui';
 import { resolveAsset } from '@uniformdev/csk-components/utils/assets';
 import { formatUniformLink } from '@uniformdev/csk-components/utils/routing';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import { capitalizeFirstLetter } from '@/utils/text';
 import { DemoCardParameters, DemoCardProps } from '.';
 import { CheckIcon, CopyIcon } from './icons';

apps/csk-marketing-site/src/components/custom-canvas/FilterSearch/ComponentsSearchPage.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc-v2/component';
 import { Page as BasePage } from '@uniformdev/csk-components/components/ui';
 import { ComponentProps } from '@uniformdev/csk-components/types/cskTypes';
 import { withFlattenParameters } from '@uniformdev/csk-components/utils/withFlattenParameters';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import ComponentsSearchProvider from './ComponentsSearchProvider';
 
 type ComponentsSearchPageParameters = {

apps/csk-marketing-site/src/components/custom-canvas/FilterSearch/ResultList.tsx

@@ -2,9 +2,9 @@
 
 import { FC, Fragment, useEffect, useMemo } from 'react';
 import { ComponentInstance } from '@uniformdev/canvas';
-import { UniformSlot, UniformSlotProps } from '@uniformdev/canvas-next-rsc-v2/component';
 import { Text } from '@uniformdev/csk-components/components/ui';
 import { withFlattenParameters } from '@uniformdev/csk-components/utils/withFlattenParameters';
+import { UniformSlot, UniformSlotProps } from '@uniformdev/next-app-router/component';
 import { ResultListProps } from '.';
 import { useUniformSearchFilterEngineContext } from './ComponentsSearchProvider';
 import { SearchItemSkeleton } from './SearchItemSkeleton';

apps/csk-marketing-site/src/components/custom-canvas/HeroGradient/index.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc-v2/component';
 import { ContainerParameters } from '@uniformdev/csk-components/components/canvas/serverClient';
 import { Container } from '@uniformdev/csk-components/components/ui';
 import { ComponentProps } from '@uniformdev/csk-components/types/cskTypes';
 import { cn } from '@uniformdev/csk-components/utils/styling';
 import { withFlattenParameters } from '@uniformdev/csk-components/utils/withFlattenParameters';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 
 export type HeroGradientParameters = ContainerParameters & {
   gradientColor?: string;