Moved function to treeview.js

docs/src/pages/framed/TreeView/TreeViewFlatArray.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TreeView } from "carbon-components-svelte";
+  import { TreeView, toHierarchy } from "carbon-components-svelte";
   import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
   import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
   import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
@@ -51,7 +51,7 @@
 
 <TreeView
   labelText="Cloud Products"
-  {nodesFlat}
+  nodes={toHierarchy(nodesFlat)}
   bind:activeId
   bind:selectedIds
   on:select={({ detail }) => console.log("select", detail)}

src/TreeView/TreeView.svelte

@@ -42,12 +42,6 @@
    */
   export let nodes = [];
 
-  /**
-   * Provide a flat array of nodes to render
-   * @type {Array<TreeNode & {pid?: any}>}
-   */
-  export let nodesFlat = [];
-
   /**
    * Set the current active node id
    * Only one node can be active
@@ -201,47 +195,6 @@
     }
   }
 
-  /**
-   * Create a nested array from a flat array
-   * @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]}
-   */
-  function createNestedArray(flatArray) {
-    /** @type TreeNode[] */
-    const tree = [];
-    /** @type TreeNode[] */
-    const childrenOf = [];
-
-    flatArray.forEach((dstItem) => {
-      const { id, pid } = dstItem;
-      childrenOf[id] = childrenOf[id] || [];
-      dstItem["nodes"] = childrenOf[id];
-
-      if (pid) {
-        // objects without pid are root level objects.
-        childrenOf[pid] = childrenOf[pid] || [];
-        delete dstItem.pid; // TreeNode type doesn't have pid.
-        childrenOf[pid].push(dstItem);
-      } else {
-        delete dstItem.pid;
-        tree.push(dstItem);
-      }
-    });
-
-    // Remove the empty nodes props that make TreeView render a twistie.
-    // Maybe this should actually be taken care of in TreeView itself? It makes
-    // no sense i think that an empty nodes property render a twistie.
-    function removeEmptyNodes(element) {
-      element.forEach((elmt) => {
-        if (elmt.nodes?.length === 0) delete elmt.nodes;
-        else {
-          removeEmptyNodes(elmt.nodes);
-        }
-      });
-    }
-    removeEmptyNodes(tree);
-    return tree;
-  }
-
   onMount(() => {
     const firstFocusableNode = ref.querySelector(
       "li.bx--tree-node:not(.bx--tree-node--disabled)",
@@ -267,9 +220,6 @@
     }, []);
   }
 
-  $: if (nodesFlat.length > 0) {
-    nodes = createNestedArray(nodesFlat);
-  }
   $: flattenedNodes = traverse(nodes);
   $: nodeIds = flattenedNodes.map((node) => node.id);
   $: activeNodeId.set(activeId);

src/TreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeView } from "./TreeView.svelte";
+export { toHierarchy } from "./treeview";

src/TreeView/index.js

@@ -1 +1,2 @@
 export { default as TreeView } from "./TreeView.svelte";
+export { toHierarchy } from "./treeview";

src/TreeView/treeview.d.ts

@@ -0,0 +1,9 @@
+import { type TreeNode } from "carbon-components-svelte/TreeView/TreeView.svelte";
+/**
+ * Create a nested array from a flat array
+ */
+export function toHierarchy(
+  flatArray: TreeNode[] & { pid?: any }[],
+): TreeNode[];
+
+export default toHierarchy;

src/TreeView/treeview.js

@@ -0,0 +1,42 @@
+/**
+ * Create a nested array from a flat array
+ * @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]}
+ */
+export function toHierarchy(flatArray) {
+  /** @type TreeNode[] */
+  const tree = [];
+  /** @type TreeNode[] */
+  const childrenOf = [];
+
+  flatArray.forEach((dstItem) => {
+    const { id, pid } = dstItem;
+    childrenOf[id] = childrenOf[id] || [];
+    dstItem["nodes"] = childrenOf[id];
+
+    if (pid) {
+      // objects without pid are root level objects.
+      childrenOf[pid] = childrenOf[pid] || [];
+      delete dstItem.pid; // TreeNode type doesn't have pid.
+      childrenOf[pid].push(dstItem);
+    } else {
+      delete dstItem.pid;
+      tree.push(dstItem);
+    }
+  });
+
+  // Remove the empty nodes props that make TreeView render a twistie.
+  // Maybe this should actually be taken care of in TreeView itself? It makes
+  // no sense i think that an empty nodes property render a twistie.
+  function removeEmptyNodes(element) {
+    element.forEach((elmt) => {
+      if (elmt.nodes?.length === 0) delete elmt.nodes;
+      else {
+        removeEmptyNodes(elmt.nodes);
+      }
+    });
+  }
+  removeEmptyNodes(tree);
+  return tree;
+}
+
+export default toHierarchy;