fix(minor): undef MarkedList::renderMarker fn when using react compiler (#891)

* fix(minor): undef MarkedList::renderMarker fn when using react compiler

* chore: use relative import and udpate test snapshot

Author: gmsgowtham

examples/react-native-marked-sample/app.json

@@ -26,6 +26,9 @@
 		},
 		"web": {
 			"favicon": "./assets/favicon.png"
+		},
+		"experiments": {
+			"reactCompiler": true
 		}
 	}
 }

examples/react-native-marked-sample/package.json

@@ -12,6 +12,7 @@
 	},
 	"dependencies": {
 		"@expo/metro-runtime": "~5.0.4",
+		"babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
 		"expo": "^53.0.13",
 		"expo-status-bar": "~2.2.3",
 		"react": "19.0.0",

examples/react-native-marked-sample/yarn.lock

@@ -1682,6 +1682,13 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.3"
 
+babel-plugin-react-compiler@^19.0.0-beta-af1b7da-20250417:
+  version "19.0.0-beta-af1b7da-20250417"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-af1b7da-20250417.tgz#b87eb8c306f3d16bf20dfbba76a097fa82555566"
+  integrity sha512-UyTCRmzpxa4H1EqJk8fWeUOzHdEA12NQZ5DrF5hyhCs+Y6f7B4pg1fkul49sRn9GPPGFgkrH4IxOtnQJ7tNXIA==
+  dependencies:
+    "@babel/types" "^7.26.0"
+
 babel-plugin-react-native-web@~0.19.13:
   version "0.19.13"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.19.13.tgz#bf919bd6f18c4689dd1a528a82bda507363b953d"

src/components/MDList.tsx

@@ -0,0 +1,46 @@
+import Decimal from "@jsamr/counter-style/presets/decimal";
+import Disc from "@jsamr/counter-style/presets/disc";
+import { MarkedListItem, useMarkedList } from "@jsamr/react-native-li";
+import React, {
+	Fragment,
+	type FunctionComponent,
+	memo,
+	type ReactNode,
+} from "react";
+import type { TextStyle, ViewStyle } from "react-native";
+
+type MDListProps = {
+	ordered: boolean;
+	li: ReactNode[];
+	listStyle?: ViewStyle;
+	textStyle?: TextStyle;
+	startIndex?: number;
+};
+
+const MDList: FunctionComponent<MDListProps> = ({
+	ordered,
+	li,
+	listStyle,
+	textStyle,
+	startIndex,
+}) => {
+	const listProps = useMarkedList({
+		counterRenderer: ordered ? Decimal : Disc,
+		startIndex: startIndex,
+		markerTextStyle: textStyle,
+		markerBoxStyle: listStyle,
+		length: li.length,
+	});
+
+	return (
+		<Fragment>
+			{li.map((node, index) => (
+				<MarkedListItem key={index} index={index} {...listProps}>
+					{node}
+				</MarkedListItem>
+			))}
+		</Fragment>
+	);
+};
+
+export default memo(MDList);

src/lib/Renderer.tsx

@@ -1,6 +1,3 @@
-import Decimal from "@jsamr/counter-style/presets/decimal";
-import Disc from "@jsamr/counter-style/presets/disc";
-import MarkedList from "@jsamr/react-native-li";
 import Slugger from "github-slugger";
 import React, { type ReactNode } from "react";
 import {
@@ -14,6 +11,7 @@ import {
 	type ViewStyle,
 } from "react-native";
 import MDImage from "./../components/MDImage";
+import MDList from "./../components/MDList";
 import MDSvg from "./../components/MDSvg";
 import MDTable from "./../components/MDTable";
 import { onLinkPress } from "../utils/handlers";
@@ -80,15 +78,14 @@ class Renderer implements RendererInterface {
 		startIndex?: number,
 	): ReactNode {
 		return (
-			<MarkedList
-				counterRenderer={ordered ? Decimal : Disc}
-				markerTextStyle={textStyle}
-				markerBoxStyle={listStyle}
+			<MDList
 				key={this.getKey()}
+				ordered={ordered}
+				li={li}
+				listStyle={listStyle}
+				textStyle={textStyle}
 				startIndex={startIndex}
-			>
-				{li.map((node) => node)}
-			</MarkedList>
+			/>
 		);
 	}