Roadmap for v2

[himself65]

our @textea/json-viewer is based on mac-s-g/react-json-view, which haven’t been maintained since about 2 years ago. Also, the way of writing a react component has changed since then.

So, in v2 version, we will firstly rewrite the whole project using TypeScript and React Hooks.

Secondly, our team’s product(closed alpha for now) is also using json-viewer, we need customize json style in many cases. We need also improve the styling system, my currently plan is to use @mui/material which is a popular library.

Third, is store, I’ve read the whole source code, the previous author stores a value using likeglobalStore.set/get(randomID, key, value, defaultValue) (https://github.com/mac-s-g/react-json-view/blob/master/src/js/stores/ObjectAttributes.js). Also, in many cases, many fields like defaultValue are bypass through the whole component lifecycle. We need refactor this part into a lightly structure using ReactContext, Zustand.

What’s more, a guy suggests me to support plugin system. I’m also thinking this at the beginning. I would prefer a API like:

const types = {
  …jsonViewer.types,
  // support hook with your component
  Number: // MyNumberComponent
}
<JsonViewer
  types={types}
  keyRenderer=((paths: string[], value: unknown, type: Type) => { … })
  valueRenderer=((value: unknown, paths: string[], type: Type) => { … })
>

What’s more, I don’t want it just stop by a JSON viewer. In a real production, we will have many class instance or something more than a string, like images.

const json = {
  type: ‘image’,
  image: ‘base64:xxx’,
  error: new Error(‘something not good’)
}

return (
<JsonViewer
  src={json}
  types={{
    …jsonViewer.types,
    Image: [
      (t) => isBase64(t), // whether this is a image
      (props) => <Image src={props.value}/> // load image
    ],
    Error: [
      (t) => t instanceof Error,
      props => props.value.message // fallback to ‘something not good’
    ]
  }}
/>
)

P.S. This is inspired by https://www.npmjs.com/package/typeson

Related Issues

• remove react-base16-styling #10
• refactor using TypeScript #2
• use zustand as store manager #3
• support bigint #23
• support arrayBuffer #24
• support editor for json/array types #25

[himself65]

Work steps:

1. Refactor every component to Function Component with TypeScript
2. Repleace base16-styling to mui
3. Use zustand

[awkj]

Secondly, our team’s product(closed alpha for now) is also using json-viewer, we need customize json style in many cases. We need also improve the styling system, my currently plan is to use @mui/material which is a popular library.

I think base16 is too old, but mui is a whole package solution.

I suggest use tailwindcss (a popular libaray to build style https://tailwindcss.com/ ), it is better choice , better to custom style, especially json-viewer use key-render and value-render.

[himself65]

I was coding these days. I think we just need https://mui.com/system/getting-started/overview/ for the styling system. We don't need much more CSS, either in mui or tailwinds.

[erewhon]

Is there a plan, or desire, to add a prop that collapses the entire tree by default? (Like the "collapsed" prop in react-json-view.)

[himself65]

Is there a plan, or desire, to add a prop that collapses the entire tree by default? (Like the "collapsed" prop in react-json-view.)

you can archive this by setting defaultInspectDepth and maxDisplayLength to a large number.

I'm not sure how entire you want for a tree. I think that will be enough for a screen

[himself65]

Is there a plan, or desire, to add a prop that collapses the entire tree by default? (Like the "collapsed" prop in react-json-view.)

Also, we could support defaultInspect=" * " to expand all key-value
( * is a wildcard)

[erewhon]

That's an interesting idea. (defaultInspect="*").

I had tried defaultInspectDepth but it didn't seem to work. I hadn't looked at the code before, but just did. Maybe I'm missing something, but it looks like createJsonViewerStore ignores the props for defaultInspectDepth?

[himself65]

I see. It's a mistake. I will open a pr

[gregfenton]

Is this a thread where we can discuss additional features?

If so, I would be interested in:

• having the ability to "sort alphabetically"
• ability to copy both the key & value of a node, not just the value

[EDIT NOTE: ability to sort alphabetically exists already: objectSortKeys={true} ... not sure if there is a docs page for this or if reading the code is the only way to discover these options?]