fix(quick-edit): deploy script setup (#6624)

Author: edmundhung

.changeset/bright-radios-fail.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/quick-edit": patch
+---
+
+fix: quick editor deploy script setup

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

@@ -58,11 +58,7 @@ jobs:
         if: contains(github.event.*.labels.*.name, 'preview:quick-edit')
         # Quick Edit requires yarn and VS Code build deps, so needs fairly specific logic
         run: |
-          sudo apt-get install -y libkrb5-dev
-          yarn global add node-gyp
           cd packages/quick-edit
-          yarn setup
-          yarn custom:build
           pnpm run deploy
         env:
           DEBIAN_FRONTEND: noninteractive

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

@@ -7,7 +7,6 @@ type BuildFlags = {
 
 async function buildMain(flags: BuildFlags = {}) {
 	const options: esbuild.BuildOptions = {
-		watch: flags.watch,
 		entryPoints: ["./src/extension.ts"],
 		bundle: true,
 		outfile: "./dist/extension.js",
@@ -41,15 +40,18 @@ async function buildMain(flags: BuildFlags = {}) {
 		],
 	};
 
-	await esbuild.build(options);
+	if (flags.watch) {
+		const ctx = await esbuild.context(options);
+
+		// Start watching for changes...
+		await ctx.watch();
+	} else {
+		await esbuild.build(options);
+	}
 }
 
 async function run() {
-	await buildMain();
-	if (process.argv.includes("--watch")) {
-		console.log("Built. Watching for changes...");
-		await Promise.all([buildMain({ watch: true })]);
-	}
+	await buildMain({ watch: process.argv.includes("--watch") });
 }
 
 run().catch((e) => {

packages/quick-edit/README.md

@@ -6,12 +6,12 @@ This package contains Cloudflare's fork VSCode for Web, to support web editing o
 
 1. You must switch your NodeJS version to NodeJS 18 (using a tool like nvm). VSCode's build process requires this. For instance, if you use `nvm`, running `nvm use` would be enough to switch to the correct NodeJS version.
 2. Run `pnpm install`
-3. Run `yarn setup`, which will install dependencies, clone VSCode (currently v1.85.2), apply the patches specified in `./patches`, and symlink the top level packages within `workers-sdk`.
+3. Run `pnpm run setup`, which will install dependencies, clone VSCode (currently v1.85.2), apply the patches specified in `./patches`, and symlink the top level packages within `workers-sdk`.
 4. Run `pnpm run dev`. This will start various dev servers for VSCode and `quick-edit-extension`. Note, this takes a _long_ time to start up. Expect up to 3 minutes, although reloads will be much faster. You can access the VSCode dev server at `http://localhost:8788`
 
 ## Building
 
-Follow steps (1), (2) and (3) from above, and then run `yarn custom:build`
+Follow steps (1), (2) and (3) from above, and then run `pnpm run custom:build`
 
 ## Deployment
 
@@ -26,7 +26,7 @@ Deployments are managed by Github Actions:
 
 ## Patching VSCode
 
-If you need to add additional patches to VSCode, ensure you've run `yarn setup`. Then:
+If you need to add additional patches to VSCode, ensure you've run `pnpm run setup`. Then:
 
 1. Make your changes in the checked out VSCode in `vendor/vscode`.
 2. Commit your changes with `git commit -m "YOUR MESSAGE" --no-verify` (run this in the `vendor/vscode` directory).

packages/quick-edit/build.sh

@@ -1,5 +1,11 @@
 set -eu
 
+# The preinstall script in vscode will fail if npm_execpath is not set by yarn
+# This make sure the env is unset so yarn can set it accordingly
+unset npm_execpath
+# We cannot run yarn without disabling the corepack check as the packageManager field is set to pnpm
+SKIP_YARN_COREPACK_CHECK=0
+
 # Cleanup development symlink to vscode
 rm -f web/assets
 

packages/quick-edit/package.json

@@ -13,7 +13,7 @@
 		"check:lint": "eslint functions --max-warnings=0",
 		"check:type": "tsc",
 		"custom:build": "./build.sh",
-		"deploy": "CLOUDFLARE_ACCOUNT_ID=e35fd947284363a46fd7061634477114 pnpm exec wrangler pages deploy --project-name quick-edit ./web",
+		"deploy": "pnpm run setup && pnpm run custom:build && CLOUDFLARE_ACCOUNT_ID=e35fd947284363a46fd7061634477114 pnpm exec wrangler pages deploy --project-name quick-edit ./web",
 		"dev": "concurrently 'pnpm exec wrangler pages dev ./web' 'npm --prefix web/quick-edit-extension run watch-web' 'yarn --cwd ../../vendor/vscode watch' 'yarn --cwd ../../vendor/vscode watch-web'",
 		"setup": "rm -rf web/assets web/quick-edit-extension && ./setup.sh"
 	},

packages/quick-edit/setup.sh

@@ -1,6 +1,18 @@
 set -eu
+# The preinstall script in vscode will fail if npm_execpath is not set by yarn
+# This make sure the env is unset so yarn can set it accordingly
+unset npm_execpath
+
 # The upstream VSCode version (tag) to build from
 VERSION="1.85.2"
+# We cannot run yarn without disabling the corepack check as the packageManager field is set to pnpm
+SKIP_YARN_COREPACK_CHECK=0
+
+# Setup for the CI environment
+if [ -n "${CI:-}" ]; then
+    sudo apt-get install -y libkrb5-dev
+    yarn global add node-gyp
+fi
 
 rm -rf web
 rm -rf ../../vendor/vscode
@@ -22,7 +34,7 @@ git config user.email "[email protected]"
 git config user.name "Workers DevProd"
 
 git am ../../packages/quick-edit/patches/*.patch
-pnpm exec yarn
+yarn install
 cd ../../packages/quick-edit
 pnpm exec tsx bundle-dts.ts
 ln -s $PWD/../../vendor/vscode $PWD/web/assets