From be7ea8f3f76230c76bb3ea6d5c8f4bdc407a32ea Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Wed, 23 Jun 2021 10:19:50 -0700 Subject: [PATCH] refactor: migrate parcel to browserify This also refactors a couple CSS stylesheets to be referenced directly in the HTML files. And it removes any CSS imports from src/browser files. --- .gitignore | 1 - CHANGELOG.md | 1 + ci/build/build-code-server.sh | 14 +- ci/build/build-release.sh | 3 +- ci/dev/watch.ts | 60 +- package.json | 9 +- src/browser/pages/error.html | 5 +- src/browser/pages/login.html | 6 +- src/browser/pages/login.ts | 1 + src/browser/pages/vscode.html | 3 +- src/browser/pages/vscode.ts | 1 + src/browser/register.ts | 4 - tsconfig.json | 4 +- yarn.lock | 4338 ++++----------------------------- 14 files changed, 515 insertions(+), 3935 deletions(-) diff --git a/.gitignore b/.gitignore index 96e946346..8ac564103 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,5 @@ .tsbuildinfo .cache -dist* /out*/ release/ release-npm-package/ diff --git a/CHANGELOG.md b/CHANGELOG.md index f63d3d4c6..2b7ba2851 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -65,6 +65,7 @@ VS Code v0.00.0 ### Development - fix(publish): update cdrci fork in brew-bump.sh #3468 @jsjoeio +- chore(dev): migrate away from parcel #3578 @jsjoeio ## 3.10.2 diff --git a/ci/build/build-code-server.sh b/ci/build/build-code-server.sh index c465f7e4a..c17725393 100755 --- a/ci/build/build-code-server.sh +++ b/ci/build/build-code-server.sh @@ -3,9 +3,6 @@ set -euo pipefail # Builds code-server into out and the frontend into dist. -# MINIFY controls whether parcel minifies dist. -MINIFY=${MINIFY-true} - main() { cd "$(dirname "${0}")/../.." @@ -32,14 +29,9 @@ main() { set -e fi - parcel build \ - --public-url "." \ - --out-dir dist \ - $([[ $MINIFY ]] || echo --no-minify) \ - src/browser/register.ts \ - src/browser/serviceWorker.ts \ - src/browser/pages/login.ts \ - src/browser/pages/vscode.ts + yarn browserify out/browser/register.js -o out/browser/register.browserified.js + yarn browserify out/browser/pages/login.js -o out/browser/pages/login.browserified.js + yarn browserify out/browser/pages/vscode.js -o out/browser/pages/vscode.browserified.js } main "$@" diff --git a/ci/build/build-release.sh b/ci/build/build-release.sh index 3c1308500..ce8a3eaf4 100755 --- a/ci/build/build-release.sh +++ b/ci/build/build-release.sh @@ -28,13 +28,14 @@ main() { } bundle_code_server() { - rsync out dist "$RELEASE_PATH" + rsync out "$RELEASE_PATH" # For source maps and images. mkdir -p "$RELEASE_PATH/src/browser" rsync src/browser/media/ "$RELEASE_PATH/src/browser/media" mkdir -p "$RELEASE_PATH/src/browser/pages" rsync src/browser/pages/*.html "$RELEASE_PATH/src/browser/pages" + rsync src/browser/pages/*.css "$RELEASE_PATH/src/browser/pages" rsync src/browser/robots.txt "$RELEASE_PATH/src/browser" # Add typings for plugins diff --git a/ci/dev/watch.ts b/ci/dev/watch.ts index 646da328b..714a12f7e 100644 --- a/ci/dev/watch.ts +++ b/ci/dev/watch.ts @@ -1,5 +1,6 @@ +import browserify from "browserify" import * as cp from "child_process" -import Bundler from "parcel-bundler" +import * as fs from "fs" import * as path from "path" async function main(): Promise { @@ -40,7 +41,6 @@ class Watcher { const plugin = process.env.PLUGIN_DIR ? cp.spawn("yarn", ["build", "--watch"], { cwd: process.env.PLUGIN_DIR }) : undefined - const bundler = this.createBundler() const cleanup = (code?: number | null): void => { Watcher.log("killing vs code watcher") @@ -63,7 +63,7 @@ class Watcher { server.kill() } - Watcher.log("killing bundler") + Watcher.log("killing watch") process.exit(code || 0) } @@ -84,16 +84,6 @@ class Watcher { cleanup(code) }) } - const bundle = bundler.bundle().catch(() => { - Watcher.log("parcel watcher terminated unexpectedly") - cleanup(1) - }) - bundler.on("buildEnd", () => { - console.log("[parcel] bundled") - }) - bundler.on("buildError", (error) => { - console.error("[parcel]", error) - }) vscode.stderr.on("data", (d) => process.stderr.write(d)) tsc.stderr.on("data", (d) => process.stderr.write(d)) @@ -101,6 +91,12 @@ class Watcher { plugin.stderr.on("data", (d) => process.stderr.write(d)) } + const browserFiles = [ + path.join(this.rootPath, "out/browser/register.js"), + path.join(this.rootPath, "out/browser/pages/login.js"), + path.join(this.rootPath, "out/browser/pages/vscode.js"), + ] + // From https://github.com/chalk/ansi-regex const pattern = [ "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)", @@ -143,7 +139,7 @@ class Watcher { startingVscode = true } else if (startingVscode && line.includes("Finished compilation")) { if (startedVscode) { - bundle.then(restartServer) + restartServer() } startedVscode = true } @@ -155,7 +151,8 @@ class Watcher { console.log("[tsc]", original) } if (line.includes("Watching for file changes")) { - bundle.then(restartServer) + bundleBrowserCode(browserFiles) + restartServer() } }) @@ -166,29 +163,26 @@ class Watcher { console.log("[plugin]", original) } if (line.includes("Watching for file changes")) { - bundle.then(restartServer) + restartServer() } }) } } +} - private createBundler(out = "dist"): Bundler { - return new Bundler( - [ - path.join(this.rootPath, "src/browser/register.ts"), - path.join(this.rootPath, "src/browser/serviceWorker.ts"), - path.join(this.rootPath, "src/browser/pages/login.ts"), - path.join(this.rootPath, "src/browser/pages/vscode.ts"), - ], - { - outDir: path.join(this.rootPath, out), - cacheDir: path.join(this.rootPath, ".cache"), - minify: !!process.env.MINIFY, - logLevel: 1, - publicUrl: ".", - }, - ) - } +function bundleBrowserCode(inputFiles: string[]) { + console.log(`[browser] bundling...`) + inputFiles.forEach(async (path: string) => { + const outputPath = path.replace(".js", ".browserified.js") + browserify() + .add(path) + .bundle() + .on("error", function (error: Error) { + console.error(error.toString()) + }) + .pipe(fs.createWriteStream(outputPath)) + }) + console.log(`[browser] done bundling`) } main() diff --git a/package.json b/package.json index 4f41f49a5..b72ee1a02 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "lint": "./ci/dev/lint.sh", "test": "echo 'Run yarn test:unit or yarn test:e2e' && exit 1", "ci": "./ci/dev/ci.sh", - "watch": "VSCODE_IPC_HOOK_CLI= NODE_OPTIONS=--max_old_space_size=32384 ts-node ./ci/dev/watch.ts", + "watch": "VSCODE_IPC_HOOK_CLI= NODE_OPTIONS='--max_old_space_size=32384 --trace-warnings' ts-node ./ci/dev/watch.ts", "icons": "./ci/dev/gen_icons.sh", "coverage": "codecov" }, @@ -37,13 +37,13 @@ "devDependencies": { "@schemastore/package": "^0.0.6", "@types/body-parser": "^1.19.0", + "@types/browserify": "^12.0.36", "@types/compression": "^1.7.0", "@types/cookie-parser": "^1.4.2", "@types/express": "^4.17.8", "@types/http-proxy": "^1.17.4", "@types/js-yaml": "^4.0.0", "@types/node": "^14.17.1", - "@types/parcel-bundler": "^1.12.1", "@types/pem": "^1.9.5", "@types/proxy-from-env": "^1.0.1", "@types/safe-compare": "^1.1.0", @@ -56,6 +56,7 @@ "@typescript-eslint/eslint-plugin": "^4.7.0", "@typescript-eslint/parser": "^4.7.0", "audit-ci": "^4.0.0", + "browserify": "^17.0.0", "codecov": "^3.8.1", "doctoc": "^2.0.0", "eslint": "^7.7.0", @@ -64,7 +65,6 @@ "eslint-plugin-import": "^2.18.2", "eslint-plugin-prettier": "^3.1.0", "leaked-handles": "^5.2.0", - "parcel-bundler": "^1.12.5", "prettier": "^2.2.1", "prettier-plugin-sh": "^0.7.1", "shellcheck": "^1.0.0", @@ -79,9 +79,6 @@ "doctoc/underscore": "^1.13.1", "doctoc/**/trim": "^1.0.0", "postcss": "^8.2.1", - "parcel-bundler/cssnano": "^5.0.2", - "parcel-bundler/ws": "^7.4.6", - "parcel-bundler/htmlnano/uncss/jsdom/ws": "^7.4.6", "browserslist": "^4.16.5", "safe-buffer": "^5.1.1", "vfile-message": "^2.0.2" diff --git a/src/browser/pages/error.html b/src/browser/pages/error.html index 73a9599bd..56e03e27a 100644 --- a/src/browser/pages/error.html +++ b/src/browser/pages/error.html @@ -16,7 +16,8 @@ - + + @@ -29,6 +30,6 @@ - + diff --git a/src/browser/pages/login.html b/src/browser/pages/login.html index ef3f16a40..896927e38 100644 --- a/src/browser/pages/login.html +++ b/src/browser/pages/login.html @@ -16,7 +16,8 @@ - + + @@ -48,6 +49,5 @@ - - + diff --git a/src/browser/pages/login.ts b/src/browser/pages/login.ts index c7fc92d4a..cd3fd0d16 100644 --- a/src/browser/pages/login.ts +++ b/src/browser/pages/login.ts @@ -1,4 +1,5 @@ import { getOptions } from "../../common/util" +import "../register" const options = getOptions() const el = document.getElementById("base") as HTMLInputElement diff --git a/src/browser/pages/vscode.html b/src/browser/pages/vscode.html index 48a346994..aaae0f691 100644 --- a/src/browser/pages/vscode.html +++ b/src/browser/pages/vscode.html @@ -39,8 +39,7 @@ - - +