From ce993ad12053e2e633dd0e8973b2d10330cc1b3d Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 7 May 2024 19:19:45 +0700
Subject: [PATCH] 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    | 26 +++++++++++++------
 .../cms/keystatic/src/content-renderer.tsx    |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/cms/core/src/content-renderer.tsx b/packages/cms/core/src/content-renderer.tsx
index 77225cec5..c9d220aa8 100644
--- a/packages/cms/core/src/content-renderer.tsx
+++ b/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;
     }
   }
 }
diff --git a/packages/cms/keystatic/src/content-renderer.tsx b/packages/cms/keystatic/src/content-renderer.tsx
index 40040611c..c3de59220 100644
--- a/packages/cms/keystatic/src/content-renderer.tsx
+++ b/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);