Workers Playground Shell (#3876)

.github/actions/install-dependencies/action.yml

@@ -12,15 +12,6 @@ runs:
         node-version: ${{ env.node-version }}
         cache: "pnpm"
 
-    - name: ESlint and Typescript caching
-      uses: actions/cache@v3
-      id: eslint-cache
-      with:
-        path: |
-          .eslintcache
-          tsconfig.tsbuildinfo
-        key: ${{ matrix.os }}-eslint-tsbuildinfo-${{ hashFiles('**/*.ts','**/*.js', 'package.json', 'tsconfig.json') }}
-
     - name: Install NPM Dependencies
       shell: bash
       run: pnpm install --frozen-lockfile

.github/workflows/choose-pages-projects.yml

@@ -0,0 +1,60 @@
+name: Deploy all Pages sites
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [synchronize, opened, reopened, labeled, unlabeled]
+
+# There's a fair amount of manual duplication in this file, but it's unfortunately all needed
+# In particular, GH Actions doesn't support the `matrix` context in `if` conditions, and so
+# using a matrix would make it impossible to skip a deploy at the job level
+jobs:
+  wrangler-devtools:
+    name: Wrangler DevTools
+    if: github.repository_owner == 'cloudflare' && (github.event_name != 'pull_request' || (github.event_name == 'pull_request' && contains(github.event.*.labels.*.name, 'preview:wrangler-devtools' )))
+    uses: ./.github/workflows/deploy-pages-project.yml
+    with:
+      package: "wrangler-devtools"
+    secrets:
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+
+  # Quick Edit requires yarn, so needs fairly specific logic
+  quick-edit:
+    name: Quick Edit
+    if: github.repository_owner == 'cloudflare' && (github.event_name != 'pull_request' || (github.event_name == 'pull_request' && contains(github.event.*.labels.*.name, 'preview:quick-edit' )))
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Dependencies
+        uses: ./.github/actions/install-dependencies
+        env:
+          node-version: 16.14
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Build Quick Edit
+        run: cd packages/quick-edit && yarn setup && yarn custom:build
+        env:
+          NPM_PUBLISH_TOKEN: NOT_USED # yarn will error if the env var from .npmrc can't be interpolated
+
+      - name: Publish Quick Edit
+        run: pnpm --filter quick-edit run deploy
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+
+  workers-playground:
+    name: Workers Playground
+    if: github.repository_owner == 'cloudflare' && (github.event_name != 'pull_request' || (github.event_name == 'pull_request' && contains(github.event.*.labels.*.name, 'preview:workers-playground' )))
+    uses: ./.github/workflows/deploy-pages-project.yml
+    with:
+      package: "workers-playground"
+    secrets:
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/deploy-pages-project.yml

@@ -0,0 +1,30 @@
+on:
+  workflow_call:
+    inputs:
+      package:
+        required: true
+        type: string
+    secrets:
+      CLOUDFLARE_API_TOKEN:
+        required: true
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Dependencies
+        uses: ./.github/actions/install-dependencies
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Deploy to Pages
+        run: pnpm --filter ${{ inputs.package }} run deploy
+        env:
+          CLOUDFLARE_ACCOUNT_ID: "e35fd947284363a46fd7061634477114"
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.gitignore

@@ -196,7 +196,7 @@ packages/quick-edit/web
 
 # VSCode Theme
 *.vsix
-vendor/vscode
+vendor/vscode/
 
 .wrangler/
 

.vscode/settings.json

@@ -65,5 +65,8 @@
 		"CODEOWNERS": "plaintext",
 		"*.template": "javascript",
 		"wrangler.json": "jsonc"
+	},
+	"[html]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	}
 }

fixtures/pages-simple-assets/tsconfig.json

@@ -6,6 +6,7 @@
 		"lib": ["ES2020"],
 		"types": ["@cloudflare/workers-types"],
 		"moduleResolution": "node",
-		"noEmit": true
+		"noEmit": true,
+		"skipLibCheck": true
 	}
 }

package.json

