fix the turbopack and jest bundling of proteinpaint code

packages/portal-proto/next.config.js

@@ -3,6 +3,9 @@
  * the intended deployment path. For example, the basePath of "/v2"
  * means that the application will be available at "https://<host>/v2"
  */
+// Optional Turbopack overrides for local proteinpaint client development.
+const ppTurbopackDev = require("./src/features/proteinpaint/ppTurbopackDev");
+
 const basePath = process.env.NEXT_PUBLIC_BASEPATH;
 const connectSrc = [
   "https://portal.gdc.cancer.gov",
@@ -63,6 +66,7 @@ const cspHeader = `
  */
 module.exports = {
   turbopack: {
+    ...ppTurbopackDev(__dirname),
     rules: {
       "*.svg": {
         loaders: ["@svgr/webpack"],

packages/portal-proto/src/features/proteinpaint/dev.sh

@@ -7,31 +7,37 @@
 
 if [[ "$1" == "unlink" ]]; then
 	# to test the published client package before submitting a PR with an updated pp-client version
-	npm unlink ../proteinpaint/client
 	npm uninstall @sjcrh/proteinpaint-client --save --workspace=packages/portal-proto
 	npm install @sjcrh/proteinpaint-client --save --save-exact --workspace=packages/portal-proto
+
+	# sometimes the nextjs bundle cache is stale after changing the client package
+	rm -rf packages/portal-proto/.next
+
+	# run the following in a separate tab
+	# local-ssl-proxy --config ssl-proxy.json --cert localhost.pem --key localhost-key.pem
+	# then from the gff dir
+	PROTEINPAINT_API=https://localhost.gdc.cancer.gov:3011 PORT=3001 npm run dev
 else
-	# to test the local PP client code -
-	# !!! NOTE: turbopack used to find the @sjrch/proteintpaint under node_mmodules, but has stopped working !!!
-	# a temporary fix is to do the following:
-	# 1. run `npm run dev` from the sjpp or proteinpaint repo/directory
-	# 2. on rebundling from the client dir, run `cp -r dist ~/dev/gdc-frontend-framework/node_modules/"@sjcrh"/proteinpaint-client/`
-	#
-	npm unlink ../proteinpaint/client # change back to `npm link` when fixed
-	# An issue with npm link and workspaces: the non-linked @sjcrh/proteinpaint-client package
-	# may be moved to portal-proto/node_modules, creating 2 separate modules of the same package,
-	# must ensure only the linked module is used for bundling so delete
-	rm -rf packages/portal-proto/node_modules/@sjcrh
-	# also not able to do a simpler
-	# `cd packages/portal-proto && npm link path/to/proteinpaint/client`,
-	# where the linked module would be in portal-proto/node_modules instead of the
-	# other way around
-fi
+	# to test the local PP client code:
+	# 1. build the client in watch mode from the sjpp/proteinpaint repo:
+	#    cd ../proteinpaint/client && npm run dev
+	# 2. PP_CLIENT_DIST (below) tells Turbopack to bundle the local client dist
+	#    directly (see next.config.js `turbopack.resolveAlias`), so no npm link or
+	#    manual `cp -r dist ...` into node_modules is needed. A browser refresh after
+	#    a client rebuild is usually enough to pick up changes.
+	# Resolve to an absolute path (via a subshell) so it is unaffected by the cwd
+	# that `lerna run dev` uses for the next process.
+	if ! PP_CLIENT_DIST="$(cd ../proteinpaint/client && pwd -P)"; then
+		echo "error: ../proteinpaint/client not found (expected sibling of this repo)" >&2
+		exit 1
+	fi
+	export PP_CLIENT_DIST
 
-# sometimes the nextjs bundle cache are stale after npm link
-rm -rf packages/portal-proto/.next
+	# sometimes the nextjs bundle cache is stale after switching the client source
+	rm -rf packages/portal-proto/.next
 
-# run the following tab in a separate tab
-# local-ssl-proxy --config ssl-proxy.json --cert localhost.pem --key localhost-key.pem
-# then from the gff dir
-PROTEINPAINT_API=https://localhost.gdc.cancer.gov:3011 PORT=3001 npm run dev
+	# run the following in a separate tab
+	# local-ssl-proxy --config ssl-proxy.json --cert localhost.pem --key localhost-key.pem
+	# then from the gff dir
+	PROTEINPAINT_API=https://localhost.gdc.cancer.gov:3011 PORT=3001 npm run dev
+fi

packages/portal-proto/src/features/proteinpaint/ppTurbopackDev.js

@@ -0,0 +1,47 @@
+const path = require("path");
+
+// Deepest directory shared by two absolute paths.
+const commonAncestor = (a, b) => {
+  const as = a.split(path.sep);
+  const bs = b.split(path.sep);
+  const out = [];
+  for (let i = 0; i < Math.min(as.length, bs.length) && as[i] === bs[i]; i++)
+    out.push(as[i]);
+  return out.join(path.sep) || path.sep;
+};
+
+/**
+ * Turbopack config fragment for local proteinpaint development.
+ *
+ * When PP_CLIENT_DIST is set (see dev.sh) this bundles that local
+ * proteinpaint/client build instead of the published @sjcrh/proteinpaint-client
+ * dependency, replacing the old `npm link` + `cp -r dist` workflow that
+ * Turbopack no longer supports in a workspace. Returns an empty object
+ * otherwise, so CI/production builds resolve the installed package normally.
+ *
+ * Notes on the two fields:
+ * - resolveAlias: aliased to dist/app.js (not the package dir) so its sibling
+ *   chunk-*.js files resolve from the real repo dist and rebuilds are live.
+ *   The value must be project-root-relative — Turbopack rejects absolute paths.
+ * - root: widened to the ancestor shared with the client, since the client
+ *   typically lives outside this repo and Turbopack won't resolve files
+ *   outside its root.
+ *
+ * @param {string} projectDir absolute path to the Next project root (the
+ *   directory containing next.config.js).
+ * @returns {object} a fragment to spread into next.config.js `turbopack`.
+ */
+module.exports = function ppTurbopackDev(projectDir) {
+  const dist = process.env.PP_CLIENT_DIST;
+  if (!dist) return {};
+
+  const clientDir = path.resolve(dist);
+  const appJs = path.join(clientDir, "dist/app.js");
+  let rel = path.relative(projectDir, appJs);
+  if (!rel.startsWith(".")) rel = "./" + rel;
+
+  return {
+    root: commonAncestor(projectDir, clientDir),
+    resolveAlias: { "@sjcrh/proteinpaint-client": rel },
+  };
+};