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.

.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.

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/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";
 

packages/workers-playground/src/QuickEditor/getPlaygroundWorker.ts

@@ -1,5 +1,5 @@
 import lzstring from "lz-string";
-import { TypedModule, Worker } from "./useDraftWorker";
+import type { TypedModule, Worker } from "./useDraftWorker";
 
 // Parse a serialised FormData representation of a (very!) simple worker
 // Importantly, this only supports a subset of worker config relevant to Playground workers

packages/workers-playground/src/QuickEditor/module-collection.ts

@@ -1,6 +1,6 @@
 // Adapted from https://github.com/cloudflare/workers-sdk/blob/0a77990457652af36c60c52bf9c38c3a69945de4/packages/wrangler/src/module-collection.ts
 import globToRegExp from "glob-to-regexp";
-import { TypedModule } from "./useDraftWorker";
+import type { TypedModule } from "./useDraftWorker";
 
 type ConfigModuleRuleType =
 	| "ESModule"

packages/workers-playground/src/QuickEditor/useDraftWorker.ts

@@ -1,11 +1,12 @@
-import { eg, TypeFromCodec } from "@cloudflare/util-en-garde";
+import { eg } from "@cloudflare/util-en-garde";
 import { useDebounce } from "@cloudflare/util-hooks";
 import lzstring from "lz-string";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import { v4 } from "uuid";
 import { getPlaygroundWorker } from "./getPlaygroundWorker";
 import { matchFiles, parseRules, toMimeType } from "./module-collection";
+import type { TypeFromCodec } from "@cloudflare/util-en-garde";
 
 const decoder = new TextDecoder();
 const encoder = new TextEncoder();
@@ -218,7 +219,9 @@ export function useDraftWorker(
 				setDevtoolsUrl(hash.devtoolsUrl);
 			} catch (e: unknown) {
 				console.error(e);
-				if (e instanceof Error) setPreviewError(String(e.message));
+				if (e instanceof Error) {
+					setPreviewError(String(e.message));
+				}
 			} finally {
 				setIsPreviewUpdating(false);
 			}
@@ -233,7 +236,7 @@ export function useDraftWorker(
 			setIsPreviewUpdating(true);
 			void updatePreview(worker).then(() => setIsPreviewUpdating(false));
 		}
-	}, [worker]);
+	}, [updatePreview, worker]);
 
 	return {
 		isLoading,

packages/workers-playground/src/main.tsx

@@ -15,7 +15,7 @@ function syncDarkModeWithSystem() {
 	const inSystemDarkMode =
 		window.matchMedia &&
 		window.matchMedia("(prefers-color-scheme: dark)").matches;
-	var classList = document.documentElement.classList;
+	const classList = document.documentElement.classList;
 	if (inSystemDarkMode) {
 		classList.add("dark-mode");
 	} else {
@@ -24,6 +24,7 @@ function syncDarkModeWithSystem() {
 }
 syncDarkModeWithSystem();
 setDarkMode(DarkModeSettings.SYSTEM);
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<StyleProvider renderer={felaRenderer}>