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.

Author: GirlBossRush

src/browser/pages/vscode.ts

@@ -1,56 +1,100 @@
+import { InternalNLSConfiguration } from "../../../lib/vscode/src/vs/base/node/languagePacks"
 import { getOptions } from "../../common/util"
 
+export type Bundles = {
+  // TODO: Clarify this type.
+  [name: string]: unknown[]
+}
+
+export type BundleCallback = (err: unknown | undefined, messages?: unknown[]) => void | PromiseLike<void>
+
+export interface CodeServerNlsConfiguration extends InternalNLSConfiguration {
+  loadBundle: (name: string, language: string, cb: BundleCallback) => void
+}
+
+export interface CodeServerAmdLoaderConfigurationOptions extends AMDLoader.IConfigurationOptions {
+  "vs/nls": CodeServerNlsConfiguration
+}
+
 const options = getOptions()
 
-// TODO: Add proper types.
-/* eslint-disable @typescript-eslint/no-explicit-any */
+const parseNLSConfig = (): CodeServerNlsConfiguration => {
+  return JSON.parse(document.getElementById("vscode-remote-nls-configuration")!.getAttribute("data-settings")!)
+}
+
+const syncTheme = () => {
+  // First attempt to parse localStorage.
+  try {
+    document.body.style.background = JSON.parse(localStorage.getItem("colorThemeData")!).colorMap["editor.background"]
+  } catch (error) {
+    // Oh well.
+  }
+
+  // Then, observe the meta theme element for changes.
+  const themeElement = document.getElementById("monaco-workbench-meta-theme-color") as HTMLMetaElement
+
+  const synchronizeTheme = () => {
+    document.body.style.background = themeElement.content
+  }
+
+  const themeElementObserver = new MutationObserver(synchronizeTheme)
+  themeElementObserver.observe(themeElement, { attributes: true })
+
+  synchronizeTheme()
+}
+
+const initializeCodeServerEditor = () => {
+  syncTheme()
+
+  const nlsConfig = parseNLSConfig()
 
-let nlsConfig: any
-try {
-  nlsConfig = JSON.parse(document.getElementById("vscode-remote-nls-configuration")!.getAttribute("data-settings")!)
   if (nlsConfig._resolvedLanguagePackCoreLocation) {
-    const bundles = Object.create(null)
-    nlsConfig.loadBundle = (bundle: any, _language: any, cb: any): void => {
+    const bundles: Bundles = Object.create(null)
+
+    nlsConfig.loadBundle = async (bundle, _, cb) => {
       const result = bundles[bundle]
+
       if (result) {
         return cb(undefined, result)
       }
+
       // FIXME: Only works if path separators are /.
       const path = nlsConfig._resolvedLanguagePackCoreLocation + "/" + bundle.replace(/\//g, "!") + ".nls.json"
-      fetch(`${options.base}/vscode/resource/?path=${encodeURIComponent(path)}`)
-        .then((response) => response.json())
-        .then((json) => {
-          bundles[bundle] = json
-          cb(undefined, json)
-        })
-        .catch(cb)
+
+      let body: unknown[]
+      try {
+        const response = await fetch(`${options.base}/vscode/resource/?path=${encodeURIComponent(path)}`)
+        body = await response.json()
+      } catch (error) {
+        cb(error)
+        return
+      }
+
+      bundles[bundle] = body
+      cb(undefined, body)
     }
   }
-} catch (error) {
-  /* Probably fine. */
-}
 
-;(self.require as any) = {
-  // Without the full URL VS Code will try to load file://.
-  baseUrl: `${window.location.origin}${options.csStaticBase}/lib/vscode/out`,
-  recordStats: true,
-  paths: {
-    "vscode-textmate": `../node_modules/vscode-textmate/release/main`,
-    "vscode-oniguruma": `../node_modules/vscode-oniguruma/release/main`,
-    xterm: `../node_modules/xterm/lib/xterm.js`,
-    "xterm-addon-search": `../node_modules/xterm-addon-search/lib/xterm-addon-search.js`,
-    "xterm-addon-unicode11": `../node_modules/xterm-addon-unicode11/lib/xterm-addon-unicode11.js`,
-    "xterm-addon-webgl": `../node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js`,
-    "semver-umd": `../node_modules/semver-umd/lib/semver-umd.js`,
-    "tas-client-umd": `../node_modules/tas-client-umd/lib/tas-client-umd.js`,
-    "iconv-lite-umd": `../node_modules/iconv-lite-umd/lib/iconv-lite-umd.js`,
-    jschardet: `../node_modules/jschardet/dist/jschardet.min.js`,
-  },
-  "vs/nls": nlsConfig,
-}
+  const amdLoaderConfig: CodeServerAmdLoaderConfigurationOptions = {
+    // Without the full URL VS Code will try to load file://.
+    baseUrl: `${window.location.origin}${options.base}/static/lib/vscode/out`,
+    recordStats: true,
+    paths: {
+      "vscode-textmate": `../node_modules/vscode-textmate/release/main`,
+      "vscode-oniguruma": `../node_modules/vscode-oniguruma/release/main`,
+      xterm: `../node_modules/xterm/lib/xterm.js`,
+      "xterm-addon-search": `../node_modules/xterm-addon-search/lib/xterm-addon-search.js`,
+      "xterm-addon-unicode11": `../node_modules/xterm-addon-unicode11/lib/xterm-addon-unicode11.js`,
+      "xterm-addon-webgl": `../node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js`,
+      "semver-umd": `../node_modules/semver-umd/lib/semver-umd.js`,
+      "tas-client-umd": `../node_modules/tas-client-umd/lib/tas-client-umd.js`,
+      "iconv-lite-umd": `../node_modules/iconv-lite-umd/lib/iconv-lite-umd.js`,
+      jschardet: `../node_modules/jschardet/dist/jschardet.min.js`,
+    },
+    "vs/nls": nlsConfig,
+  }
 
-try {
-  document.body.style.background = JSON.parse(localStorage.getItem("colorThemeData")!).colorMap["editor.background"]
-} catch (error) {
-  // Oh well.
+  ;(self.require as any) = amdLoaderConfig
 }
+
+initializeCodeServerEditor()

src/browser/views/error.handlebars

@@ -11,10 +11,10 @@
       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="{{assetPath csStaticBase '/media/favicon.ico'}}" type="image/x-icon" />
+    <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 csStaticBase '/media/pwa-icon-384.png'}}" />
-    <link href="{{assetPath csStaticBase '/register.css'}}" rel="stylesheet" />
+    <link rel="apple-touch-icon" href="{{assetPath base '/static/media/pwa-icon-384.png'}}" />
+    <link href="{{assetPath base '/static/register.css'}}" rel="stylesheet" />
     <meta id="coder-options" data-settings="{{{json coderOptions}}}" />
   </head>
   <body>

src/browser/views/login.handlebars

@@ -12,9 +12,9 @@
     />
     <title>Login — Code Server</title>
 
-    <link rel="icon" href="{{assetPath csStaticBase '/media/favicon.ico'}}" type="image/x-icon" />
+    <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 csStaticBase '/src/browser/media/pwa-icon-384.png'}}" />
+    <link rel="apple-touch-icon" href="{{assetPath base '/static/src/browser/media/pwa-icon-384.png'}}" />
     <link href="{{assetPath base '/register.css'}}" rel="stylesheet" />
     <meta id="coder-options" data-settings="{{{json coderOptions}}}" />
   </head>

