build: fix circular dependency

rollup.config.ts

@@ -46,7 +46,7 @@ const outputMatrix = (
 }
 
 const buildMatrix = (input: string, output: string): RollupOptions => {
-  dtsOutput.add([input.replaceAll('.jsx', '.d.ts'), output])
+  dtsOutput.add([input.replaceAll('.js', '.d.ts'), output])
   return {
     input,
     output: outputMatrix(output),
@@ -79,7 +79,7 @@ const dtsMatrix = (): RollupOptions[] => {
 }
 
 const build: RollupOptions[] = [
-  buildMatrix('./dist/out/index.jsx', 'index'),
+  buildMatrix('./dist/out/index.js', 'index'),
   ...dtsMatrix()
 ]
 

src/components/DataTypes/Object.tsx

@@ -1,11 +1,9 @@
 import { Box } from '@mui/material'
-import type React from 'react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 
 import { useTextColor } from '../../hooks/useColor'
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'
-import { DataKeyPair } from '../DataKeyPair'
 
 const lb = '{'
 const rb = '}'
@@ -61,6 +59,9 @@ export const PostObjectType: React.FC<DataItemProps<object>> = (props) => {
   )
 }
 
+const KeyPair = React.lazy(() => import('../DataKeyPair').then(
+  ({ DataKeyPair }) => ({ default: DataKeyPair })))
+
 export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
   const keyColor = useTextColor()
   return (
@@ -77,7 +78,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
           ? (
               Object.entries(props.value).map(([key, value]) => {
                 const path = [...props.path, key]
-                return <DataKeyPair key={key} path={path} value={value}/>
+                return <KeyPair key={key} path={path} value={value}/>
               })
             )
           : (

tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "./node_modules/@textea/dev-kit/config/tsconfig.root.json",
   "compilerOptions": {
     "outDir": "./dist/out/",
-    "rootDir": "./src/"
+    "rootDir": "./src/",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react"
   },
   "include": [
     "src/**/*.ts",