@adriansteffan/reactive 0.0.42 → 0.0.44

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 } 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,24 @@ const CustomTrial = ({ next, maxCount }: BaseComponentProps & { maxCount: number
   );
 };
 
+// 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 +60,9 @@ const CustomQuestion = () => {
   );
 };
 
-const experiment = [
+// --- Timeline ---
+
+export const experiment = [
   {
     name: 'introtext',
     type: 'Text',
@@ -57,9 +80,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 +154,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',