fix: 增加了透传的类型 & 增加了找不到组件的警告

Author: JxJuly

README.md

@@ -0,0 +1,24 @@
+# @july_cm/react-notion
+
+
+## 工具函数
+
+### isCompleteBlock
+
+检查是否是完整的 Block
+
+```typescript
+type isCompleteBlock = (block: PartialBlockObjectResponse | BlockObjectResponse) => boolean;
+```
+
+### isCompletePageObject
+
+检查是否是完整的 Page
+
+```typescript
+type isCompletePageObject = (page:
+  | PageObjectResponse
+  | PartialPageObjectResponse
+  | PartialDatabaseObjectResponse
+  | DatabaseObjectResponse) => boolean;
+```

src/index.ts

@@ -2,11 +2,26 @@ export { Notion } from './rsc';
 export { NotionRenderProvider } from './provider';
 export { serialize } from './serialize';
 
+/**
+ * 工具函数
+ */
+export { isCompleteBlock, isCompletePageObject } from './utils';
+
 /**
  * 透传
  */
 export { Client } from '@notionhq/client';
 /**
  * 类型透传
  */
-export type { ParagraphBlockObjectResponse, RichTextItemResponse } from './types';
+export type {
+  PageObjectResponse,
+  PartialPageObjectResponse,
+  HeadingBlockObjectResponse,
+  ParagraphBlockObjectResponse,
+  BulletedListItemBlockObjectResponse,
+  ColumnBlockObjectResponse,
+  QuoteBlockObjectResponse,
+  CodeBlockObjectResponse,
+  RichTextItemResponse,
+} from './types';

src/provider.tsx

@@ -1,10 +1,12 @@
 'use client';
 import React, { createContext, useContext, useMemo } from 'react';
 
+import { CustomComponents } from './types';
+
 const context = createContext({} as any);
 
 interface NotionProviderProps {
-  components: Record<string, any>;
+  components: CustomComponents;
 }
 
 export const NotionRenderProvider: React.FC<React.PropsWithChildren<NotionProviderProps>> = ({

src/render.tsx

@@ -15,6 +15,9 @@ const Render: React.FC<RenderProps> = ({ data }) => {
       {data.map((block) => {
         const children = block.has_children ? <Render data={block.children} /> : undefined;
         const Comp = components[block.type] ?? React.Fragment;
+        if (!components[block.type]) {
+          console.warn(`[@july_cm/react-notion]: Can not found type '${block.type}' component`);
+        }
 
         return <Comp key={block.id} block={block} children={children} />;
       })}

src/types.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { Client } from '@notionhq/client';
+
+import type {
+  PartialBlockObjectResponse,
+  BlockObjectResponse,
+  DatabaseObjectResponse,
+  PartialDatabaseObjectResponse,
+  PageObjectResponse,
+  PartialPageObjectResponse,
+  Heading1BlockObjectResponse,
+  Heading2BlockObjectResponse,
+  Heading3BlockObjectResponse,
+  ParagraphBlockObjectResponse,
+  DividerBlockObjectResponse,
+  BulletedListItemBlockObjectResponse,
+  ColumnListBlockObjectResponse,
+  ColumnBlockObjectResponse,
+  QuoteBlockObjectResponse,
+  CodeBlockObjectResponse,
+  RichTextItemResponse,
+} from '@notionhq/client/build/src/api-endpoints';
+
+export interface CustomComponentProps<T> {
+  block: T;
+  children?: React.ReactNode;
+}
+
+/**
+ * 自定义组件
+ */
+export type CustomComponent<T> = React.FC<CustomComponentProps<T>>;
+
+export interface CustomComponents {
+  block?: React.FC<CustomComponentProps<Record<string, unknown>>>;
+  heading_1?: CustomComponent<Heading1BlockObjectResponse>;
+  heading_2?: CustomComponent<Heading2BlockObjectResponse>;
+  heading_3?: CustomComponent<Heading3BlockObjectResponse>;
+  paragraph?: CustomComponent<ParagraphBlockObjectResponse>;
+  [key: string]: CustomComponent<any>;
+}
+
+/**
+ * heading 类型
+ */
+export type HeadingBlockObjectResponse =
+  | Heading1BlockObjectResponse
+  | Heading2BlockObjectResponse
+  | Heading3BlockObjectResponse;
+
+/**
+ * notion 原生类型透传
+ */
+export type {
+  Client,
+  PartialBlockObjectResponse,
+  BlockObjectResponse,
+  DatabaseObjectResponse,
+  PartialDatabaseObjectResponse,
+  PageObjectResponse,
+  PartialPageObjectResponse,
+  Heading1BlockObjectResponse,
+  Heading2BlockObjectResponse,
+  Heading3BlockObjectResponse,
+  ParagraphBlockObjectResponse,
+  DividerBlockObjectResponse,
+  BulletedListItemBlockObjectResponse,
+  ColumnListBlockObjectResponse,
+  ColumnBlockObjectResponse,
+  QuoteBlockObjectResponse,
+  CodeBlockObjectResponse,
+  RichTextItemResponse,
+};

src/types/index.ts

@@ -1,8 +1,26 @@
-import { PartialBlockObjectResponse, BlockObjectResponse } from './types';
+import type {
+  PartialBlockObjectResponse,
+  BlockObjectResponse,
+  PageObjectResponse,
+  PartialPageObjectResponse,
+  PartialDatabaseObjectResponse,
+  DatabaseObjectResponse,
+} from './types';
 
 /**
  * 是否是完整的 Block
  */
 export const isCompleteBlock = (
   block: PartialBlockObjectResponse | BlockObjectResponse
 ): block is BlockObjectResponse => !!(block as BlockObjectResponse).type;
+
+/**
+ * 是完整的 Page
+ */
+export const isCompletePageObject = (
+  page:
+    | PageObjectResponse
+    | PartialPageObjectResponse
+    | PartialDatabaseObjectResponse
+    | DatabaseObjectResponse
+): page is PageObjectResponse => page.object === 'page' && !!(page as PageObjectResponse).parent;