Compatibility between JSAPI and new React runtime

[AndrewGilbert]

I used Vite to create a React app with TypeScript. The app has a custom widget.

I have it all working, but I'm wondering if this information by @ReneRubalcava3 is still valid:

. . . React uses React.createElement for vdom and the JSAPI uses tsx and TypeScript only allows a single jsxFactory to be defined.

. . .

// @ts-nocheck
/** @jsxRuntime classic */
/** @jsx tsx */

. . .You lose type checking on your custom widget

However, React has a new runtime (called "automatic") that doesn't use React.createElement. Details are here.

So the question is: Is the new React "automatic" runtime compatible with the ArcGIS JSAPI, such that we can (1) use the new runtime's features and (2) keep TS type checking, when making apps with custom widgets?

[ReneRubalcava · Accepted solution]

There is still a React JSX runtime. The ArcGIS JSAPI widgets have a different jsx runtime that is not compatible with React., The TS compiler doesn't know to not try and compile a custom ArcGIS widget JSX like React and will fail. So, in short, yeah, if you want to mix a custom ArcGIS JSAPI widget with React, those comments are needed. I however would not recommend doing this, just build your components with whatever framework you are using or build web components if you are looking to share them across projects.

[AndrewGilbert]

OK, thanks. When we say "web components," I thought that a custom ArcGIS widget is a web component. What's the difference exactly?

Specifically I'm looking to build a reusable widget/component that can be imported into any app and lets the user do dynamic queries, similar to definition queries in ArcGIS Pro where you can add as many criteria as you like. I was thinking React in order to dynamically add the query boxes, and the ArcGIS JSAPI for the ArcGIS integration (e.g. sending query to ArcGIS Server). I'm hoping to use TS and other "latest and greatest" things where it makes sense.

Any samples/insight/etc. appreciated.

[ReneRubalcava]

Sorry, when I say Web Components, I'm talking about native Web Components. Our JSAPI widgets are not native Web Components. We use and provide Calcite Components that you can use too. There are a few options out there to more easily build Web Components, but Stencil is very good.