convert createElement calls to jsx

Author: AbanoubGhadban

eslint.config.ts

@@ -75,7 +75,7 @@ const config = tsEslint.config([
         alias: [['Assets', './spec/dummy/client/app/assets']],
 
         node: {
-          extensions: ['.js', '.jsx', '.ts', '.d.ts'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
         },
       },
     },
@@ -100,6 +100,7 @@ const config = tsEslint.config([
           js: 'never',
           jsx: 'never',
           ts: 'never',
+          tsx: 'never',
         },
       ],
 
@@ -132,6 +133,12 @@ const config = tsEslint.config([
       'react/jsx-props-no-spreading': 'off',
       'react/static-property-placement': 'off',
       'jsx-a11y/anchor-is-valid': 'off',
+      'react/jsx-filename-extension': [
+        'error',
+        {
+          extensions: ['.jsx', '.tsx'],
+        },
+      ],
     },
   },
   {

node_package/src/RSCPayloadContainer.ts renamed to node_package/src/RSCPayloadContainer.tsx

@@ -44,28 +44,28 @@ const RSCPayloadContainer = ({
   const chunkPromise = getChunkPromise(chunkIndex);
   const chunk = React.use(chunkPromise);
 
-  const scriptElement = React.createElement('script', {
-    dangerouslySetInnerHTML: {
-      // Ensure the array is never reassigned.
-      // Even at the RSCClientRoot component, the array is assigned
-      // only if it's not already assigned by this script.
-      __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
-    },
-    key: `script-${chunkIndex}`,
-  });
+  const scriptElement = (
+    <script
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: escapeScript(`(self.REACT_ON_RAILS_RSC_PAYLOAD||=[]).push(${chunk.chunk})`),
+      }}
+      key={`script-${chunkIndex}`}
+    />
+  );
 
   if (chunk.isLastChunk) {
     return scriptElement;
   }
 
-  return React.createElement(React.Fragment, null, [
-    scriptElement,
-    React.createElement(
-      React.Suspense,
-      { fallback: null, key: `suspense-${chunkIndex}` },
-      React.createElement(RSCPayloadContainer, { chunkIndex: chunkIndex + 1, getChunkPromise }),
-    ),
-  ]);
+  return (
+    <>
+      {scriptElement}
+      <React.Suspense fallback={null} key={`suspense-${chunkIndex}`}>
+        <RSCPayloadContainer chunkIndex={chunkIndex + 1} getChunkPromise={getChunkPromise} />
+      </React.Suspense>
+    </>
+  );
 };
 
 export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayloadContainerProps) {
@@ -113,9 +113,9 @@ export default function RSCPayloadContainerWrapper({ RSCPayloadStream }: RSCPayl
     [chunkPromises],
   );
 
-  return React.createElement(
-    React.Suspense,
-    { fallback: null },
-    React.createElement(RSCPayloadContainer, { chunkIndex: 0, getChunkPromise }),
+  return (
+    <React.Suspense fallback={null}>
+      <RSCPayloadContainer chunkIndex={0} getChunkPromise={getChunkPromise} />
+    </React.Suspense>
   );
 }

node_package/src/RSCServerRoot.ts renamed to node_package/src/RSCServerRoot.tsx

@@ -104,14 +104,12 @@ const RSCServerRoot: RenderFunction = async (
   rscPayloadStream.pipe(rscPayloadStream2);
   const serverComponentElement = createFromReactOnRailsNodeStream(rscPayloadStream1, ssrManifest);
 
-  return () =>
-    React.createElement(React.Fragment, null, [
-      React.createElement(React.Fragment, { key: 'serverComponentElement' }, use(serverComponentElement)),
-      React.createElement(RSCPayloadContainer, {
-        RSCPayloadStream: rscPayloadStream2,
-        key: 'rscPayloadContainer',
-      }),
-    ]);
+  return () => (
+    <>
+      <React.Fragment key="serverComponentElement">{use(serverComponentElement)}</React.Fragment>
+      <RSCPayloadContainer RSCPayloadStream={rscPayloadStream2} key="rscPayloadContainer" />
+    </>
+  );
 };
 
 export default RSCServerRoot;