refactor: remove unused Vite config file, update TypeScript configurations, and add Children component for nested rendering

Author: slogvo

package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-notion-blocks",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "type": "module",
   "description": "A library for mapping Notion blocks to React components",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "exports": {
-    "import": "./dist/index.mjs",
+    "import": "./dist/index.js",
     "require": "./dist/index.js",
     "default": "./dist/index.mjs"
   },
@@ -36,8 +36,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc --build",
-    "build:app": "tsc --build tsconfig.app.json",
+    "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "prepublishOnly": "npm run build"
@@ -55,11 +54,11 @@
     }
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.9",
     "prismjs": "^1.29.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@tailwindcss/vite": "^4.0.9",
     "@types/node": "^22.13.5",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.0.10",

src/components/Children.tsx

@@ -0,0 +1,27 @@
+import { BaseBlock } from "@/types";
+import { Paragraph } from "./Paragraph";
+import { ParagraphBlock } from "@/types/paragraph.types";
+
+interface ChildrenProps {
+  children: BaseBlock[];
+  className?: string
+}
+
+export const Children = ({ children, className }: ChildrenProps) => {
+  if (!Array.isArray(children) || children.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`ml-4 ${className}`}>
+      {children.map((child) => {
+        switch (child.type) {
+          case "paragraph":
+            return <Paragraph key={child.id} block={child as ParagraphBlock} />;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+};

src/components/Paragraph.tsx

@@ -1,5 +1,6 @@
 // src/modules/notion-blocks/components/Paragraph.tsx
 import { ParagraphBlock } from "../types/paragraph.types";
+import { Children } from "./Children";
 import { RichText } from "./RichText";
 
 export const Paragraph = ({ block }: { block: ParagraphBlock }) => {
@@ -9,8 +10,11 @@ export const Paragraph = ({ block }: { block: ParagraphBlock }) => {
   }
 
   return (
-    <p className="text-base leading-relaxed mb-4">
-      <RichText richText={block.paragraph.rich_text} />
-    </p>
+    <div>
+      <p className="text-base leading-relaxed mb-4">
+        <RichText richText={block.paragraph.rich_text} />
+      </p>
+      {block.has_children && block.children && (<Children className="ml-4" children={block.children}/>)}
+    </div>
   );
 };

src/components/index.ts

@@ -19,8 +19,9 @@ export { Video } from "./Video";
 export { Audio } from "./Audio";
 export { PDF } from "./PDF";
 export { Equation } from "./Equation";
-export { ChildPage } from "./ChildPage";
 export { ChildDatabase } from "./ChildDatabase";
+export { ChildPage } from "./ChildPage";
+export { Children } from "./Children";
 export { LinkPreview } from "./LinkPreview";
 export { Column } from "./Column";
 export { ColumnList } from "./ColumnList";

src/index.ts

@@ -20,6 +20,7 @@ export { Audio } from "./components/Audio";
 export { PDF } from "./components/PDF";
 export { Equation } from "./components/Equation";
 export { ChildPage } from "./components/ChildPage";
+export { Children } from "./components/Children";
 export { ChildDatabase } from "./components/ChildDatabase";
 export { LinkPreview } from "./components/LinkPreview";
 export { Column } from "./components/Column";

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles/index.css";
-import App from "./App.tsx";
+import App from "./App";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

src/types/index.ts

@@ -6,6 +6,7 @@ import { BulletedListItemBlock } from "./bulletedListItem.types";
 import { CalloutBlock } from "./callout.types";
 import { ChildDatabaseBlock } from "./childDatabase.types";
 import { ChildPageBlock } from "./childPage.types";
+import { ChildrenBlock } from "./children.types";
 import { CodeBlock } from "./code.types";
 import { ColumnBlock } from "./column.types";
 import { ColumnListBlock } from "./columnList.types";
@@ -48,8 +49,9 @@ export type NotionBlock =
   | AudioBlock
   | PDFBlock
   | EquationBlock
-  | ChildPageBlock
   | ChildDatabaseBlock
+  | ChildPageBlock
+  | ChildrenBlock
   | LinkPreviewBlock
   | ColumnBlock
   | ColumnListBlock

src/types/paragraph.types.ts

@@ -6,4 +6,5 @@ export interface ParagraphBlock extends BaseBlock {
     rich_text: RichText[];
     color: string;
   };
+  children?: BaseBlock[]
 }

tsconfig.app.json

@@ -8,6 +8,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "declaration": true, 
+    "declarationDir": "./dist", 
     "outDir": "./dist",
     "rootDir": "./src",
 
@@ -19,7 +20,6 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "jsx": "react-jsx",
-    "resolveJsonModule": true,
 
     "baseUrl": ".",
     "paths": {
@@ -34,5 +34,5 @@
     "noUncheckedSideEffectImports": true
   },
   "include": ["src"],
-  "exclude": ["node_modules"] 
-}
+  "exclude": ["node_modules", "dist"]
+}

tsconfig.json

@@ -1,7 +1,29 @@
+// {
+//   "files": [],
+//   "references": [
+//     { "path": "./tsconfig.app.json" },
+//     { "path": "./tsconfig.node.json" }
+//   ]
+// }
+
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@lib/*": ["src/lib/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@ui/*": ["src/components/ui/*"]
+    },
+    "noEmit": true
+  }
+}