[pull] main from cloudflare:main

.github/workflows/README.md

@@ -18,13 +18,21 @@ See below for a summary of this repo's Actions
   - Adds the PR to a GitHub project
   - Makes sure that Wrangler's warning for old Node.js versions works.
 
-### E2E tests (e2e.yml)
+### Wrangler E2E tests (e2e-wrangler.yml)
 
 - Triggers
   - Updates to PRs on the Cloudflare fork.
   - PRs in the merge queue.
 - Actions
-  - Runs the E2E tests for Wrangler & Vite.
+  - Runs the E2E tests for Wrangler.
+
+### Vite Plugin E2E tests (e2e-vite.yml)
+
+- Triggers
+  - Updates to PRs on the Cloudflare fork.
+  - PRs in the merge queue.
+- Actions
+  - Runs the E2E tests for the Vite plugin.
 
 ## Deploy Pages Previews (deploy-pages-preview.yml)
 

.github/workflows/bonk-pr-review.yml

@@ -35,7 +35,7 @@ jobs:
           } >> "$GITHUB_OUTPUT"
 
       - name: Run Bonk
-        uses: ask-bonk/ask-bonk/github@main
+        uses: ask-bonk/ask-bonk/github@24832587005550860c8ad13fd96519e731ca632a # main
         env:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_AI_GATEWAY_ACCOUNT_ID }}
           CLOUDFLARE_GATEWAY_ID: ${{ secrets.CF_AI_GATEWAY_NAME }}

.github/workflows/bonk.yml

@@ -27,7 +27,7 @@ jobs:
           fetch-depth: 1
 
       - name: Run Bonk
-        uses: ask-bonk/ask-bonk/github@main
+        uses: ask-bonk/ask-bonk/github@24832587005550860c8ad13fd96519e731ca632a # main
         env:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_AI_GATEWAY_ACCOUNT_ID }}
           CLOUDFLARE_GATEWAY_ID: ${{ secrets.CF_AI_GATEWAY_NAME }}

.github/workflows/e2e-vite.yml

@@ -0,0 +1,73 @@
+name: Vite Plugin E2E
+
+on:
+  merge_group:
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  e2e-vite-plugin-test:
+    name: ${{ format('Vite Plugin E2E ({0})', matrix.description) }}
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}
+      cancel-in-progress: true
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: macos-latest
+            description: macOS
+          - os: windows-latest
+            description: Windows
+          - os: ubuntu-latest
+            description: Linux
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
+        id: changes
+        with:
+          filters: |
+            everything_but_markdown:
+              - '!**/*.md'
+
+      - name: Install Dependencies
+        if: steps.changes.outputs.everything_but_markdown == 'true'
+        uses: ./.github/actions/install-dependencies
+        with:
+          turbo-api: ${{ secrets.TURBO_API }}
+          turbo-team: ${{ secrets.TURBO_TEAM }}
+          turbo-token: ${{ secrets.TURBO_TOKEN }}
+          turbo-signature: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
+
+      - name: Bump package versions
+        if: steps.changes.outputs.everything_but_markdown == 'true'
+        run: node .github/changeset-version.js
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: Run Vite plugin E2E tests
+        if: steps.changes.outputs.everything_but_markdown == 'true'
+        run: pnpm test:e2e -F @cloudflare/vite-plugin --log-order=stream
+        timeout-minutes: 20
+        env:
+          NODE_DEBUG: "vite-plugin:test"
+          # The remote-binding tests need to connect to Cloudflare
+          CLOUDFLARE_API_TOKEN: ${{ secrets.TEST_CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.TEST_CLOUDFLARE_ACCOUNT_ID }}
+          NODE_OPTIONS: "--max_old_space_size=8192"
+          CI_OS: ${{ matrix.os }}
+
+      - name: Upload turbo logs
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: turbo-runs-${{ matrix.os }}
+          path: .turbo/runs

.github/workflows/e2e.yml → .github/workflows/e2e-wrangler.yml

@@ -1,4 +1,4 @@
-name: E2E
+name: Wrangler E2E
 
 on:
   merge_group:
@@ -11,7 +11,7 @@ jobs:
   e2e-wrangler-test:
     name: ${{ format('Wrangler E2E ({0})', matrix.description) }}
     concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}-wrangler
+      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}
       cancel-in-progress: true
     timeout-minutes: 60
     strategy:
@@ -82,67 +82,3 @@ jobs:
         with:
           name: turbo-runs-${{ matrix.os }}
           path: .turbo/runs
