Skip to content

Commit be7ea8f

Browse files
committed
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.
1 parent df01808 commit be7ea8f

14 files changed

+521
-3941
lines changed

.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.tsbuildinfo
22
.cache
3-
dist*
43
/out*/
54
release/
65
release-npm-package/

CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ VS Code v0.00.0
6565
### Development
6666

6767
- fix(publish): update cdrci fork in brew-bump.sh #3468 @jsjoeio
68+
- chore(dev): migrate away from parcel #3578 @jsjoeio
6869

6970
## 3.10.2
7071

ci/build/build-code-server.sh

+3-11
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ set -euo pipefail
33

44
# Builds code-server into out and the frontend into dist.
55

6-
# MINIFY controls whether parcel minifies dist.
7-
MINIFY=${MINIFY-true}
8-
96
main() {
107
cd "$(dirname "${0}")/../.."
118

@@ -32,14 +29,9 @@ main() {
3229
set -e
3330
fi
3431

35-
parcel build \
36-
--public-url "." \
37-
--out-dir dist \
38-
$([[ $MINIFY ]] || echo --no-minify) \
39-
src/browser/register.ts \
40-
src/browser/serviceWorker.ts \
41-
src/browser/pages/login.ts \
42-
src/browser/pages/vscode.ts
32+
yarn browserify out/browser/register.js -o out/browser/register.browserified.js
33+
yarn browserify out/browser/pages/login.js -o out/browser/pages/login.browserified.js
34+
yarn browserify out/browser/pages/vscode.js -o out/browser/pages/vscode.browserified.js
4335
}
4436

4537
main "$@"

ci/build/build-release.sh

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,14 @@ main() {
2828
}
2929

3030
bundle_code_server() {
31-
rsync out dist "$RELEASE_PATH"
31+
rsync out "$RELEASE_PATH"
3232

3333
# For source maps and images.
3434
mkdir -p "$RELEASE_PATH/src/browser"
3535
rsync src/browser/media/ "$RELEASE_PATH/src/browser/media"
3636
mkdir -p "$RELEASE_PATH/src/browser/pages"
3737
rsync src/browser/pages/*.html "$RELEASE_PATH/src/browser/pages"
38+
rsync src/browser/pages/*.css "$RELEASE_PATH/src/browser/pages"
3839
rsync src/browser/robots.txt "$RELEASE_PATH/src/browser"
3940

4041
# Add typings for plugins

ci/dev/watch.ts

+27-33
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import browserify from "browserify"
12
import * as cp from "child_process"
2-
import Bundler from "parcel-bundler"
3+
import * as fs from "fs"
34
import * as path from "path"
45

56
async function main(): Promise<void> {
@@ -40,7 +41,6 @@ class Watcher {
4041
const plugin = process.env.PLUGIN_DIR
4142
? cp.spawn("yarn", ["build", "--watch"], { cwd: process.env.PLUGIN_DIR })
4243
: undefined
43-
const bundler = this.createBundler()
4444

4545
const cleanup = (code?: number | null): void => {
4646
Watcher.log("killing vs code watcher")
@@ -63,7 +63,7 @@ class Watcher {
6363
server.kill()
6464
}
6565

66-
Watcher.log("killing bundler")
66+
Watcher.log("killing watch")
6767
process.exit(code || 0)
6868
}
6969

@@ -84,23 +84,19 @@ class Watcher {
8484
cleanup(code)
8585
})
8686
}
87-
const bundle = bundler.bundle().catch(() => {
88-
Watcher.log("parcel watcher terminated unexpectedly")
89-
cleanup(1)
90-
})
91-
bundler.on("buildEnd", () => {
92-
console.log("[parcel] bundled")
93-
})
94-
bundler.on("buildError", (error) => {
95-
console.error("[parcel]", error)
96-
})
9787

9888
vscode.stderr.on("data", (d) => process.stderr.write(d))
9989
tsc.stderr.on("data", (d) => process.stderr.write(d))
10090
if (plugin) {
10191
plugin.stderr.on("data", (d) => process.stderr.write(d))
10292
}
10393

94+
const browserFiles = [
95+
path.join(this.rootPath, "out/browser/register.js"),
96+
path.join(this.rootPath, "out/browser/pages/login.js"),
97+
path.join(this.rootPath, "out/browser/pages/vscode.js"),
98+
]
99+
104100
// From https://github.com/chalk/ansi-regex
105101
const pattern = [
106102
"[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)",
@@ -143,7 +139,7 @@ class Watcher {
143139
startingVscode = true
144140
} else if (startingVscode && line.includes("Finished compilation")) {
145141
if (startedVscode) {
146-
bundle.then(restartServer)
142+
restartServer()
147143
}
148144
startedVscode = true
149145
}
@@ -155,7 +151,8 @@ class Watcher {
155151
console.log("[tsc]", original)
156152
}
157153
if (line.includes("Watching for file changes")) {
158-
bundle.then(restartServer)
154+
bundleBrowserCode(browserFiles)
155+
restartServer()
159156
}
160157
})
161158

@@ -166,29 +163,26 @@ class Watcher {
166163
console.log("[plugin]", original)
167164
}
168165
if (line.includes("Watching for file changes")) {
169-
bundle.then(restartServer)
166+
restartServer()
170167
}
171168
})
172169
}
173170
}
171+
}
174172

175-
private createBundler(out = "dist"): Bundler {
176-
return new Bundler(
177-
[
178-
path.join(this.rootPath, "src/browser/register.ts"),
179-
path.join(this.rootPath, "src/browser/serviceWorker.ts"),
180-
path.join(this.rootPath, "src/browser/pages/login.ts"),
181-
path.join(this.rootPath, "src/browser/pages/vscode.ts"),
182-
],
183-
{
184-
outDir: path.join(this.rootPath, out),
185-
cacheDir: path.join(this.rootPath, ".cache"),
186-
minify: !!process.env.MINIFY,
187-
logLevel: 1,
188-
publicUrl: ".",
189-
},
190-
)
191-
}
173+
function bundleBrowserCode(inputFiles: string[]) {
174+
console.log(`[browser] bundling...`)
175+
inputFiles.forEach(async (path: string) => {
176+
const outputPath = path.replace(".js", ".browserified.js")
177+
browserify()
178+
.add(path)
179+
.bundle()
180+
.on("error", function (error: Error) {
181+
console.error(error.toString())
182+
})
183+
.pipe(fs.createWriteStream(outputPath))
184+
})
185+
console.log(`[browser] done bundling`)
192186
}
193187

194188
main()

package.json

+3-6
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,21 @@
2929
"lint": "./ci/dev/lint.sh",
3030
"test": "echo 'Run yarn test:unit or yarn test:e2e' && exit 1",
3131
"ci": "./ci/dev/ci.sh",
32-
"watch": "VSCODE_IPC_HOOK_CLI= NODE_OPTIONS=--max_old_space_size=32384 ts-node ./ci/dev/watch.ts",
32+
"watch": "VSCODE_IPC_HOOK_CLI= NODE_OPTIONS='--max_old_space_size=32384 --trace-warnings' ts-node ./ci/dev/watch.ts",
3333
"icons": "./ci/dev/gen_icons.sh",
3434
"coverage": "codecov"
3535
},
3636
"main": "out/node/entry.js",
3737
"devDependencies": {
3838
"@schemastore/package": "^0.0.6",
3939
"@types/body-parser": "^1.19.0",
40+
"@types/browserify": "^12.0.36",
4041
"@types/compression": "^1.7.0",
4142
"@types/cookie-parser": "^1.4.2",
4243
"@types/express": "^4.17.8",
4344
"@types/http-proxy": "^1.17.4",
4445
"@types/js-yaml": "^4.0.0",
4546
"@types/node": "^14.17.1",
46-
"@types/parcel-bundler": "^1.12.1",
4747
"@types/pem": "^1.9.5",
4848
"@types/proxy-from-env": "^1.0.1",
4949
"@types/safe-compare": "^1.1.0",
@@ -56,6 +56,7 @@
5656
"@typescript-eslint/eslint-plugin": "^4.7.0",
5757
"@typescript-eslint/parser": "^4.7.0",
5858
"audit-ci": "^4.0.0",
59+
"browserify": "^17.0.0",
5960
"codecov": "^3.8.1",
6061
"doctoc": "^2.0.0",
6162
"eslint": "^7.7.0",
@@ -64,7 +65,6 @@
6465
"eslint-plugin-import": "^2.18.2",
6566
"eslint-plugin-prettier": "^3.1.0",
6667
"leaked-handles": "^5.2.0",
67-
"parcel-bundler": "^1.12.5",
6868
"prettier": "^2.2.1",
6969
"prettier-plugin-sh": "^0.7.1",
7070
"shellcheck": "^1.0.0",
@@ -79,9 +79,6 @@
7979
"doctoc/underscore": "^1.13.1",
8080
"doctoc/**/trim": "^1.0.0",
8181
"postcss": "^8.2.1",
82-
"parcel-bundler/cssnano": "^5.0.2",
83-
"parcel-bundler/ws": "^7.4.6",
84-
"parcel-bundler/htmlnano/uncss/jsdom/ws": "^7.4.6",
8582
"browserslist": "^4.16.5",
8683
"safe-buffer": "^5.1.1",
8784
"vfile-message": "^2.0.2"

src/browser/pages/error.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
<link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
1717
<link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
1818
<link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
19-
<link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
19+
<link href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" rel="stylesheet" />
20+
<link href="{{CS_STATIC_BASE}}/src/browser/pages/error.css" rel="stylesheet" />
2021
<meta id="coder-options" data-settings="{{OPTIONS}}" />
2122
</head>
2223
<body>
@@ -29,6 +30,6 @@ <h2 class="header">{{ERROR_HEADER}}</h2>
2930
</div>
3031
</div>
3132
</div>
32-
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
33+
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/out/browser/register.browserified.js"></script>
3334
</body>
3435
</html>

src/browser/pages/login.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
<link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
1717
<link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
1818
<link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
19-
<link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
19+
<link href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" rel="stylesheet" />
20+
<link href="{{CS_STATIC_BASE}}/src/browser/pages/login.css" rel="stylesheet" />
2021
<meta id="coder-options" data-settings="{{OPTIONS}}" />
2122
</head>
2223
<body>
@@ -48,6 +49,5 @@ <h1 class="main">Welcome to code-server</h1>
4849
</div>
4950
</div>
5051
</body>
51-
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
52-
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/pages/login.js"></script>
52+
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/out/browser/pages/login.browserified.js"></script>
5353
</html>

src/browser/pages/login.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { getOptions } from "../../common/util"
2+
import "../register"
23

34
const options = getOptions()
45
const el = document.getElementById("base") as HTMLInputElement

src/browser/pages/vscode.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@
3939
<body aria-label=""></body>
4040

4141
<!-- Startup (do not modify order of script tags!) -->
42-
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/pages/vscode.js"></script>
43-
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
42+
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/out/browser/pages/vscode.browserified.js"></script>
4443
<script data-cfasync="false" src="{{CS_STATIC_BASE}}/lib/vscode/out/vs/loader.js"></script>
4544
<script>
4645
performance.mark("code/willLoadWorkbenchMain")

src/browser/pages/vscode.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { getOptions } from "../../common/util"
2+
import "../register"
23

34
const options = getOptions()
45

src/browser/register.ts

-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { logger } from "@coder/logger"
22
import { getOptions, normalize, logError } from "../common/util"
33

4-
import "./pages/error.css"
5-
import "./pages/global.css"
6-
import "./pages/login.css"
7-
84
export async function registerServiceWorker(): Promise<void> {
95
const options = getOptions()
106
logger.level = options.logLevel

tsconfig.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "es2020",
44
"module": "commonjs",
55
"moduleResolution": "node",
66
"strict": true,
77
"noImplicitReturns": true,
88
"noUnusedLocals": true,
99
"forceConsistentCasingInFileNames": true,
1010
"outDir": "./out",
11-
"declaration": true,
11+
"declaration": false,
1212
"experimentalDecorators": true,
1313
"esModuleInterop": true,
1414
"allowSyntheticDefaultImports": true,

0 commit comments

Comments
 (0)