redux-devtools/packages/map2tree
Nathan Bierema 4164b6279e
Use flat config for ESLint (#1712)
* d3tooltip

* map2tree

* d3-state-visualizer

* react-base16-styling

* react-dock

* Cleanup

* Update

* react-json-tree

* redux-devtools

* redux-devtools-app

* redux-devtools-app-core

* redux-devtools-cli

* Fix

* redux-devtools-dock-monitor

* redux-devtools-extension

* redux-devtools-inspector-monitor

* redux-devtools-inspector-monitor-test-tab

* redux-devtools-inspector-monitor-trace-tab

* redux-devtools-instrument

* Simplify

* redux-devtools-log-monitor

* redux-devtools-remote

* redux-devtools-rtk-query-monitor

* redux-devtools-serialize

* redux-devtools-slider-monitor

* redux-devtools-utils

* Format
2024-08-08 23:47:07 -04:00
..
src chore(deps): update typescript-eslint monorepo to v8 (major) (#1710) 2024-08-05 00:38:28 +00:00
test Convert React packages to ESM (#1650) 2024-04-07 21:04:45 +00:00
CHANGELOG.md Version Packages (#1649) 2024-04-07 00:05:15 -04:00
eslint.config.js Use flat config for ESLint (#1712) 2024-08-08 23:47:07 -04:00
jest.config.cjs Convert d3 packages to ESM (#1648) 2024-04-07 03:44:14 +00:00
LICENSE.md Merge map2tree package (#426) 2018-12-19 16:50:39 +02:00
package.json Use flat config for ESLint (#1712) 2024-08-08 23:47:07 -04:00
README.md chore(deps): update dependency prettier to v3 (#1434) 2023-07-12 18:03:20 +00:00
tsconfig.json Convert d3 packages to ESM (#1648) 2024-04-07 03:44:14 +00:00
tsconfig.test.json Convert d3 packages to ESM (#1648) 2024-04-07 03:44:14 +00:00

A pure function to convert a map into a tree structure. Created by @romseguy and merged from romseguy/map2tree.

The following opinions must be taken into account since the primary use case of this library is redux-devtools-chart-monitor:

  • Objects and arrays deeply nested within collections are not converted into a tree structure. See someNestedObject and someNestedArray in the output below, or the corresponding test.
  • Provides support for Immutable.js data structures (only List and Map though).

Usage

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

Input

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' },
  },
};

Output

{
  name: `${options.key}`,
  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: 'otherReducer',
      children: [
        {
          name: 'foo',
          value: 0
        },
        {
          name: 'bar',
          object: {
            key: 'value'
          }
        }
      ]
    }
  ]
}