run eslint (with react config) on workers-playground/wrangler (#6080)

This enables eslint (with our react config) for the workers-playground project. Additionally, this enables the react-jsx condition in relevant tsconfig/eslint config, letting us write jsx without having React in scope.

.changeset/red-seahorses-smoke.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+chore: run eslint (with react config) on workers-playground/wrangler
+
+This enables eslint (with our react config) for the workers-playground project. Additionally, this enables the react-jsx condition in relevant tsconfig/eslint config, letting us write jsx without having React in scope.

fixtures/dev-env/tests/tsconfig.json

@@ -2,7 +2,7 @@
 	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
 	"compilerOptions": {
 		"types": ["node"],
-		"jsx": "react"
+		"jsx": "react-jsx"
 	},
 	"include": [
 		"**/*.ts",

packages/create-cloudflare/templates/common/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */

packages/create-cloudflare/templates/hello-world-durable-object/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */

packages/create-cloudflare/templates/hello-world/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */

packages/create-cloudflare/templates/queues/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */

packages/create-cloudflare/templates/scheduled/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */

packages/eslint-config-worker/react.js

@@ -4,8 +4,12 @@ module.exports = {
 	plugins: ["eslint-plugin-react", "eslint-plugin-react-hooks"],
 	overrides: [
 		{
-			files: ["*.ts", "*.tsx"],
-			extends: ["plugin:react/recommended", "plugin:react-hooks/recommended"],
+			files: ["**/*.ts", "**/*.tsx"],
+			extends: [
+				"plugin:react/recommended",
+				"plugin:react/jsx-runtime",
+				"plugin:react-hooks/recommended",
+			],
 		},
 	],
 	settings: {

packages/format-errors/tsconfig.json

@@ -5,7 +5,7 @@
 		"lib": [
 			"es2022"
 		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 
 		/* Modules */
 		"module": "es2022" /* Specify what module code is generated. */,

packages/workers-playground/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+	root: true,
+	extends: ["@cloudflare/eslint-config-worker/react"],
+};

packages/workers-playground/src/QuickEditor/DevtoolsIframe.tsx

@@ -1,8 +1,9 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import Frame from "./Frame";
 import FrameErrorBoundary from "./FrameErrorBoundary";
 import { ServiceContext } from "./QuickEditor";
 import { DragContext } from "./SplitPane";
+import type React from "react";
 
 function getDevtoolsIframeUrl(inspectorUrl: string) {
 	const url = new URL(`https://devtools.devprod.cloudflare.dev/js_app`);

packages/workers-playground/src/QuickEditor/HTTPTab/HTTPTab.tsx

@@ -6,20 +6,15 @@ import { Toast } from "@cloudflare/component-toast";
 import { Div, Form, Label, Output } from "@cloudflare/elements";
 import { isDarkMode, theme } from "@cloudflare/style-const";
 import { createStyledComponent } from "@cloudflare/style-container";
-import React, {
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { FrameError } from "../FrameErrorBoundary";
 import { InputField } from "../InputField";
 import { ServiceContext } from "../QuickEditor";
-import SplitPane from "../SplitPane";
 import { fetchWorker } from "./fetchWorker";
-import RequestHeaders, { HeaderEntry } from "./RequestHeaders";
+import RequestHeaders from "./RequestHeaders";
 import ResponseView from "./ResponseView";
+import type { HeaderEntry } from "./RequestHeaders";
+import type React from "react";
 
 const HTTP_METHODS = [
 	"GET",
@@ -167,7 +162,9 @@ export function HTTPTab() {
 								Headers{" "}
 							</StyledLabel>
 							<Button
-								onClick={() => setHeaders((headers) => [...headers, ["", ""]])}
+								onClick={() =>
+									setHeaders((prevHeaders) => [...prevHeaders, ["", ""]])
+								}
 								ml="auto"
 								type="plain"
 							>
@@ -191,7 +188,7 @@ export function HTTPTab() {
 								p={2}
 								rows={5}
 								value={body}
-								onChange={(e: any) => setBody(e.target.value)}
+								onChange={(e) => setBody(e.target.value)}
 							/>
 						</Div>
 					)}
@@ -212,7 +209,7 @@ export function HTTPTab() {
 						<ResponseView response={response} loading={isLoading} />
 					) : (
 						<Toast type="info">
-							Send a request to test your Worker's response.
+							Send a request to test your Worker&apos;s response.
 						</Toast>
 					)}
 				</Output>

packages/workers-playground/src/QuickEditor/HTTPTab/RequestHeaders.tsx

@@ -1,8 +1,8 @@
 import { Button } from "@cloudflare/component-button";
 import { Icon } from "@cloudflare/component-icon";
 import { Div } from "@cloudflare/elements";
-import React from "react";
 import { InputField } from "../InputField";
+import type React from "react";
 
 export type HeaderEntry = [string, string];
 
@@ -35,7 +35,7 @@ const RequestHeaders: React.FC<Props> = ({ headers, onChange }) => {
 	return (
 		<Div mb={1} display="flex" flexDirection="column" gap={2}>
 			{headers.map((header, index) => (
-				<Div display="flex" gap={2} flexGrow={0}>
+				<Div display="flex" gap={2} flexGrow={0} key={header[0]}>
 					<InputField
 						name={`Header name ${index}`}
 						marginBottom={0}

packages/workers-playground/src/QuickEditor/HTTPTab/ResponseView.tsx

@@ -1,6 +1,7 @@
 import CodeBlock from "@cloudflare/component-code-block";
 import { Div } from "@cloudflare/elements";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import type React from "react";
 
 type Props = {
 	response: Response;
@@ -41,10 +42,14 @@ function maybeGetLanguage(
 }
 
 const ResponseView: React.FC<Props> = ({ response, loading }) => {
-	const { status, statusCode } = useMemo(() => {
-		const status = response.headers.get("cf-ew-status") || "";
-		const statusCode = window.parseInt(status, 10);
-		return { status, statusCode };
+	const { status, statusCode } = useMemo((): {
+		status: string;
+		statusCode: number;
+	} => {
+		return {
+			status: response.headers.get("cf-ew-status") || "",
+			statusCode: window.parseInt(status, 10),
+		};
 	}, [response]);
 
 	const headers = useMemo(

packages/workers-playground/src/QuickEditor/PreviewTab/PreviewTab.tsx

@@ -14,7 +14,7 @@ export function getPreviewIframeUrl(edgePreview: string, previewUrl: string) {
 	return url.href;
 }
 
-function PreviewTab() {
+function PreviewTabImplementation() {
 	const draftWorker = useContext(ServiceContext);
 
 	const previewSrc = useMemo(() => {
@@ -89,8 +89,10 @@ function PreviewTab() {
 	);
 }
 
-export default () => (
-	<FrameErrorBoundary fallback={"Invalid URL"}>
-		<PreviewTab />
-	</FrameErrorBoundary>
-);
+export default function PreviewTab() {
+	return (
+		<FrameErrorBoundary fallback={"Invalid URL"}>
+			<PreviewTabImplementation />
+		</FrameErrorBoundary>
+	);
+}

packages/workers-playground/src/QuickEditor/PreviewTab/UrlBar.tsx

@@ -1,8 +1,9 @@
 import { Button } from "@cloudflare/component-button";
 import { Div } from "@cloudflare/elements";
 import { createComponent } from "@cloudflare/style-container";
-import React, { useState } from "react";
+import { useState } from "react";
 import { InputField } from "../InputField";
+import type React from "react";
 
 const StyledForm = createComponent(
 	({ theme }) => ({

packages/workers-playground/src/QuickEditor/PreviewTab/useInjectSources.tsx

@@ -1,11 +1,7 @@
 import { useCallback } from "react";
-import {
-	Channel,
-	FromErrorPage,
-	SourcesLoadedMessage,
-	ToErrorPage,
-} from "../ipc";
-import { TypedModule } from "../useDraftWorker";
+import { Channel } from "../ipc";
+import type { FromErrorPage, SourcesLoadedMessage, ToErrorPage } from "../ipc";
+import type { TypedModule } from "../useDraftWorker";
 
 function getFilesFromModules(modules: Record<string, TypedModule>) {
 	return Object.entries(modules)

packages/workers-playground/src/QuickEditor/QuickEditor.tsx

@@ -1,5 +1,9 @@
 import { Div } from "@cloudflare/elements";
-import { isDarkMode, observeDarkMode, theme } from "@cloudflare/style-const";
+import {
+	isDarkMode,
+	observeDarkMode,
+	theme as styleTheme,
+} from "@cloudflare/style-const";
 import { createComponent } from "@cloudflare/style-container";
 import React, { createContext, useEffect, useState } from "react";
 import { BACKGROUND_GRAY } from "./constants";
@@ -92,7 +96,7 @@ export default function QuickEditor() {
 						minSize={50}
 						maxSize={-50}
 						style={{ backgroundColor: BACKGROUND_GRAY }}
-						paneStyle={{ backgroundColor: theme.colors.background }}
+						paneStyle={{ backgroundColor: styleTheme.colors.background }}
 					>
 						<EditorPane />
 						<ToolsPane />

packages/workers-playground/src/QuickEditor/SplitPane.tsx

@@ -1,8 +1,10 @@
 import { isDarkMode, theme } from "@cloudflare/style-const";
-import React, { createContext, useContext, useState } from "react";
-// @ts-expect-error Types are wrong
-import ReactSplitPane, { Props as ReactSplitPaneProps } from "react-split-pane";
+import { createContext, useContext, useState } from "react";
+import ReactSplitPane from "react-split-pane";
 import { BORDER_GRAY } from "./constants";
+import type React from "react";
+// @ts-expect-error Types are wrong
+import type { Props as ReactSplitPaneProps } from "react-split-pane";
 
 export const DragContext = createContext(false);
 

packages/workers-playground/src/QuickEditor/TabBar.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { isDarkMode, variables as theme } from "@cloudflare/style-const";
+import { isDarkMode, variables } from "@cloudflare/style-const";
 import { createComponent } from "@cloudflare/style-container";
 import {
 	Tab as ReactTab,
 	TabList as ReactTabList,
 	TabPanel as ReactTabPanel,
-	TabProps as ReactTabProps,
 	Tabs as ReactTabs,
 } from "react-tabs";
 import { BORDER_GRAY, STYLED_TAB_HEIGHT } from "./constants";
+import type { TabProps as ReactTabProps } from "react-tabs";
 
-const HIGHLIGHT_BLUE = theme.colors.blue[4];
+const HIGHLIGHT_BLUE = variables.colors.blue[4];
 
 type StyledTabProps = {
 	showHighlightBar?: boolean;
@@ -99,7 +99,9 @@ export const TabBar = createComponent(() => ({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between",
-	backgroundColor: isDarkMode() ? theme.colors.white : theme.colors.gray[9],
+	backgroundColor: isDarkMode()
+		? variables.colors.white
+		: variables.colors.gray[9],
 	flex: "none",
 }));
 
@@ -117,7 +119,9 @@ export const TabList = createComponent(
 export const TabBarContent = createComponent(() => ({
 	flex: "1 0 auto",
 	borderBottom: "none",
-	backgroundColor: isDarkMode() ? theme.colors.white : theme.colors.gray[9],
+	backgroundColor: isDarkMode()
+		? variables.colors.white
+		: variables.colors.gray[9],
 }));
 
 export const Tabs = createComponent(

packages/workers-playground/src/QuickEditor/TopBar.tsx

@@ -119,7 +119,7 @@ export function TopBar() {
 				<Button
 					type="primary"
 					inverted={true}
-					disabled={!Boolean(previewHash?.serialised)}
+					disabled={!previewHash?.serialised}
 					onClick={() => {
 						void navigator.clipboard.writeText(location.href);
 						setHasCopied(!hasCopied);
@@ -137,7 +137,7 @@ export function TopBar() {
 			>
 				<Button
 					type="primary"
-					disabled={!Boolean(previewHash?.serialised)}
+					disabled={!previewHash?.serialised}
 					tabIndex={-1}
 				>
 					Deploy

packages/workers-playground/src/QuickEditor/VSCodeEditor.tsx

@@ -3,15 +3,15 @@ import { Div } from "@cloudflare/elements";
 import { isDarkMode } from "@cloudflare/style-const";
 import { useContext, useEffect, useRef, useState } from "react";
 import Frame from "./Frame";
-import {
-	Channel,
+import { Channel } from "./ipc";
+import { DragContext } from "./SplitPane";
+import type {
 	FromQuickEditMessage,
 	ToQuickEditMessage,
 	WorkerLoadedMessage,
 	WrappedChannel,
 } from "./ipc";
-import { DragContext } from "./SplitPane";
-import { TypedModule } from "./useDraftWorker";
+import type { TypedModule } from "./useDraftWorker";
 
 function stripSlashPrefix(path: string) {
 	return path[0] === "/" ? path.slice(1) : path;
@@ -90,7 +90,7 @@ export function VSCodeEditor({ content, onChange }: Props) {
 	}, []);
 
 	useEffect(() => {
-		if (quickEdit !== null)
+		if (quickEdit !== null) {
 			quickEdit.onMessage((data) => {
 				if (!content?.name) {
 					return;
@@ -137,6 +137,7 @@ export function VSCodeEditor({ content, onChange }: Props) {
 					});
 				}
 			});
+		}
 	}, [content, onChange, quickEdit]);
 
 	useEffect(() => {

packages/workers-playground/src/QuickEditor/WorkersLogo.tsx

@@ -1,3 +1,8 @@
+// maybe the right thing to do here is to use the .svg logo directly
+// but I'm not aware why this was done in the first place, so leaving
+// the plain html attributes as is
+
+/* eslint-disable react/no-unknown-property */
 import { Div } from "@cloudflare/elements";
 import { createComponent } from "@cloudflare/style-container";