Any plans on making a viewer-only?

[aconrad]

Thanks for your work on this tool, it's a pretty JSON renderer.

I need a viewer, not an editor. I'm currently passing restrict* props to false, which works. But I was wondering whether a viewer-only component (e.g. import { JsonViewer } from "json-edit-react";) would help trim the size of my final bundle. Thoughts?

[CarlosNZ]

Hey, thanks for your comments.

I hadn't really planned to do that. I'd be happy to export a different "Viewer" component, but that would just be a wrapper around the main component with preset props. So I don't think that would help with bundle size at all, since I wouldn't be making a separate codebase for it (and don't really have any desire to, to be honest).

[jpainam]

If you are looking for viewer-only, check this
https://www.npmjs.com/package/react-json-tree

[aconrad]

If you are looking for viewer-only, check this https://www.npmjs.com/package/react-json-tree

I'll take a look, thanks. But is it as pretty as this one though? :)

[aconrad]

The lib react-json-tree is slightly larger according to bundlephobia.

https://bundlephobia.com/package/[email protected]
https://bundlephobia.com/package/[email protected]

But I suppose the real test should be looking at the size of the lib after tree-shaking.

[CarlosNZ]

How about just a single viewer prop, which would disable all editing capability, so syntax would be:

<JsonEditor data={myData} viewer />

It wouldn't really help with the bundle size though, as it wouldn't be a separate code base, it would just be a shorthand for manually adding all the disable editing props. Just wondering if people would find that useful, or if they're happy to just include the disable editing props?

[aconrad]

I think it's okay to leave it as is. I might fork the repo when I get a chance and experiment by ripping out the editing features and see how small we can get...

[jpainam]

I think it's okay to leave it as is. I might fork the repo when I get a chance and experiment by ripping out the editing features and see how small we can get...

It would be great if you could share it here too

[CarlosNZ]

Just moving this to a discussion so you keep this idea alive.

[aconrad]

I spent a little time last night looking into that. It's a major work in progress and not meant to be merged, it's purely for experimentation. I still have to get it working to import it into my project and then analyze how the JsonViewer weighs after tree-shaking, but there is still a long way to go.

Here was my process, being unfamiliar with the code base. I started from the JsonEditor component, made a copy of it called JsonViewer, and then I mostly:

• removed props that didn't make sense in a JsonViewer world (restrictEdit, etc...) and subsequently removed any code that relied on those props
• when it made sense: duplicated types, sub-components, hooks, and added "Immutable" to their name
• decided that translate() and custom nodes weren't useful to me, so will remove those from the JsonViewer (that's pretty much where I stopped at)

I hope to find more time later this week to keep working on it.

https://github.com/CarlosNZ/json-edit-react/compare/main...aconrad:json-edit-react-read-only:aconrad/json-viewer?expand=1