chore: Introduce esbuild for project build

.eslintrc.cjs

@@ -2,14 +2,21 @@ module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint", "prettier"],
+  extends:  "plugin:react/recommended",
+  settings: {
+    "react": {
+      "version": "detect"
+    }
+  },
   overrides: [
     {
       files: ["*.ts", "*.tsx"],
       extends: ["@guardian/eslint-config-typescript"],
       rules: {
         "@typescript-eslint/unbound-method": 0,
         "@typescript-eslint/explicit-module-boundary-types": 0,
-        "@typescript-eslint/no-unused-vars": 2
+        "@typescript-eslint/no-unused-vars": 2,
+        "react/display-name": 0
       },
     },
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/prosemirror-elements",
-  "version": "0.1.0",
+  "version": "2.6.0",
   "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -67,16 +67,18 @@
     "@typescript-eslint/parser": "^4.22.1",
     "cypress": "^7.7.0",
     "cypress-webpack-preprocessor-v5": "^5.0.0-alpha.1",
+    "esbuild-loader": "^2.18.0",
     "eslint": "~7.25.0",
     "eslint-config-prettier": "~8.3.0",
     "eslint-plugin-eslint-comments": "~3.2.0",
     "eslint-plugin-import": "~2.22.1",
     "eslint-plugin-prettier": "~3.4.0",
+    "eslint-plugin-react": "^7.29.2",
+    "fork-ts-checker-webpack-plugin": "^7.2.1",
     "jest": "^26.6.3",
     "prettier": "~2.2.1",
     "prosemirror-test-builder": "^1.0.5",
     "ts-jest": "^26.5.6",
-    "ts-loader": "^8.0.17",
     "typescript": "^4.2.4",
     "wait-on": "^5.3.0",
     "webpack": "^5.24.4",

src/editorial-source-components/CustomCheckbox.tsx

@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import { Checkbox, CheckboxGroup } from "@guardian/src-checkbox";
 import { space } from "@guardian/src-foundations";
+import React from "react";
 import { labelStyles } from "./Label";
 
 // These styles allow us to style the div elements in the Source Checkbox Component.

src/editorial-source-components/FieldWrapper.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ValidationError } from "../plugin/elementSpec";
 import type { FieldView as TFieldView } from "../plugin/fieldViews/FieldView";
 import type { Field } from "../plugin/types/Element";

src/editorial-source-components/InputHeading.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { space } from "@guardian/src-foundations";
+import React from "react";
 import { Description } from "./Description";
 import { Error } from "./Error";
 import { Label } from "./Label";

src/editorial-source-components/SvgBin.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const SvgBin = () => {
   return (
     <svg

src/editorial-source-components/SvgCrop.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const SvgCrop = () => {
   return (
     <svg

src/editorial-source-components/SvgHighlightAlt.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const SvgHighlightAlt = () => {
   return (
     <svg

src/elements/embed/embedComponents/EmbedRecommendations.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider } from "@emotion/react";
 import { buttonBrandAlt } from "@guardian/src-button";
 import { debounce } from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Button } from "../../../editorial-source-components/Button";
 import { parseHtml } from "../../helpers/html";
 import { conversionMessage, message } from "../../helpers/messagingStyles";

src/elements/helpers/Preview.tsx

@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Description } from "../../editorial-source-components/Description";
 import type { InputHeadingProps } from "../../editorial-source-components/InputHeading";
 import { InputHeading } from "../../editorial-source-components/InputHeading";

src/elements/helpers/ThirdPartyStatusChecks.tsx

@@ -1,6 +1,6 @@
 import { SvgAlertTriangle, SvgTickRound } from "@guardian/src-icons";
 import debounce from "lodash/debounce";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { unescapeHtml } from "./html";
 import {
   message,
@@ -39,7 +39,7 @@ const TrackingChecker = (props: StatusProps) => {
       future.
       <br />
       Worried? Email{" "}
-      <a target="_blank" href={centralProduction}>
+      <a target="_blank" rel="noreferrer" href={centralProduction}>
         Central Production
       </a>
       .
@@ -64,7 +64,7 @@ const UnsupportedPlatforms = (props: PlatformProps) => {
         <SvgAlertTriangle />
         This element will not be available on all platforms.
         <br />
-        Making it required will mean this article won't be published to:
+        Making it required will mean this article won&apos;t be published to:
         <span> {unsupportedPlatforms.join(", ")}</span>
         <br />
         Please contact the <a href={audience}>Audience Team</a> for more

src/elements/image/ImageElement.tsx

@@ -1,5 +1,6 @@
 import type { Schema } from "prosemirror-model";
 import type { Plugin } from "prosemirror-state";
+import React from "react";
 import {
   createCustomDropdownField,
   createCustomField,

src/elements/image/ImageElementForm.tsx

@@ -117,6 +117,7 @@ export const ImageElementForm: React.FunctionComponent<Props> = ({
                       <a
                         href="https://docs.google.com/document/d/1oW542iCRyKfI4DS22QU7AH0TQRWLYMm7bTlhJlX5_Ng/edit?usp=sharing"
                         target="_blank"
+                        rel="noreferrer"
                       >
                         Find out more
                       </a>

src/elements/rich-link/RichlinkForm.tsx

@@ -40,7 +40,7 @@ export const RichlinkElementForm: React.FunctionComponent<Props> = ({
   <FieldLayoutVertical>
     <div>
       Related:{" "}
-      <a target="_blank" href={fieldValues.url}>
+      <a target="_blank" rel="noreferrer" href={fieldValues.url}>
         {fieldValues.linkText}
       </a>
     </div>

src/renderers/react/FieldView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { Editor } from "../../editorial-source-components/Editor";
 import type { FieldView as TFieldView } from "../../plugin/fieldViews/FieldView";
 import type { Field } from "../../plugin/types/Element";

src/renderers/react/__tests__/store.spec.tsx

@@ -1,4 +1,5 @@
 import { act, render, screen } from "@testing-library/react";
+import React from "react";
 import { createStore } from "../store";
 
 describe("createStore", () => {

src/renderers/react/customFieldViewComponents/CustomCheckboxView.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { CustomCheckbox } from "../../../editorial-source-components/CustomCheckbox";
 import type { ValidationError } from "../../../plugin/elementSpec";
 import type { CustomField } from "../../../plugin/types/Element";

src/renderers/react/customFieldViewComponents/CustomDropdownView.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { CustomDropdown } from "../../../editorial-source-components/CustomDropdown";
 import type { ValidationError } from "../../../plugin/elementSpec";
 import type { Options } from "../../../plugin/fieldViews/DropdownFieldView";

tsconfig-esm.json

@@ -8,7 +8,7 @@
     "sourceMap": true,
     "declaration": true,
     "strict": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "jsxImportSource": "@emotion/react",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,

webpack.config.js

@@ -1,4 +1,5 @@
 import path from "path";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
 
 const moduleURL = new URL(import.meta.url);
 export const dirName = path.dirname(moduleURL.pathname);
@@ -7,12 +8,17 @@ export default {
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
+        test: /\.(ts|tsx)?$/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'tsx',
+          target: 'es2015'
+        },
+        exclude: /node_modules/
       },
     ],
   },
+  plugins: [new ForkTsCheckerPlugin()],
   resolve: {
     extensions: [".tsx", ".ts", ".js"],
   },