feature/json viewer - #174
Conversation
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
655b97e to
707d44d
Compare
Ryan Bower (R-Bower)
left a comment
There was a problem hiding this comment.
At a first glance, this looks promising. I'll do a more detailed review this week.
Ryan Bower (R-Bower)
left a comment
There was a problem hiding this comment.
A few small requests, nothing major. Overall, really good.
I'm going to hold off on merging this until we've aligned with the QDS team on a syntax highlighting theme. Details here.
| callback: function onUpdate() {}, | ||
| errors: [ | ||
| new Error("Connection timeout"), | ||
| new TypeError("Expected string, received number"), |
There was a problem hiding this comment.
interesting... this is causing a hydration issue.
Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
This is probably because the TypeError object is created on both the client and server, and it's a separate object on each. I wonder if we need to account for this, re: SSR?
There was a problem hiding this comment.
removed .stack from the errors seemed to fix this, just a demo workaround though
- add qds api for data bindings - use new qds api in angular and react key/value nodes - use correct font - fix hydration issue with SSR by removing stack from errors created for demo - change JsonViewerSimpleProps to JsonViewerProps for react implementation - Make f color for functions neutral grey Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
Signed-off-by: Ryan Bower <rbower@qti.qualcomm.com>
| return <>{renderValue?.(node) ?? node.value}</> | ||
| } | ||
|
|
||
| const Element = node.tagName |
There was a problem hiding this comment.
I checked the utils folder and node.tagName is only ever span. We can probably remove this property altogether. I don't ever see it being anything else.
| provideQdsTreeContext(), | ||
| provideJsonViewerOptionsContext(), | ||
| ], | ||
| selector: "q-json-viewer-root", |
There was a problem hiding this comment.
This should be a directive. We can use the trackBindings approach like we do in other components.
|
This pull request has been marked as stale due to 60 days of inactivity. To prevent automatic closure in 10 days, remove the stale label or add a comment. You can reopen a closed pull request at any time. |
|
This pull request has been marked as stale due to 60 days of inactivity. To prevent automatic closure in 10 days, remove the stale label or add a comment. You can reopen a closed pull request at any time. |



implementation of json-viewer in angular and react
TODO: