Do a pre-release of the VS code extension for merges to main. (#3957)

VS Code extension can do
[pre-releases](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#prerelease-extensions).
This would make it easier to test unreleased version of the extension
(thanks @ds300 [for the
suggestion](https://github.com/tldraw/tldraw/pull/3905#pullrequestreview-2122897351))

Tried the pre-release option manually, to see how it works:


https://github.com/tldraw/tldraw/assets/2523721/880fe0a2-3f29-405b-9862-b30594cf5334

There's a drawback in that we need to update version even for
pre-releases as they do not support other versioning schemes atm. I
decided to go with patch versions for pre-releases and minor versions
for regular releases. Feels like a better UX than having a really high
patch number due to bumping it on every PR.

> We only support major.minor.patch for extension versions, semver
pre-release tags are not supported. So, if you publish a
major.minor.patch-tag release to the Marketplace, it will be treated as
major.minor.patch, and the tag will be ignored. Versions must be
different between pre-release and regular releases. That is, if 1.2.3 is
uploaded as a pre-release, the next regular release must be uploaded
with a distinct version, such as 1.2.4. Full semver support will be
available in the future.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [x] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [x] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Release a pre-release when we merge changes to main.

.github/workflows/publish-vscode-extension.yml

@@ -3,6 +3,7 @@ name: Publish VS Code Extension
 on:
   push:
     branches:
+      - main
       - production
 
 env:
@@ -38,3 +39,4 @@ jobs:
         run: yarn tsx ./scripts/publish-vscode-extension.ts
         env:
           VSCE_PAT: ${{ secrets.VSCE_PAT }}
+          TLDRAW_ENV: ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') }}

apps/vscode/extension/package.json

@@ -125,7 +125,7 @@
 		"build": "cd ../editor && yarn build && cd ../extension && tsx scripts/build.ts",
 		"get-info": "vsce show tldraw-org.tldraw-vscode --json > extension.json",
 		"package": "yarn build && tsx scripts/package.ts",
-		"publish": "vsce publish",
+		"publish": "tsx scripts/publish.ts",
 		"lint": "yarn run -T tsx ../../../scripts/lint.ts",
 		"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf editor && rm -rf temp & yarn"
 	},

apps/vscode/extension/scripts/package.ts

@@ -16,9 +16,10 @@ async function main() {
 
 	fs.mkdirSync('./temp')
 
+	const preRelease = process.argv.includes('--pre-release')
 	try {
 		exec(
-			`cp -r ../editor/dist editor; vsce package; mv ${pkg.name}-${pkg.version}.vsix ${'./temp'}`,
+			`cp -r ../editor/dist editor; vsce package${preRelease ? ' --pre-release' : ''}; mv ${pkg.name}-${pkg.version}.vsix ${'./temp'}`,
 			(error, stdout, stderr) => {
 				if (error) {
 					throw new Error(error.message)

apps/vscode/extension/scripts/publish.ts

@@ -0,0 +1,10 @@
+import { exec } from 'child_process'
+
+async function main() {
+	const preRelease = process.argv.includes('--pre-release')
+	// eslint-disable-next-line no-console
+	console.log(`Publishing extension${preRelease ? ' (pre-release)' : ''}`)
+	exec(`vsce publish${preRelease ? ' --pre-release' : ''}`)
+}
+
+main()

scripts/publish-vscode-extension.ts

@@ -1,11 +1,12 @@
 import { existsSync, readFileSync, writeFileSync } from 'fs'
 import path from 'path'
+import { parse } from 'semver'
 import { exec } from './lib/exec'
 import { makeEnv } from './lib/makeEnv'
+import { nicelog } from './lib/nicelog'
 
 // VSCE_PAT needs to be set. It is used by the vsce publish command.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const env = makeEnv(['VSCE_PAT', 'TLDRAW_ENV'])
-const env = makeEnv(['VSCE_PAT'])
 
 const EXTENSION_DIR = 'apps/vscode/extension'
 
@@ -19,9 +20,13 @@ async function updateExtensionVersion() {
 	if (!version) {
 		throw new Error('Could not get the version of the published extension.')
 	}
-	const versionSplit = version.split('.')
+	const semVer = parse(version)
-	versionSplit[2] = Number(versionSplit[2]) + 1
+	if (!semVer) {
-	const nextVersion = versionSplit.join('.')
+		throw new Error('Could not parse the published version.')
+	}
+	const release = env.TLDRAW_ENV === 'production' ? 'minor' : 'patch'
+	const nextVersion = semVer.inc(release).version
+	nicelog(`Updating extension version from ${version} to ${nextVersion}`)
 
 	const packageJsonPath = path.join(EXTENSION_DIR, 'package.json')
 	if (!existsSync(packageJsonPath)) {
@@ -35,8 +40,18 @@ async function updateExtensionVersion() {
 
 async function packageAndPublish() {
 	await exec('yarn', ['lazy', 'run', 'build', '--filter=packages/*'])
-	await exec('yarn', ['package'], { pwd: EXTENSION_DIR })
+	switch (env.TLDRAW_ENV) {
-	await exec('yarn', ['publish'], { pwd: EXTENSION_DIR })
+		case 'production':
+			await exec('yarn', ['package'], { pwd: EXTENSION_DIR })
+			await exec('yarn', ['publish'], { pwd: EXTENSION_DIR })
+			return
+		case 'staging':
+			await exec('yarn', ['package', '--pre-release'], { pwd: EXTENSION_DIR })
+			await exec('yarn', ['publish', '--pre-release'], { pwd: EXTENSION_DIR })
+			return
+		default:
+			throw new Error('Workflow triggered from a branch other than main or production.')
+	}
 }
 
 async function main() {