[Experimental] Use JSX for rendering in game debugger message

GDJS/Runtime/debugger-client/InGameDebugger.ts → GDJS/Runtime/debugger-client/InGameDebugger.tsx

@@ -123,48 +123,33 @@ namespace gdjs {
         const errorIsInJs = isErrorComingFromJavaScriptCode(
           this._uncaughtException
         );
-        this._uncaughtExceptionElement = h(
-          'div',
-          {
-            style: styles.errorContainer,
-          },
-          h(
-            'button',
-            {
-              style: styles.closeButton,
-              onClick: () => this.setUncaughtException(null),
-            },
-            '×'
-          ),
-          h(
-            'h2',
-            {
-              style: styles.errorTitle,
-            },
-            errorIsInJs
-              ? 'An error happened in a JavaScript code event.'
-              : 'A crash or error happened in the game.'
-          ),
-          h(
-            'p',
-            {
-              style: styles.errorMessage,
-            },
-            (errorIsInJs
-              ? 'This error comes from a JavaScript code event. Verify your code to ensure no error is happening. You can use the Developer Tools (menu "View" > "Toggle Developer Tools"). Full error is: '
-              : "If you're using JavaScript, verify your code. Otherwise, this might be an issue with GDevelop - consider reporting a bug. Full error is: ") +
-              this._uncaughtException.message
-          ),
-          h(
-            'pre',
-            {
-              style: styles.stacktrace,
-            },
-            this._uncaughtException.stack || '(No stracktrace).'
-          )
+        this._uncaughtExceptionElement = (
+          <div style={styles.errorContainer}>
+            <button
+              style={styles.closeButton}
+              onClick={() => this.setUncaughtException(null)}
+            >
+              ×
+            </button>
+            <h2 style={styles.errorTitle}>
+              {errorIsInJs
+                ? 'An error happened in a JavaScript code event.'
+                : 'A crash or error happened in the game.'}
+            </h2>
+            <p style={styles.errorMessage}>
+              {(errorIsInJs
+                ? 'This error comes from a JavaScript code event. Verify your code to ensure no error is happening. You can use the Developer Tools (menu "View" > "Toggle Developer Tools"). Full error is: '
+                : "If you're using JavaScript, verify your code. Otherwise, this might be an issue with GDevelop - consider reporting a bug. Full error is: ") +
+                this._uncaughtException.message}
+            </p>
+            <pre style={styles.stacktrace}>
+              {this._uncaughtException.stack || '(No stracktrace).'}
+            </pre>
+          </div>
         );
 
-        domElementContainer.appendChild(this._uncaughtExceptionElement);
+        if (this._uncaughtExceptionElement)
+          domElementContainer.appendChild(this._uncaughtExceptionElement);
       }
     }
   }

GDJS/scripts/build.js

@@ -12,7 +12,7 @@ const fs = require('fs').promises;
 
 /** @param {string} outPath */
 const renameBuiltFile = (outPath) => {
-  return outPath.replace(/\.ts$/, '.js');
+  return outPath.replace(/\.tsx?$/, '.js');
 };
 
 const bundledOutPath =

GDJS/scripts/lib/runtime-files-list.js

@@ -9,10 +9,10 @@ const extensionsRuntimePath = path.join(gdevelopRootPath, 'Extensions');
 const gdjsRuntimePath = path.join(gdjsRootPath, 'Runtime');
 
 // The extensions to be included in the bundled Runtime (will be built with esbuild or copied).
-const allowedExtensions = ['.js', '.ts', '.html', '.json', '.xml', '.map', '.wasm'];
+const allowedExtensions = ['.js', '.ts', '.tsx', '.html', '.json', '.xml', '.map', '.wasm'];
 
 // These extensions will be built with esbuild (the other will be copied).
-const transformIncludedExtensions = ['.js', '.ts'];
+const transformIncludedExtensions = ['.js', '.ts', '.tsx'];
 
 // Among the files matching the previous extensions, these extensions won't be built with esbuild
 // (they will be copied).

tsconfig.json

@@ -23,7 +23,11 @@
     },
     "baseUrl": "./",
     "lib": ["DOM", "ES5", "ScriptHost", "ES2015.Iterable", "ES2015.Promise"],
-    "typeRoots": ["GDJS/node_modules/@types/"]
+    "typeRoots": ["GDJS/node_modules/@types/"],
+    // JSX syntax for lightweight rendering in the game engine:
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
   },
   "include": [
     "GDJS/Runtime/**/*",