Create a central spec class

Author: yuvipanda

binderhub/static/js/components/BuilderLauncher.jsx

@@ -4,6 +4,7 @@ import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 import "xterm/css/xterm.css";
 import { Progress, PROGRESS_STATES } from "./Progress.jsx";
+import { Spec } from "../spec.js";
 
 /**
  *
@@ -12,8 +13,6 @@ import { Progress, PROGRESS_STATES } from "./Progress.jsx";
  * @param {string} urlPath
  */
 function redirectToRunningServer(serverUrl, token, urlPath) {
-  // Make sure urlPath doesn't start with a `/`
-  urlPath = urlPath.replace(/^\//, "");
   const redirectUrl = new URL(urlPath, serverUrl);
   redirectUrl.searchParams.append("token", token);
   window.location.href = redirectUrl.toString();
@@ -22,10 +21,9 @@ function redirectToRunningServer(serverUrl, token, urlPath) {
 /**
  *
  * @param {URL} baseUrl
- * @param {string} spec
+ * @param {Spec} spec
  * @param {Terminal} term
  * @param {FitAddon} fitAddon
- * @param {string} urlPath
  * @param {(l: boolean) => void} setIsLaunching
  * @param {(p: PROGRESS_STATES) => void} setProgressState
  * @param {(e: boolean) => void} setEnsureLogsVisible
@@ -35,13 +33,12 @@ async function buildImage(
   spec,
   term,
   fitAddon,
-  urlPath,
   setIsLaunching,
   setProgressState,
   setEnsureLogsVisible,
 ) {
   const buildEndPointURL = new URL("build/", baseUrl);
-  const image = new BinderRepository(spec, buildEndPointURL);
+  const image = new BinderRepository(spec.buildSpec, buildEndPointURL);
   // Clear the last line written, so we start from scratch
   term.write("\x1b[2K\r");
   fitAddon.fit();
@@ -67,7 +64,11 @@ async function buildImage(
       case "ready": {
         setProgressState(PROGRESS_STATES.SUCCESS);
         image.close();
-        redirectToRunningServer(data.url, data.token, urlPath);
+        redirectToRunningServer(
+          data.url,
+          data.token,
+          spec.runtimeParams.urlPath,
+        );
         console.log(data);
         break;
       }
@@ -158,8 +159,7 @@ function ImageLogs({ setTerm, setFitAddon, logsVisible, setLogsVisible }) {
 /**
  * @typedef {object} BuildLauncherProps
  * @prop {URL} baseUrl
- * @prop {string} spec
- * @prop {string} urlPath
+ * @prop {Spec} spec
  * @prop {boolean} isLaunching
  * @prop {(l: boolean) => void} setIsLaunching
  * @prop {PROGRESS_STATES} progressState
@@ -171,7 +171,6 @@ function ImageLogs({ setTerm, setFitAddon, logsVisible, setLogsVisible }) {
 export function BuilderLauncher({
   baseUrl,
   spec,
-  urlPath,
   isLaunching,
   setIsLaunching,
   progressState,
@@ -188,7 +187,6 @@ export function BuilderLauncher({
           spec,
           term,
           fitAddon,
-          urlPath,
           setIsLaunching,
           setProgressState,
           setLogsVisible,

binderhub/static/js/components/NBViewerIFrame.jsx

@@ -1,19 +1,20 @@
+import { Spec } from "../spec";
+
 /**
  * @typedef {object} NBViewerIFrameProps
- * @prop {string} spec
- * @prop {string} urlPath
+ * @prop {Spec} spec
  * @param {NBViewerIFrameProps} props
  * @returns
  */
-export function NBViewerIFrame({ spec, urlPath }) {
+export function NBViewerIFrame({ spec }) {
   // We only support GitHub links as preview right now
-  if (!spec.startsWith("gh/")) {
+  if (!spec.buildSpec.startsWith("gh/")) {
     return;
   }
 
-  const [_, org, repo, ref] = spec.split("/");
+  const [_, org, repo, ref] = spec.buildSpec.split("/");
 
-  urlPath = decodeURI(urlPath);
+  let urlPath = decodeURI(spec.urlPath);
   // Handle cases where urlPath starts with a `/`
   urlPath = urlPath.replace(/^\//, "");
   let filePath = "";

binderhub/static/js/pages/HomePage.jsx

@@ -3,6 +3,7 @@ import { BuilderLauncher } from "../components/BuilderLauncher.jsx";
 import { HowItWorks } from "../components/HowItWorks.jsx";
 import { useEffect, useState } from "react";
 import { FaviconUpdater } from "../components/FaviconUpdater.jsx";
+import { Spec, RuntimeParams } from "../spec.js";
 
 /**
  * @typedef {object} HomePageProps
@@ -22,8 +23,8 @@ export function HomePage({ providers, publicBaseUrl, baseUrl }) {
   const [progressState, setProgressState] = useState(null);
 
   useEffect(() => {
-    setSpec(`${selectedProvider.id}/${repo}/${ref}`);
-  }, [selectedProvider, repo, ref]);
+    setSpec(new Spec(`${selectedProvider.id}/${repo}/${ref}`, rtp));
+  }, [selectedProvider, repo, ref, urlPath]);
 
   return (
     <>
@@ -62,7 +63,6 @@ export function HomePage({ providers, publicBaseUrl, baseUrl }) {
       <BuilderLauncher
         baseUrl={baseUrl}
         spec={spec}
-        urlPath={urlPath}
         isLaunching={isLaunching}
         setIsLaunching={setIsLaunching}
         progressState={progressState}

binderhub/static/js/pages/LoadingPage.jsx

@@ -5,6 +5,7 @@ import { useSearchParams } from "react-router-dom";
 import { NBViewerIFrame } from "../components/NBViewerIFrame.jsx";
 import { LoadingIndicator } from "../components/LoadingIndicator.jsx";
 import { FaviconUpdater } from "../components/FaviconUpdater.jsx";
+import { RuntimeParams, Spec } from "../spec.js";
 
 /**
  * @typedef {object} LoadingPageProps
@@ -16,29 +17,17 @@ export function LoadingPage({ baseUrl }) {
   const [progressState, setProgressState] = useState(null);
 
   const params = useParams();
-  const spec = params["*"];
+  const buildSpec = params["*"];
 
   const [searchParams, _] = useSearchParams();
 
-  let urlPath = searchParams.get("urlpath");
-  if (urlPath === null) {
-    urlPath = "";
-  }
-
-  // Handle legacy parameters for opening URLs after launching
-  // labpath and filepath
-  if (searchParams.has("labpath")) {
-    // Trim trailing / on file paths
-    const filePath = searchParams.get("labpath").replace(/(\/$)/g, "");
-    urlPath = `doc/tree/${encodeURI(filePath)}`;
-  } else if (searchParams.has("filepath")) {
-    // Trim trailing / on file paths
-    const filePath = searchParams.get("filepath").replace(/(\/$)/g, "");
-    urlPath = `tree/${encodeURI(filePath)}`;
-  }
-
   const [isLaunching, setIsLaunching] = useState(false);
 
+  const spec = new Spec(
+    buildSpec,
+    RuntimeParams.fromSearchParams(searchParams),
+  );
+
   useEffect(() => {
     // Start launching after the DOM has fully loaded
     setTimeout(() => setIsLaunching(true), 1);
@@ -50,15 +39,14 @@ export function LoadingPage({ baseUrl }) {
       <BuilderLauncher
         baseUrl={baseUrl}
         spec={spec}
-        urlPath={urlPath}
         isLaunching={isLaunching}
         setIsLaunching={setIsLaunching}
         progressState={progressState}
         setProgressState={setProgressState}
       />
       <FaviconUpdater progressState={progressState} />
 
-      <NBViewerIFrame spec={spec} urlPath={urlPath} />
+      <NBViewerIFrame spec={spec} />
     </>
   );
 }

binderhub/static/js/spec.js

@@ -0,0 +1,49 @@
+export class RuntimeParams {
+  /**
+   *
+   * @param {string} urlPath
+   */
+  constructor(urlPath) {
+    this.urlPath = urlPath;
+    // Ensure no leading / here
+    this.urlPath = this.urlPath.replace(/^\/*/, "");
+  }
+
+  /**
+   *
+   * @param {URLSearchParams} searchParams
+   *
+   * @returns {RuntimeParams}
+   */
+  static fromSearchParams(searchParams) {
+    let urlPath = searchParams.get("urlpath");
+    if (urlPath === null) {
+      urlPath = "";
+    }
+
+    // Handle legacy parameters for opening URLs after launching
+    // labpath and filepath
+    if (searchParams.has("labpath")) {
+      // Trim trailing / on file paths
+      const filePath = searchParams.get("labpath").replace(/(\/$)/g, "");
+      urlPath = `doc/tree/${encodeURI(filePath)}`;
+    } else if (searchParams.has("filepath")) {
+      // Trim trailing / on file paths
+      const filePath = searchParams.get("filepath").replace(/(\/$)/g, "");
+      urlPath = `tree/${encodeURI(filePath)}`;
+    }
+
+    return new RuntimeParams(urlPath);
+  }
+}
+
+export class Spec {
+  /**
+   * @param {string} buildSpec
+   * @param {RuntimeParams} runtimeParams
+   */
+  constructor(buildSpec, runtimeParams) {
+    this.buildSpec = buildSpec;
+    this.runtimeParams = runtimeParams;
+  }
+}

tsconfig.json

@@ -9,7 +9,8 @@
     "module": "es6",
     "target": "es5",
     "jsx": "react-jsx",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "sourceMap": true
   },
   "include": ["binderhub/static/js/"]
 }