initial work on browser-check plugin, WIP

package-lock.json

@@ -2450,6 +2450,10 @@
       "resolved": "packages/plugin-audio-slider-response",
       "link": true
     },
+    "node_modules/@jspsych/plugin-browser-check": {
+      "resolved": "packages/plugin-browser-check",
+      "link": true
+    },
     "node_modules/@jspsych/plugin-call-function": {
       "resolved": "packages/plugin-call-function",
       "link": true
@@ -14611,6 +14615,17 @@
         "jspsych": ">=7.0.0"
       }
     },
+    "packages/plugin-browser-check": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@jspsych/config": "^1.0.0",
+        "@jspsych/test-utils": "^1.0.0"
+      },
+      "peerDependencies": {
+        "jspsych": ">=7.0.0"
+      }
+    },
     "packages/plugin-call-function": {
       "name": "@jspsych/plugin-call-function",
       "version": "1.0.0",
@@ -16942,6 +16957,13 @@
         "@jspsych/test-utils": "^1.0.0"
       }
     },
+    "@jspsych/plugin-browser-check": {
+      "version": "file:packages/plugin-browser-check",
+      "requires": {
+        "@jspsych/config": "^1.0.0",
+        "@jspsych/test-utils": "^1.0.0"
+      }
+    },
     "@jspsych/plugin-call-function": {
       "version": "file:packages/plugin-call-function",
       "requires": {

packages/plugin-browser-check/jest.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);

packages/plugin-browser-check/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@jspsych/plugin-browser-check",
+  "version": "1.0.0",
+  "description": "jsPsych plugin for checking browser features",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "typings": "dist/index.d.ts",
+  "unpkg": "dist/index.browser.min.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "source": "src/index.ts",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
+    "tsc": "tsc",
+    "build": "rollup --config",
+    "build:watch": "npm run build -- --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jspsych/jsPsych.git",
+    "directory": "packages/plugin-html-keyboard-response"
+  },
+  "author": "Josh de Leeuw",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jspsych/jsPsych/issues"
+  },
+  "homepage": "https://www.jspsych.org/latest/plugins/html-keyboard-response",
+  "peerDependencies": {
+    "jspsych": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^1.0.0",
+    "@jspsych/test-utils": "^1.0.0"
+  }
+}

packages/plugin-browser-check/rollup.config.mjs

@@ -0,0 +1,3 @@
+import { makeRollupConfig } from "@jspsych/config/rollup";
+
+export default makeRollupConfig("jsPsychBrowserCheck");

packages/plugin-browser-check/src/index.spec.ts

@@ -0,0 +1,21 @@
+import { pressKey, startTimeline } from "@jspsych/test-utils";
+
+import browserCheck from ".";
+
+jest.useFakeTimers();
+
+describe("browser-check", () => {
+  test("contains data on window size", async () => {
+    const { expectFinished, getData } = await startTimeline([
+      {
+        type: browserCheck,
+      },
+    ]);
+
+    console.log(getData().values()[0]);
+
+    await expectFinished();
+
+    expect(getData().values()[0].window_width).not.toBeUndefined();
+  });
+});

packages/plugin-browser-check/src/index.ts

@@ -0,0 +1,137 @@
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+
+const info = <const>{
+  name: "browser-check",
+  parameters: {
+    /**
+     * List of features to check and record in the data
+     */
+    features: {
+      type: ParameterType.STRING,
+      array: true,
+      default: [
+        "window_width",
+        "window_height",
+        "webaudio",
+        "browser",
+        "browser_version",
+        "mobile",
+        "os",
+        "fullscreen",
+      ],
+    },
+    /**
+     * List of inclusion criteria
+     */
+    inclusion_criteria: {
+      type: ParameterType.COMPLEX,
+      default: [],
+    },
+  },
+};
+
+type Info = typeof info;
+
+/**
+ * **browser-check**
+ *
+ * jsPsych plugin for checking features of the browser and validating against a set of inclusion criteria.
+ *
+ * @author Josh de Leeuw
+ * @see {@link https://www.jspsych.org/plugins/jspsych-browser-check/ browser-check plugin documentation on jspsych.org}
+ */
+class BrowserCheckPlugin implements JsPsychPlugin<Info> {
+  static info = info;
+
+  constructor(private jsPsych: JsPsych) {}
+
+  private featureCheckFunctionsMap = new Map<string, () => any>(
+    Object.entries({
+      window_width: () => {
+        return window.innerWidth;
+      },
+      window_height: () => {
+        return window.innerHeight;
+      },
+      webaudio: () => {
+        // @ts-ignore
+        return (
+          window.AudioContext ||
+          window.webkitAudioContext ||
+          window.mozAudioContext ||
+          window.oAudioContext ||
+          window.msAudioContext
+        );
+      },
+      browser: () => {
+        return "TODO";
+      },
+      browser_version: () => {
+        return "TODO";
+      },
+      mobile: () => {
+        return "TODO";
+      },
+      os: () => {
+        return "TODO";
+      },
+      fullscreen: () => {
+        return "TODO";
+      },
+    })
+  );
+
+  trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    const feature_data = new Map<string, any>();
+    for (const feature of trial.features) {
+      feature_data.set(feature, this.featureCheckFunctionsMap.get(feature)());
+    }
+
+    const trial_data = { ...Object.fromEntries(feature_data) };
+
+    this.jsPsych.finishTrial(trial_data);
+  }
+
+  // MINIMUM SIZE
+  // if (exclusions.min_width || exclusions.min_height) {
+  //   const mw = exclusions.min_width || 0;
+  //   const mh = exclusions.min_height || 0;
+
+  //   if (window.innerWidth < mw || window.innerHeight < mh) {
+  //     this.getDisplayElement().innerHTML =
+  //       "<p>Your browser window is too small to complete this experiment. " +
+  //       "Please maximize the size of your browser window. If your browser window is already maximized, " +
+  //       "you will not be able to complete this experiment.</p>" +
+  //       "<p>The minimum width is " +
+  //       mw +
+  //       "px. Your current width is " +
+  //       window.innerWidth +
+  //       "px.</p>" +
+  //       "<p>The minimum height is " +
+  //       mh +
+  //       "px. Your current height is " +
+  //       window.innerHeight +
+  //       "px.</p>";
+
+  //     // Wait for window size to increase
+  //     while (window.innerWidth < mw || window.innerHeight < mh) {
+  //       await delay(100);
+  //     }
+
+  //     this.getDisplayElement().innerHTML = "";
+  //   }
+  // }
+
+  // // WEB AUDIO API
+  // if (typeof exclusions.audio !== "undefined" && exclusions.audio) {
+  //   if (!window.hasOwnProperty("AudioContext") && !window.hasOwnProperty("webkitAudioContext")) {
+  //     this.getDisplayElement().innerHTML =
+  //       "<p>Your browser does not support the WebAudio API, which means that you will not " +
+  //       "be able to complete the experiment.</p><p>Browsers that support the WebAudio API include " +
+  //       "Chrome, Firefox, Safari, and Edge.</p>";
+  //     throw new Error();
+  //   }
+  // }
+}
+
+export default BrowserCheckPlugin;

packages/plugin-browser-check/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@jspsych/config/tsconfig.core.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}