@adriansteffan/reactive 0.0.43 → 0.1.0

package/template/package.json

@@ -47,6 +47,7 @@
     "dev": "vite",
     "backend": "npm run dev --prefix backend",
     "dev:all": "concurrently -n \"FRONT,BACK\" -c \"blue,green\" \"npm run dev\" \"npm run backend\"",
+    "simulate": "npx tsx simulate.ts",
     "build": "tsc && vite build",
     "test": "vitest --silent=false",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -85,6 +86,7 @@
     "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^9.1.0",
+    "tsx": "^4.19.2",
     "electron": "^35.0.0",
     "electron-builder": "^25.1.8",
     "electron-vite": "^3.0.0",

package/template/simulate.ts

@@ -0,0 +1,15 @@
+import { orchestrateSimulation, simulateParticipant, setBackendUrl } from '@adriansteffan/reactive';
+import { experiment, simulationConfig } from './src/Experiment';
+
+// Each simulated participant runs as a separate subprocess to get fresh module-level
+// randomization (e.g., group assignment). The orchestrator spawns workers that re-run
+// this script with _REACTIVE_WORKER_INDEX set.
+if (process.env._REACTIVE_WORKER_INDEX) {
+  const index = parseInt(process.env._REACTIVE_WORKER_INDEX);
+  const participants = simulationConfig.participants;
+  const participant = Array.isArray(participants) ? participants[index] : participants.generator(index);
+  setBackendUrl(process.env._REACTIVE_BACKEND_URL!);
+  await simulateParticipant(experiment, participant);
+} else {
+  await orchestrateSimulation(simulationConfig, import.meta.filename);
+}

package/template/src/Experiment.tsx

@@ -1,12 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState } from 'react';
-import { ExperimentRunner, BaseComponentProps, ExperimentConfig } from '@adriansteffan/reactive';
+import { useState, useRef } from 'react';
+import { ExperimentRunner, BaseComponentProps, ExperimentConfig, registerSimulation, registerFlattener } from '@adriansteffan/reactive';
 
 
 const config: ExperimentConfig = { showProgressBar: true };
 
+// --- Custom Components ---
+
 const CustomTrial = ({ next, maxCount }: BaseComponentProps & { maxCount: number }) => {
   const [count, setCount] = useState(0);
+  const startTime = useRef(performance.now());
 
   return (
     <>
@@ -20,7 +23,7 @@ const CustomTrial = ({ next, maxCount }: BaseComponentProps & { maxCount: number
         onClick={() => {
           setCount(count + 1);
           if (count + 1 === maxCount) {
-            next({});
+            next({ totalTime: performance.now() - startTime.current, clicks: maxCount });
           }
         }}
         className='mt-4 px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
@@ -31,6 +34,28 @@ const CustomTrial = ({ next, maxCount }: BaseComponentProps & { maxCount: number
   );
 };
 
+// Register a flattener to control how this trial's data appears in the CSV.
+// 'customtrial' is the default CSV file name — override per-item with the csv field.
+registerFlattener('CustomTrial', 'customtrial');
+
+// Register a simulation for the custom trial.
+// The decision function determines how fast the participant clicks.
+// The simulate function uses the trial logic (clicking maxCount times) to produce response data.
+registerSimulation('CustomTrial', (trialProps, _experimentState, simulators, participant) => {
+  let totalTime = 0;
+  for (let i = 0; i < (trialProps.maxCount || 1); i++) {
+    const result = simulators.click(trialProps, participant);
+    participant = result.participantState;
+    totalTime += result.value;
+  }
+  return { responseData: { totalTime, clicks: trialProps.maxCount }, participantState: participant, duration: totalTime };
+}, {
+  click: (_trialProps: any, participant: any) => ({
+    value: 200 + Math.random() * 500,
+    participantState: participant,
+  }),
+});
+
 const CustomQuestion = () => {
   return (
     <>
@@ -39,7 +64,9 @@ const CustomQuestion = () => {
   );
 };
 
-const experiment = [
+// --- Timeline ---
+
+export const experiment = [
   {
     name: 'introtext',
     type: 'Text',
@@ -57,9 +84,25 @@ const experiment = [
       ),
     },
   },
+  {
+    name: 'nickname',
+    type: 'PlainInput',
+    props: {
+      content: <p>What is your nickname?</p>,
+      buttonText: 'Submit',
+      placeholder: 'Enter your nickname',
+    },
+    simulators: {
+      respond: (_trialProps: any, participant: any) => ({
+        value: participant.nickname,
+        participantState: participant,
+      }),
+    },
+  },
   {
     name: 'customtrial',
     type: 'CustomTrial',
+    simulate: true,
     props: {
       maxCount: 5,
     },
@@ -115,6 +158,20 @@ export default function Experiment() {
       timeline={experiment}
       components={{CustomTrial}}
       questions={{CustomQuestion}}
+      hybridParticipant={{ id: 0, nickname: 'test' }}
     />
   );
-}
+}
+
+// --- Simulation config ---
+// Define how simulated participants are generated.
+// Each participant is an object whose properties are available in simulator decision functions.
+export const simulationConfig = {
+  participants: {
+    generator: (i: number) => ({
+      id: i,
+      nickname: `participant_${i}`,
+    }),
+    count: 10,
+  },
+};

package/template/src/main.tsx

@@ -6,7 +6,7 @@ import { ExperimentProvider } from "@adriansteffan/reactive";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ExperimentProvider disableSettings={import.meta.env.VITE_DISABLE_SETTINGS}>
+    <ExperimentProvider disableSettings={import.meta.env.VITE_DISABLE_SETTINGS} disableHybridSimulation={!!import.meta.env.VITE_DISABLE_HYBRID_SIMULATION}>
       <Experiment />
     </ExperimentProvider>
   </React.StrictMode>

package/template/tsconfig.json

@@ -1,11 +1,10 @@
 {
   "compilerOptions": {
     "noImplicitAny": false,
-    "target": "ES5",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable", "ES2015", "ES2016", "ES2017"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "downlevelIteration": true,
     "skipLibCheck": true,
 
     /* Bundler mode */

package/tsconfig.json

@@ -4,6 +4,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["node"],
     "module": "ESNext",
     "skipLibCheck": true,
     "declaration": true,

package/vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig(() => {
         fileName: (format: string) => `reactive.${format}.js`,
       },
       rollupOptions: {
-        external: ['react', 'react-dom'],
+        external: ['react', 'react-dom', 'child_process', 'os'],
         output: {
           globals: {
             react: 'React',