Merge branch 'main' into add_block_chooser

apps/rr7/app/content.tsx

@@ -1,47 +1,28 @@
-import type { LoaderArgs } from './routes/+types.home';
-import {
-  dehydrate,
-  QueryClient,
-  HydrationBoundary,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
-import { useLoaderData, useLocation } from 'react-router';
-import type { MetaFunction } from 'react-router';
-import { usePloneClient } from '@plone/providers';
+import type { Route } from './+types/content';
+import { data, useLoaderData, useLocation } from 'react-router';
 import PloneClient from '@plone/client';
 import App from '@plone/slots/components/App';
 import config from '@plone/registry';
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = ({ data }) => {
   return [
-    { title: 'Plone on React Router 7' },
-    { name: 'description', content: 'Welcome to Plone!' },
+    { title: data?.title },
+    { name: 'description', content: data?.description },
   ];
 };
 
 const expand = ['navroot', 'breadcrumbs', 'navigation'];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export async function loader({ params, request }: LoaderArgs) {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        // With SSR, we usually want to set some default staleTime
-        // above 0 to avoid refetching immediately on the client
-        staleTime: 60 * 1000,
-      },
-    },
-  });
-
+export async function loader({ params, request }: Route.LoaderArgs) {
   const ploneClient = config
     .getUtility({
       name: 'ploneClient',
       type: 'client',
     })
     .method();
 
-  const { getContentQuery } = ploneClient as PloneClient;
+  const { getContent } = ploneClient as PloneClient;
 
   const path = new URL(request.url).pathname;
 
@@ -57,30 +38,20 @@ export async function loader({ params, request }: LoaderArgs) {
     )
   ) {
     console.log('prefetching', path);
-    await queryClient.prefetchQuery(getContentQuery({ path, expand }));
+    try {
+      return await getContent({ path, expand });
+    } catch (error) {
+      throw data('Content Not Found', { status: 404 });
+    }
   } else {
     console.log('path not prefetched', path);
+    throw data('Content Not Found', { status: 404 });
   }
-
-  return { dehydratedState: dehydrate(queryClient) };
-}
-
-function Page() {
-  const { getContentQuery } = usePloneClient();
-  const pathname = useLocation().pathname;
-  const { data } = useQuery(getContentQuery({ path: pathname, expand }));
-
-  if (!data) return 'Loading...';
-  return <App content={data} location={{ pathname: '/' }} />;
 }
 
 export default function Content() {
-  const { dehydratedState } = useLoaderData<typeof loader>();
-  const queryClient = useQueryClient();
+  const data = useLoaderData<typeof loader>();
+  const pathname = useLocation().pathname;
 
-  return (
-    <HydrationBoundary state={dehydratedState} queryClient={queryClient}>
-      <Page />
-    </HydrationBoundary>
-  );
+  return <App content={data} location={{ pathname }} />;
 }

apps/rr7/app/root.tsx

