@adriansteffan/reactive 0.0.26 → 0.0.27

package/src/utils/bytecode.ts

@@ -0,0 +1,178 @@
+export type Store = Record<string, any>;
+
+type BaseTrialData = {
+    index: number;
+    trialNumber: number;
+    start: number;
+    end: number;
+    duration: number;
+};
+
+export type ComponentResultData = BaseTrialData & {
+    type: string;
+    name: string;
+    responseData?: any;
+};
+
+export type CanvasResultData = BaseTrialData & {
+    metadata?: Record<string, any>;
+    key: string | null;
+    reactionTime: number | null;
+};
+
+export type RefinedTrialData = ComponentResultData | CanvasResultData;
+
+export interface MarkerItem { type: 'MARKER'; id: string; }
+
+export type ConditionalFunction = (data?: RefinedTrialData[], store?: Store) => boolean;
+
+export type StoreUpdateFunction = (data?: RefinedTrialData[], store?: Store) => Record<string, any>;
+
+export interface IfGotoItem { type: 'IF_GOTO'; cond: ConditionalFunction; marker: string; }
+export interface UpdateStoreItem { type: 'UPDATE_STORE'; fun: StoreUpdateFunction; }
+export interface IfBlockItem { type: 'IF_BLOCK'; cond: ConditionalFunction; timeline: TimelineItem[]; }
+export interface WhileBlockItem { type: 'WHILE_BLOCK'; cond: ConditionalFunction; timeline: TimelineItem[]; }
+export type ControlFlowItem = MarkerItem | IfGotoItem | UpdateStoreItem | IfBlockItem | WhileBlockItem;
+export type TimelineItem = ControlFlowItem | any;
+
+export interface ExecuteContentInstruction { type: 'ExecuteContent'; content: any; }
+export interface IfGotoInstruction {
+    type: 'IfGoto';
+    cond: (store: Store, data: RefinedTrialData[]) => boolean;
+    marker: string;
+}
+export interface UpdateStoreInstruction {
+    type: 'UpdateStore';
+    fun: (store: Store, data: RefinedTrialData[]) => Store;
+}
+export type UnifiedBytecodeInstruction = ExecuteContentInstruction | IfGotoInstruction | UpdateStoreInstruction;
+
+function prefixUserMarkers(marker: string): string {
+    return `user_${marker}`;
+}
+
+export function compileTimeline(
+    timeline: TimelineItem[]
+): {
+    instructions: UnifiedBytecodeInstruction[];
+    markers: { [key: string]: number };
+} {
+    const instructions: UnifiedBytecodeInstruction[] = [];
+    const markers: { [key: string]: number } = {};
+    let uniqueMarkerCounterForThisRun = 0;
+
+    function getUniqueMarker(prefix: string): string {
+        return `${prefix}_auto_${uniqueMarkerCounterForThisRun++}`;
+    }
+
+    function adaptCondition(
+        userCondition: ConditionalFunction
+    ): (store: Store, data: RefinedTrialData[]) => boolean {
+        return (runtimeStore: Store, runtimeData: RefinedTrialData[]): boolean => {
+            return userCondition(runtimeData, runtimeStore);
+        };
+    }
+
+    function adaptUpdate(
+        userUpdateFunction: StoreUpdateFunction
+    ): (store: Store, data: RefinedTrialData[]) => Store {
+        return (runtimeStore: Store, runtimeData: RefinedTrialData[]): Store => {
+            const updates = userUpdateFunction(runtimeData, runtimeStore);
+            if (typeof updates === 'object' && updates !== null) {
+                return {
+                    ...runtimeStore,
+                    ...updates,
+                };
+            } else {
+                console.warn("Store update function did not return an object. Store remains unchanged.", { data: runtimeData, store: runtimeStore });
+                return runtimeStore;
+            }
+        };
+    }
+
+    function processTimeline(items: TimelineItem[]) {
+        for (const item of items) {
+            let isControlFlow = false;
+
+            if (typeof item === 'object' && item !== null && 'type' in item) {
+                const itemType = item.type;
+
+                switch (itemType) {
+                    case 'MARKER': {
+                        const markerItem = item as MarkerItem;
+                        markers[prefixUserMarkers(markerItem.id)] = instructions.length;
+                        isControlFlow = true;
+                        break;
+                    }
+                    case 'IF_GOTO': {
+                        const ifGotoItem = item as IfGotoItem;
+                        const runtimeConditionFunc = adaptCondition(ifGotoItem.cond);
+                        instructions.push({
+                            type: 'IfGoto',
+                            cond: runtimeConditionFunc,
+                            marker: prefixUserMarkers(ifGotoItem.marker),
+                        });
+                        isControlFlow = true;
+                        break;
+                    }
+                    case 'UPDATE_STORE': {
+                        const updateStoreItem = item as UpdateStoreItem;
+                        const runtimeUpdateFunc = adaptUpdate(updateStoreItem.fun);
+                        instructions.push({
+                            type: 'UpdateStore',
+                            fun: runtimeUpdateFunc,
+                        });
+                        isControlFlow = true;
+                        break;
+                    }
+                    case 'IF_BLOCK': {
+                        const ifBlockItem = item as IfBlockItem;
+                        const endMarker = getUniqueMarker('if_end');
+                        const runtimeConditionFunc = adaptCondition(ifBlockItem.cond);
+                        instructions.push({
+                            type: 'IfGoto',
+                            cond: (store, data) => !runtimeConditionFunc(store, data),
+                            marker: endMarker,
+                        });
+                        processTimeline(ifBlockItem.timeline);
+                        markers[endMarker] = instructions.length;
+                        isControlFlow = true;
+                        break;
+                    }
+                    case 'WHILE_BLOCK': {
+                        const whileBlockItem = item as WhileBlockItem;
+                        const startMarker = getUniqueMarker('while_start');
+                        const endMarker = getUniqueMarker('while_end');
+                        const runtimeConditionFunc = adaptCondition(whileBlockItem.cond);
+                        markers[startMarker] = instructions.length;
+                        instructions.push({
+                            type: 'IfGoto',
+                            cond: (store, data) => !runtimeConditionFunc(store, data),
+                            marker: endMarker,
+                        });
+                        processTimeline(whileBlockItem.timeline);
+                        instructions.push({
+                            type: 'IfGoto',
+                            cond: () => true,
+                            marker: startMarker,
+                        });
+                        markers[endMarker] = instructions.length;
+                        isControlFlow = true;
+                        break;
+                    }
+                }
+            }
+
+            if (!isControlFlow) {
+                instructions.push({
+                    type: 'ExecuteContent',
+                    content: item,
+                });
+            }
+        }
+    }
+
+    processTimeline(timeline);
+
+    return { instructions, markers };
+}

