Refactor import statements and error handling in CMS renderers

The commit updates the way 'Markdoc' is imported in the Keystatic content renderer. It also introduces type checks for imports in the core renderer package. For better error handling, a console.error message has been added for unknown CMS client types.

packages/cms/core/src/content-renderer.tsx

@@ -1,19 +1,23 @@
-import { CmsType } from './cms.type';
+import type { CmsType } from './cms.type';
+
+const CMS_CLIENT = process.env.CMS_CLIENT as CmsType;
+
+interface ContentRendererProps {
+  content: unknown;
+  type?: CmsType;
+}
 
 export async function ContentRenderer({
   content,
-  type = process.env.CMS_CLIENT as CmsType,
-}: {
-  content: unknown;
-  type?: CmsType;
-}) {
+  type = CMS_CLIENT,
+}: ContentRendererProps) {
   switch (type) {
     case 'keystatic': {
       const { KeystaticDocumentRenderer } = await import(
         '../../keystatic/src/content-renderer'
       );
 
-      return KeystaticDocumentRenderer({ content });
+      return <KeystaticDocumentRenderer content={content} />;
     }
 
     case 'wordpress': {
@@ -21,7 +25,13 @@ export async function ContentRenderer({
         '../../wordpress/src/content-renderer'
       );
 
-      return WordpressContentRenderer({ content });
+      return <WordpressContentRenderer content={content} />;
+    }
+
+    default: {
+      console.error(`Unknown CMS client: ${type as string}`);
+
+      return null;
     }
   }
 }

packages/cms/keystatic/src/content-renderer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Markdoc from '@markdoc/markdoc';
+const Markdoc = await import('@markdoc/markdoc');
 
 export function KeystaticDocumentRenderer({ content }: { content: unknown }) {
   return Markdoc.renderers.react(content as string, React);