Adopt babel automatic runtime

.babelrc

 {
   "presets": [
-    ["@babel/preset-react", {
-      "pragma": "createElement"
-    }],
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "preact"
+      }
+    ],
 
     // Compile JS for browser targets set by `browserslist` key in package.json.
-    ["@babel/preset-env", {
+    [
+      "@babel/preset-env",
+      {
         "bugfixes": true
-    }]
+      }
+    ]
   ],
   "plugins": ["inject-args"],
   "ignore": ["**/vendor/*"],
   "env": {
     "development": {
       "presets": [
-        ["@babel/preset-react", {
+        [
+          "@babel/preset-react",
+          {
             "development": true,
-          "pragma": "createElement"
-        }]
+            "runtime": "automatic",
+            // Use `preact/compat/jsx-dev-runtime` which is an alias for `preact/jsx-runtime`.
+            // See https://github.com/preactjs/preact/issues/2974.
+            "importSource": "preact/compat"
+          }
+        ]
       ]
     }
   }

.eslintrc

@@ -5,6 +5,10 @@
     "no-prototype-builtins": "off",
 
     // Handled by Prettier.
-    "comma-dangle": "off"
+    "comma-dangle": "off",
+
+    // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   }
 }

frontend-shared/babel.config.json

 {
   "presets": [
     [
-      "@babel/preset-react", {
-        "pragma": "createElement"
-    }],
-    ["@babel/preset-env", {
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "preact"
+      }
+    ],
+    [
+      "@babel/preset-env",
+      {
         "bugfixes": true,
         "targets": {
           "chrome": "57",
@@ -12,15 +17,20 @@
           "safari": "10.1",
           "edge": "17"
         }
-    }]
+      }
+    ]
   ],
   "env": {
     "development": {
       "presets": [
-        ["@babel/preset-react", {
+        [
+          "@babel/preset-react",
+          {
             "development": true,
-          "pragma": "createElement"
-        }]
+            "runtime": "automatic",
+            "importSource": "preact/compat"
+          }
+        ]
       ]
     }
   }

src/tsconfig.json

@@ -3,23 +3,20 @@
     "allowJs": true,
     "checkJs": true,
     "lib": ["es2018", "dom"],
-    "jsx": "react",
-    "jsxFactory": "createElement",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "module": "commonjs",
     "noEmit": true,
     "strict": true,
     "noImplicitAny": false,
     "target": "ES2020"
   },
-  "include": [
-    "**/*.js",
-    "../frontend-shared/src/**/*.js",
-  ],
+  "include": ["**/*.js", "../frontend-shared/src/**/*.js"],
   "exclude": [
     // Tests are not checked.
     "**/test/**/*.js",
     "test-util/**/*.js",
     "karma.config.js",
-    "../frontend-shared/src/**/test/*.js",
+    "../frontend-shared/src/**/test/*.js"
   ]
 }