[React] Fix window types

fracsi · Nov 21, 2022 · 9b43394 · 9b43394
1 parent 843f1dd
commit 9b43394
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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));