Someone enlighten me here. I have a react uxp plugin. I have been using the native html elements but from my knowledge some of those elements will be outdated in favour of sp-{elements}. I was going through the spectrum web components and followed the instruction of installing the components in my project. Well I would have gone with the components listed on the spectrum reference page https://developer.adobe.com/xd/uxp/uxp/reference-spectrum/User%20Interface/sp-textfield/ but it doesn’t have all the components I need eg the component below.
Search: Spectrum Web Components . So I resulted to using the spectrum web components on this page Getting started: Spectrum Web Components. on installing the component and running build, I get the error showed below. what could be the reason since I’ve followed what the documentation says.
Or what’s the proper way of using these components with react ?
Spectrum Web Components is not Spectrum UXP. Also your link is to XD docs instead of Ps. If you want to use SWC, it’s still in beta and available from UXP 7.0
I know - very confusing
I can see there is react spectrum React Spectrum . Do they have any plugin in the github that has made use of this ? or How do we make use of it?
Am checking on the link you sent on swc. thankyou
I see this React Spectrum is yet another system 
Not sure if it will work on UXP. Share if you manage to try and get results
swc don’t seem to work for a adobe uxp react environment. once I run the npm run build they build process is succefful. But once I start the plugin in the uxp developer tool, the plugin emits the same error as the above
Spectrum Web Components have very limited support in UXP v7.0. Please refer to this page for getting started on using them (especially the enableSWCSupport flag in the manifest.json). With UXP v7.2 the list of supported components would be much more and for the existing components too the supported variants would grow.
Coming to the usage of Spectrum in UXP…well…it’s complicated. It’s an overloaded term and let me try to clarify a few things about it:
-
Spectrum, as you might be aware, is a set of styling guidelines advocated by Adobe that’s adhered to by a lot of the internal plugins (think of the launch screen in Photoshop) as well as third-party plugins (like the ones developed by people on this forum!).
-
UXP provides some in-built Spectrum widgets (listed here) which adhere to these guidelines. They don’t require anything additional (no imports, no manifest permissions etc.) and their usage is just like any other HTML tag e.g. <sp-button>.
-
React Spectrum (a library that provides React-compatible Spectrum-design adhering components) is not something that’s supported by UXP.
-
Coming to Spectrum Web Components, it’s another UI library that provides Web Components adhering to fairly latest Spectrum guidelines. As mentioned earlier, this relies on basic Web Component support (which is something that was added in UXP v7.0) and then builds upon them using Spectrum CSS to provide the UI components like <sp-banner>. You can try out some SWC components like <sp-banner>, <sp-divider> etc. (listed here) in UXP v7.0. Please keep an eye on this list as it’s set to grow with UXP v7.2!
I hope that clarifies. For further reference please read this. Open to feedback if the existing documentation has some lacunae.
Also, for your exact query about using SWC components in a React environment, there are React wrappers provided by SWC that can be used though this hasn’t been validated with UXP v7.0. The only niggle I foresee would be having the correct versions of the component that these wrappers are using. UXP locks on to certain versions of the SWC components and that needs to be specified in the resolution block in the package.json (refer to the sample plugin for SWC in UXP). With UXP v7.2 release, we shall have a sample plugin demonstrating the React wrapper usage in UXP too.
6 Likes
when will upx v7.2 get released?
Photoshop with UXP v7.2 is slated for an August release, with an accompanying beta planned at July-end.
