Stop using jsx-runtime in opensource/sdk-js (#4994)

In order to increase compatibility with potential customer build
configurations, stop using the new JSX transform for React[1].

There are two issues with the new transform.  One is that it's only
supported on React 17+, as well as some backported versions of 15 and
16.  The other is that, pre-React 18, the new transform involves an
import from `react/jsx-runtime`, but that file isn't explicitly
exported by the `react` package, and as a result some build systems
(notably, Webpack 5+) will not be able to process the import [2].

[1] https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

[2] facebook/react#20235 (comment)


Test Plan:

npm run build

npm run tsc-packages

Ran the testbed, all components seemed to render fine, including
ThreadedComments.

monorepo-commit: 0c6f26eb5e8bc8bc3a4dc8d6a16325081d3ec473

packages/react/components/AddReaction.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/Avatar.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/Composer.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/Facepile.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/Inbox.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { InboxWebComponentEvents } from '@cord-sdk/types';
 import {
   componentAttributes,

packages/react/components/InboxLauncher.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type {
   BadgeStyle,
   InboxLauncherWebComponentEvents,

packages/react/components/Message.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/NotificationList.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/NotificationListLauncher.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/PagePresence.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type {
   Orientation,
   PagePresenceWebComponentEvents,

packages/react/components/Pin.tsx

@@ -1,3 +1,5 @@
+// @ts-ignore TS wants us to `import type` this, but we need it for JSX
+import * as React from 'react';
 import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 

packages/react/components/PresenceFacepile.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type {
   Orientation,
   PresenceFacepileWebComponentEvents,

packages/react/components/PresenceObserver.tsx

@@ -1,3 +1,5 @@
+// @ts-ignore TS wants us to `import type` this, but we need it for JSX
+import * as React from 'react';
 import type { PresenceObserverWebComponentEvents } from '@cord-sdk/types';
 import {
   componentAttributes,

packages/react/components/SelectionComments.tsx

@@ -1,3 +1,5 @@
+// @ts-ignore TS wants us to `import type` this, but we need it for JSX
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/Settings.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   componentAttributes,
   propsToAttributeConverter,

packages/react/components/SidebarLauncher.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type {
   BadgeStyle,
   SidebarLauncherWebComponentEvents,

packages/react/components/Thread.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 

packages/react/components/ThreadFacepile.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Facepile, thread } from '@cord-sdk/react';
 
 export function ThreadFacepile({ threadId }: { threadId: string }) {

packages/react/components/ThreadList.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useCallback } from 'react';
 import type {
   ThreadListFilter,

packages/react/components/ThreadedComments.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import cx from 'classnames';
 import type { Location, ThreadSummary } from '@cord-sdk/types';
 import type { Dispatch, SetStateAction } from 'react';

packages/react/tsconfig.json

@@ -6,7 +6,7 @@
     "strict": true,
     "esModuleInterop": true,
     "declaration": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "inlineSourceMap": true
   }
 }

rollup.config.js

@@ -87,7 +87,7 @@ async function rollupConfig() {
     packageBuildConfig('types'),
     packageBuildConfig('components'),
     packageBuildConfig('jsx'),
-    packageBuildConfig('react', { extraExternal: ['react/jsx-runtime'] }),
+    packageBuildConfig('react'),
     packageBuildConfig('server'),
     packageBuildConfig('api-types', {
       extraCopyTargets: [