utility to handle content sub requests (+ related typings)

Author: ebrehault

apps/seven/app/root.tsx

@@ -6,7 +6,10 @@ import type { Route } from './+types/root';
 import { flattenToAppURL } from '@plone/helpers';
 import type PloneClient from '@plone/client';
 import config from '@plone/registry';
-import type { Content, ListingBlockFormData } from '@plone/types';
+import type {
+  LoaderDataUtilityMethod,
+  ContentSubRequestUtilityMethod,
+} from '@plone/types';
 import {
   getAPIResourceWithAuth,
   installServerMiddleware,
@@ -33,35 +36,30 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   const path = `/${params['*'] || ''}`;
 
-  const rootLoaderDataUtilities = config.getUtilities({
+  const rootLoaderDataUtilities = config.getUtilities<LoaderDataUtilityMethod>({
     type: 'rootLoaderData',
-  }) as Array<{
-    method: (args: {
-      cli: PloneClient;
-      content: Content;
-      request: typeof request;
-      path: string;
-      params: typeof params;
-      locale: string;
-    }) => Promise<{ status: number; data: unknown }>;
-  }>;
+  });
+
+  const rootContentSubRequests =
+    config.getUtilities<ContentSubRequestUtilityMethod>({
+      type: 'rootContentSubRequest',
+    });
 
   try {
     const [content, site] = await Promise.all([
       cli.getContent({ path, expand }),
       cli.getSite(),
     ]);
 
-    const listingBlocks: { id: string; block: ListingBlockFormData }[] =
-      Object.entries(content.data.blocks)
-        .filter(([, block]) => block['@type'] === 'listing')
-        .map(([id, block]) => ({ id, block: block as ListingBlockFormData }));
-    for (let i = 0; i < listingBlocks.length; i++) {
-      const { id, block } = listingBlocks[i];
-      if (block.querystring) {
-        const results = await cli.querystringSearch(block.querystring);
-        content.data.blocks[id].items = results.data.items;
-      }
+    for (const utility of rootContentSubRequests) {
+      await utility.method({
+        cli,
+        content: content.data,
+        request,
+        path,
+        params,
+        locale,
+      });
     }
 
     const rootLoaderDataUtilitiesData = await Promise.all([

packages/blocks/index.ts

@@ -1,4 +1,5 @@
 import type { ConfigType } from '@plone/registry';
+import type { ListingBlockFormData, LoaderUtilityArgs } from '@plone/types';
 
 import TitleBlockInfo from './Title';
 import TextBlockInfo from './Text';
@@ -19,5 +20,23 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.teaser = TeaserBlockInfo;
   config.blocks.blocksConfig.listing = ListingBlockInfo;
 
+  config.registerUtility({
+    name: 'ListingBlocksContentLoading',
+    type: 'rootContentSubRequest',
+    method: async (args: LoaderUtilityArgs) => {
+      const listingBlocks: { id: string; block: ListingBlockFormData }[] =
+        Object.entries(args.content.blocks)
+          .filter(([, block]) => block['@type'] === 'listing')
+          .map(([id, block]) => ({ id, block: block as ListingBlockFormData }));
+      for (let i = 0; i < listingBlocks.length; i++) {
+        const { id, block } = listingBlocks[i];
+        if (block.querystring) {
+          const results = await args.cli.querystringSearch(block.querystring);
+          args.content.blocks[id].items = results.data.items;
+        }
+      }
+    },
+  });
+
   return config;
 }

packages/registry/src/index.ts

@@ -15,6 +15,8 @@ import type {
   WidgetsConfig,
   ReactRouterRouteEntry,
   WidgetKey,
+  UtilityMethod,
+  DummyUtilityMethod,
 } from '@plone/types';
 
 export type ConfigData = {
@@ -35,10 +37,6 @@ type GetComponentResult = {
   component: React.ComponentType<any>;
 };
 
-type GetUtilityResult = {
-  method: (...args: any[]) => any;
-};
-
 export type ConfigType = InstanceType<typeof Config>;
 // This type is used to map widget keys to their definitions.
 type MappableWidgetKeys = {
@@ -459,11 +457,11 @@ class Config {
     }
   }
 
-  registerUtility(options: {
+  registerUtility<T extends UtilityMethod = DummyUtilityMethod>(options: {
     name: string;
     type: string;
     dependencies?: Record<string, string>;
-    method: (args: any) => any;
+    method: T;
   }) {
     const { name, type, method, dependencies = {} } = options;
     let depsString: string = '';
@@ -485,11 +483,11 @@ class Config {
     utilityType[utilityName] = { method };
   }
 
-  getUtility(options: {
+  getUtility<T extends UtilityMethod = DummyUtilityMethod>(options: {
     name: string;
     type: string;
     dependencies?: Record<string, string>;
-  }): GetUtilityResult | Record<string, never> {
+  }): { method: T } | Record<string, never> {
     const { name, type, dependencies = {} } = options;
 
     if (!name || !type) return {};
@@ -501,13 +499,13 @@ class Config {
 
     const utilityName = `${depsString ? `|${depsString}` : ''}${name}`;
 
-    return this._data.utilities[type]?.[utilityName] || {};
+    return (this._data.utilities[type]?.[utilityName] as { method: T }) || {};
   }
 
-  getUtilities(options: {
+  getUtilities<T extends UtilityMethod = DummyUtilityMethod>(options: {
     type: string;
     dependencies?: Record<string, string>;
-  }): Array<GetUtilityResult> | [] {
+  }): Array<{ method: T }> | [] {
     const { type, dependencies = {} } = options;
 
     if (!type) return [];
@@ -525,7 +523,7 @@ class Config {
       (key) => this._data.utilities[type][key],
     );
 
-    return utilities;
+    return utilities as Array<{ method: T }>;
   }
 
   registerRoute(options: ReactRouterRouteEntry) {

packages/types/package.json

@@ -49,8 +49,12 @@
   "devDependencies": {
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "react-router": "catalog:",
     "release-it": "catalog:",
     "tsconfig": "workspace:*",
     "typescript": "catalog:"
+  },
+  "dependencies": {
+    "@plone/client": "workspace:*"
   }
 }

packages/types/src/config/Utilities.d.ts

@@ -1,4 +1,31 @@
-// export type Utility = Record<string, { method: (args: any) => any }>;
-export type Utility = Record<string, { method: (...args: any[]) => any }>;
+import { Content } from '../content';
+import type { Params } from 'react-router';
+import type PloneClient from '@plone/client';
+
+export type Utility = Record<string, { method: UtilityMethod }>;
 
 export type UtilitiesConfig = Record<string, Utility>;
+
+export type UtilityMethod =
+  | DummyUtilityMethod
+  | LoaderDataUtilityMethod
+  | ContentSubRequestUtilityMethod;
+
+// TODO: remove when all utilities are properly typed
+export type DummyUtilityMethod = (...args: any[]) => any;
+
+export type LoaderDataUtilityMethod = (
+  args: LoaderUtilityArgs,
+) => Promise<{ status: number; data: unknown }>;
+export type ContentSubRequestUtilityMethod = (
+  args: LoaderUtilityArgs,
+) => Promise<undefined>;
+
+export interface LoaderUtilityArgs {
+  cli: PloneClient;
+  content: Content;
+  request: Request;
+  path: string;
+  params: Params;
+  locale: string;
+}