refactor: upgrade to parcel v2

Author: jsjoeio

.gitignore

@@ -1,6 +1,5 @@
 .tsbuildinfo
 .cache
-dist*
 /out*/
 release/
 release-npm-package/
@@ -18,3 +17,4 @@ coverage
 **/.DS_Store
 # Failed e2e test videos are saved here
 test/test-results
+/.parcel-cache

CHANGELOG.md

@@ -64,6 +64,7 @@ VS Code v0.00.0
 ### Development
 
 - fix(publish): update cdrci fork in brew-bump.sh #3468 @jsjoeio
+- chore(dev): upgrade to parcel v2 #3578 @jsjoeio
 
 ## 3.10.2
 

ci/build/build-code-server.sh

@@ -7,6 +7,8 @@ set -euo pipefail
 MINIFY=${MINIFY-true}
 
 main() {
+  local opts=()
+  [[ $MINIFY ]] && opts+=("-p" "tinyfy")
   cd "$(dirname "${0}")/../.."
 
   tsc
@@ -32,14 +34,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 "${opts[@]}" src/browser/register.ts -o out/browser/register.browserified.js
+  yarn browserify "${opts[@]}" src/browser/pages/login.ts -o out/browser/pages/login.browserified.js
+  yarn browserify "${opts[@]}" src/browser/pages/vscode.ts -o out/browser/pages/vscode.browserified.js
 }
 
 main "$@"

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

ci/dev/watch.ts

@@ -1,6 +1,7 @@
 import * as cp from "child_process"
-import Bundler from "parcel-bundler"
 import * as path from "path"
+import * as fs from "fs"
+import browserify from "browserify"
 
 async function main(): Promise<void> {
   try {
@@ -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,23 +84,19 @@ 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))
     if (plugin) {
       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()

package.json

@@ -29,21 +29,21 @@
     "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"
   },
   "main": "out/node/entry.js",
   "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,12 +65,12 @@
     "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.6.0",
     "shellcheck": "^1.0.0",
     "stylelint": "^13.0.0",
     "stylelint-config-recommended": "^5.0.0",
+    "tinyify": "^3.0.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.1.3",
     "wtfnode": "^0.9.0"
@@ -79,9 +80,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"

src/browser/pages/error.html

@@ -16,7 +16,8 @@
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
     <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
-    <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
+    <link href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" rel="stylesheet" />
+    <link href="{{CS_STATIC_BASE}}/src/browser/pages/error.css" rel="stylesheet" />
     <meta id="coder-options" data-settings="{{OPTIONS}}" />
   </head>
   <body>
@@ -29,6 +30,6 @@ <h2 class="header">{{ERROR_HEADER}}</h2>
         </div>
       </div>
     </div>
-    <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
+    <script data-cfasync="false" src="{{CS_STATIC_BASE}}/out/browser/register.browserified.js"></script>
   </body>
 </html>

src/browser/pages/login.html

@@ -16,7 +16,8 @@
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
     <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
-    <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
+    <link href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" rel="stylesheet" />
+    <link href="{{CS_STATIC_BASE}}/src/browser/pages/login.css" rel="stylesheet" />
     <meta id="coder-options" data-settings="{{OPTIONS}}" />
   </head>
   <body>
@@ -48,6 +49,6 @@ <h1 class="main">Welcome to code-server</h1>
       </div>
     </div>
   </body>
-  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
-  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/pages/login.js"></script>
+  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/out/browser/pages/login.browserified.js"></script>
+``
 </html>

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

src/browser/pages/vscode.html

@@ -39,8 +39,7 @@
   <body aria-label=""></body>
 
   <!-- Startup (do not modify order of script tags!) -->
-  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/pages/vscode.js"></script>
-  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
+  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/out/browser/pages/vscode.browserified.js"></script>
   <script data-cfasync="false" src="{{CS_STATIC_BASE}}/lib/vscode/out/vs/loader.js"></script>
   <script>
     performance.mark("code/willLoadWorkbenchMain")

src/browser/pages/vscode.ts

@@ -1,4 +1,5 @@
 import { getOptions } from "../../common/util"
+import "../register"
 
 const options = getOptions()
 
@@ -30,8 +31,8 @@ try {
   /* Probably fine. */
 }
 
-;(self.require as any) = {
-  // Without the full URL VS Code will try to load file://.
+;(self as any).require = {
+  // Without the full URL VS Code will try to load file://.w
   baseUrl: `${window.location.origin}${options.csStaticBase}/lib/vscode/out`,
   recordStats: true,
   paths: {

src/browser/register.ts

@@ -1,10 +1,6 @@
 import { logger } from "@coder/logger"
 import { getOptions, normalize, logError } from "../common/util"
 
-import "./pages/error.css"
-import "./pages/global.css"
-import "./pages/login.css"
-
 export async function registerServiceWorker(): Promise<void> {
   const options = getOptions()
   logger.level = options.logLevel

test/browser/pages/login.test.ts

@@ -0,0 +1,73 @@
+import { JSDOM } from "jsdom"
+import { LocationLike } from "../../unit/util.test"
+
+describe("login", () => {
+  // TODO test for when el is defined
+  describe("there is an element with id 'base'", () => {
+    // let initialDom: Document
+    beforeEach(() => {
+      const dom = new JSDOM()
+      // initialDom = dom.window.document
+      global.document = dom.window.document
+
+      const location: LocationLike = {
+        pathname: "/healthz",
+        origin: "http://localhost:8080",
+      }
+
+      global.location = location as Location
+    })
+    afterEach(() => {
+      // Reset the global.document
+      global.document = undefined as any as Document
+      global.location = undefined as any as Location
+    })
+    it("should set the value to options.base", () => {
+      // Mock getElementById
+      const spy = jest.spyOn(document, "getElementById")
+      // Create a fake element and set the attribute
+      const mockElement = document.createElement("input")
+      mockElement.setAttribute("id", "base")
+      mockElement.setAttribute(
+        "data-settings",
+        '{"base":"./hello-world","csStaticBase":"./static/development/Users/jp/Dev/code-server","logLevel":2,"disableTelemetry":false,"disableUpdateCheck":false}',
+      )
+      document.body.appendChild(mockElement)
+      spy.mockImplementation(() => mockElement)
+      // Load file
+      require("../../../src/browser/pages/login")
+      // Called once by getOptions and the second in
+
+      const el: HTMLInputElement | null = document.querySelector("input#base")
+      expect(el?.value).toBe("/hello-world")
+    })
+  })
+
+  describe("there is no element with id 'base'", () => {
+    let initialDom: Document
+    beforeEach(() => {
+      const dom = new JSDOM()
+      initialDom = dom.window.document
+      global.document = dom.window.document
+
+      const location: LocationLike = {
+        pathname: "/healthz",
+        origin: "http://localhost:8080",
+      }
+
+      global.location = location as Location
+    })
+    afterEach(() => {
+      // Reset the global.document
+      global.document = undefined as any as Document
+      global.location = undefined as any as Location
+    })
+
+    it("should not change the DOM", () => {
+      // Load file
+      require("../../../src/browser/pages/login")
+      const currentDom = global.document
+      expect(initialDom).toBe(currentDom)
+    })
+  })
+})