Refactor template string with handlebars.

- Refactor static routing, template vars.
- Fixed issue where JSON entities may be unescaped
- Updated web manifest schema, route handler.
- Clean up issues surrounding static paths, types.
- Removed static path helper.
- Fixed issue where locals may change during request handling.
- Added missing types.
- Fixed issue where body theme color is stale.
- Refactor missing tar endpoint.
- Add local route handler.

Author: GirlBossRush

ci/build/build-code-server.sh

@@ -25,13 +25,10 @@ main() {
   fi
 
   parcel build \
-    --public-url "." \
+    --public-url "/static/" \
     --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
+    "$([[ $MINIFY ]] || echo --no-minify)" \
+    src/browser/**/*.ts
 }
 
 main "$@"

ci/build/build-release.sh

@@ -38,10 +38,9 @@ bundle_code_server() {
 
   # 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/robots.txt "$RELEASE_PATH/src/browser"
+  rsync -r src/browser/public "$RELEASE_PATH/src/browser"
+  mkdir -p "$RELEASE_PATH/src/browser/views"
+  rsync -r src/browser/views "$RELEASE_PATH/src/browser"
 
   # Adds the commit to package.json
   jq --slurp '.[0] * .[1]' package.json <(

ci/dev/vscode.patch

@@ -986,17 +986,17 @@ index 0000000000000000000000000000000000000000..5dd5406befcb593ad6366d9e98f46485
 +export const IExtHostNodeProxy = createDecorator<IExtHostNodeProxy>('IExtHostNodeProxy');
 diff --git a/src/vs/server/browser/mainThreadNodeProxy.ts b/src/vs/server/browser/mainThreadNodeProxy.ts
 new file mode 100644
-index 0000000000000000000000000000000000000000..21a139288e5b8f56016491879d69d01da929decb
+index 0000000000000000000000000000000000000000..e11988d1b3263c4a2ede064c653653b038c8238c
 --- /dev/null
 +++ b/src/vs/server/browser/mainThreadNodeProxy.ts
-@@ -0,0 +1,55 @@
+@@ -0,0 +1,63 @@
 +import { VSBuffer } from 'vs/base/common/buffer';
 +import { IDisposable } from 'vs/base/common/lifecycle';
 +import { FileAccess } from 'vs/base/common/network';
 +import { URI, UriComponents } from 'vs/base/common/uri';
 +import { INodeProxyService } from 'vs/server/common/nodeProxy';
 +import { ExtHostContext, IExtHostContext, MainContext, MainThreadNodeProxyShape } from 'vs/workbench/api/common/extHost.protocol';
-+import { extHostNamedCustomer } from 'vs/workbench/api/common/extHostCustomers';
++import {extHostNamedCustomer } from 'vs/workbench/api/common/extHostCustomers';
 +
 +@extHostNamedCustomer(MainContext.MainThreadNodeProxy)
 +export class MainThreadNodeProxy implements MainThreadNodeProxyShape {
@@ -1025,14 +1025,22 @@ index 0000000000000000000000000000000000000000..21a139288e5b8f56016491879d69d01d
 +	}
 +
 +	async $fetchExtension(extensionUri: UriComponents): Promise<VSBuffer> {
++		// Use FileAccess to get the static base path.
++		const basePath = FileAccess.asBrowserUri("", require).path;
++
 +		const fetchUri = URI.from({
 +			scheme: window.location.protocol.replace(':', ''),
 +			authority: window.location.host,
-+			// Use FileAccess to get the static base path.
-+			path: FileAccess.asBrowserUri("", require).path,
-+			query: `tar=${encodeURIComponent(extensionUri.path)}`,
++			path: `${basePath}../../../extension/tar`,
++			query: `filePath=${encodeURIComponent(extensionUri.path)}`,
 +		});
-+		const response = await fetch(fetchUri.toString(true));
++
++		const response = await fetch(fetchUri.toString(true), {
++			headers: {
++				Accept: "application/x-tar, application/json;q=0.9"
++			}
++		});
++
 +		if (response.status !== 200) {
 +			throw new Error(`Failed to download extension "${module}"`);
 +		}

ci/dev/watch.ts

@@ -173,21 +173,13 @@ class Watcher {
   }
 
   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: ".",
-      },
-    )
+    return new Bundler([path.join(this.rootPath, "src/browser/**/*.ts")], {
+      outDir: path.join(this.rootPath, out),
+      cacheDir: path.join(this.rootPath, ".cache"),
+      minify: !!process.env.MINIFY,
+      logLevel: 1,
+      publicUrl: "/static/",
+    })
   }
 }
 

