From 44bfcabe12d2bc4b1ab8e4eefd90d1f498636a9d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 20 Feb 2022 16:20:21 +0000
Subject: [PATCH] fix: render children of custom components

---
 src/runtime/components/sanity-content.ts      |  5 +--
 .../__snapshots__/sanity-content.test.ts.snap |  5 +++
 .../portable-text/custom-components.ts        | 41 +++++++++++++++++++
 test/unit/fixture/portable-text/index.ts      |  1 +
 test/unit/sanity-content.test.ts              | 28 +++++++++++--
 5 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 test/unit/fixture/portable-text/custom-components.ts

diff --git a/src/runtime/components/sanity-content.ts b/src/runtime/components/sanity-content.ts
index 5935b710..a438dd11 100644
--- a/src/runtime/components/sanity-content.ts
+++ b/src/runtime/components/sanity-content.ts
@@ -116,15 +116,12 @@ function renderStyle ({ style, listItem }: Block, serializers: Required<Serializ
 }
 
 function renderInSerializer (item: Block, serializers: Required<Serializers>) {
-  if (item._type !== 'block') return render(serializers, item)
-
   return render(serializers, item, () => (item.children || []).map((child) => {
     if (isSpan(child)) {
       return renderMarks(child.text, child.marks, serializers, item.markDefs)
     }
     return render(serializers, child, () => renderMarks(child.text, child.marks, serializers, item.markDefs))
-  }),
-  )
+  }))
 }
 
 function renderMarks (
diff --git a/test/unit/__snapshots__/sanity-content.test.ts.snap b/test/unit/__snapshots__/sanity-content.test.ts.snap
index c5f0fd05..c478caa1 100644
--- a/test/unit/__snapshots__/sanity-content.test.ts.snap
+++ b/test/unit/__snapshots__/sanity-content.test.ts.snap
@@ -17,6 +17,11 @@ exports[`SanityContent > should render blockquote blocks 1`] = `"<blockquote>Bui
 
 exports[`SanityContent > should render customBlockTypes blocks 1`] = `"<p>An example of <i>custom</i> block types.</p>"`;
 
+exports[`SanityContent > should render customComponent blocks 1`] = `
+"<div>propValuetext content</div>
+<div>propValuetext content</div>"
+`;
+
 exports[`SanityContent > should render evenMoreNestedList blocks 1`] = `
 "<ol>
   <li>1. Top level</li>
diff --git a/test/unit/fixture/portable-text/custom-components.ts b/test/unit/fixture/portable-text/custom-components.ts
new file mode 100644
index 00000000..700bf8a0
--- /dev/null
+++ b/test/unit/fixture/portable-text/custom-components.ts
@@ -0,0 +1,41 @@
+export const customComponent = [
+  {
+    _key: '1',
+    _type: 'customComponent1',
+    exampleProp: 'propValue',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'text content',
+      },
+    ],
+  },
+  {
+    _key: '2',
+    _type: 'customComponent2',
+    exampleProp: 'propValue',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'text content',
+      },
+    ],
+  },
+  {
+    _key: '3',
+    _type: 'customComponent3',
+    exampleProp: 'propValue',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'text content',
+      },
+    ],
+  },
+]
diff --git a/test/unit/fixture/portable-text/index.ts b/test/unit/fixture/portable-text/index.ts
index 7000be0f..bd303266 100644
--- a/test/unit/fixture/portable-text/index.ts
+++ b/test/unit/fixture/portable-text/index.ts
@@ -1,5 +1,6 @@
 export * from './adjacent-list'
 export * from './blockquote'
+export * from './custom-components'
 export * from './custom-block-types'
 export * from './list'
 export * from './mark-defs'
diff --git a/test/unit/sanity-content.test.ts b/test/unit/sanity-content.test.ts
index f2a92331..183df730 100644
--- a/test/unit/sanity-content.test.ts
+++ b/test/unit/sanity-content.test.ts
@@ -1,9 +1,20 @@
 import { expect, describe, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { defineAsyncComponent, defineComponent, h, markRaw } from 'vue'
 import SanityContent from '../../src/runtime/components/sanity-content'
 
 import * as exampleBlocks from './fixture/portable-text'
 
+const CustomBlockComponent = defineComponent({
+  props: { exampleProp: String },
+  setup: (props, { slots }) => () => h('div', {}, {
+    default: () => [
+      props.exampleProp,
+      slots.default?.(),
+    ],
+  }),
+})
+
 describe('SanityContent', () => {
   it('should render with no props', () => {
     const wrapper = mount(SanityContent)
@@ -15,9 +26,20 @@ describe('SanityContent', () => {
       const wrapper = mount(SanityContent as any, {
         props: {
           blocks: Array.isArray(block) ? block : [block],
-          serializers: {
-            types: { customIcon: 'i' },
-          },
+          serializers: markRaw({
+            types: {
+              customIcon: 'i',
+              // This is how to access a component registered by `@nuxt/components`
+              customComponent1: CustomBlockComponent,
+              // A directly imported component
+              customComponent2: CustomBlockComponent,
+              // Example of a more complex async component
+              customComponent3: defineAsyncComponent({
+                loadingComponent: () => h('div', 'Loading...'),
+                loader: () => Promise.resolve(CustomBlockComponent),
+              }),
+            },
+          }),
         },
       })
       expect(wrapper.html()).toMatchSnapshot()