feat: 🎸 Convert require() to es import

This converts several require() expressions to es import statements, to
accommodate importing jspsych 7 plugins that are es modules.

BREAKING CHANGE: 🧨 jspsych 7 es modules are not compatible with require() expressions.

app.js

@@ -1,18 +1,27 @@
-const _ = require('lodash')
+import { extend } from 'lodash'
+import { countdown } from './trials/countdown'
+import { showMessage } from './trials/showMessage'
+import { fixation } from './trials/fixation'
+import { userId } from './trials/userId'
+import { showImage } from './trials/showImage'
+import { slider } from './trials/slider'
+import { survey } from './trials/survey'
+import { multiSurvey } from './trials/multiSurvey'
 
-const defaultconfig = { USE_PHOTODIODE: false,  USE_EEG: false, USE_ELECTRON: true, USE_MTURK: false}
+const defaultconfig = { USE_PHOTODIODE: false, USE_EEG: false, USE_ELECTRON: true, USE_MTURK: false }
 
+function init(_config) {
+  return extend(defaultconfig, _config)
+}
 
-module.exports = { 
-  init: function(_config){
-      return _.extend(defaultconfig,_config)
-  },
-  countdown: require('./trials/countdown.js'),
-  showMessage: require('./trials/showMessage.js'),
-  fixation: require('./trials/fixation.js'),
-  userId: require('./trials/userId.js'),
-  showImage: require('./trials/showImage.js'),
-  slider: require('./trials/slider.js'),
-  survey: require('./trials/survey.js'),
-  multiSurvey: require('./trials/multiSurvey.js')
-};
+export {
+  init,
+  countdown,
+  showMessage,
+  fixation,
+  userId,
+  showImage,
+  slider,
+  survey,
+  multiSurvey
+};

babel.config.js

@@ -0,0 +1 @@
+module.exports = {presets: ['@babel/preset-env']}

lib/utils.js

@@ -3,6 +3,6 @@ const jitterx = (base, offset) => (
   base + Math.floor(Math.random() * Math.floor(offset))
 )
 
-module.exports ={
+export {
   jitterx
 }

package.json

@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "jest": "^26.2.2",
-    "jsdoc-to-markdown": "^6.0.1"
+    "jsdoc-to-markdown": "^6.0.1",
+    "@babel/preset-env": "^7.18.6"
   }
 }

tests/countdown.spec.js

