@lookit/templates 1.1.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookit/templates",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "description": "CHS jsPsych trial templates and their translations",
   "homepage": "https://github.com/lookit/lookit-jspsych#readme",
   "bugs": {
@@ -24,18 +24,21 @@
     "dev": "rollup --config rollup.config.dev.mjs --watch",
     "test": "jest --coverage"
   },
-  "devDependencies": {
-    "@jspsych/config": "^2.0.0",
-    "@types/js-yaml": "^4.0.9",
+  "dependencies": {
     "handlebars": "^4.7.8",
     "i18next": "^23.16.4",
     "i18next-icu": "^2.3.0",
-    "js-yaml": "^4.1.0",
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^3.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@types/js-yaml": "^4.0.9",
     "rollup-plugin-dotenv": "^0.5.1",
-    "rollup-plugin-polyfill-node": "^0.13.0"
+    "rollup-plugin-string": "^3.0.0"
   },
   "peerDependencies": {
-    "@lookit/data": "^0.1.0",
-    "jspsych": "^8.0.2"
+    "@lookit/data": "^0.2.0",
+    "jspsych": "^8.0.3"
   }
 }

package/src/consentVideoTemplate.ts

@@ -10,6 +10,7 @@ import { setLocale } from "./utils";
 declare const window: LookitWindow;
 
 const video_container_id = "lookit-jspsych-video-container";
+const msg_container_id = "lookit-jspsych-video-msg-container";
 
 /**
  * Translate, render, and get consent document HTML.
@@ -36,6 +37,7 @@ export const consentVideo = (trial: TrialType<PluginInfo>) => {
     ...trial,
     consent,
     video_container_id,
+    msg_container_id,
   });
 };
 

package/src/index.ts

@@ -1,6 +1,13 @@
 import { consentVideo } from "./consentVideoTemplate";
 import { exitSurvey } from "./exitSurveyTemplate";
 import { uploadingVideo } from "./uploadingVideoTemplate";
+import { translateString } from "./utils";
 import { videoConfig } from "./videoConfigTemplate";
 
-export default { consentVideo, videoConfig, uploadingVideo, exitSurvey };
+export default {
+  consentVideo,
+  videoConfig,
+  uploadingVideo,
+  exitSurvey,
+  translateString,
+};

package/src/utils.spec.ts

@@ -1,6 +1,7 @@
+import i18next from "i18next";
 import { PluginInfo, TrialType } from "jspsych";
 import { LocaleNotFoundError } from "./errors";
-import { expFormat, setLocale } from "./utils";
+import { expFormat, setLocale, translateString } from "./utils";
 
 test("expFormat convert written text to format well in HTML", () => {
   expect(expFormat("abcdefg")).toStrictEqual("abcdefg");
@@ -25,3 +26,12 @@ test("setLocale throw error with non-existing locale", () => {
   const trial = { locale: "non-existing" } as unknown as TrialType<PluginInfo>;
   expect(() => setLocale(trial)).toThrow(LocaleNotFoundError);
 });
+
+test("translateString translates the string with the appropriate locale", () => {
+  const en = new Intl.Locale("en-us");
+  i18next.changeLanguage(en.baseName);
+  expect(translateString("Continue")).toBe("Continue");
+  const fr = new Intl.Locale("fr");
+  i18next.changeLanguage(fr.baseName);
+  expect(translateString("Continue")).toBe("Continuer");
+});

package/src/utils.ts

@@ -92,3 +92,15 @@ Handlebars.registerHelper("t", (context, { hash }) => {
   const txt = String(i18next.t(context, hash));
   return hash.htmlSafe ? new Handlebars.SafeString(txt) : txt;
 });
+
+/**
+ * Public method for directly translating a string, without a corresponding
+ * template.
+ *
+ * @param messageIdStr - Message ID string to be looked up in the translation
+ *   files.
+ * @returns Translated string
+ */
+export const translateString = (messageIdStr: string) => {
+  return i18next.t(messageIdStr);
+};

package/dist/consentVideoTemplate.d.ts

@@ -1,8 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-/**
- * Translate, render, and get consent document HTML.
- *
- * @param trial - JsPsych trial object containing trial params
- * @returns Consent document HTML
- */
-export declare const consentVideo: (trial: TrialType<PluginInfo>) => string;

package/dist/errors.d.ts

@@ -1,18 +0,0 @@
-/** Error thrown when specified language isn't found */
-export declare class LocaleNotFoundError extends Error {
-    /**
-     * This will be thrown when attempting to init i18n
-     *
-     * @param baseName - Language a2code with region
-     */
-    constructor(baseName: string);
-}
-/** Error thrown when researcher selects template that isn't available. */
-export declare class ConsentTemplateNotFound extends Error {
-    /**
-     * This will let the researcher know that their template isn't found.
-     *
-     * @param template - Supplied name of consent template.
-     */
-    constructor(template: string);
-}

