@adriansteffan/reactive 0.0.44 → 0.1.1

package/dist/{web-o3I0sgwu.js → web-DOXm98lr.js}

@@ -1,4 +1,4 @@
-import { W as e } from "./mod-D6DlS3ur.js";
+import { W as e } from "./mod-Beb0Bz3s.js";
 class s extends e {
   async enable() {
     console.log("Immersive mode is only available on Android");

package/dist/{web-D7VcCd-t.js → web-aMUVS_EB.js}

@@ -1,4 +1,4 @@
-import { W as P, b as x, E } from "./mod-D6DlS3ur.js";
+import { W as P, b as x, E } from "./mod-Beb0Bz3s.js";
 function m(w) {
   const e = w.split("/").filter((t) => t !== "."), r = [];
   return e.forEach((t) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adriansteffan/reactive",
-  "version": "0.0.44",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/canvasblock.tsx

@@ -10,11 +10,14 @@ import {
   UnifiedBytecodeInstruction,
   ExecuteContentInstruction,
   Store,
-  RefinedTrialData,
+  TrialResult,
   CanvasResultData,
 } from '../utils/bytecode';
 import { BaseComponentProps, isFullscreen, now } from '../utils/common';
 import { registerSimulation, ParticipantState } from '../utils/simulation';
+import { registerFlattener, arrayFlattener } from '../utils/upload';
+
+registerFlattener('CanvasBlock', 'canvas', arrayFlattener);
 
 export type SlideSimulatorResult = {
   key: string | null;
@@ -37,12 +40,12 @@ interface CanvasSlide {
   allowedKeys?: string[] | boolean;
   metadata?:
     | Record<string, any>
-    | ((data?: RefinedTrialData[], store?: Store) => Record<string, any>);
+    | ((data?: TrialResult[], store?: Store) => Record<string, any>);
   nestMetadata?: boolean;
   simulate?: SlideSimulator;
 }
 
-type DynamicCanvasSlideGenerator = (data: RefinedTrialData[], store: Store) => CanvasSlide;
+type DynamicCanvasSlideGenerator = (data: TrialResult[], store: Store) => CanvasSlide;
 
 function isDynamicCanvasSlideGenerator(content: any): content is DynamicCanvasSlideGenerator {
   return typeof content === 'function';
@@ -77,7 +80,7 @@ export default function CanvasBlock({
   const isDrawingVisibleRef = useRef<boolean>(true);
   const responseRegisteredRef = useRef<null | Record<string, any>>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const dataRef = useRef<RefinedTrialData[]>([]);
+  const dataRef = useRef<TrialResult[]>([]);
   const storeRef = useRef<Store>(store ?? {});
   const animationFrameRef = useRef<number | null>(null);
   const contentInstructionsCompletedRef = useRef(0);
@@ -513,7 +516,7 @@ registerSimulation('CanvasBlock', (trialProps, experimentState, simulators, part
   let slideNumber = 0;
 
   const getStore = () => innerStore;
-  const getData = () => innerData as RefinedTrialData[];
+  const getData = () => innerData as TrialResult[];
   const onUpdateStore = (s: Store) => { innerStore = s; };
 
   let pointer = advanceToNextContent(bytecode, 0, getStore, getData, onUpdateStore);

package/src/components/checkdevice.tsx

@@ -1,6 +1,9 @@
 import { BaseComponentProps } from '../mod';
 import { useEffect, useRef, useState } from 'react';
 import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('CheckDevice', 'session');
 
 registerSimulation('CheckDevice', (_trialProps, _experimentState, _simulators, participant) => {
   const deviceInfo = {

package/src/components/enterfullscreen.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
 import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
 import Text from '../components/text';
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
 import { Capacitor } from '@capacitor/core';
 
+registerFlattener('EnterFullscreen', 'session');
 registerSimulation('EnterFullscreen', noopSimulate, {});
 
 export default function EnterFullscreen({

package/src/components/exitfullscreen.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useRef, useEffect } from 'react';
 import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
 import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
 import { Capacitor } from '@capacitor/core';
 
+registerFlattener('ExitFullscreen', 'session');
 registerSimulation('ExitFullscreen', noopSimulate, {});
 
 export default function ExitFullscreen({

package/src/components/experimentrunner.tsx

@@ -8,7 +8,7 @@ import {
   advanceToNextContent,
   applyMetadata,
   TimelineItem,
-  RefinedTrialData,
+  TrialResult,
   ComponentResultData,
 } from '../utils/bytecode';
 import {
@@ -60,13 +60,14 @@ const defaultCustomQuestions: ComponentsMap = {
 interface RuntimeComponentContent {
   name?: string;
   type: string;
+  csv?: string | string[];
   collectRefreshRate?: boolean;
   hideSettings?: string[] | boolean;
   metadata?:
     | Record<string, any>
-    | ((data: RefinedTrialData[], store: Store) => Record<string, any>);
+    | ((data: TrialResult[], store: Store) => Record<string, any>);
   nestMetadata?: boolean;
-  props?: Record<string, any> | ((data: RefinedTrialData[], store: Store) => Record<string, any>);
+  props?: Record<string, any> | ((data: TrialResult[], store: Store) => Record<string, any>);
   simulate?: SimulateFunction | boolean;
   simulators?: Record<string, any>;
 }
@@ -95,8 +96,7 @@ export default function ExperimentRunner({
     return compileTimeline(timeline);
   }, [timeline]);
 
-  const [instructionPointer, setInstructionPointer] = useState(0);
-  const dataRef = useRef<RefinedTrialData[]>((() => {
+  const dataRef = useRef<TrialResult[]>((() => {
     const urlParams: Record<string, any> = {};
     const searchParams = new URLSearchParams(window.location.search);
     for (const [key, value] of searchParams.entries()) {
@@ -150,6 +150,16 @@ export default function ExperimentRunner({
   const lastTrialEndTimeRef = useRef(now());
   const experimentStoreRef = useRef<Store>({});
 
+  const [instructionPointer, setInstructionPointer] = useState(() =>
+    advanceToNextContent(
+      trialByteCode,
+      0,
+      () => experimentStoreRef.current,
+      () => dataRef.current,
+      (s) => { experimentStoreRef.current = { ...experimentStoreRef.current, ...s }; },
+    )
+  );
+
   const simulationMode =
     (!disableHybridSimulation && getParam('hybridSimulation', false, 'boolean'))
       ? 'hybrid' as const
@@ -199,6 +209,7 @@ export default function ExperimentRunner({
           duration: endTime - startTime,
           type: content.type,
           name: content.name ?? '',
+          ...(content.csv !== undefined ? { csv: content.csv } : {}),
           responseData: componentResponseData,
         };
 
@@ -396,8 +407,9 @@ export default function ExperimentRunner({
       <div
         className={` ${
           config.showProgressBar ? '' : 'hidden '
-        } px-4 mt-4 sm:mt-12 max-w-2xl mx-auto flex-1 h-6 bg-gray-200 rounded-full overflow-hidden`}
+        } px-4 mt-4 sm:mt-12 max-w-2xl mx-auto`}
       >
+        <div className='flex-1 h-6 bg-gray-200 rounded-full overflow-hidden'>
         <div
           className={`h-full bg-gray-200 rounded-full duration-300 ${
             progress > 0 ? ' border-black border-2' : ''
@@ -410,6 +422,7 @@ export default function ExperimentRunner({
             transition: 'width 300ms ease-in-out',
           }}
         />
+        </div>
       </div>
       {componentToRender}
     </div>

package/src/components/microphonecheck.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect } from 'react';
 import { VoiceRecorder } from './voicerecorder';
 import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
 
+registerFlattener('MicrophoneCheck', 'session');
 registerSimulation('MicrophoneCheck', noopSimulate, {});
 
 interface MicrophoneDevice {
@@ -156,7 +158,7 @@ const MicrophoneCheck = ({ next }: { next: (data: object) => void }) => {
           <div className='mt-16 flex justify-center'>
             <button
               onClick={() => next({})}
-              className='bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+              className='bg-white cursor-pointer px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
             >
               Next
             </button>

package/src/components/plaininput.tsx

@@ -1,6 +1,9 @@
 import { BaseComponentProps } from '../mod';
 import { useState } from 'react';
 import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('PlainInput', 'session');
 
 registerSimulation('PlainInput', (trialProps, _experimentState, simulators, participant) => {
   const result = simulators.respond(trialProps, participant);

package/src/components/prolificending.tsx

@@ -1,7 +1,9 @@
 import { BaseComponentProps, getParam, registerComponentParams } from '../utils/common';
 import Text from '../components/text';
 import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
 
+registerFlattener('ProlificEnding', null);
 registerSimulation('ProlificEnding', noopSimulate, {});
 
 registerComponentParams('ProlificEnding', [

package/src/components/quest.tsx

@@ -4,6 +4,9 @@ import { ReactQuestionFactory, Survey, SurveyQuestionElementBase } from 'survey-
 import { ContrastLight } from 'survey-core/themes';
 import 'survey-core/survey-core.min.css';
 import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('Quest', 'session');
 
 registerSimulation('Quest', (trialProps, _experimentState, simulators, participant) => {
   const responseData: Record<string, any> = {};

package/src/components/storeui.tsx

@@ -1,6 +1,9 @@
 import { BaseComponentProps } from '../mod';
 import React, { useState, useEffect } from 'react';
 import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('StoreUI', 'storeui');
 
 interface BaseFieldConfig {
   type: 'string' | 'integer' | 'float' | 'boolean';

package/src/components/text.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { BaseComponentProps, now } from '../mod';
 import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('Text', 'text');
 
 registerSimulation('Text', (trialProps, _experimentState, simulators, participant) => {
   const result = simulators.respond(trialProps, participant);

package/src/components/upload.tsx

@@ -14,7 +14,7 @@ import {
 } from '../utils/common';
 import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
-import { buildUploadFiles, convertArrayOfObjectsToCSV, CSVBuilder } from '../utils/upload';
+import { buildUploadFiles, convertArrayOfObjectsToCSV } from '../utils/upload';
 import { registerSimulation, getBackendUrl, getInitialParticipant } from '../utils/simulation';
 
 registerSimulation('Upload', async (trialProps, experimentState, _simulators, participant) => {
@@ -24,8 +24,7 @@ registerSimulation('Upload', async (trialProps, experimentState, _simulators, pa
     data: experimentState.data || [],
     store: experimentState.store,
     generateFiles: trialProps.generateFiles,
-    sessionCSVBuilder: trialProps.sessionCSVBuilder,
-    trialCSVBuilder: trialProps.trialCSVBuilder,
+    sessionData: trialProps.sessionData,
     uploadRaw: trialProps.uploadRaw ?? true,
   });
 
@@ -72,21 +71,21 @@ interface UploadResponse {
   message?: string;
 }
 
-// TODO: deduplicate values with upload function below
-registerComponentParams('Upload', [
+const UPLOAD_PARAMS = [
   {
     name: 'upload',
     defaultValue: true,
-    type: 'boolean',
+    type: 'boolean' as const,
     description: 'Upload the data at the end of the experiment?',
   },
   {
     name: 'download',
     defaultValue: false,
-    type: 'boolean',
+    type: 'boolean' as const,
     description: 'Locally download the data at the end of the experiment?',
   },
-]);
+];
+registerComponentParams('Upload', UPLOAD_PARAMS);
 
 
 interface FileBackend {
@@ -224,18 +223,16 @@ export default function Upload({
   store,
   sessionID,
   generateFiles,
-  sessionCSVBuilder,
-  trialCSVBuilder,
+  sessionData,
   uploadRaw = true,
   autoUpload = false,
   androidFolderName,
 }: BaseComponentProps & {
   sessionID?: string | null;
-  generateFiles: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
-  sessionCSVBuilder: CSVBuilder;
-  trialCSVBuilder: {flatteners: Record<string, ((item: TrialData) => Record<string, any>[] | Record<string, Record<string, any>[]>)>, builders: CSVBuilder[]};
-  uploadRaw: boolean;
-  autoUpload: boolean;
+  generateFiles?: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
+  sessionData?: Record<string, any>;
+  uploadRaw?: boolean;
+  autoUpload?: boolean;
   androidFolderName?: string;
 }) {
   const [uploadState, setUploadState] = useState<'initial' | 'uploading' | 'success' | 'error'>(
@@ -243,8 +240,10 @@ export default function Upload({
   );
   const uploadInitiatedRef = useRef(false);
 
-  const shouldUpload = getParam('upload', true, 'boolean');
-  const shouldDownload = getParam('download', false, 'boolean');
+  const uploadParam = UPLOAD_PARAMS.find(p => p.name === 'upload')!;
+  const downloadParam = UPLOAD_PARAMS.find(p => p.name === 'download')!;
+  const shouldUpload = getParam(uploadParam.name, uploadParam.defaultValue, uploadParam.type);
+  const shouldDownload = getParam(downloadParam.name, downloadParam.defaultValue, downloadParam.type);
 
   const uploadData = useMutation({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -299,8 +298,7 @@ export default function Upload({
       data,
       store,
       generateFiles,
-      sessionCSVBuilder,
-      trialCSVBuilder,
+      sessionData,
       uploadRaw,
     });
 
@@ -401,7 +399,7 @@ export default function Upload({
           </div>
           <button
             onClick={handleUpload}
-            className='px-4 py-2 cursor-pointer bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
+            className='cursor-pointer bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
           >
             Try Again
           </button>

package/src/index.css

@@ -31,26 +31,6 @@
 }
 
 
-@keyframes slideDown {
-  0% {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

package/src/mod.tsx

@@ -5,6 +5,7 @@ export type { BaseComponentProps, ExperimentConfig };
 export * from './utils/array';
 export * from './utils/common';
 export * from './utils/simulation';
+export { registerFlattener, arrayFlattener } from './utils/upload';
 export * from './components';
 
 export * from 'react-toastify';

package/src/utils/bytecode.ts

@@ -11,6 +11,8 @@ type BaseTrialData = {
 export type ComponentResultData = BaseTrialData & {
   type: string;
   name: string;
+  /** Per-trial override for which CSV file(s) this trial's data goes into. When set on a timeline item, overrides the component type's default from the flattener registry. */
+  csv?: string | string[];
   responseData?: any;
   metadata?: Record<string, any>;
 };
@@ -21,16 +23,16 @@ export type CanvasResultData = BaseTrialData & {
   reactionTime: number | null;
 };
 
-export type RefinedTrialData = ComponentResultData | CanvasResultData;
+export type TrialResult = ComponentResultData | CanvasResultData;
 
 export interface MarkerItem {
   type: 'MARKER';
   id: string;
 }
 
-export type ConditionalFunction = (data?: RefinedTrialData[], store?: Store) => boolean;
+export type ConditionalFunction = (data?: TrialResult[], store?: Store) => boolean;
 
-export type StoreUpdateFunction = (data?: RefinedTrialData[], store?: Store) => Record<string, any>;
+export type StoreUpdateFunction = (data?: TrialResult[], store?: Store) => Record<string, any>;
 
 export interface IfGotoItem {
   type: 'IF_GOTO';
@@ -65,12 +67,12 @@ export interface ExecuteContentInstruction {
 }
 export interface IfGotoInstruction {
   type: 'IfGoto';
-  cond: (store: Store, data: RefinedTrialData[]) => boolean;
+  cond: (store: Store, data: TrialResult[]) => boolean;
   marker: string;
 }
 export interface UpdateStoreInstruction {
   type: 'UpdateStore';
-  fun: (store: Store, data: RefinedTrialData[]) => Store;
+  fun: (store: Store, data: TrialResult[]) => Store;
 }
 export type UnifiedBytecodeInstruction =
   | ExecuteContentInstruction
@@ -95,16 +97,16 @@ export function compileTimeline(timeline: TimelineItem[]): {
 
   function adaptCondition(
     userCondition: ConditionalFunction,
-  ): (store: Store, data: RefinedTrialData[]) => boolean {
-    return (runtimeStore: Store, runtimeData: RefinedTrialData[]): boolean => {
+  ): (store: Store, data: TrialResult[]) => boolean {
+    return (runtimeStore: Store, runtimeData: TrialResult[]): boolean => {
       return userCondition(runtimeData, runtimeStore);
     };
   }
 
   function adaptUpdate(
     userUpdateFunction: StoreUpdateFunction,
-  ): (store: Store, data: RefinedTrialData[]) => Store {
-    return (runtimeStore: Store, runtimeData: RefinedTrialData[]): Store => {
+  ): (store: Store, data: TrialResult[]) => Store {
+    return (runtimeStore: Store, runtimeData: TrialResult[]): Store => {
       const updates = userUpdateFunction(runtimeData, runtimeStore);
       if (typeof updates === 'object' && updates !== null) {
         return {
@@ -215,7 +217,7 @@ export function compileTimeline(timeline: TimelineItem[]): {
 export function applyMetadata<T extends Record<string, any>>(
   trialData: T,
   content: { metadata?: any; nestMetadata?: boolean },
-  data: RefinedTrialData[],
+  data: TrialResult[],
   store: Store,
 ): T {
   const metadata = typeof content.metadata === 'function' ? content.metadata(data, store) : content.metadata;
@@ -228,7 +230,7 @@ export function advanceToNextContent(
   bytecode: { instructions: UnifiedBytecodeInstruction[]; markers: Record<string, number> },
   fromPointer: number,
   getStore: () => Store,
-  getData: () => RefinedTrialData[],
+  getData: () => TrialResult[],
   onUpdateStore: (newStore: Store) => void,
 ): number {
   let pointer = fromPointer;

package/src/utils/common.ts

@@ -24,6 +24,8 @@ export interface TrialData {
   trialNumber: number;
   type: string;
   name: string;
+  /** Populated from the timeline item's csv field. Overrides the component type's default CSV target from the flattener registry. */
+  csv?: string | string[];
   responseData: any;
   start: number;
   end: number;
@@ -68,13 +70,14 @@ export function getParam<T extends ParamType>(
   defaultValue: ParamValue<T>,
   type: T = 'string' as T,
   description?: string,
+  uiDefault?: string,
 ): ParamValue<T> {
   let registryEntry = sharedRegistry.find((p) => p.name === name);
 
   if (!registryEntry) {
     registryEntry = {
       name,
-      defaultValue,
+      defaultValue: uiDefault !== undefined ? uiDefault : defaultValue,
       type,
       description,
       value: undefined,

package/src/utils/simulation.ts

@@ -4,7 +4,7 @@ import {
   compileTimeline,
   advanceToNextContent,
   applyMetadata,
-  RefinedTrialData,
+  TrialResult,
   ComponentResultData,
   TimelineItem,
   Store,
@@ -23,7 +23,7 @@ export type SimulatorResult = {
 export type SimulateFunction = (
   trialProps: Record<string, any>,
   experimentState: {
-    data: RefinedTrialData[];
+    data: TrialResult[];
     store: Store;
   },
   simulators: Record<string, any>,
@@ -55,7 +55,7 @@ export const noopSimulate: SimulateFunction = (_trialProps, _experimentState, _s
   participantState: participant,
 });
 
-export function resolveSimulation(content: any, data: RefinedTrialData[], store: Store) {
+export function resolveSimulation(content: any, data: TrialResult[], store: Store) {
   const trialProps =
     typeof content.props === 'function' ? content.props(data, store) : content.props || {};
   const registration = simulationRegistry[content.type];
@@ -80,12 +80,12 @@ export function getInitialParticipant() { return _initialParticipant; }
 export async function simulateParticipant(
   timeline: TimelineItem[],
   participant: ParticipantState,
-): Promise<RefinedTrialData[]> {
+): Promise<TrialResult[]> {
   _initialParticipant = { ...participant };
   let currentParticipantState = { ...participant };
   const bytecode = compileTimeline(timeline);
   let store: Store = {};
-  const data: RefinedTrialData[] = [
+  const data: TrialResult[] = [
     {
       index: -1,
       trialNumber: -1,
@@ -138,6 +138,7 @@ export async function simulateParticipant(
       duration,
       type: content.type,
       name: content.name ?? '',
+      ...(content.csv !== undefined ? { csv: content.csv } : {}),
       responseData: result.responseData,
     };