DEV Community

Discussion on: Introducing Sapling, A VS Code Extension For Traversing Your React Component Hierarchy

View post
Collapse
 
pengeszikra profile image
Peter Vivo •

Nice idea, but in my complex case this is failed. Even when I try a minimal react app I just saw the main component, the dynamical created Item is missing from tree.

import React, {useReducer} from 'react';

const init = {
  foo: 42
}

const reducer = (state,{type, props}) => {
  switch(type) {
    case 'foo': return {...state, foo:payload};
    default: return state;
  }
}

const Item = ({content}) => <div>{content}</div>;

export default () => {

  const [state, dispatch] = useReducer(reducer, init)

  const {foo} = state;


  return (
    <pre>-- basic Sapling ::{foo}--
    {['alfa','beta','epsilon'].map((content, key) => <Item content={content} key={key}/>)}
    </pre>
  );
}
Enter fullscreen mode Exit fullscreen mode

But in my complex react program this extension seems useful if it is works, but I don't get too much information about error, just I saw my main component red. Maybe I use frequently unorthodox pipeline operator in my codebase, and useReducer is behind useSagaReducer ?

Collapse
 
jocella profile image
Jordan H •

Hi Peter! Thanks for checking out Sapling! Sapling currently works best when only one React component is defined in each file, since we originally envisioned it for file navigation. For your more complex program, please open an issue on our GitHub with an example of the files you are trying to parse and we will take a look!