diff --git a/GDJS/Runtime/debugger-client/InGameDebugger.ts b/GDJS/Runtime/debugger-client/InGameDebugger.tsx similarity index 71% rename from GDJS/Runtime/debugger-client/InGameDebugger.ts rename to GDJS/Runtime/debugger-client/InGameDebugger.tsx index 3a8f524383b6..0fcafe49aa89 100644 --- a/GDJS/Runtime/debugger-client/InGameDebugger.ts +++ b/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 = ( +
+ +

+ {errorIsInJs + ? 'An error happened in a JavaScript code event.' + : 'A crash or error happened in the game.'} +

+

+ {(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} +

+
+              {this._uncaughtException.stack || '(No stracktrace).'}
+            
+
); - domElementContainer.appendChild(this._uncaughtExceptionElement); + if (this._uncaughtExceptionElement) + domElementContainer.appendChild(this._uncaughtExceptionElement); } } } diff --git a/GDJS/scripts/build.js b/GDJS/scripts/build.js index 9f151f861500..f4647189d660 100644 --- a/GDJS/scripts/build.js +++ b/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 = diff --git a/GDJS/scripts/lib/runtime-files-list.js b/GDJS/scripts/lib/runtime-files-list.js index e763de2872c4..505d9ac96132 100644 --- a/GDJS/scripts/lib/runtime-files-list.js +++ b/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). diff --git a/tsconfig.json b/tsconfig.json index 15647e42da0e..7cde8344830d 100644 --- a/tsconfig.json +++ b/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/**/*",