From e2c14ebf9cb4f62d3d5eed63becd4cbf587485a4 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Mon, 18 Sep 2023 08:03:28 +0200
Subject: [PATCH] RSC: Use react/experimental types (#9196)

Using these types both for RW the framework and RW apps
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/experimental.d.ts

This gives us proper types for `<form action...` in RW apps
---
 .../commands/experimental/setupRscHandler.js  | 22 +++++++++++++++++++
 packages/vite/ambient.d.ts                    |  2 +-
 packages/vite/src/fully-react/assets.tsx      |  1 -
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/cli/src/commands/experimental/setupRscHandler.js b/packages/cli/src/commands/experimental/setupRscHandler.js
index 12da132d7a65..aeb2d74ccd47 100644
--- a/packages/cli/src/commands/experimental/setupRscHandler.js
+++ b/packages/cli/src/commands/experimental/setupRscHandler.js
@@ -4,6 +4,7 @@ import path from 'path'
 import execa from 'execa'
 import { Listr } from 'listr2'
 
+import { prettify } from '@redwoodjs/cli-helpers'
 import { getConfig, getConfigPath } from '@redwoodjs/project-config'
 import { errorTelemetry } from '@redwoodjs/telemetry'
 
@@ -185,6 +186,27 @@ export const handler = async ({ force, verbose }) => {
           })
         },
       },
+      {
+        title: 'Add React experimental types',
+        task: async () => {
+          const tsconfigPath = path.join(rwPaths.web.base, 'tsconfig.json')
+          const tsconfig = JSON.parse(fs.readFileSync(tsconfigPath, 'utf-8'))
+
+          if (tsconfig.compilerOptions.types.includes('react/experimental')) {
+            return
+          }
+
+          tsconfig.compilerOptions.types.push('react/experimental')
+
+          writeFile(
+            tsconfigPath,
+            prettify('tsconfig.json', JSON.stringify(tsconfig, null, 2)),
+            {
+              overwriteExisting: true,
+            }
+          )
+        },
+      },
       {
         title: 'Patch vite',
         task: async () => {
diff --git a/packages/vite/ambient.d.ts b/packages/vite/ambient.d.ts
index 82550d6c10c7..d2b450c857c6 100644
--- a/packages/vite/ambient.d.ts
+++ b/packages/vite/ambient.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-var */
-/// <reference types="react/canary" />
+/// <reference types="react/experimental" />
 import type { HelmetServerState } from 'react-helmet-async'
 
 declare global {
diff --git a/packages/vite/src/fully-react/assets.tsx b/packages/vite/src/fully-react/assets.tsx
index 3695ddb48a18..6aa11011a68c 100644
--- a/packages/vite/src/fully-react/assets.tsx
+++ b/packages/vite/src/fully-react/assets.tsx
@@ -52,7 +52,6 @@ export function Assets() {
   // Do we also need special code for SSR?
   // if (isClient) return <ClientAssets />
 
-  // @ts-expect-error Need experimental types here for this to work
   return <ServerAssets />
 }