map2tree

4.0.0 · active · verified Sun Apr 19

map2tree is a utility library that provides a pure function to convert a flat map structure into a hierarchical tree. Its primary use case is within the `redux-devtools-chart-monitor` package, influencing its specific opinions on how data is transformed. It does not convert objects and arrays deeply nested within collections into tree structures and offers support for Immutable.js List and Map data types. The current stable version, 4.0.0, was released as an ESM-only package. The library is part of the `reduxjs/redux-devtools` monorepo, suggesting its release cadence is tied to the broader Redux DevTools ecosystem.

Common errors

```
ERR_REQUIRE_ESM
```
cause Attempting to `require()` `map2tree` in a CommonJS environment when version 4.0.0 and above are ESM-only.

fix Update your import statement to `import map2tree from 'map2tree';` and ensure your project or bundler is configured for ES modules.
```
TypeError: map2tree is not a function
```
cause Incorrect import of `map2tree`, potentially due to trying to use named import for a default export or incorrect CommonJS usage in an ESM context.

fix Use the correct default import: `import map2tree from 'map2tree';` or verify that your CommonJS `require()` is being transpiled correctly if using an older version that supported it.

Warnings

breaking `map2tree` is now an ESM-only package. Direct `require()` statements for CommonJS environments will fail.
Fix: Migrate your project to use ES modules (e.g., set `"type": "module"` in `package.json`) and use `import` statements, or transpile your code with a bundler like Webpack or Rollup that supports ESM.
gotcha Objects and arrays deeply nested within collections are intentionally not converted into a tree structure. They remain as plain objects/arrays within the 'object' property of the node.
Fix: Be aware of this specific behavior. If full deep recursion for all nested structures is required, `map2tree` may not be suitable without pre-processing or a different utility.
gotcha The library provides limited support for Immutable.js data structures, specifically only `List` and `Map`. Other Immutable.js types will not be processed correctly into the tree structure.
Fix: Ensure you are only using Immutable.js `List` and `Map` if you expect them to be transformed. For other Immutable.js types, convert them to plain JavaScript objects or arrays before passing them to `map2tree` if you need them included in the tree.

Install

npm install map2tree npm
yarn add map2tree yarn
pnpm add map2tree pnpm

Imports

map2tree
wrong:
```
const map2tree = require('map2tree');
```
correct:
```
import map2tree from 'map2tree';
```
The `map2tree` function is the default export. Version 4.0.0 and later are ESM-only, so CommonJS `require()` is not supported.

Quickstart

Demonstrates how to import and use `map2tree` with a sample map, specifying root key and child order, and logs the resulting tree structure.

import map2tree from 'map2tree';

const someMap = {
  someReducer: {
    todos: [
      { title: 'map', someNestedObject: { foo: 'bar' } },
      { title: 'to', someNestedArray: ['foo', 'bar'] },
      { title: 'tree' },
      { title: 'map2tree' },
    ],
    completedCount: 1,
  },
  otherReducer: {
    foo: 0,
    bar: { key: 'value' },
  },
};

const treeOutput = map2tree(someMap, {
  key: 'state', // the name you want for the root node of the output tree
  pushMethod: 'push', // use 'unshift' to change the order children nodes are added
});

console.log(JSON.stringify(treeOutput, null, 2));
/*
Output example:
{
  "name": "state",
  "children": [
    {
      "name": "someReducer",
      "children": [
        {
          "name": "todos",
          "children": [
            {
              "name": "todo[0]",
              "object": {
                "title": "map",
                "someNestedObject": {
                  "foo": "bar"
                }
              }
            },
            {
              "name": "todo[1]",
              "object": {
                "title": "to",
                "someNestedArray": [
                  "foo",
                  "bar"
                ]
              }
            },
            {
              "name": "todo[2]",
              "object": {
                "title": "tree"
              }
            },
            {
              "name": "todo[3]",
              "object": {
                "title": "map2tree"
              }
            }
          ]
        },
        {
          "name": "completedCount",
          "value": 1
        }
      ]
    },
    {
      "name": "otherReducer",
      "children": [
        {
          "name": "foo",
          "value": 0
        },
        {
          "name": "bar",
          "object": {
            "key": "value"
          }
        }
      ]
    }
  ]
}
*/

view raw JSON →