Point to source maps via canonical unpkg URLs in CI browser builds

.changeset/flat-carrots-cheer.md

@@ -0,0 +1,62 @@
+---
+"@jspsych/plugin-survey-html-form": patch
+"@jspsych/plugin-survey-likert": patch
+"jspsych": patch
+"@jspsych/config": patch
+"@jspsych/extension-mouse-tracking": patch
+"@jspsych/extension-record-video": patch
+"@jspsych/extension-webgazer": patch
+"@jspsych/plugin-animation": patch
+"@jspsych/plugin-audio-button-response": patch
+"@jspsych/plugin-audio-keyboard-response": patch
+"@jspsych/plugin-audio-slider-response": patch
+"@jspsych/plugin-browser-check": patch
+"@jspsych/plugin-call-function": patch
+"@jspsych/plugin-canvas-button-response": patch
+"@jspsych/plugin-canvas-keyboard-response": patch
+"@jspsych/plugin-canvas-slider-response": patch
+"@jspsych/plugin-categorize-animation": patch
+"@jspsych/plugin-categorize-html": patch
+"@jspsych/plugin-categorize-image": patch
+"@jspsych/plugin-cloze": patch
+"@jspsych/plugin-external-html": patch
+"@jspsych/plugin-free-sort": patch
+"@jspsych/plugin-fullscreen": patch
+"@jspsych/plugin-html-audio-response": patch
+"@jspsych/plugin-html-button-response": patch
+"@jspsych/plugin-html-keyboard-response": patch
+"@jspsych/plugin-html-slider-response": patch
+"@jspsych/plugin-html-video-response": patch
+"@jspsych/plugin-iat-html": patch
+"@jspsych/plugin-iat-image": patch
+"@jspsych/plugin-image-button-response": patch
+"@jspsych/plugin-image-keyboard-response": patch
+"@jspsych/plugin-image-slider-response": patch
+"@jspsych/plugin-initialize-camera": patch
+"@jspsych/plugin-initialize-microphone": patch
+"@jspsych/plugin-instructions": patch
+"@jspsych/plugin-maxdiff": patch
+"@jspsych/plugin-mirror-camera": patch
+"@jspsych/plugin-preload": patch
+"@jspsych/plugin-reconstruction": patch
+"@jspsych/plugin-resize": patch
+"@jspsych/plugin-same-different-html": patch
+"@jspsych/plugin-same-different-image": patch
+"@jspsych/plugin-serial-reaction-time": patch
+"@jspsych/plugin-serial-reaction-time-mouse": patch
+"@jspsych/plugin-sketchpad": patch
+"@jspsych/plugin-survey": patch
+"@jspsych/plugin-survey-multi-choice": patch
+"@jspsych/plugin-survey-multi-select": patch
+"@jspsych/plugin-survey-text": patch
+"@jspsych/plugin-video-button-response": patch
+"@jspsych/plugin-video-keyboard-response": patch
+"@jspsych/plugin-video-slider-response": patch
+"@jspsych/plugin-virtual-chinrest": patch
+"@jspsych/plugin-visual-search-circle": patch
+"@jspsych/plugin-webgazer-calibrate": patch
+"@jspsych/plugin-webgazer-init-camera": patch
+"@jspsych/plugin-webgazer-validate": patch
+---
+
+Point to source maps via canonical unpkg URLs in NPM-published browser builds. This prevents 404 errors when using redirecting CDN URLs (as described in #3043).

packages/config/rollup.js

@@ -1,3 +1,5 @@
+import { readFileSync } from "node:fs";
+
 import { DEFAULT_EXTENSIONS as babelDefaultExtensions } from "@babel/core";
 import { babel } from "@rollup/plugin-babel";
 import commonjs from "@rollup/plugin-commonjs";
@@ -9,6 +11,11 @@ import { defineConfig } from "rollup";
 import typescript from "rollup-plugin-typescript2";
 import ts from "typescript";
 
+const getPackageInfo = () => {
+  const { name, version } = JSON.parse(readFileSync("./package.json"));
+  return { name, version };
+};
+
 const makeConfig = ({
   outputOptions = {},
   globalOptions = {},
@@ -16,7 +23,8 @@ const makeConfig = ({
   isNodeOnlyBuild = false,
 }) => {
   const source = "src/index";
-  const destination = "dist/index";
+  const destinationDirectory = "dist";
+  const destination = `${destinationDirectory}/index`;
 
   outputOptions = {
     sourcemap: true,
@@ -62,11 +70,20 @@ const makeConfig = ({
     },
   ];
 
+  let sourcemapBaseUrl;
   if (!isNodeOnlyBuild) {
+    // In builds that are published to NPM (potentially every CI build), point to sourcemaps via the
+    // package's canonical unpkg URL
+    if (process.env.CI) {
+      const { name, version } = getPackageInfo();
+      sourcemapBaseUrl = `https://unpkg.com/${name}@${version}/${destinationDirectory}/`;
+    }
+
     output.push({
       // Build file to be used for tinkering in modern browsers
       file: `${destination}.browser.js`,
       format: "iife",
+      sourcemapBaseUrl,
       ...outputOptions,
       ...iifeOutputOptions,
     });
@@ -103,6 +120,7 @@ const makeConfig = ({
           file: `${destination}.browser.min.js`,
           format: "iife",
           plugins: [terser()],
+          sourcemapBaseUrl,
           ...outputOptions,
           ...iifeOutputOptions,
         },