diff --git a/.changeset/red-seahorses-smoke.md b/.changeset/red-seahorses-smoke.md new file mode 100644 index 000000000000..497207cc841f --- /dev/null +++ b/.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. diff --git a/fixtures/dev-env/tests/tsconfig.json b/fixtures/dev-env/tests/tsconfig.json index c35cdd8fea52..f7f26173c278 100644 --- a/fixtures/dev-env/tests/tsconfig.json +++ b/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", diff --git a/packages/create-cloudflare/templates/common/ts/tsconfig.json b/packages/create-cloudflare/templates/common/ts/tsconfig.json index 2cb9189a162d..fdaac7bdcf9b 100644 --- a/packages/create-cloudflare/templates/common/ts/tsconfig.json +++ b/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' */ diff --git a/packages/create-cloudflare/templates/hello-world-durable-object/ts/tsconfig.json b/packages/create-cloudflare/templates/hello-world-durable-object/ts/tsconfig.json index 2cb9189a162d..fdaac7bdcf9b 100644 --- a/packages/create-cloudflare/templates/hello-world-durable-object/ts/tsconfig.json +++ b/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' */ diff --git a/packages/create-cloudflare/templates/hello-world/ts/tsconfig.json b/packages/create-cloudflare/templates/hello-world/ts/tsconfig.json index 0bc84d7fa416..25f37d0f7327 100644 --- a/packages/create-cloudflare/templates/hello-world/ts/tsconfig.json +++ b/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' */ diff --git a/packages/create-cloudflare/templates/queues/ts/tsconfig.json b/packages/create-cloudflare/templates/queues/ts/tsconfig.json index 2cb9189a162d..fdaac7bdcf9b 100644 --- a/packages/create-cloudflare/templates/queues/ts/tsconfig.json +++ b/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' */ diff --git a/packages/create-cloudflare/templates/scheduled/ts/tsconfig.json b/packages/create-cloudflare/templates/scheduled/ts/tsconfig.json index 2cb9189a162d..fdaac7bdcf9b 100644 --- a/packages/create-cloudflare/templates/scheduled/ts/tsconfig.json +++ b/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' */ diff --git a/packages/eslint-config-worker/react.js b/packages/eslint-config-worker/react.js index 2acee5afddbc..739393aacf40 100644 --- a/packages/eslint-config-worker/react.js +++ b/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: { diff --git a/packages/format-errors/tsconfig.json b/packages/format-errors/tsconfig.json index 33968c4a9430..ce711d73f06e 100644 --- a/packages/format-errors/tsconfig.json +++ b/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. */, diff --git a/packages/workers-playground/.eslintrc.cjs b/packages/workers-playground/.eslintrc.cjs new file mode 100644 index 000000000000..5a79a4c322f4 --- /dev/null +++ b/packages/workers-playground/.eslintrc.cjs @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["@cloudflare/eslint-config-worker/react"], +}; diff --git a/packages/workers-playground/src/QuickEditor/DevtoolsIframe.tsx b/packages/workers-playground/src/QuickEditor/DevtoolsIframe.tsx index fa2ac32baa6d..b08f1e2e83a6 100644 --- a/packages/workers-playground/src/QuickEditor/DevtoolsIframe.tsx +++ b/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`); diff --git a/packages/workers-playground/src/QuickEditor/HTTPTab/HTTPTab.tsx b/packages/workers-playground/src/QuickEditor/HTTPTab/HTTPTab.tsx index df2a4506b14f..64c60a90d030 100644 --- a/packages/workers-playground/src/QuickEditor/HTTPTab/HTTPTab.tsx +++ b/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{" "}