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?]

[gregfenton]

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

Is there an API or Options doc page for all of these settings?

[himself65]

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

Is there an API or Options doc page for all of these settings?

No doc for now, but you can read all types on here https://github.com/TexteaInc/json-viewer/blob/main/src/type.ts

[gregfenton]

Maybe put a link to that in the README as a "v1.0" of the "docs"? Greg Fenton.

…

On Tue., Nov. 8, 2022, 19:41 Himself65, ***@***.***> wrote: you can archive this by setting defaultInspectDepth and maxDisplayLength to a large number. Is there an API or Options doc page for all of these settings? No doc for now, but you can read all types on here https://github.com/TexteaInc/json-viewer/blob/main/docs/pages/full/index.tsx — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBUCB45H5V4Y2KTBJWRF23WHLXLNANCNFSM574VIONA> . You are receiving this because you commented.Message ID: ***@***.***>

[bdsoha]

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.

@himself65 Using a MUI would add a lot of dependencies for people who are using alternative frameworks like http://chakra-ui.com. Any thoughts?

[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.

@himself65 Using a MUI would add a lot of dependencies for people who are using alternative frameworks like http://chakra-ui.com. Any thoughts?

This is a tough question for any component library. I think abstracting a UI-replaceable component library is kind of hard for now. But we could export an unstyled JSON-viewer component in the future, for example

import { withStyledJsonViewer } from '@textea/json-viewer'

const StyledJsonViewer = withStyledJsonViewer({
  Box: (props) => (<Box /* you handle the props to a third-party UI library*/></Box>)
})

// or even further, we port the UI to other library like tailwind css, or chakra ui
import { withStyledJsonViewer, TailwindCSSMixture } from '@textea/json-viewer'
const TailWindCSSJsonViewer = withStyledJsonViewer(TailwindCSSMixture)

[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.

@himself65 Using a MUI would add a lot of dependencies for people who are using alternative frameworks like http://chakra-ui.com. Any thoughts?

This is a tough question for any component library. I think abstracting a UI-replaceable component library is kind of hard for now. But we could export an unstyled JSON-viewer component in the future, for example

import { withStyledJsonViewer } from '@textea/json-viewer'

const StyledJsonViewer = withStyledJsonViewer({
  Box: (props) => (<Box /* you handle the props to a third-party UI library*/></Box>)
})

// or even further, we port the UI to other library like tailwind css, or chakra ui
import { withStyledJsonViewer, TailwindCSSMixture } from '@textea/json-viewer'
const TailWindCSSJsonViewer = withStyledJsonViewer(TailwindCSSMixture)

This might be a V3 roadmap, I think. Because we need to rewrite the whole code again to remove the UI hard binding!

[pengbins]

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.

@himself65 Using a MUI would add a lot of dependencies for people who are using alternative frameworks like http://chakra-ui.com. Any thoughts?

About 97% BUNDLE SIZE is mui .

https://bundlephobia.com/package/@textea/json-viewer@2.12.0

#140

[kirill-linnik]

hey, I cannot find it that easy but:

• how can I "expand all" on demand? (say, my depth is 3, but sometimes I want to open it all)
• how can I edit keys?

and... thank you for your effort!

[rtritto]

Can be a good idea to replace zustand with recoil? Maybe to gain performance (idk) or other feathures.

Edit

For state management, Atoms approach is faster than Flux and Proxy ones because is closer to the React state (source).
recoil and jotai use Atoms approach.
jotai handles garbage collectore automatically (source) so as performace is better and bundle size is less than recoil.

zustand can be replaced with jotai.

Related PR #167

FYI @himself65

[mashirozx]

I wonder, this lib is expected to be a simple component plugin to display JSON view, so there is no need of global state management lib. In my use case, I didn't use zustand lib in my project (I use others instead), and the import of json-viewer result in the useless zustand lib in my project build bundle. Can we consider remove the zustand lib and use react's original methods like context provider to replace that?

[GeorgiKeranov]

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.)

I was having the same problem and resolved it by adding defaultInspectDepth={0} which collapses the root object by default :)

[himself65]

Can be a good idea to replace zustand with recoil? Maybe to gain performance (idk) or other feathures.

Edit

For state management, Atoms approach is faster than Flux and Proxy ones because is closer to the React state (source). recoil and jotai use Atoms approach. jotai handles garbage collectore automatically (source) so as performace is better and bundle size is less than recoil.

zustand can be replaced with jotai.

Related PR #167

FYI @himself65

Thanks for the reply but I have no longer maintain this project since Textea CEO has had arrears in the salary since three months ago

[forrestbao]

@rtritto and community: @pionxzh has been in charge of this library for a while, please copy him if you have future suggestions.

We welcome contributions to this library from anyone. At the end of the day, the work was pioneered by mac-s-g.

[mashirozx]

@rtritto and community: @pionxzh has been in charge of this library for a while, please copy him if you have future suggestions.

We welcome contributions to this library from anyone. At the end of the day, the work was pioneered by mac-s-g.

hummm, is this the CEO?🫣