src/browser/views/vscode.handlebars

@@ -18,26 +18,26 @@
 
     <!-- Workbench Configuration -->
     <meta id="vscode-workbench-web-configuration" data-settings="{{{json workbenchOptions.workbenchWebConfiguration}}}" />
-
+    <meta id="monaco-workbench-meta-theme-color" name="theme-color" content="" />
     <!-- Workarounds/Hacks (remote user data uri) -->
     <meta id="vscode-remote-user-data-uri" data-settings="{{{json workbenchOptions.remoteUserDataUri}}}" />
     <meta id="vscode-remote-product-configuration" data-settings="{{{json workbenchOptions.productConfiguration}}}" />
     <meta id="vscode-remote-nls-configuration" data-settings="{{{json workbenchOptions.nlsConfiguration}}}" />
 
     <!-- Workbench Icon/Manifest/CSS -->
-    <link rel="icon" href="{{assetPath csStaticBase '/src/browser/media/favicon.ico'}}" type="image/x-icon" />
+    <link rel="icon" href="{{assetPath base '/static/media/favicon.ico'}}" type="image/x-icon" />
     <link rel="manifest" href="./code-server.webmanifest" crossorigin="use-credentials" />
 
     {{#if (prod)}}
-      <link data-name="vs/workbench/workbench.web.api" rel="stylesheet" href="{{assetPath csStaticBase '/lib/vscode/out/vs/workbench/workbench.web.api.css'}}">
+      <link data-name="vs/workbench/workbench.web.api" rel="stylesheet" href="{{assetPath base '/static/lib/vscode/out/vs/workbench/workbench.web.api.css'}}">
     {{/if}}
 
-    <link rel="apple-touch-icon" href="{{assetPath csStaticBase '/src/browser/media/pwa-icon-384.png'}}" />
+    <link rel="apple-touch-icon" href="{{assetPath base '/static/src/browser/media/pwa-icon-384.png'}}" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
 
     <!-- Prefetch to avoid waterfall -->
     {{#if (prod)}}
-      <link rel="prefetch" href="{{assetPath csStaticBase '/lib/vscode/node_modules/semver-umd/lib/semver-umd.js'}}">
+      <link rel="prefetch" href="{{assetPath base '/static/lib/vscode/node_modules/semver-umd/lib/semver-umd.js'}}">
     {{/if}}
 
     <meta id="coder-options" data-settings="{{{json coderOptions}}}" />

src/common/util.ts

@@ -2,7 +2,6 @@ import { logger, field } from "@coder/logger"
 
 export interface Options {
   base: string
-  csStaticBase: string
   logLevel: number
 }
 
@@ -82,7 +81,6 @@ export const getOptions = <T extends Options>(): T => {
   logger.level = options.logLevel
 
   options.base = resolveBase(options.base)
-  options.csStaticBase = resolveBase(options.csStaticBase)
 
   logger.debug("got options", field("options", options))
 

src/node/http.ts

@@ -21,13 +21,11 @@ export interface CommonTemplateVars extends Options {
 
 export const commonTemplateVars = <T extends Options>(
   req: express.Request,
-  extraOpts?: Omit<T, "base" | "csStaticBase" | "logLevel">,
+  extraOpts?: Omit<T, "base" | "logLevel">,
 ): CommonTemplateVars => {
   const base = relativeRoot(req)
-  const csStaticBase = base + "/static/"
   const coderOptions: Options = {
     base,
-    csStaticBase,
     logLevel: logger.level,
     ...extraOpts,
   }
@@ -38,16 +36,6 @@ export const commonTemplateVars = <T extends Options>(
   }
 }
 
-/**
- * Injects variables into template scope.
- */
-export const templateMiddleware = (locals: express.Application["locals"]): express.RequestHandler => {
-  return (req, _, next) => {
-    Object.assign(locals, commonTemplateVars(req))
-    next()
-  }
-}
-
 /**
  * Throw an error if not authorized.
  */

src/node/routes/index.ts

@@ -11,7 +11,7 @@ import { plural } from "../../common/util"
 import { AuthType, DefaultedArgs } from "../cli"
 import { rootPath } from "../constants"
 import { Heart } from "../heart"
-import { templateMiddleware } from "../http"
+import { commonTemplateVars } from "../http"
 import { loadPlugins } from "../plugin"
 import * as domainProxy from "../proxy"
 import { getMediaMime, paths } from "../util"
@@ -55,7 +55,6 @@ export const register = async (app: Express, server: http.Server, args: Defaulte
   app.use(cookieParser())
   app.use(bodyParser.json())
   app.use(bodyParser.urlencoded({ extended: true }))
-  app.use(templateMiddleware(app.locals))
 
   server.on("upgrade", () => {
     heart.beat()
@@ -85,10 +84,10 @@ export const register = async (app: Express, server: http.Server, args: Defaulte
     return next()
   })
 
-  app.use("/", _static.router)
   app.use("/", domainProxy.router)
   app.use("/", vscode.router)
   app.use("/", manifest.router)
+  app.use("/", _static.router)
 
   app.use("/healthz", health.router)
   if (args.auth === AuthType.Password) {
@@ -113,6 +112,7 @@ export const register = async (app: Express, server: http.Server, args: Defaulte
 
     try {
       res.status(status).render("error", {
+        ...commonTemplateVars(req),
         HOME_PATH: (typeof req.query.to === "string" && req.query.to) || "/",
         ERROR_TITLE: status,
         ERROR_HEADER: status,

src/node/routes/login.ts

@@ -1,7 +1,7 @@
 import { Router, ErrorRequestHandler } from "express"
 import { RateLimiter as Limiter } from "limiter"
 import safeCompare from "safe-compare"
-import { authenticated, getCookieDomain, redirect } from "../http"
+import { authenticated, commonTemplateVars, getCookieDomain, redirect } from "../http"
 import { hash, humanPath } from "../util"
 
 enum Cookie {
@@ -28,6 +28,7 @@ const rootHandler: ErrorRequestHandler = async (error: Error | undefined, req, r
     : `Check the config file at ${humanPath(req.args.config)} for the password.`
 
   res.render("login", {
+    ...commonTemplateVars(req),
     PASSWORD_MSG: passwordMsg,
     ERROR: error?.message || "",
   })

src/node/routes/manifest.ts

@@ -6,9 +6,9 @@ export const router = Router()
 
 const iconSizes = [96, 128, 192, 256, 384, 512]
 
-export const createWebManifest = ({ base, csStaticBase }: CommonTemplateVars) => {
+export const createWebManifest = ({ base }: CommonTemplateVars) => {
   const icons = iconSizes.map((iconSize) => ({
-    src: normalize(`${csStaticBase}/media/pwa-icon-${iconSize}.png`),
+    src: normalize(`${base}/static/media/pwa-icon-${iconSize}.png`),
     type: "image/png",
     sizes: `${iconSize}x${iconSize}`,
   }))
@@ -27,5 +27,5 @@ export const createWebManifest = ({ base, csStaticBase }: CommonTemplateVars) =>
 router.get("/code-server.webmanifest", (req, res) => {
   const webManifest = commonTemplateVars(req)
 
-  res.contentType("application/manifest+json").json(webManifest)
+  res.contentType("application/manifest+json").json(createWebManifest(webManifest))
 })

src/node/routes/vscode.ts

@@ -4,7 +4,7 @@ import { promises as fs } from "fs"
 import * as path from "path"
 import { WorkbenchOptions } from "../../../lib/vscode/src/vs/server/ipc"
 import { commit, version } from "../constants"
-import { authenticated, ensureAuthenticated, redirect } from "../http"
+import { authenticated, commonTemplateVars, ensureAuthenticated, redirect } from "../http"
 import { getMediaMime, pathToFsPath } from "../util"
 import { VscodeProvider } from "../vscode"
 
@@ -37,6 +37,7 @@ router.get("/", async (req, res) => {
   workbenchOptions.productConfiguration.codeServerVersion = version
 
   res.render("vscode", {
+    ...commonTemplateVars(req),
     disableTelemetry: !!req.args["disable-telemetry"],
     workbenchOptions,
   })