-
Notifications
You must be signed in to change notification settings - Fork 33
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: simplify JSV #109
Conversation
6887acc
to
2436b1e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For me this is insanely impressive.
However I am obviously waiting for the passing tests - my main gripe would be catching any regressions, so final opinion on this PR would largely depend for me on quality of test refactor.
I'm surprised that removing tree list went so smoothly. I was expecting much bigger refactor. At this point the code is way more accessible and considering current requirements that change might be good to have. I got used to tree list usage, also got familiar with it to some extent, but trying to add recent changes made it too painful and unnecessarily complex. In the end it's a matter of picking between virtualization and simplicity. |
@mallachari yeah, it's probably because the last time you looked at the component, JSV was strictly tied to tree-list. Speaking of the PR, I'm going to review it soon, probably today or tomorrow. |
Oh yeah, I wouldn't have attempted this a few months ago 😂 . The JST-extraction was amazing, it took out most of the core logic without having any UI-related dependencies. This is philosophically meant to be a follow-up to that PR, completing what you started there. |
Yeah, to be frank, when working on #91 and related PR, I had a moment when I thought it might be easier to simply write a new component. Speaking of dropping virtualization, I'm totally down for it, as long as it doesn't meaningfully impact performance. |
Oh, these magic words always get me, even though I know them 😄 Thanks for the heads-up @domagojk, I'll update it. |
@P0lip I cleaned up the TODOs, addressed your comments and reimplemented the required props with one change: I swapped the custom The only TODO left is the tests, which are being handled by #111 first, otherwise this is ready for a next pass. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good with the exception of stepIn
being gone in the new code.
We should try to add it back. LMK if you have any concerns
Apologies I didn't spot this during the first pass.
}); | ||
} | ||
jsonSchemaTree.walker.hookInto('filter', node => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You lost stepIn
in the transition.
This is quite important, otherwise really large schemas with a ton of $refs will be much slower to process than needed.
stepIn
is needed, so that JST tree is not built upfront for the whole schema, but for actual parts that are currently rendered.
This is also one of the more notable factors contributing to the entire complexity of the former solution.
While, getting rid of virtualization is fine by me, we certainly should at least try to preserve that optimization.
By adding it back, we should be more or less on par with current v3.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aside from that perf issue, the code is good 👍
@@ -37,7 +37,6 @@ | |||
"peerDependencies": { | |||
"@stoplight/markdown-viewer": "^4", | |||
"@stoplight/ui-kit": "^3", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we still rely on UI-Kit in JSV?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unfortunately it's still a peer of MDV :\
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed the include from the storybook _styles.scss
. That at least make Storybook rebuilds faster.... which is a win I guess... 😅
🎉 This PR is included in version 4.0.0-beta.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎉 This PR is included in version 4.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Alright, so this is going to be opinionated. Prep your coffee, tea, monster (😉), whatever. Don't read in a bad mood please. 😇
Background
We've long had an issue, stoplightio/elements#667. If you read the description you can see that while it's a non-trivial problem, it feels reasonable, something that can be done.
Then we tried to implement it. We struggled. Then we invited @P0lip to help us. Then we tried again. Struggled still. Then we held a 4-hour long session together to make something useful. We still struggled, but we built some POC. I tried to build something complete myself based on our POC, but I failed. I was running into all sorts of hard-to-debug state-management-related issues, crashes, etc. Items missing from caches, TypeError-s, etc. I gave up.
TLDR
While the current state management approach JSV is using has some wonderful features, it is unfortunately borderline impossible to comprehend by basic human beings like myself. This poses a huge risk to the Elements project (and possibly the Stoplight ecosystem as a whole) because - as this oneOf/anyOf issue shows - Team Undefined seems to be simply incapable of working on it, in it's current form.
Proposal
I propose to remove most of the state-management complexity from JSV, and fall back to a basic, idiomatic react approach:
The foundation,
json-schema-tree
is kept as-is, JST is an amazing library for abstracting away the bulk of the logic. There wasn't much extra logic actually on top of what JST offers, the most notable one being array element type hoisting. (a.k.a. "flattening") That logic was moved from the SchemaTreeListTree class to custom hooks and functions, see utils.tsThe bulk of the presentation logic is kept intact, except it is now simpler as it:
PrimitiveArrayNode
, etcResults
The good
tree-list
, which is 37KB minifiedmobx
&mobx-react-lite
which are 57 KB and 6 KB respectively.The bad
defaultExpandedDepth > 1
.The stress test which renders a 15-thousand-line json-schema twice with
defaultExpandedDepth: 2
takes a little more than 1 second on my machine vs the virtualized version, which takes about 300ms.I would say this is still definitely the "worth it" category. The results above are without any attempt at performance optimization, but even if we can't improve it much: 30k lines worth of content loading in 1 sec should be acceptable IMO. We'll throw a loading-spinner, animation or anything and it will feel butter-smooth. (Or a progress-bar, right, @wmhilton? 😉)
TODO