Photoshop React UXP Typescript starter

Photoshop UXP Plugin API
1

Hi everyone,

I know that this thread is already mentioned before but I was wondering is there any official Photoshop UXP React Typescript starter kit that supports the “spectrum web components” out of the box?

So I actually plan to use the etc. inside the functional components without any warnings like:
Property 'sp-button' does not exist on type 'JSX.IntrinsicElements'
I know that there are these repositories:

The second is the official one but it lacks the support for the spectrum web components when I tried to use them out of the box.
I started with the setup created by @DavideBarranca (I got it from his book) and I added some more packages like “ts-loader”, and “typescript” as dev dependencies and I also added them into the webpack config file so everything builds. I guess I am missing the types for the spectrum web components.

2

You can get rid of the warning by extending the JSX namespace:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'sp-dropdown': any;
      'sp-textfield': any;
      'sp-menu': any;
      'sp-menu-item': any;
      'sp-slider': any;
      'sp-label': any;
      'sp-picker': any;
      'sp-popover': any;
      'sp-action-button': any;
      'sp-overlay': any;
      'sp-icon': any;
      // ...
    }
  }
}
3

Yep. That was it :slight_smile: added the typings inside the .d.ts files. Thanks @simonhenke

4

Just to be clear, UXP does not support Spectrum Web Components per se. Although there are similarities, but UXP supports only Spectrum UXP (check Typography and UI), which in quite a bit of cases has significant differences, even for seemingly the same components. And, IMO, this Design UI documentation is completely useless and misleading

5

Yes. I am aware of that. I’m reading a book from Davide Barranca and I’m going by that book, step by step :slight_smile: and he also mentioned this and left the links for the documentation to avoid confusion. There is a lot of similar content for “almost” the same thing. Thanks, @Karmalakas for pointing this out.