-
-  e2e-vite-plugin-test:
-    name: ${{ format('Vite Plugin E2E ({0})', matrix.description) }}
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}-vite
-      cancel-in-progress: true
-    timeout-minutes: 60
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - os: macos-latest
-            description: macOS
-          - os: windows-latest
-            description: Windows
-          - os: ubuntu-latest
-            description: Linux
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
-        id: changes
-        with:
-          filters: |
-            everything_but_markdown:
-              - '!**/*.md'
-
-      - name: Install Dependencies
-        if: steps.changes.outputs.everything_but_markdown == 'true'
-        uses: ./.github/actions/install-dependencies
-        with:
-          turbo-api: ${{ secrets.TURBO_API }}
-          turbo-team: ${{ secrets.TURBO_TEAM }}
-          turbo-token: ${{ secrets.TURBO_TOKEN }}
-          turbo-signature: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
-
-      - name: Bump package versions
-        if: steps.changes.outputs.everything_but_markdown == 'true'
-        run: node .github/changeset-version.js
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-
-      - name: Run Vite plugin E2E tests
-        if: steps.changes.outputs.everything_but_markdown == 'true'
-        run: pnpm test:e2e -F @cloudflare/vite-plugin --log-order=stream
-        timeout-minutes: 20
-        env:
-          NODE_DEBUG: "vite-plugin:test"
-          # The remote-binding tests need to connect to Cloudflare
-          CLOUDFLARE_API_TOKEN: ${{ secrets.TEST_CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.TEST_CLOUDFLARE_ACCOUNT_ID }}
-          NODE_OPTIONS: "--max_old_space_size=8192"
-          CI_OS: ${{ matrix.os }}
-
-      - name: Upload turbo logs
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: turbo-runs-${{ matrix.os }}
-          path: .turbo/runs

.prettierrc

@@ -6,7 +6,8 @@
 	"trailingComma": "es5",
 	"plugins": [
 		"@ianvs/prettier-plugin-sort-imports",
-		"prettier-plugin-packagejson"
+		"prettier-plugin-packagejson",
+		"prettier-plugin-tailwindcss"
 	],
 	"overrides": [
 		{
@@ -53,6 +54,13 @@
 			"options": {
 				"proseWrap": "never"
 			}
+		},
+		{
+			"files": "packages/local-explorer-ui/**/*.{js,jsx,ts,tsx}",
+			"options": {
+				"tailwindStylesheet": "./packages/local-explorer-ui/src/styles/tailwind.css",
+				"tailwindFunctions": ["cn"]
+			}
 		}
 	]
 }

package.json

