feat: Support module-style imports of non-module plugins from `@jspsy…

…ch-contrib`

See jspsych/jspsych-contrib#26 for the motivation behind this

package.json

@@ -39,8 +39,10 @@
     "babel-loader": "^8.2.3",
     "core-js": "^3.21.0",
     "css-loader": "^6.6.0",
+    "exports-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "html-webpack-tags-plugin": "^3.0.2",
+    "imports-loader": "^3.1.1",
     "mini-css-extract-plugin": "^2.5.3",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.49.7",

readme.md

@@ -22,6 +22,7 @@ jsPsych Builder solves this by internally configuring common development tools (
 * helps with media preloading for custom plugins (by compiling lists of file paths to be preloaded)
 * transpiles, bundles, and minifies scripts to guarantee wide browser compatibility and short loading times (using webpack and Babel)
 * provides TypeScript and React support – simply rename your files to `*.ts`, `*.tsx`, or `*.jsx`.
+* supports module-style imports of non-module plugins from `@jspsych-contrib`
 * offers to bundle all the required files for deployment, yielding a zip archive
 * offers to package experiments for [JATOS](https://www.jatos.org/)
 

src/config.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from "fs";
 import path from "path";
 import { fileURLToPath, pathToFileURL } from "url";
 
@@ -122,6 +123,31 @@ export const getWebpackConfig = (context: BuilderContext) => {
           test: /\.s[ac]ss$/i,
           use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "sass-loader"],
         },
+
+        // Transform IIFE plugins from `@jspsych-contrib` to modules using `imports-loader` and `exports-loader`
+        {
+          test: (resource) => resource.includes("/@jspsych-contrib/plugin-"),
+          use: (info: any) => {
+            if (info.descriptionData.main) {
+              // The `main` field is not set in the IIFE plugin template, so we consider everything with
+              // a `main` field non-IIFE and ignore it here.
+              return [];
+            }
+
+            // Extract the global variable name of the plugin
+            const pluginVarNameMatches = /^var ([a-zA-Z]+) = \(function/m.exec(
+              readFileSync(info.resource).toString()
+            );
+            if (!pluginVarNameMatches) {
+              return [];
+            }
+
+            return [
+              "imports-loader?type=commonjs&imports=single|jspsych|jsPsychModule",
+              `exports-loader?type=commonjs&exports=single|${pluginVarNameMatches[1]}`,
+            ];
+          },
+        },
       ],
     },
     performance: {