@@ -1,5 +1,5 @@
-const countdown = require("../trials/countdown.js");
-const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
+import { countdown } from "../trials/countdown.js"
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response"
 
 describe("Countdown trial", () => {
   it("counts to 10 with a message countdown", () => {

tests/fixation.spec.js

@@ -1,5 +1,5 @@
-const fixation = require("../trials/fixation.js");
-const { init } = require("../app.js");
+import { fixation } from "../trials/fixation.js"
+import { init } from "../app.js"
 
 describe("Fixation trial", () => {
   it("fixation without photodiode box", () => {

tests/multiSurvey.spec.js

@@ -1,4 +1,4 @@
-const multiSurvey = require("../trials/multiSurvey.js");
+import { multiSurvey } from "../trials/multiSurvey.js"
 
 describe("multiSurvey trial", () => {
   it(" with same ans choices for all questions", () => {

tests/showImage.spec.js

@@ -1,5 +1,5 @@
-const showImage = require("../trials/showImage.js");
-const { init } = require("../app.js");
+import { showImage } from "../trials/showImage.js"
+import { init } from "../app.js"
 
 describe("showImage trial", () => {
   it("showImage without photodiode box", () => {

tests/showMessage.spec.js

@@ -1,7 +1,7 @@
-const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
-const htmlButtonResponse = require("@jspsych/plugin-html-button-response");
-const showMessage = require("../trials/showMessage.js");
-const { init } = require("../app.js");
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response"
+import htmlButtonResponse from "@jspsych/plugin-html-button-response"
+import { showMessage } from "../trials/showMessage.js"
+import { init } from "../app.js"
 
 describe("showMessage trial", () => {
   it("showMessage without photodiode box", () => {

tests/slider.spec.js

@@ -1,4 +1,4 @@
-const slider = require("../trials/slider.js");
+import { slider } from "../trials/slider.js"
 
 describe("slider trial", () => {
   it("slider with require movement", () => {

tests/survey.spec.js

@@ -1,4 +1,4 @@
-const survey = require("../trials/survey.js");
+import { survey } from "../trials/survey.js"
 
 describe("survey trial", () => {
   it("survey with require movement", () => {

tests/userId.spec.js

@@ -1,8 +1,8 @@
-const userId = require("../trials/userId.js");
-const { init } = require("../app.js");
-const { initJsPsych } = require('jspsych')
-
+import { userId } from "../trials/userId.js"
+import { init } from "../app.js"
+import { initJsPsych } from "jspsych"
 
+// In jspsych 7, we explicitly instantiate our own jsPsych instead of importing the global instance.
 const jsPsych = initJsPsych();
 
 describe("userId trial", () => {

trials/countdown.js

@@ -1,5 +1,5 @@
-const _ = require("lodash");
-const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
+import { range } from "lodash";
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response";
 
 /**
  * @description
@@ -12,8 +12,7 @@ const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
  * @param {string} options.message - (optional) message for the countdown. (default: "")
  * @param {number} options.time - start number for the countdown. (default: 3)
  */
-
-module.exports = function (options) {
+export function countdown(options) {
   const defaults = {
     duration: 1000,
     stimulus: "",
@@ -23,7 +22,7 @@ module.exports = function (options) {
   const { duration, message, stimulus, time } = { ...defaults, ...options };
 
   const stimulusOrMessage = message !== "" ? `<h3>${message}</h3>` : stimulus;
-  const times = _.range(time, 0, -1);
+  const times = range(time, 0, -1);
   const timeline = times.map((val) => {
     return { prompt: `<h1>${val}</h1>` };
   });

trials/fixation.js

@@ -1,9 +1,9 @@
-const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
-const {
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response"
+import {
   pdSpotEncode,
   photodiodeGhostBox,
-} = require("../lib/markup/photodiode");
-const { jitterx } = require("../lib/utils");
+} from "../lib/markup/photodiode"
+import { jitterx } from "../lib/utils"
 
 /**
  * @description
@@ -21,8 +21,7 @@ const { jitterx } = require("../lib/utils");
  * @param {number} options.taskCode - Task code to be saved into data log (default: 1)
  * @param {number} options.numBlinks - Number of times the pulse needs to be repeated for photodiode box, when USE_PHOTODIODE is set true. (default: 1)
  */
-
-module.exports = function (config, options) {
+export function fixation(config, options) {
   const defaults = {
     duration: 1000,
     jitter: 50,

trials/multiSurvey.js

@@ -1,4 +1,5 @@
-const surveyMultiChoice = require("@jspsych/plugin-survey-multi-choice");
+import surveyMultiChoice from "@jspsych/plugin-survey-multi-choice"
+
 /**
  * @description
  * Builds a multi choice/select survey trial.
@@ -9,8 +10,7 @@ const surveyMultiChoice = require("@jspsych/plugin-survey-multi-choice");
  * @param {Array} options.prompts - The question prompts, an Array of strings (default: [])
  * @param {Object} options.ansChoices - Object consisting of the key as the answer choice name and value as the array of answer choices. (default: {})
  */
-
-module.exports = function (options) {
+export function multiSurvey(options) {
   const defaults = {
     responseType: surveyMultiChoice,
     preamble: "",
@@ -42,7 +42,7 @@ module.exports = function (options) {
       window.scrollTo(0, 0);
       data.prompt = prompts;
       data.ans_choices = [ansChoices];
-      data.answer = [{ answer: JSON.parse(data.responses) }];
+      data.answer = [{ answer: data.response }];
     },
   };
 };

trials/showImage.js

@@ -1,10 +1,10 @@
-const imageKeyboardResponse = require("@jspsych/plugin-image-keyboard-response");
-const {
+import imageKeyboardResponse from "@jspsych/plugin-image-keyboard-response"
+import {
   photodiodeGhostBox,
   pdSpotEncode,
-} = require("../lib/markup/photodiode");
-const $ = require("jquery");
-const { jitterx } = require("../lib/utils");
+} from "../lib/markup/photodiode"
+import $ from "jquery"
+import { jitterx } from "../lib/utils"
 
 /**
  * @description
@@ -25,8 +25,7 @@ const { jitterx } = require("../lib/utils");
  * @param {number} options.taskCode - Task code to be saved into data log (default: 1)
  * @param {number} options.numBlinks - Number of times the pulse needs to be repeated for photodiode box, when USE_PHOTODIODE is set true. (default: 1)
  */
-
-module.exports = function (config, image, options) {
+export function showImage(config, image, options) {
   const defaults = {
     duration: 1000,
     jitter: 50,

trials/showMessage.js

@@ -1,10 +1,10 @@
-const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
-const htmlButtonResponse = require("@jspsych/plugin-html-button-response");
-const {
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response"
+import htmlButtonResponse from "@jspsych/plugin-html-button-response"
+import {
   photodiodeGhostBox,
   pdSpotEncode,
-} = require("../lib/markup/photodiode");
-const { baseStimulus } = require("../lib/markup/stimuli");
+} from "../lib/markup/photodiode"
+import { baseStimulus } from "../lib/markup/stimuli"
 
 /**
  * @description
@@ -27,18 +27,17 @@ const { baseStimulus } = require("../lib/markup/stimuli");
  * @param {number} options.numBlinks - Number of times the pulse needs to be repeated for photodiode box, when USE_PHOTODIODE is set true. (default: 1)
  * @param {Array} options.buttons - This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their numeric key code or as characters (e.g., 'a', 'q'). The default value of "ALL_KEYS" means that all keys will be accepted as valid responses. Specifying "NO_KEYS" will mean that no responses are allowed. Only to be specified if the options.responseType is htmlButtonResponse from "@jspsych/plugin-html-button-response" (default: ["OK"], if options.responseType === htmlButtonResponse, otherwise ignored)
  */
-
-module.exports = function (config, options) {
+export function showMessage(config, options) {
   const defaults = {
     responseType: htmlKeyboardResponse,
-    duration: options.responseType === htmlButtonResponse ? null : 1000,
+    duration: options.responseType == htmlButtonResponse ? null : 1000,
     stimulus: "",
     message: "",
     onstart: false,
     responseEndsTrial: false,
     taskCode: 1,
     numBlinks: 1,
-    buttons: options.responseType === htmlKeyboardResponse ? null : ["OK"],
+    buttons: options.responseType == htmlKeyboardResponse ? null : ["OK"],
   };
   const {
     responseType,

trials/slider.js

@@ -1,12 +1,12 @@
+import htmlSliderResponse from "@jspsych/plugin-html-slider-response"
+
 /**
  * @description
  * Builds a trial with a onscreen message and allows the subject to respond by dragging a slider.
  * @module
  * @param {string} message - The string to be displayed, this can be formatted as an HTML string. (default: empty string)
  */
- const htmlSliderResponse = require("@jspsych/plugin-html-slider-response");
-
-module.exports = function (message = "") {
+export function slider(message = "") {
   return {
     type: htmlSliderResponse,
     require_movement: true,

trials/survey.js

@@ -1,5 +1,5 @@
-const surveyText = require("@jspsych/plugin-survey-text");
-const { baseStimulus } = require("../lib/markup/stimuli");
+import surveyText from "@jspsych/plugin-survey-text"
+import { baseStimulus } from "../lib/markup/stimuli"
 
 /**
  * @description
@@ -11,7 +11,7 @@ const { baseStimulus } = require("../lib/markup/stimuli");
  * @param {string} options.message - Onscreen message to be shown in the trial. (default: "")
  */
 
-module.exports = function (options) {
+export function survey(options) {
   const defaults = {
     preamble: "",
     stimulus: "",
@@ -29,7 +29,7 @@ module.exports = function (options) {
     on_finish: (data) => {
       window.scrollTo(0, 0);
       data.prompt = [stimulusOrMessage];
-      data.answer = JSON.parse(data.responses)["Q0"];
+      data.answer = data.response["Q0"];
     },
   };
 };

trials/userId.js

@@ -1,6 +1,6 @@
-const htmlKeyboardResponse = require("@jspsych/plugin-html-keyboard-response");
-const surveyText = require("@jspsych/plugin-survey-text");
-const { baseStimulus } = require("../lib/markup/stimuli");
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response"
+import surveyText from "@jspsych/plugin-survey-text"
+import { baseStimulus } from "../lib/markup/stimuli"
 
 /**
  * @description
@@ -20,7 +20,7 @@ const { baseStimulus } = require("../lib/markup/stimuli");
  * @param {string} options.defaultId - The user id to show when requesting a user ID, when config.USE_MTURK is set to false.(default: "")
  */
 
-module.exports = function (jsPsych, config, options) {
+export function userId(jsPsych, config, options) {
   const defaults = {
     duration: 1000,
     stimulus: "",
@@ -61,7 +61,7 @@ module.exports = function (jsPsych, config, options) {
         },
       ],
       on_finish: (data) => {
-        const patientId = JSON.parse(data.responses)["Q0"];
+        const patientId = data.response["Q0"];
         jsPsych.data.addProperties({
           patient_id: patientId,
           timestamp: Date.now(),