@@ -11,14 +11,15 @@
 	"author": "wrangler@cloudflare.com",
 	"scripts": {
 		"build": "dotenv -- turbo build",
-		"check": "pnpm check:fixtures && pnpm check:private-packages && pnpm check:package-deps && pnpm check:deployments && node lint-turbo.mjs && dotenv -- turbo check:lint check:type check:format type:tests",
+		"check": "pnpm check:fixtures && pnpm check:private-packages && pnpm check:package-deps && pnpm check:deployments && pnpm check:workflows && node lint-turbo.mjs && dotenv -- turbo check:lint check:type check:format type:tests",
 		"check:deployments": "node -r esbuild-register tools/deployments/deploy-non-npm-packages.ts check",
 		"check:fixtures": "node -r esbuild-register tools/deployments/validate-fixtures.ts",
 		"check:format": "prettier . --check --ignore-unknown --cache",
 		"check:lint": "dotenv -- turbo check:lint",
 		"check:package-deps": "node -r esbuild-register tools/deployments/validate-package-dependencies.ts",
 		"check:private-packages": "node -r esbuild-register tools/deployments/validate-private-packages.ts",
 		"check:type": "dotenv -- turbo check:type type:tests",
+		"check:workflows": "node -r esbuild-register tools/github-workflow-helpers/validate-action-pinning.ts",
 		"dev": "dotenv -- turbo dev",
 		"fix": "dotenv -- turbo check:lint -- --fix && pnpm run prettify",
 		"prettify": "prettier . --write --ignore-unknown --cache",
@@ -45,6 +46,7 @@
 		"jsonc-parser": "catalog:default",
 		"prettier": "^3.2.5",
 		"prettier-plugin-packagejson": "^2.2.18",
+		"prettier-plugin-tailwindcss": "^0.7.2",
 		"tree-kill": "^1.2.2",
 		"turbo": "^2.7.2",
 		"typescript": "catalog:default",

packages/local-explorer-ui/eslint.config.mjs

@@ -1,9 +1,22 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import sharedConfig from "@cloudflare/eslint-config-shared/react";
+import tailwind from "eslint-plugin-tailwindcss";
 import { defineConfig } from "eslint/config";
 
 export default defineConfig([
 	{
 		ignores: ["src/api/generated/**", "src/routeTree.gen.ts"],
 	},
 	sharedConfig,
+	...tailwind.configs["flat/recommended"],
+	{
+		settings: {
+			tailwindcss: {
+				callees: ["cn"],
+				config:
+					dirname(fileURLToPath(import.meta.url)) + "/src/styles/tailwind.css",
+			},
+		},
+	},
 ]);

packages/local-explorer-ui/package.json

@@ -51,6 +51,7 @@
 		"@types/react-dom": "^19.2.0",
 		"@vitejs/plugin-react": "^4.4.1",
 		"concurrently": "^9.0.0",
+		"eslint-plugin-tailwindcss": "^4.0.0-beta.0",
 		"typescript": "catalog:default",
 		"vite": "catalog:default",
 		"vite-plugin-svgr": "^4.3.0",

packages/local-explorer-ui/src/components/AddKVForm.tsx

@@ -54,17 +54,17 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 
 	return (
 		<form
-			className="flex flex-col lg:flex-row gap-2 mb-4 items-start"
+			className="mb-4 flex flex-col items-start gap-2 lg:flex-row"
 			onSubmit={handleSubmit}
 		>
-			<div className="flex flex-col w-full lg:w-2xs shrink-0">
+			<div className="flex w-full shrink-0 flex-col lg:w-2xs">
 				<label className="sr-only" htmlFor="add-key">
 					Key
 				</label>
 				<input
 					id="add-key"
 					className={cn(
-						"w-full font-mono bg-bg text-text placeholder:text-text! py-2 px-3 text-sm border border-border rounded-md focus:outline-none focus:border-primary focus:shadow-focus-primary disabled:bg-bg-secondary disabled:text-text-secondary",
+						"w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
 						{
 							"border-danger focus:shadow-focus-danger": keyError,
 						}
@@ -75,16 +75,16 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 					disabled={saving}
 				/>
 				{keyError && (
-					<span className="text-danger text-xs mt-1">{keyError}</span>
+					<span className="mt-1 text-xs text-danger">{keyError}</span>
 				)}
 			</div>
-			<div className="flex flex-col flex-1 w-full lg:min-w-2xs">
+			<div className="flex w-full flex-1 flex-col lg:min-w-2xs">
 				<label className="sr-only" htmlFor="add-value">
 					Value
 				</label>
 				<textarea
 					id="add-value"
-					className="w-full font-mono bg-bg text-text placeholder:text-text! py-2 px-3 text-sm border border-border rounded-md focus:outline-none focus:border-primary focus:shadow-focus-primary disabled:bg-bg-secondary disabled:text-text-secondary max-h-2xs resize-none overflow-y-auto lg:[field-sizing:content]"
+					className="max-h-32 w-full resize-none overflow-y-auto rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary lg:field-sizing-content"
 					placeholder="Value"
 					value={value}
 					onChange={(e) => setValue(e.target.value)}
@@ -93,7 +93,7 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 			</div>
 			<Button
 				type="submit"
-				className="shrink-0 w-full lg:w-auto inline-flex items-center justify-center py-2 px-4 text-sm font-medium border-none rounded-md cursor-pointer transition-[background-color,color,transform] active:translate-y-px bg-primary text-white hover:bg-primary-hover focus:outline-none focus:border-primary focus:shadow-focus-primary data-[disabled]:bg-primary/50 data-[disabled]:text-white/70 data-[disabled]:cursor-not-allowed data-[disabled]:active:translate-y-0"
+				className="inline-flex w-full shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-primary px-4 py-2 text-sm font-medium text-white transition-[background-color,color,transform] hover:bg-primary-hover focus:border-primary focus:shadow-focus-primary focus:outline-none active:translate-y-px data-disabled:cursor-not-allowed data-disabled:bg-primary/50 data-disabled:text-white/70 data-disabled:active:translate-y-0 lg:w-auto"
 				disabled={saving || isKeyInvalid}
 				focusableWhenDisabled
 			>

packages/local-explorer-ui/src/components/Breadcrumbs.tsx

@@ -15,15 +15,15 @@ export function Breadcrumbs({
 	title,
 }: BreadcrumbsProps): JSX.Element {
 	return (
-		<div className="flex items-center gap-2 py-4 px-6 min-h-16.75 box-border bg-bg-secondary border-b border-border text-sm shrink-0">
+		<div className="box-border flex min-h-16.75 shrink-0 items-center gap-2 border-b border-border bg-bg-secondary px-6 py-4 text-sm">
 			<span className="flex items-center gap-1.5">
 				<Icon />
 				{title}
 			</span>
 
 			{items.map((item, index) => (
 				<Fragment key={index}>
-					<CaretRightIcon className="w-4 h-4" />
+					<CaretRightIcon className="h-4 w-4" />
 					{item}
 				</Fragment>
 			))}

packages/local-explorer-ui/src/components/CopyButton.tsx

@@ -19,9 +19,9 @@ export function CopyButton({ text }: CopyButtonProps) {
 	return (
 		<Button
 			className={cn(
-				"flex items-center justify-center w-6 h-6 p-0 border-none rounded bg-transparent text-text-secondary cursor-pointer opacity-0 transition-[opacity,background-color,color] shrink-0 hover:bg-border hover:text-text group-hover/cell:opacity-100",
+				"flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-text-secondary opacity-0 transition-[opacity,background-color,color] group-hover/cell:opacity-100 hover:bg-border hover:text-text",
 				{
-					"opacity-100 text-success": copied,
+					"text-success opacity-100": copied,
 				}
 			)}
 			onClick={handleCopy}