package/dist/exitSurveyTemplate.d.ts

@@ -1,95 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-/**
- * Translate survey text to desired locale.
- *
- * @param trial - Trial data including user supplied parameters.
- * @returns Survey json
- */
-export declare const exitSurvey: (trial: TrialType<PluginInfo>) => {
-    pages: {
-        elements: ({
-            description: string;
-            inputType: string;
-            isRequired: boolean;
-            maxValueExpression: string;
-            name: "birthDate";
-            title: string;
-            type: string;
-            enableIf?: undefined;
-            valueFalse?: undefined;
-            valueTrue?: undefined;
-            choices?: undefined;
-            defaultValue?: undefined;
-            autoGrow?: undefined;
-            rows?: undefined;
-        } | {
-            description: string;
-            enableIf: string;
-            isRequired: boolean;
-            name: "databraryShare";
-            title: string;
-            type: string;
-            valueFalse: string;
-            valueTrue: string;
-            inputType?: undefined;
-            maxValueExpression?: undefined;
-            choices?: undefined;
-            defaultValue?: undefined;
-            autoGrow?: undefined;
-            rows?: undefined;
-        } | {
-            choices: {
-                text: string;
-                value: string;
-            }[];
-            description: string;
-            enableIf: string;
-            isRequired: boolean;
-            name: "useOfMedia";
-            title: string;
-            type: string;
-            inputType?: undefined;
-            maxValueExpression?: undefined;
-            valueFalse?: undefined;
-            valueTrue?: undefined;
-            defaultValue?: undefined;
-            autoGrow?: undefined;
-            rows?: undefined;
-        } | {
-            choices: {
-                text: string;
-                value: boolean;
-            }[];
-            defaultValue: never[];
-            isRequired: boolean;
-            name: "withdrawal";
-            title: string;
-            type: string;
-            description?: undefined;
-            inputType?: undefined;
-            maxValueExpression?: undefined;
-            enableIf?: undefined;
-            valueFalse?: undefined;
-            valueTrue?: undefined;
-            autoGrow?: undefined;
-            rows?: undefined;
-        } | {
-            autoGrow: boolean;
-            name: "feedback";
-            rows: number;
-            title: string;
-            type: string;
-            description?: undefined;
-            inputType?: undefined;
-            isRequired?: undefined;
-            maxValueExpression?: undefined;
-            enableIf?: undefined;
-            valueFalse?: undefined;
-            valueTrue?: undefined;
-            choices?: undefined;
-            defaultValue?: undefined;
-        })[];
-        name: string;
-    }[];
-    showQuestionNumbers: string;
-};

package/dist/uploadingVideoTemplate.d.ts

@@ -1,8 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-/**
- * Get translated template for uploading video message.
- *
- * @param trial - JsPsych trial object containing trial params
- * @returns Uploading video message HTML
- */
-export declare const uploadingVideo: (trial: TrialType<PluginInfo>) => string;

package/dist/utils.d.ts

@@ -1,14 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-/**
- * Pulled from EFP. Function to convert researcher's text to HTML.
- *
- * @param text - Text
- * @returns Formatted string
- */
-export declare const expFormat: (text?: string | string[]) => string;
-/**
- * Initialize i18next with parameters from trial.
- *
- * @param trial - Trial data including user supplied parameters.
- */
-export declare const setLocale: (trial: TrialType<PluginInfo>) => void;

package/dist/videoConfigTemplate.d.ts

@@ -1,33 +0,0 @@
-import { PluginInfo, TrialType } from "jspsych";
-type VideoConfigTemplateParams = {
-    webcam_container_id: string;
-    reload_button_id_cam: string;
-    camera_selection_id: string;
-    mic_selection_id: string;
-    step1_id: string;
-    step2_id: string;
-    step3_id: string;
-    step_complete_class: string;
-    reload_button_id_text: string;
-    next_button_id: string;
-    waiting_for_access_msg_id: string;
-    checking_mic_msg_id: string;
-    access_problem_msg_id: string;
-    setup_problem_msg_id: string;
-    chromeInitialPrompt: string;
-    chromeAlwaysAllow: string;
-    chromePermissions: string;
-    firefoxInitialPrompt: string;
-    firefoxChooseDevice: string;
-    firefoxDevicesBlocked: string;
-    checkmarkIcon: string;
-};
-/**
- * Get translated template for video config.
- *
- * @param trial - JsPsych trial object containing trial params
- * @param html_params - Additional context variables for the template.
- * @returns Video config HTML
- */
-export declare const videoConfig: (trial: TrialType<PluginInfo>, html_params: VideoConfigTemplateParams) => string;
-export {};