Skip to content

Commit 85d1b9a

Browse files
committed
docs: update type annotations and rename properties for clarity
1 parent 6848cc7 commit 85d1b9a

File tree

1 file changed

+12
-14
lines changed

1 file changed

+12
-14
lines changed

README.md

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ To preserve the tree structure and enable manipulations, the following computed
99
```ts
1010
{
1111
// Array of objects representing the path from root to current node
12-
branch: Record < string, unknown > [];
12+
branch: (Record < string, unknown > []);
1313
// Index of the object in the sibling array
1414
index: number;
1515
// Next object in the sibling array
@@ -19,7 +19,7 @@ To preserve the tree structure and enable manipulations, the following computed
1919
// Previous object in the sibling array
2020
prev: Record<string, unknown> | undefined;
2121
// Array of sibling objects
22-
siblings: Record < string, unknown > [];
22+
siblings: (Record < string, unknown > []);
2323
}
2424
```
2525

@@ -57,11 +57,9 @@ The composable returns an object with the following properties:
5757
```ts
5858
{
5959
// Computed flat array of objects (access via .value)
60-
leaves: ComputedRef<Record<string, unknown>[]>;
61-
// Reactive array of objects
62-
arrLeaves: Record<string, unknown>[];
60+
nodes: ComputedRef<Record<string, unknown>[]>;
6361
// Reactive object with unique IDs as keys
64-
objLeaves: {[id: string]: Record<string, unknown>;};
62+
nodesMap: ComputedRef<{[id: string]: Record<string, unknown>;}>;
6563
// Service function to add an empty object to the tree
6664
add: (pId: string) => string | undefined;
6765
// Service function to remove an object from the tree
@@ -129,14 +127,14 @@ const tree = [
129127
},
130128
];
131129

132-
const { leaves, arrLeaves, objLeaves, add, down, left, remove, right, up } =
130+
const { nodes, nodesMap, add, down, left, remove, right, up } =
133131
useFlatJsonTree(tree);
134132
```
135133

136134
Check the resulting flat array (using `JSON.stringify` to omit computed properties):
137135

138136
```js
139-
console.log(JSON.stringify(leaves.value));
137+
console.log(JSON.stringify(nodes.value));
140138
```
141139

142140
The result is a flat array containing all objects. Keep in mind that each object has computed properties added: `branch`, `index`, `next`, `parent`, `prev`, and `siblings`
@@ -196,7 +194,7 @@ The result is a flat array containing all objects. Keep in mind that each object
196194
Now let's try to find the object named "1.2.6":
197195

198196
```js
199-
console.log(JSON.stringify(arrLeaves.find(({ name }) => name === "1.2.6")));
197+
console.log(JSON.stringify(nodes.value.find(({ name }) => name === "1.2.6")));
200198
```
201199

202200
Output:
@@ -205,10 +203,10 @@ Output:
205203
{ "id": 6, "name": "1.2.6" }
206204
```
207205

208-
If the ID is known, you can use `objLeaves`:
206+
If the ID is known, you can use `nodesMap`:
209207

210208
```js
211-
console.log(JSON.stringify(objLeaves[6]));
209+
console.log(JSON.stringify(nodesMap.value[6]));
212210
```
213211

214212
Output:
@@ -221,7 +219,7 @@ Now let's try using the computed properties. Suppose we need to find the parent
221219

222220
```js
223221
console.log(
224-
JSON.stringify(arrLeaves.find(({ name }) => name === "1.2.6").parent),
222+
JSON.stringify(nodes.value.find(({ name }) => name === "1.2.6").parent),
225223
);
226224
```
227225

@@ -242,7 +240,7 @@ Now let's add the object `{ id: 10, name: "1.2.10" }` to the tree after the obje
242240

243241
```js
244242
// Find the object named "1.2.6"
245-
const curObject = arrLeaves.find(({ name }) => name === "1.2.6");
243+
const curObject = nodes.value.find(({ name }) => name === "1.2.6");
246244
// Add the object { id: 10, name: "1.2.10" }
247245
curObject.siblings.splice(curObject.index + 1, 0, { id: 10, name: "1.2.10" });
248246
// Output the tree object passed to the useFlatJsonTree composable
@@ -285,7 +283,7 @@ Finally, let's test the service function. Move the object named "1.2.6" to the p
285283

286284
```js
287285
// Find the object named "1.2.6"
288-
const curObject = arrLeaves.find(({ name }) => name === "1.2.6");
286+
const curObject = nodes.value.find(({ name }) => name === "1.2.6");
289287
// Use the service function up to move it
290288
up(curObject.id);
291289
// Output the tree object passed to the useFlatJsonTree composable

0 commit comments

Comments
 (0)