Update jspsych config

.changeset/mighty-islands-collect.md

@@ -0,0 +1,10 @@
+---
+"@lookit/lookit-initjspsych": minor
+"@lookit/templates": minor
+"@lookit/surveys": minor
+"@lookit/record": minor
+"@lookit/style": minor
+"@lookit/data": minor
+---
+
+Update to @jspsych/config v3 and various fixes to breaking changes

packages/data/package.json

@@ -22,16 +22,18 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "3.645.0",
+    "@aws-sdk/client-s3": "^3.685.0",
     "deep-freeze-es6": "^3.0.2"
   },
   "devDependencies": {
-    "@jspsych/config": "^2.0.0",
+    "@jspsych/config": "^3.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "jest-fetch-mock": "^3.0.3",
-    "rollup-plugin-dotenv": "^0.5.1"
+    "@rollup/plugin-typescript": "^12.1.1",
+    "jest-fetch-mock": "^3.0.3"
   },
   "peerDependencies": {
-    "jspsych": "^8.0.2"
+    "jspsych": "^8.0.3"
   }
 }

packages/data/rollup.config.mjs

@@ -1,13 +1,18 @@
+import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
 import { makeRollupConfig } from "../../rollup.mjs";
 
 export default makeRollupConfig("chsData").map((config) => {
+  // TODO: minify is not working.
   return {
     ...config,
     plugins: [
-      // Resolve node dependencies to be used in a browser.
+      typescript(),
       nodeResolve({ browser: true, preferBuiltins: false }),
-      ...config.plugins,
+      json(),
+      commonjs(),
     ],
   };
 });

packages/data/src/utils.spec.ts

@@ -1,27 +1,10 @@
 import { enableFetchMocks } from "jest-fetch-mock";
 import { ApiResponse, Child } from "./types";
+import * as utils from "./utils";
 import { get, getUuids, patch } from "./utils";
 
 enableFetchMocks();
 
-/**
- * Helper function for this set of tests. This will update the current URL to
- * the value provided in argument href.
- *
- * @param href - URL to be set.
- * @returns Supplied URL.
- */
-const setLocationHref = (href: string) => {
-  /**
-   * Helper function for this set of tests. This will update the current URL to
-   * the value provided in argument href.
-   */
-  delete global.window.location;
-  global.window = Object.create(window);
-  global.window.location = { href };
-  return href;
-};
-
 test("Api get function", async () => {
   const child = { id: new Date().toString() } as Child;
   const data: ApiResponse<Child> = { data: child };
@@ -41,9 +24,11 @@ test("Get UUIDs from URL when study is preview", () => {
     study: "1647e101-282a-4fde-a32b-4f493d14f57e",
     child: "8a2b2f04-63eb-485a-8e55-7b9362368f19",
   };
-  setLocationHref(
-    `https://localhost:8000/exp/studies/j/${data.study}/${data.child}/preview/`,
-  );
+  jest
+    .spyOn(utils, "getLocationHref")
+    .mockReturnValue(
+      `https://localhost:8000/exp/studies/j/${data.study}/${data.child}/preview/`,
+    );
   expect(getUuids()).toEqual(data);
 });
 
@@ -52,14 +37,16 @@ test("Get UUIDs from URL", () => {
     study: "1647e101-282a-4fde-a32b-4f493d14f57e",
     child: "8a2b2f04-63eb-485a-8e55-7b9362368f19",
   };
-  setLocationHref(
-    `https://localhost:8000/studies/j/${data.study}/${data.child}/`,
-  );
+  jest
+    .spyOn(utils, "getLocationHref")
+    .mockReturnValue(
+      `https://localhost:8000/studies/j/${data.study}/${data.child}/`,
+    );
   expect(getUuids()).toEqual(data);
 });
 
 test("Get UUIDs Error", () => {
-  setLocationHref("https://mit.edu");
+  jest.spyOn(utils, "getLocationHref").mockReturnValue("https://mit.edu");
   expect(() => {
     getUuids();
   }).toThrow("URL is different than expected.");

packages/data/src/utils.ts

@@ -65,13 +65,20 @@ export const csrfToken = () => {
   );
 };
 
+/**
+ * Wrapper for location.href. This is mainly to make testing easier.
+ *
+ * @returns Href
+ */
+export const getLocationHref = () => window.location.href;
+
 /**
  * Get Study and Child UUID from URL.
  *
  * @returns Object containing UUIDs.
  */
 export const getUuids = () => {
-  const locationHref = window.location.href;
+  const locationHref = getLocationHref();
   const uuids = locationHref.replace("preview/", "").split("/").slice(-3, -1);
   if (locationHref.includes("studies/j/") && uuids && uuids.length === 2) {
     return { study: uuids[0], child: uuids[1] };

packages/data/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "esModuleInterop": true,
+    "outDir": "dist",
     "strict": true
   },
   "extends": "@jspsych/config/tsconfig.json",

packages/lookit-initjspsych/package.json

@@ -25,16 +25,11 @@
     "dev": "rollup --config rollup.config.dev.mjs --watch",
     "test": "jest --coverage"
   },
-  "dependencies": {},
   "devDependencies": {
-    "@jspsych/config": "^2.0.0"
+    "@jspsych/config": "^3.0.1"
   },
   "peerDependencies": {
     "@lookit/data": "^0.1.0",
-    "jspsych": "^8.0.2"
-  },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-arm64-gnu": "^4.14.1",
-    "@rollup/rollup-linux-x64-gnu": "^4.14.1"
+    "jspsych": "^8.0.3"
   }
 }

