From d3417b0ed4e17b99df05f421f99dd135e90eb0e9 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 21 Apr 2024 13:19:19 -0700
Subject: [PATCH] feat(recursive-list): integrate `RecursiveList` with v11

---
 COMPONENT_INDEX.md                            |  8 +++----
 docs/src/COMPONENT_API.json                   |  2 +-
 src/RecursiveList/RecursiveList.svelte        |  2 +-
 tests/RecursiveList.test.svelte               | 23 ++++---------------
 types/RecursiveList/RecursiveList.svelte.d.ts |  4 +++-
 5 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index cfbd9062cb..b11320c5dd 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3071,10 +3071,10 @@ export interface RecursiveListNode {
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                                                                        | Default value            | Description                        |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
-| children  | No       | <code>let</code> | No       | <code>Array<RecursiveListNode & { children?: RecursiveListNode[]; }></code> | <code>[]</code>          | Specify the children to render     |
-| type      | No       | <code>let</code> | No       | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code>           | <code>"unordered"</code> | Specify the type of list to render |
+| Prop name | Required | Kind             | Reactive | Type                                                                                             | Default value            | Description                        |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
+| children  | No       | <code>let</code> | No       | <code>ReadonlyArray<RecursiveListNode & { children?: ReadonlyArray<RecursiveListNode>; }></code> | <code>[]</code>          | Specify the children to render     |
+| type      | No       | <code>let</code> | No       | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code>                                | <code>"unordered"</code> | Specify the type of list to render |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 0e4fd36def..212e59d620 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9783,7 +9783,7 @@
           "name": "children",
           "kind": "let",
           "description": "Specify the children to render",
-          "type": "Array<RecursiveListNode & { children?: RecursiveListNode[]; }>",
+          "type": "ReadonlyArray<RecursiveListNode & { children?: ReadonlyArray<RecursiveListNode>; }>",
           "value": "[]",
           "isFunction": false,
           "isFunctionDeclaration": false,
diff --git a/src/RecursiveList/RecursiveList.svelte b/src/RecursiveList/RecursiveList.svelte
index cd876b727e..00e65c433e 100644
--- a/src/RecursiveList/RecursiveList.svelte
+++ b/src/RecursiveList/RecursiveList.svelte
@@ -6,7 +6,7 @@
 
   /**
    * Specify the children to render
-   * @type {Array<RecursiveListNode & { children?: RecursiveListNode[]; }>}
+   * @type {ReadonlyArray<RecursiveListNode & { children?: ReadonlyArray<RecursiveListNode>; }>}
    */
   export let children = [];
 
diff --git a/tests/RecursiveList.test.svelte b/tests/RecursiveList.test.svelte
index a0f42611e5..81c59b8c39 100644
--- a/tests/RecursiveList.test.svelte
+++ b/tests/RecursiveList.test.svelte
@@ -4,29 +4,14 @@
   const children = [
     {
       text: "Item 1",
-      children: [
-        {
-          text: "Item 1a",
-          children: [{ html: "<h5>HTML content</h5>" }],
-        },
-      ],
+      children: [{ text: "Item 1a", children: [] }],
     },
     {
       text: "Item 2",
-      children: [
-        {
-          href: "https://svelte.dev/",
-        },
-        {
-          href: "https://svelte.dev/",
-          text: "Link with custom text",
-        },
-      ],
+      children: [{ href: "https://svelte.dev/" }],
     },
-    {
-      text: "Item 3",
-    },
-  ];
+    { text: "Item 3" },
+  ] as const;
 </script>
 
 <RecursiveList type="ordered" children="{children}" />
diff --git a/types/RecursiveList/RecursiveList.svelte.d.ts b/types/RecursiveList/RecursiveList.svelte.d.ts
index 8b4a73089d..fdd292ecda 100644
--- a/types/RecursiveList/RecursiveList.svelte.d.ts
+++ b/types/RecursiveList/RecursiveList.svelte.d.ts
@@ -14,7 +14,9 @@ export interface RecursiveListProps extends RestProps {
    * Specify the children to render
    * @default []
    */
-  children?: Array<RecursiveListNode & { children?: RecursiveListNode[] }>;
+  children?: ReadonlyArray<
+    RecursiveListNode & { children?: ReadonlyArray<RecursiveListNode> }
+  >;
 
   /**
    * Specify the type of list to render