Add tree visualization to the devtool - Githubissues

Yoast / YoastSEO.js

Analyze content on a page and give SEO feedback as well as render a snippet preview.

GNU General Public License v3.0

403 stars 171 forks source link

Add tree visualization to the devtool #2135

Closed igorschoester closed 5 years ago

igorschoester commented 5 years ago

Summary

This PR can be summarized in the following changelog entry:

[non-user-facing] Add visualization of the tree.

Relevant technical choices:

Creating an option to build the tree every text change.
Represent it using react component: react-json-view.

Screenshots

jsontree

Test instructions

This PR can be tested by following these steps:

Go to the path cd examples/webpack.
Install dependencies yarn.
Start the dev server yarn start.
Test the option Build the tree. While on it should build the tree every text change. While off it should do nothing. Turning it back on should (most of the time, there can be a timing thing with the worker results) re-build the tree.
Check the tree representation itself.

Fixes #2122

nataliashitova commented 5 years ago

Acceptance 👍 I did not notice any delay in tree updates.