package.json

@@ -32,7 +32,9 @@
   "devDependencies": {
     "@types/body-parser": "^1.19.0",
     "@types/cookie-parser": "^1.4.2",
+    "@types/entities": "^1.1.1",
     "@types/express": "^4.17.8",
+    "@types/express-handlebars": "^3.1.0",
     "@types/fs-extra": "^8.0.1",
     "@types/http-proxy": "^1.17.4",
     "@types/js-yaml": "^3.12.3",
@@ -71,8 +73,10 @@
     "@coder/logger": "1.1.16",
     "body-parser": "^1.19.0",
     "cookie-parser": "^1.4.5",
+    "entities": "^2.1.0",
     "env-paths": "^2.2.0",
     "express": "^5.0.0-alpha.8",
+    "express-handlebars": "^5.2.0",
     "fs-extra": "^9.0.1",
     "http-proxy": "^1.18.0",
     "httpolyglot": "^0.1.2",

src/browser/main.ts

@@ -0,0 +1,16 @@
+import "./views/error/index.css"
+import "./views/global.css"
+import "./views/login/index.css"
+
+import { getOptions, normalize } from "../common/util"
+
+const options = getOptions()
+
+if ("serviceWorker" in navigator) {
+  const path = normalize(`${options.base}/serviceWorker.js`)
+  navigator.serviceWorker
+    .register(path, {
+      scope: (options.base ?? "") + "/",
+    })
+    .then(() => console.debug("[Code Server Service Worker] registered"))
+}

src/browser/media/manifest.json

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 self.addEventListener("install", () => {
-  console.log("[Service Worker] install")
+  console.debug("[Code Server Service Worker] install")
 })
 
 self.addEventListener("activate", (event: any) => {

src/browser/pages/login.ts

@@ -10,23 +10,23 @@
       http-equiv="Content-Security-Policy"
       content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
-    <title>{{ERROR_TITLE}} - code-server</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" type="image/x-icon" />
-    <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
-    <link rel="apple-touch-icon" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png" />
-    <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
-    <meta id="coder-options" data-settings="{{OPTIONS}}" />
+    <title>{{ERROR_TITLE}} — Code Server</title>
+    <link rel="icon" href="{{assetPath base '/static/media/favicon.ico'}}" type="image/x-icon" />
+    <link rel="manifest" href="{{assetPath base '/code-server.webmanifest'}}" crossorigin="use-credentials" />
+    <link rel="apple-touch-icon" href="{{assetPath base '/static/media/pwa-icon-384.png'}}" />
+    <link href="{{assetPath base '/static/main.css'}}" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{{json coderOptions}}}" />
   </head>
   <body>
     <div class="center-container">
       <div class="error-display">
         <h2 class="header">{{ERROR_HEADER}}</h2>
         <div class="body">{{ERROR_BODY}}</div>
         <div class="links">
-          <a class="link" href="{{BASE}}{{TO}}">go home</a>
+          <a class="link" href="{{HOME_PATH}}">Go home</a>
         </div>
       </div>
     </div>
-    <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
+    <script data-cfasync="false" src="{{assetPath base '/static/main.js'}}"></script>
   </body>
 </html>