fix(admin): load app custom with jsx and allow more extensions

examples/getstarted/jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "moduleResolution": "nodenext",
     "target": "ES2021",
     "checkJs": true,

examples/getstarted/src/admin/app.js

@@ -1,8 +1,18 @@
+import React from 'react';
+import { Button } from '@strapi/design-system';
+
 const config = {
   locales: ['it', 'es', 'en'],
 };
-const bootstrap = () => {
+const bootstrap = (app) => {
   console.log('I AM  BOOTSTRAPPED');
+
+  app.injectContentManagerComponent('editView', 'right-links', {
+    name: 'PreviewButton',
+    Component: () => (
+      <Button onClick={() => window.alert('Not here, The preview is.')}>Preview</Button>
+    ),
+  });
 };
 
 export default {

packages/core/admin/_internal/node/core/files.ts

@@ -18,7 +18,11 @@ const pathExists = async (path: string) => {
  */
 const loadFile = async (path: string): Promise<undefined | any> => {
   if (await pathExists(path)) {
-    const esbuildOptions = { extensions: ['.js', '.mjs', '.ts'] };
+    const esbuildOptions: Parameters<typeof register>[0] = {
+      extensions: ['.js', '.mjs', '.ts', '.jsx', '.tsx'],
+      jsx: 'automatic',
+      loader: 'jsx',
+    };
 
     const { unregister } = register(esbuildOptions);
 

packages/core/admin/_internal/node/staticFiles.ts

@@ -24,7 +24,7 @@ const getEntryModule = (ctx: BuildContext): string => {
          */
         ${pluginsImport}
         import { renderAdmin } from "@strapi/strapi/admin"
-        
+
         ${
           ctx.customisations?.path
             ? `import customisations from '${path.relative(
@@ -33,7 +33,7 @@ const getEntryModule = (ctx: BuildContext): string => {
               )}'`
             : ''
         }
-        
+
         renderAdmin(
           document.getElementById("strapi"),
           {