@@ -58,9 +58,24 @@
 		"node": "16.13.0"
 	},
 	"pnpm": {
+		"peerDependencyRules": {
+			"allowedVersions": {
+				"react": "18",
+				"react-dom": "18",
+				"@types/react": "18",
+				"@types/react-dom": "18"
+			}
+		},
+		"overrides": {
+			"@types/react-dom@18>@types/react": "^18",
+			"@types/react-tabs>@types/react": "^18",
+			"@types/react-transition-group>@types/react": "^18",
+			"@cloudflare/elements>@types/react": "^18"
+		},
 		"patchedDependencies": {
 			"ink@3.2.0": "patches/ink@3.2.0.patch",
-			"toucan-js@3.2.2": "patches/toucan-js@3.2.2.patch"
+			"toucan-js@3.2.2": "patches/toucan-js@3.2.2.patch",
+			"@cloudflare/component-listbox@1.10.4": "patches/@cloudflare__component-listbox@1.10.4.patch"
 		}
 	}
 }

packages/playground-preview-worker/src/inject-middleware.ts

@@ -5,6 +5,10 @@ import jsonModule from "./middleware/definitions/json.module.template";
 
 const encoder = new TextEncoder();
 
+function addExplanatoryComment(source: string): string {
+	return /*javascript*/ `// This is an internal file, which is part of the middleware system we use to display pretty error pages.\n${source}`;
+}
+
 function inflateWorker(
 	entrypoint: string,
 	middleware: string[]
@@ -51,22 +55,22 @@ function inflateWorker(
 	const modules = [
 		{
 			name: loader[0],
-			contents: encoder.encode(loader[1]),
+			contents: encoder.encode(addExplanatoryComment(loader[1])),
 			type: "application/javascript+module",
 		},
 		{
 			name: common[0],
-			contents: encoder.encode(common[1]),
+			contents: encoder.encode(addExplanatoryComment(common[1])),
 			type: "application/javascript+module",
 		},
 		{
 			name: collection[0],
-			contents: encoder.encode(collection[1]),
+			contents: encoder.encode(addExplanatoryComment(collection[1])),
 			type: "application/javascript+module",
 		},
 		...namedMiddleware.map(([path, _name, contents]) => ({
 			name: path,
-			contents: encoder.encode(contents),
+			contents: encoder.encode(addExplanatoryComment(contents)),
 			type: "application/javascript+module",
 		})),
 	];

packages/quick-edit-extension/package.json

@@ -40,6 +40,7 @@
 		"onFileSystem:cfs"
 	],
 	"devDependencies": {
+		"@cloudflare/workers-tsconfig": "workspace:^",
 		"@cloudflare/workers-types": "^4.20230404.0",
 		"esbuild": "0.16.3",
 		"esbuild-register": "^3.4.2",

packages/quick-edit-extension/scripts/bundle.ts

@@ -7,6 +7,7 @@ type BuildFlags = {
 
 async function buildMain(flags: BuildFlags = {}) {
 	const options: esbuild.BuildOptions = {
+		watch: flags.watch,
 		entryPoints: ["./src/extension.ts"],
 		bundle: true,
 		outfile: "./dist/extension.js",
@@ -39,12 +40,8 @@ async function buildMain(flags: BuildFlags = {}) {
 			},
 		],
 	};
-	if (flags.watch) {
-		const ctx = await esbuild.context(options);
-		await ctx.watch();
-	} else {
-		await esbuild.build(options);
-	}
+
+	await esbuild.build(options);
 }
 
 async function run() {

packages/quick-edit-extension/scripts/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
+	"extends": "@cloudflare/workers-tsconfig",
 	"compilerOptions": {
 		"module": "CommonJS",
 		"types": ["node"]

packages/quick-edit-extension/src/cfs.ts

@@ -125,7 +125,7 @@ export class CFS
 		"checkJs": true,
 		"allowJs": true,
 		"types": [],
-		"lib": ["ES2020"]
+		"lib": ["ES2022"]
 	}
 }
 	`.trim()

packages/quick-edit-extension/src/extension.ts

@@ -36,6 +36,7 @@ export function activate(context: vscode.ExtensionContext) {
 			if (data.type === "WorkerLoaded") {
 				console.log("WorkerLoaded", data.body);
 				await cfs.seed(data.body);
+
 				void vscode.commands.executeCommand(
 					"vscode.open",
 					vscode.Uri.parse(`cfs:/${data.body.name}/${data.body.entrypoint}`),

packages/quick-edit/build.sh

@@ -13,4 +13,4 @@ mv ../../vendor/vscode-web web/assets
 mv web/assets/node_modules web/assets/modules
 
 # Build quick-edit-extension
-npm --prefix web/quick-edit-extension run package-web
+pnpm --filter quick-edit-extension run package-web

packages/quick-edit/bundle-dts.ts

@@ -0,0 +1,34 @@
+import { readFileSync, writeFileSync } from "node:fs";
+
+function readDtsFile(reference) {
+	return readFileSync(
+		`../../vendor/vscode/extensions/node_modules/typescript/lib/lib.${reference}.d.ts`,
+		"utf8"
+	);
+}
+
+function writeDtsFile(reference, content) {
+	return writeFileSync(
+		`../../vendor/vscode/extensions/node_modules/typescript/lib/lib.${reference}.d.ts`,
+		content
+	);
+}
+
+const importRegex = /\/\/\/ <reference lib="(.+?)" \/>/g;
+
+function replaceReferences(dts) {
+	return dts.replaceAll(importRegex, (_, ref) => {
+		const innerDts = readDtsFile(ref);
+		console.log("Including", ref, `(${innerDts.split("\n").length} lines)`);
+		return innerDts;
+	});
+}
+
+function inlineDts(dts) {
+	if (!importRegex.test(dts)) {
+		return dts;
+	}
+	return inlineDts(replaceReferences(dts));
+}
+
+writeDtsFile("es2022", inlineDts(readDtsFile("es2022")));

packages/quick-edit/package.json

@@ -12,15 +12,16 @@
 	"scripts": {
 		"custom:build": "./build.sh",
 		"dev": "concurrently '../../vendor/vscode/scripts/code-web.sh --extensionDevelopmentPath ../../packages/quick-edit/web/quick-edit-extension' 'npm --prefix web/quick-edit-extension run watch-web' 'yarn --cwd ../../vendor/vscode watch' 'yarn --cwd ../../vendor/vscode watch-web'",
-		"publish": "CLOUDFLARE_ACCOUNT_ID=e35fd947284363a46fd7061634477114 npx wrangler pages deploy --project-name quick-edit ./web",
-		"setup": "rm -rf web/assets web/quick-edit-extension && ./setup.sh"
+		"setup": "rm -rf web/assets web/quick-edit-extension && ./setup.sh",
+		"deploy": "CLOUDFLARE_ACCOUNT_ID=e35fd947284363a46fd7061634477114 pnpm exec wrangler pages deploy --project-name quick-edit ./web"
 	},
 	"dependencies": {
 		"yarn": "^1.22.19"
 	},
 	"devDependencies": {
 		"@cloudflare/workers-tsconfig": "workspace:*",
 		"concurrently": "^8.0.1",
+		"tsx": "^3.12.8",
 		"wrangler": "workspace:*"
 	},
 	"engines": {

packages/quick-edit/setup.sh

@@ -10,8 +10,8 @@ ln -s $PWD/quick-edit-extension $PWD/quick-edit/web/quick-edit-extension
 ln -s $PWD/solarflare-theme $PWD/quick-edit/web/solarflare-theme
 
 cd quick-edit-extension
-npx vscode-dts dev 1.76.0
-npx vscode-dts 1.76.0
+pnpm dlx vscode-dts dev $VERSION
+pnpm dlx vscode-dts $VERSION
 
 cd ../quick-edit
 git clone --depth 1 --branch "$VERSION" https://github.com/microsoft/vscode ../../vendor/vscode
@@ -23,5 +23,6 @@ git config user.email "workers-devprod@cloudflare.com"
 git config user.name "Workers DevProd"
 
 git am ../../packages/quick-edit/patches/*.patch
-yarn
+pnpm exec yarn
 cd ../../packages/quick-edit
+pnpm exec tsx bundle-dts.ts

packages/workers-playground/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?