From 9b43394d75917d9cd6cdd53b48e935f39c25ff52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20G=C3=A9rault?= <gerault-alexandre@orange.fr>
Date: Sat, 12 Nov 2022 19:20:03 +0100
Subject: [PATCH] [React] Fix window types

---
 .../Resources/assets/src/register_controller.ts  | 16 ++++++++++++++--
 .../Resources/assets/src/render_controller.ts    |  6 +++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/React/Resources/assets/src/register_controller.ts b/src/React/Resources/assets/src/register_controller.ts
index 6d278e74dc0..dd85f666424 100644
--- a/src/React/Resources/assets/src/register_controller.ts
+++ b/src/React/Resources/assets/src/register_controller.ts
@@ -9,8 +9,20 @@
 
 'use strict';
 
+import { ComponentClass, FunctionComponent } from 'react';
+
+type Component = string | FunctionComponent<object> | ComponentClass<object, any>;
+
+declare global {
+    function resolveReactComponent(name: string): Component;
+
+    interface Window {
+        resolveReactComponent(name: string): Component;
+    }
+}
+
 export function registerReactControllerComponents(context: __WebpackModuleApi.RequireContext) {
-    const reactControllers: { [key: string]: object } = {};
+    const reactControllers: { [key: string]: Component } = {};
 
     const importAllReactComponents = (r: __WebpackModuleApi.RequireContext) => {
         r.keys().forEach((key) => (reactControllers[key] = r(key).default));
@@ -19,7 +31,7 @@ export function registerReactControllerComponents(context: __WebpackModuleApi.Re
     importAllReactComponents(context);
 
     // Expose a global React loader to allow rendering from the Stimulus controller
-    (window as any).resolveReactComponent = (name: string): object => {
+    window.resolveReactComponent = (name: string): Component => {
         const component = reactControllers[`./${name}.jsx`] || reactControllers[`./${name}.tsx`];
         if (typeof component === 'undefined') {
             throw new Error('React controller "' + name + '" does not exist');
diff --git a/src/React/Resources/assets/src/render_controller.ts b/src/React/Resources/assets/src/render_controller.ts
index 76079aec08a..c11c2ccf0c5 100644
--- a/src/React/Resources/assets/src/render_controller.ts
+++ b/src/React/Resources/assets/src/render_controller.ts
@@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client';
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    readonly componentValue: string;
+    readonly componentValue?: string;
     readonly propsValue?: object;
 
     static values = {
@@ -27,6 +27,10 @@ export default class extends Controller {
 
         this._dispatchEvent('react:connect', { component: this.componentValue, props: props });
 
+        if (!this.componentValue) {
+            throw new Error('No component specified.');
+        }
+
         const component = window.resolveReactComponent(this.componentValue);
         this._renderReactElement(React.createElement(component, props, null));