Add JSX support for custom UI #2258
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Mrtenz
force-pushed
the
mrtenz/jsx
branch
3 times, most recently
from
971bad9 to
507855f
Compare
packages/snaps-utils/src/jsx.ts
Outdated
| if ( | ||
| hasProperty(node, 'props') && | ||
| isPlainObject(node.props) && | ||
| hasProperty(node.props, 'children') |
There was a problem hiding this comment.
Can't a prop also be a component or do we not want to support that in our implementation?
I seem to recall some of the SIP having components as props
There was a problem hiding this comment.
None of the components use components in props at the moment.
There was a problem hiding this comment.
Once we want to do that, how do we remember to add support in this file and others?
| module.exports = deepmerge(baseConfig, { | ||
| preset: '@metamask/snaps-jest', | ||
|
|
||
| // Since `@metamask/snaps-jest` runs in the browser, we can't collect |
There was a problem hiding this comment.
Is this still accurate? I guess we could collect something now potentially?
There was a problem hiding this comment.
It's accurate for the wrong reason. We still can't collect coverage information since the Snap runs in a separate thread.
packages/snaps-jest/src/internals/simulation/interface.test.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Frederik Bolding <[email protected]>
IvanVnn
approved these changes
May 4, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This changes Snaps UI to use a new JSX based format. I've added a JSX-equivalent for each existing component (with some small differences, see below), and a simple renderer, which serialises the elements. Existing (now legacy) components are transformed into the JSX based format automatically, so under the hood we only need to support JSX.
Snaps JSX only supports the new JSX transform, i.e.,
react-jsxorreact-jsxdev, with@metamask/snaps-sdkas import source. For development, usingreact-jsxdevis recommended as it will provide additional validation which is otherwise handled by MetaMask. The CLI has been updated to usereact-jsxautomatically.Differences
There are some minor differences between the legacy components and JSX equivalents:
General
panelwas replaced byBox, which is more in line with existing UI frameworks.value, but usechildreninstead.Forms and form components
Buttonusestypeinstead ofbuttonType.Button'ssecondaryvariant was replaced bydestructive.Inputusestypeinstead ofinputType.Formdoes not acceptInputdirectly, but rather expects aFieldcomponent with anInput.Fieldhas props to set alabelorerror.Images
Imagenow takes an optionalaltprop.Text and formatting
Textcomponent does not support markdown. Instead, you can use theBold,Italic, andLinkcomponents. The new component does not have amarkdownprop.Breaking changes
snaps-jestchanged. When usingtoStrictEqual(or equivalent) matchers, the expected value needs to be updated.toRenderworks with the legacy and JSX format.