package/src/utils/common.ts

@@ -1,16 +1,17 @@
-import { Capacitor } from "@capacitor/core";
+import { Capacitor } from '@capacitor/core';
 
-export function now() {
+
+export function now(){
   return Math.round(performance.now());
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function shuffle(array: any[]) {
-  for (let i = array.length - 1; i >= 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-  return array;
+export function isFullscreen(): boolean {
+  return !!(
+    document.fullscreenElement ||
+    (document as any).webkitFullscreenElement ||
+    (document as any).mozFullScreenElement ||
+    (document as any).msFullscreenElement
+  );
 }
 
 export function isDesktop() {
@@ -20,10 +21,10 @@ export function isDesktop() {
 // Generic type for all data structures
 export interface TrialData {
   index: number;
-  trialNumber: number,
+  trialNumber: number;
   type: string;
   name: string;
-  data: any;
+  responseData: any;
   start: number;
   end: number;
   duration: number;
@@ -32,55 +33,61 @@ export interface TrialData {
 export interface FileUpload {
   filename: string;
   content: string;
-  encoding: 'base64' | 'utf8';
+  encoding?: 'base64' | 'utf8';
 }
 
 export interface ExperimentConfig {
   showProgressBar: boolean;
 }
 
-export interface Store { [key: string]: any }
+export interface Store {
+  [key: string]: any;
+}
 
 export interface BaseComponentProps {
-  next: (data: object) => void;
+  next: (data?: object, actualStartTime?: number, actualStopTime?: number) => void;
   data: TrialData[];
   store?: Store;
   updateStore: (mergeIn: Store) => void;
 }
 
 type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'json';
+
 type ParamValue<T extends ParamType> = T extends 'number'
-  ? number | undefined
+  ? number
   : T extends 'boolean'
-    ? boolean | undefined
+    ? boolean
     : T extends 'array' | 'json'
-      ? any | undefined
-      : string | undefined;
+      ? any
+      : string;
+
+const sharedRegistry: any[] = [];
 
 export function getParam<T extends ParamType>(
   name: string,
-  defaultValue: ParamValue<T> | undefined,
+  defaultValue: ParamValue<T>,
   type: T = 'string' as T,
-): ParamValue<T> | undefined {
-  // First, check for the parameter in the base64-encoded JSON
-  const encodedJson = new URLSearchParams(window.location.search).get('_b');
-  if (encodedJson) {
-    try {
-      const jsonString = atob(encodedJson);
-      const decodedParams = JSON.parse(jsonString);
-      if (name in decodedParams) {
-        return decodedParams[name];
-      }
-    } catch {
-      // Silently fail if decoding or parsing fails, fallthrough to lower case
-    }
+  description?: string,
+): ParamValue<T> {
+  let registryEntry = sharedRegistry.find((p) => p.name === name);
+
+  if (!registryEntry) {
+    registryEntry = {
+      name,
+      defaultValue,
+      type,
+      description,
+      value: undefined,
+    };
+    sharedRegistry.push(registryEntry);
   }
 
-  //Next, check for the parameter directly in the URL
-  // since this does not have the automatic type conversions of JSON.parse, we have to create helper functionss
   const conversions: Record<ParamType, (v: string) => any> = {
     string: (v) => v,
-    number: (v) => Number(v) || defaultValue,
+    number: (v) => {
+      const num = Number(v);
+      return isNaN(num) ? defaultValue : num;
+    },
     boolean: (v) => v.toLowerCase() === 'true',
     array: (v) => {
       try {
@@ -98,7 +105,7 @@ export function getParam<T extends ParamType>(
     },
   };
 
-  const convertValue = (value: any): ParamValue<T> | undefined => {
+  const convertValue = (value: any): ParamValue<T> => {
     if (
       (type === 'string' && typeof value === 'string') ||
       (type === 'number' && typeof value === 'number') ||
@@ -110,19 +117,52 @@ export function getParam<T extends ParamType>(
     }
 
     if (typeof value === 'string') {
-      if (value.toLowerCase() === 'undefined') return undefined;
+      if (value.toLowerCase() === 'undefined') return defaultValue;
       return conversions[type](value);
     }
 
     return defaultValue;
   };
 
+  // First, check for the parameter in the base64-encoded JSON
+  const encodedJson = new URLSearchParams(window.location.search).get('_b');
+  if (encodedJson) {
+    try {
+      const jsonString = atob(encodedJson);
+      const decodedParams = JSON.parse(jsonString);
+      if (name in decodedParams) {
+        const convertedValue = convertValue(decodedParams[name]);
+        registryEntry.value = convertedValue;
+        return convertedValue;
+      }
+    } catch {
+      // Silently fail if decoding or parsing fails, fallthrough to lower case
+    }
+  }
+
+  // Next, check for the parameter directly in the URL
   const value = new URLSearchParams(window.location.search).get(name);
-  if (value === undefined || value === null) return defaultValue;
-  return convertValue(value);
+  if (value === undefined || value === null) {
+    // If no value found, register default value
+    return defaultValue;
+  }
+
+  const convertedValue = convertValue(value);
+  registryEntry.value = convertedValue;
+  return convertedValue;
 }
 
+const timelineRepresentation: { type: string; name?: string }[] = [];
 
+// Param class that uses the same shared registry
+export class Param {
+  static getRegistry() {
+    return [...sharedRegistry];
+  }
+  static getTimelineRepresentation() {
+    return [...timelineRepresentation];
+  }
+}
 
 export type Platform = 'desktop' | 'mobile' | 'web';
 
@@ -135,3 +175,94 @@ export const getPlatform = (): Platform => {
     return 'web';
   }
 };
+
+const providedComponentParams: Record<string, any> = {};
+
+export function registerExperimentParams(experiment: any[]) {
+  experiment.forEach((item) => {
+    const params = providedComponentParams[item.type];
+    if (params) {
+      for (const param of params) {
+        if(!item.hideSettings || (item.hideSettings !== true && !item.hideSettings.includes(param.name))){
+          sharedRegistry.push(param);
+        }
+      }
+    }
+  });
+}
+
+export function registerComponentParams(
+  type: string,
+  params: { name: string; defaultValue: any; type: string; description?: string }[],
+) {
+  providedComponentParams[type] = params;
+}
+
+export function subsetExperimentByParam(experiment: any[]) {
+  registerExperimentParams(experiment);
+
+  timelineRepresentation.length = 0;
+
+  experiment.forEach((item) => {
+    timelineRepresentation.push({
+      type: item.type ?? 'NoTypeSpecified',
+      name: item.name,
+    });
+  });
+
+  const include = getParam('includeSubset', undefined);
+  const exclude = getParam('excludeSubset', undefined);
+
+  let experimentFiltered = [...experiment];
+
+  if (include) {
+    const includeItems = include.split(',');
+    experimentFiltered = experimentFiltered.filter((item, index) => {
+      const positionMatch = includeItems.some((val: string) => {
+        const num = parseInt(val, 10);
+        return !isNaN(num) && num - 1 === index;
+      });
+      const nameMatch = item.name && includeItems.includes(item.name);
+      return positionMatch || nameMatch;
+    });
+  }
+
+  if (exclude) {
+    const excludeItems = exclude.split(',');
+    experimentFiltered = experimentFiltered.filter((item, index) => {
+      const positionMatch = excludeItems.some((val: string) => {
+        const num = parseInt(val, 10);
+        return !isNaN(num) && num - 1 === index;
+      });
+      const nameMatch = item.name && excludeItems.includes(item.name);
+      return !(positionMatch || nameMatch);
+    });
+  }
+
+  return experimentFiltered;
+}
+
+export function canvasCountdown(seconds: number) {
+  if (seconds <= 0) {
+    return [];
+  }
+  return Array.from({ length: seconds }, (_, i) => {
+    const number = seconds - i;
+
+    return {
+      draw: (ctx: CanvasRenderingContext2D, w: number, h: number) => {
+        ctx.save();
+
+        ctx.fillStyle = 'black';
+        ctx.font = `bold ${Math.min(w, h) * 0.02 * 2}px sans-serif`; // Make countdown text larger
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(number.toString(), w / 2, h / 2);
+
+        ctx.restore();
+      },
+      displayDuration: 1000,
+      ignoreData: true,
+    };
+  });
+}

package/template/.env.template

@@ -1 +1,2 @@
-VITE_PROLIFIC_CODE=""
+VITE_PROLIFIC_CODE=""
+VITE_DISABLE_SETTINGS=FALSE

package/template/src/{App.tsx → Experiment.tsx}

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from 'react';
-import { Experiment, BaseComponentProps, ExperimentConfig } from '@adriansteffan/reactive';
+import { ExperimentRunner, BaseComponentProps, ExperimentConfig } from '@adriansteffan/reactive';
 
 
 const config: ExperimentConfig = { showProgressBar: true };
@@ -108,13 +108,13 @@ const experiment = [
   },
 ];
 
-export default function App() {
+export default function Experiment() {
   return (
-    <Experiment
+    <ExperimentRunner
       config={config}
       timeline={experiment}
       components={{CustomTrial}}
       questions={{CustomQuestion}}
     />
   );
-}
+}

package/template/src/main.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import Experiment from "./Experiment";
 import "@adriansteffan/reactive/style.css";
 import "./index.css";
 import { ExperimentProvider } from "@adriansteffan/reactive";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ExperimentProvider>
-      <App />
+    <ExperimentProvider disableSettings={import.meta.env.VITE_DISABLE_SETTINGS}>
+      <Experiment />
     </ExperimentProvider>
   </React.StrictMode>
-);
+);

package/template/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "noImplicitAny": false,
     "target": "ES5",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable", "ES2015", "ES2016", "ES2017"],