packages/record/package.json

@@ -26,23 +26,23 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "auto-bind": "^5.0.1"
+    "auto-bind": "^5.0.1",
+    "handlebars": "^4.7.8"
   },
   "devDependencies": {
-    "@jspsych/config": "^2.0.0",
+    "@jspsych/config": "^3.0.1",
     "@jspsych/test-utils": "^1.2.0",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-replace": "^6.0.1",
     "@types/audioworklet": "^0.0.60",
-    "handlebars": "^4.7.8",
     "rollup-plugin-dotenv": "^0.5.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "rollup-plugin-string-import": "^1.2.4",
+    "rollup-plugin-string": "^3.0.0",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "@lookit/data": "^0.1.0",
     "@lookit/templates": "^1.1.0",
-    "jspsych": "^8.0.2"
+    "jspsych": "^8.0.3"
   }
 }

packages/record/rollup.config.mjs

@@ -2,18 +2,20 @@ import image from "@rollup/plugin-image";
 import replace from "@rollup/plugin-replace";
 import dotenv from "rollup-plugin-dotenv";
 import nodePolyfills from "rollup-plugin-polyfill-node";
-import { importAsString } from "rollup-plugin-string-import";
+import { string } from "rollup-plugin-string";
 import { makeRollupConfig } from "../../rollup.mjs";
 
 export default makeRollupConfig("chsRecord").map((config) => {
   return {
     ...config,
     plugins: [
+      // Handlebars requires node polyfills.
+      nodePolyfills(),
       ...config.plugins,
       // Add support for .env files
       dotenv({ cwd: "../../" }),
       // Add support to import yaml and handlebars files as strings
-      importAsString({
+      string({
         include: ["**/*.yaml", "**/*.hbs"],
       }),
       // Images are converted to base64
@@ -24,8 +26,6 @@ export default makeRollupConfig("chsRecord").map((config) => {
         },
         preventAssignment: true,
       }),
-      // Handlebars requires node polyfills.
-      nodePolyfills(),
     ],
   };
 });

packages/record/scss/index.scss

@@ -1,5 +1,5 @@
-@import "./consent-video-plugin";
-@import "./video-config-plugin";
+@forward "./consent-video-plugin";
+@forward "./video-config-plugin";
 
 video.webcam-feed {
   transform: rotateY(180deg);

packages/record/src/recorder.spec.ts

@@ -156,7 +156,7 @@ test("Recorder handleStop", async () => {
 
   await handleStop();
 
-  // // Upload the file to s3
+  // Upload the file to s3
   rec["localDownload"] = false;
   rec["_s3"] = new Data.LookitS3("some key");
 

packages/style/package.json

@@ -5,7 +5,7 @@
   "license": "ISC",
   "author": "",
   "main": "css/index.scss",
-  "unpkg": "src/index.css",
+  "unpkg": "dist/index.min.css",
   "files": [
     "dist",
     "src",
@@ -17,7 +17,7 @@
     "test": ""
   },
   "devDependencies": {
-    "@jspsych/config": "^2.0.0",
+    "@jspsych/config": "^3.0.1",
     "@lookit/record": "^2.0.0",
     "@lookit/surveys": "^2.0.0",
     "rollup-plugin-scss": "^4.0.0",

packages/style/scss/index.scss

@@ -1,2 +1,2 @@
-@import "@lookit/surveys/scss";
-@import "@lookit/record/scss";
+@forward "@lookit/surveys/scss";
+@forward "@lookit/record/scss";