@@ -1,3 +1,5 @@
+import type { LinksFunction } from 'react-router';
+import type { Route } from './+types/root';
 import { useState } from 'react';
 import {
   Links,
@@ -10,8 +12,8 @@ import {
   useNavigate as useRRNavigate,
   useParams,
   useLoaderData,
+  isRouteErrorResponse,
 } from 'react-router';
-import type { LinksFunction } from 'react-router';
 
 import { QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -24,8 +26,8 @@ import installSSR from './config.server';
 
 install();
 
-import '@plone/theming/styles/main.css';
-import '@plone/slots/main.css';
+import themingMain from '@plone/theming/styles/main.css?url';
+import slotsMain from '@plone/slots/main.css?url';
 
 function useNavigate() {
   const navigate = useRRNavigate();
@@ -37,6 +39,8 @@ function useHrefLocal(to: string) {
 }
 
 export const links: LinksFunction = () => [
+  { rel: 'stylesheet', href: themingMain },
+  { rel: 'stylesheet', href: slotsMain },
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   {
     rel: 'preconnect',
@@ -85,6 +89,34 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = 'Oops!';
+  let details = 'An unexpected error occurred.';
+  let stack: string | undefined;
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error';
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}
+
 export default function App() {
   if (!import.meta.env.SSR) {
     config.settings.apiPath = window.env.PLONE_API_PATH;

apps/rr7/app/routes.ts

@@ -4,7 +4,7 @@ import { index, route } from '@react-router/dev/routes';
 const routes: RouteConfig = [
   index('content.tsx', { id: 'index' }),
   route('ok', 'okroute.tsx', { id: 'ok' }),
-  route('*', 'content.tsx', { id: 'splat' }),
+  route('*', 'content.tsx', { id: 'content' }),
 ];
 
 export default routes;

packages/client/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-alpha.21 (2025-01-15)
+
+### Feature
+
+- Import `getContent` bare fetcher. @sneridagh [#6594](https://github.com/plone/volto/pull/6594)
+
 ## 1.0.0-alpha.20 (2024-11-05)
 
 ### Internal

packages/client/package.json

@@ -8,7 +8,7 @@
     }
   ],
   "license": "MIT",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.21",
   "repository": {
     "type": "git",
     "url": "[email protected]:plone/volto.git"

packages/client/src/client.ts

@@ -4,6 +4,7 @@ import {
 } from './restapi/login/post';
 import type { LoginArgs } from './restapi/login/post';
 
+import { getContent as _getContent } from './restapi/content/get';
 import { getContentQuery as _getContentQuery } from './restapi/content/get';
 import { createContentMutation as _createContentMutation } from './restapi/content/add';
 import { updateContentMutation as _updateContentMutation } from './restapi/content/update';
@@ -150,6 +151,7 @@ export default class PloneClient {
   /*
     Content queries
   */
+  getContent = queryWithConfig(_getContent, this.getConfig);
   getContentQuery = queryWithConfig(_getContentQuery, this.getConfig);
   createContentMutation = mutationWithConfig(
     _createContentMutation,

packages/coresandbox/src/index.ts

@@ -235,6 +235,16 @@ const applyConfig = (config: ConfigType) => {
     predicates: [ContentTypeCondition(['Document']), RouteCondition('/hello')],
   });
 
+  config.registerRoute({
+    type: 'route',
+    path: '/hello',
+    file: 'src/components/Views/NewsAndEvents/asd.tsx',
+    options: {
+      id: 'hello',
+      index: true,
+    },
+  });
+
   return config;
 };
 

packages/registry/news/6600.feature

@@ -0,0 +1 @@
+Added route registry. @sneridagh

packages/registry/src/index.ts

@@ -13,6 +13,7 @@ import type {
   UtilitiesConfig,
   ViewsConfig,
   WidgetsConfig,
+  ReactRouterRouteEntry,
 } from '@plone/types';
 
 export type ConfigData = {
@@ -22,6 +23,7 @@ export type ConfigData = {
   widgets: WidgetsConfig | Record<string, never>;
   addonReducers?: AddonReducersConfig;
   addonRoutes?: AddonRoutesConfig;
+  routes?: Array<ReactRouterRouteEntry>;
   slots: SlotsConfig | Record<string, never>;
   components: ComponentsConfig | Record<string, never>;
   utilities: UtilitiesConfig | Record<string, never>;
@@ -126,6 +128,14 @@ class Config {
     this._data.addonRoutes = addonRoutes;
   }
 
+  get routes() {
+    return this._data.routes;
+  }
+
+  set routes(routes) {
+    this._data.routes = routes;
+  }
+
   get slots() {
     return this._data.slots;
   }
@@ -494,6 +504,12 @@ class Config {
 
     return utilities;
   }
+
+  registerRoute(options: ReactRouterRouteEntry) {
+    const route = this._data.routes || [];
+    route.push(options);
+    this._data.routes = route;
+  }
 }
 
 const instance = new Config();

packages/registry/src/registry.test.tsx

@@ -1073,3 +1073,100 @@ describe('Utilities registry', () => {
     ).toEqual([]);
   });
 });
+
+describe('Routes registry', () => {
+  afterEach(() => {
+    config.set('routes', []);
+  });
+
+  it('registers a simple route', () => {
+    config.registerRoute({
+      type: 'route',
+      path: '/login',
+      file: 'login.tsx',
+    });
+
+    expect(config.routes).toEqual([
+      {
+        type: 'route',
+        path: '/login',
+        file: 'login.tsx',
+      },
+    ]);
+  });
+
+  it('registers a simple route with options', () => {
+    config.registerRoute({
+      type: 'route',
+      path: '/login',
+      file: 'login.tsx',
+      options: { id: 'login', caseSensitive: true },
+    });
+
+    expect(config.routes).toEqual([
+      {
+        type: 'route',
+        path: '/login',
+        file: 'login.tsx',
+        options: { id: 'login', caseSensitive: true },
+      },
+    ]);
+  });
+
+  it('registers a nested route', () => {
+    config.registerRoute({
+      type: 'route',
+      path: '/login',
+      file: 'login.tsx',
+      children: [
+        {
+          type: 'route',
+          path: '/login/ok',
+          file: 'ok.tsx',
+        },
+      ],
+    });
+
+    expect(config.routes).toEqual([
+      {
+        type: 'route',
+        path: '/login',
+        file: 'login.tsx',
+        children: [
+          {
+            type: 'route',
+            path: '/login/ok',
+            file: 'ok.tsx',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('registers a couple of routes', () => {
+    config.registerRoute({
+      type: 'route',
+      path: '/login',
+      file: 'login.tsx',
+    });
+
+    config.registerRoute({
+      type: 'route',
+      path: '/logout',
+      file: 'logout.tsx',
+    });
+
+    expect(config.routes).toEqual([
+      {
+        type: 'route',
+        path: '/login',
+        file: 'login.tsx',
+      },
+      {
+        type: 'route',
+        path: '/logout',
+        file: 'logout.tsx',
+      },
+    ]);
+  });
+});

packages/types/news/6600.feature

@@ -0,0 +1 @@
+Added typings for the route registry. @sneridagh