feat(create-plugin): update configs for react jsx automatic

Author: jackw

packages/create-plugin/templates/common/.config/_eslintrc

@@ -5,7 +5,7 @@
  * https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-eslint-config
  */
 {
-  "extends": ["@grafana/eslint-config"],
+  "extends": ["@grafana/eslint-config", "plugin:react/jsx-runtime"],
   "root": true,
   "rules": {
     "react/prop-types": "off"

packages/create-plugin/templates/common/.config/jest.config.js

@@ -33,6 +33,11 @@ module.exports = {
             decorators: false,
             dynamicImport: true,
           },
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
         },
       },
     ],

packages/create-plugin/templates/common/.config/rspack/rspack.config.ts

@@ -54,6 +54,7 @@ const config = async (env): Promise<Configuration> => {
       'slate-plain-serializer',
       '@grafana/slate-react',
       'react',
+      'react/jsx-runtime',
       'react-dom',
       'react-redux',
       'redux',
@@ -120,6 +121,7 @@ const config = async (env): Promise<Configuration> => {
                   react: {
                     development: !env.production,
                     refresh: false,
+                    runtime: 'automatic',
                   },
                 },
                 target: 'es2022',

packages/create-plugin/templates/common/.config/tsconfig.json

@@ -11,7 +11,8 @@
     "rootDir": "../src",
     "baseUrl": "../src",
     "typeRoots": ["../node_modules/@types"],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
   },
   "ts-node": {
     "compilerOptions": {

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts

@@ -68,6 +68,7 @@ const config = async (env: Env): Promise<Configuration> => {
       'slate-plain-serializer',
       '@grafana/slate-react',
       'react',
+      'react/jsx-runtime',
       'react-dom',
       'react-redux',
       'redux',
@@ -133,6 +134,11 @@ const config = async (env: Env): Promise<Configuration> => {
                   decorators: false,
                   dynamicImport: true,
                 },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
               },
             },
           },