@adriansteffan/reactive 0.0.43 → 0.0.44

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

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

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

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

package/package.json

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

package/src/components/canvasblock.tsx

@@ -4,6 +4,8 @@ import { useRef, useEffect, useMemo, useCallback } from 'react';
 
 import {
   compileTimeline,
+  advanceToNextContent,
+  applyMetadata,
   TimelineItem,
   UnifiedBytecodeInstruction,
   ExecuteContentInstruction,
@@ -12,6 +14,18 @@ import {
   CanvasResultData,
 } from '../utils/bytecode';
 import { BaseComponentProps, isFullscreen, now } from '../utils/common';
+import { registerSimulation, ParticipantState } from '../utils/simulation';
+
+export type SlideSimulatorResult = {
+  key: string | null;
+  reactionTime: number | null;
+  participantState: ParticipantState;
+};
+
+export type SlideSimulator = (
+  slide: Record<string, any>,
+  participant: ParticipantState,
+) => SlideSimulatorResult;
 
 interface CanvasSlide {
   draw: (ctx: CanvasRenderingContext2D, width: number, height: number) => void;
@@ -25,6 +39,7 @@ interface CanvasSlide {
     | Record<string, any>
     | ((data?: RefinedTrialData[], store?: Store) => Record<string, any>);
   nestMetadata?: boolean;
+  simulate?: SlideSimulator;
 }
 
 type DynamicCanvasSlideGenerator = (data: RefinedTrialData[], store: Store) => CanvasSlide;
@@ -227,74 +242,41 @@ export default function CanvasBlock({
   }, [instructions, resolveSlideContent, clearCanvas]);
 
   const processControlFlow = useCallback(() => {
-    let foundContentToExecute = false;
     if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
     animationFrameRef.current = null;
 
-    while (!foundContentToExecute && instructionPointerRef.current < instructions.length) {
-      const currentInstruction = instructions[instructionPointerRef.current];
-
-      switch (currentInstruction.type) {
-        case 'IfGoto':
-          if (currentInstruction.cond(storeRef.current, dataRef.current)) {
-            const markerIndex = markers[currentInstruction.marker];
-            if (markerIndex !== undefined) {
-              instructionPointerRef.current = markerIndex;
-            } else {
-              console.error(`Marker ${currentInstruction.marker} not found`);
-              instructionPointerRef.current++;
-            }
-          } else {
-            instructionPointerRef.current++;
-          }
-          continue;
-
-        case 'UpdateStore': {
-          storeRef.current = {
-            ...storeRef.current,
-            ...currentInstruction.fun(storeRef.current, dataRef.current),
-          };
-          instructionPointerRef.current++;
-          continue;
-        }
-        case 'ExecuteContent': {
-          foundContentToExecute = true;
-          if (canvasRef.current) {
-            const currentSlide = resolveSlideContent(currentInstruction);
-            if (currentSlide) {
-              drawSlideInternal(currentSlide);
-              const displayDuration = currentSlide.displayDuration ?? Infinity;
-              const responseTimeLimit = currentSlide.responseTimeLimit ?? Infinity;
-              if (displayDuration !== Infinity || responseTimeLimit !== Infinity) {
-                animationFrameRef.current = requestAnimationFrame(tick);
-              }
-            } else {
-              console.error(
-                'Failed to resolve slide content during control flow:',
-                currentInstruction,
-              );
-              instructionPointerRef.current++;
-              foundContentToExecute = false;
-              continue;
-            }
-          } else {
-            console.error('Canvas element not found during control flow.');
-            return;
-          }
-          break;
-        }
-        default:
-          console.warn('Unknown instruction type during control flow:', currentInstruction);
-          instructionPointerRef.current++;
-          continue;
-      }
-    }
+    const pointer = advanceToNextContent(
+      { instructions, markers },
+      instructionPointerRef.current,
+      () => storeRef.current,
+      () => dataRef.current,
+      (s) => { storeRef.current = s; },
+    );
+    instructionPointerRef.current = pointer;
 
-    if (!foundContentToExecute && instructionPointerRef.current >= instructions.length) {
-      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = null;
+    if (pointer >= instructions.length) {
       updateStore(storeRef.current);
       next(dataRef.current);
+      return;
+    }
+
+    if (!canvasRef.current) {
+      console.error('Canvas element not found during control flow.');
+      return;
+    }
+
+    const currentSlide = resolveSlideContent(instructions[pointer]);
+    if (currentSlide) {
+      drawSlideInternal(currentSlide);
+      const displayDuration = currentSlide.displayDuration ?? Infinity;
+      const responseTimeLimit = currentSlide.responseTimeLimit ?? Infinity;
+      if (displayDuration !== Infinity || responseTimeLimit !== Infinity) {
+        animationFrameRef.current = requestAnimationFrame(tick);
+      }
+    } else {
+      console.error('Failed to resolve slide content during control flow:', instructions[pointer]);
+      instructionPointerRef.current++;
+      processControlFlow();
     }
   }, [instructions, markers, resolveSlideContent, drawSlideInternal, tick, next]);
 
@@ -326,14 +308,7 @@ export default function CanvasBlock({
         reactionTime: responseData ? responseData.reactionTime : null,
       } as CanvasResultData;
 
-      const metadata =
-        typeof slide.metadata === 'function'
-          ? slide.metadata(dataRef.current, storeRef.current)
-          : slide.metadata;
-
-      if (slide.nestMetadata) {
-        trialData = { ...trialData, metadata: metadata };
-      } else trialData = { ...metadata, ...trialData };
+      trialData = applyMetadata(trialData, slide, dataRef.current, storeRef.current);
 
       dataRef.current.push(trialData);
     }
@@ -524,3 +499,70 @@ export default function CanvasBlock({
     </div>
   );
 }
+
+// --- Default simulator ---
+
+registerSimulation('CanvasBlock', (trialProps, experimentState, simulators, participant) => {
+  const timeline = trialProps.timeline;
+  if (!timeline) return { responseData: [], participantState: participant };
+
+  const bytecode = compileTimeline(timeline);
+  const innerData: CanvasResultData[] = [];
+  let innerStore: Store = { ...(experimentState.store || {}) };
+  let currentTime = 0;
+  let slideNumber = 0;
+
+  const getStore = () => innerStore;
+  const getData = () => innerData as RefinedTrialData[];
+  const onUpdateStore = (s: Store) => { innerStore = s; };
+
+  let pointer = advanceToNextContent(bytecode, 0, getStore, getData, onUpdateStore);
+
+  while (pointer < bytecode.instructions.length) {
+    let slide = (bytecode.instructions[pointer] as ExecuteContentInstruction).content;
+    if (typeof slide === 'function') slide = slide(innerData, innerStore);
+
+    const sim = slide.simulate || simulators.respondToSlide;
+    const result = sim(slide, participant);
+    participant = result.participantState;
+
+    if (!slide.ignoreData) {
+      const duration = slide.displayDuration || result.reactionTime || 1000;
+
+      let td: CanvasResultData = {
+        index: pointer,
+        trialNumber: slideNumber,
+        start: currentTime,
+        end: currentTime + duration,
+        duration,
+        key: result.key,
+        reactionTime: result.reactionTime,
+      };
+
+      td = applyMetadata(td, slide, innerData, innerStore);
+
+      innerData.push(td);
+      currentTime += duration;
+    }
+
+    slideNumber++;
+    pointer = advanceToNextContent(bytecode, pointer + 1, getStore, getData, onUpdateStore);
+  }
+
+  return { responseData: innerData, participantState: participant, storeUpdates: innerStore, duration: currentTime };
+}, {
+  respondToSlide: (slide: any, participant: any) => {
+    const keys = slide.allowedKeys;
+    if (keys === true) {
+      return { key: ' ', reactionTime: 200 + Math.random() * 600, participantState: participant };
+    }
+    if (Array.isArray(keys) && keys.length > 0) {
+      return {
+        key: keys[Math.floor(Math.random() * keys.length)],
+        reactionTime: 200 + Math.random() * 600,
+        participantState: participant,
+      };
+    }
+    return { key: null, reactionTime: null, participantState: participant };
+  },
+});

package/src/components/checkdevice.tsx

@@ -1,5 +1,20 @@
 import { BaseComponentProps } from '../mod';
 import { useEffect, useRef, useState } from 'react';
+import { registerSimulation } from '../utils/simulation';
+
+registerSimulation('CheckDevice', (_trialProps, _experimentState, _simulators, participant) => {
+  const deviceInfo = {
+    windowWidth: 1920, windowHeight: 1080, screenWidth: 1920, screenHeight: 1080,
+    browser: 'Simulated', browserVersion: '1.0', isMobile: false,
+    operatingSystem: 'Simulated', hasWebAudio: true, hasFullscreen: true,
+    hasWebcam: true, hasMicrophone: true,
+  };
+  return {
+    responseData: deviceInfo,
+    participantState: participant,
+    storeUpdates: { _reactiveDeviceInfo: deviceInfo },
+  };
+}, {});
 
 interface DeviceInfo {
   windowWidth: number;

package/src/components/enterfullscreen.tsx

@@ -1,11 +1,13 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react'; // Import useState
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
 import Text from '../components/text';
-
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
 import { Capacitor } from '@capacitor/core';
 
+registerSimulation('EnterFullscreen', noopSimulate, {});
+
 export default function EnterFullscreen({
   content,
   buttonText,
@@ -28,7 +30,7 @@ export default function EnterFullscreen({
 
   const [isWaiting, setIsWaiting] = useState(false);
   const listenerFallbackActive = useRef(false);
-  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const cancelPendingTimeout = useCallback(() => {
       if (timeoutId.current) {

package/src/components/exitfullscreen.tsx

@@ -1,9 +1,12 @@
 import { useCallback, useRef, useEffect } from 'react';
 import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
 import { Capacitor } from '@capacitor/core';
 
+registerSimulation('ExitFullscreen', noopSimulate, {});
+
 export default function ExitFullscreen({
   next,
   delayMs = 0,
@@ -12,7 +15,7 @@ export default function ExitFullscreen({
 } & BaseComponentProps) {
   
   const listenerFallbackActive = useRef(false);
-  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const cancelPendingTimeout = useCallback(() => {
     if (timeoutId.current) {

package/src/components/experimentprovider.tsx

@@ -3,11 +3,14 @@ import { ToastContainer } from 'react-toastify';
 
 const queryClient = new QueryClient();
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactNode } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 import { SettingsScreen } from './settingsscreen';
 import { Param } from '../utils/common';
 
-export default function ExperimentProvider({ children, disableSettings }: { children: ReactNode, disableSettings?: boolean }) {
+const HybridSimulationContext = createContext(false);
+export const useHybridSimulationDisabled = () => useContext(HybridSimulationContext);
+
+export default function ExperimentProvider({ children, disableSettings, disableHybridSimulation }: { children: ReactNode, disableSettings?: boolean, disableHybridSimulation?: boolean }) {
  
   if (window.location.pathname.endsWith('/settings') && !disableSettings) {
     return (
@@ -20,7 +23,9 @@ export default function ExperimentProvider({ children, disableSettings }: { chil
 
   return (
     <QueryClientProvider client={queryClient}>
+      <HybridSimulationContext.Provider value={!!disableHybridSimulation}>
       {children}
+      </HybridSimulationContext.Provider>
       <ToastContainer
         position='top-center'
         autoClose={3000}

package/src/components/experimentrunner.tsx

@@ -1,14 +1,22 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import '../index.css';
-import { ExperimentConfig, Store, Param, now } from '../utils/common';
+import { ExperimentConfig, Store, Param, now, getParam } from '../utils/common';
 import { useCallback, useEffect, useMemo, useRef, useState, ComponentType } from 'react';
 import {
   compileTimeline,
+  advanceToNextContent,
+  applyMetadata,
   TimelineItem,
   RefinedTrialData,
   ComponentResultData,
 } from '../utils/bytecode';
+import {
+  ParticipantState,
+  SimulateFunction,
+  resolveSimulation,
+} from '../utils/simulation';
+import { useHybridSimulationDisabled } from './experimentprovider';
 
 import Upload from './upload';
 import Text from './text';
@@ -59,6 +67,8 @@ interface RuntimeComponentContent {
     | ((data: RefinedTrialData[], store: Store) => Record<string, any>);
   nestMetadata?: boolean;
   props?: Record<string, any> | ((data: RefinedTrialData[], store: Store) => Record<string, any>);
+  simulate?: SimulateFunction | boolean;
+  simulators?: Record<string, any>;
 }
 
 function isRuntimeComponentContent(content: any): content is RuntimeComponentContent {
@@ -72,12 +82,15 @@ export default function ExperimentRunner({
   },
   components = {},
   questions = {},
+  hybridParticipant,
 }: {
   timeline: TimelineItem[];
   config?: ExperimentConfig;
   components?: ComponentsMap;
   questions?: ComponentsMap;
+  hybridParticipant?: ParticipantState;
 }) {
+  const disableHybridSimulation = useHybridSimulationDisabled();
   const trialByteCode = useMemo(() => {
     return compileTimeline(timeline);
   }, [timeline]);
@@ -137,6 +150,15 @@ export default function ExperimentRunner({
   const lastTrialEndTimeRef = useRef(now());
   const experimentStoreRef = useRef<Store>({});
 
+  const simulationMode =
+    (!disableHybridSimulation && getParam('hybridSimulation', false, 'boolean'))
+      ? 'hybrid' as const
+      : 'none' as const;
+
+  const participantRef = useRef<ParticipantState>(hybridParticipant || {});
+  // Guards against duplicate simulation in React strict mode
+  const lastSimulatedPointerRef = useRef(-1);
+
   const componentsMap = { ...defaultComponents, ...components };
   const customQuestionsMap: ComponentsMap = { ...defaultCustomQuestions, ...questions };
 
@@ -180,14 +202,7 @@ export default function ExperimentRunner({
           responseData: componentResponseData,
         };
 
-        const metadata =
-          typeof content.metadata === 'function'
-            ? content.metadata(dataRef.current, experimentStoreRef.current)
-            : content.metadata;
-
-        if (content.nestMetadata) {
-          trialData = { ...trialData, metadata: metadata };
-        } else trialData = { ...metadata, ...trialData };
+        trialData = applyMetadata(trialData, content, dataRef.current, experimentStoreRef.current);
         
         dataRef.current = [...dataRef.current, trialData];
         setTotalTrialsCompleted((prevCount) => prevCount + 1);
@@ -199,49 +214,17 @@ export default function ExperimentRunner({
       }
     }
 
-    let nextPointer = instructionPointer + 1;
-    let foundNextContent = false;
-
-    while (nextPointer < trialByteCode.instructions.length) {
-      const nextInstruction = trialByteCode.instructions[nextPointer];
-
-      switch (nextInstruction.type) {
-        case 'IfGoto':
-          if (nextInstruction.cond(experimentStoreRef.current, dataRef.current)) {
-            const markerIndex = trialByteCode.markers[nextInstruction.marker];
-            if (markerIndex !== undefined) {
-              nextPointer = markerIndex;
-              continue;
-            } else {
-              console.error(`Marker ${nextInstruction.marker} not found`);
-              nextPointer++;
-            }
-          } else {
-            nextPointer++;
-          }
-          break;
-
-        case 'UpdateStore':
-          updateStore(nextInstruction.fun(experimentStoreRef.current, dataRef.current));
-          nextPointer++;
-          break;
-
-        case 'ExecuteContent':
-          foundNextContent = true;
-          lastTrialEndTimeRef.current = now();
-          setInstructionPointer(nextPointer);
-          return;
-
-        default:
-          console.error('Unknown instruction type encountered:', nextInstruction);
-          nextPointer++;
-          break;
-      }
-    }
-
-    if (!foundNextContent) {
-      setInstructionPointer(nextPointer);
+    const nextPointer = advanceToNextContent(
+      trialByteCode,
+      instructionPointer + 1,
+      () => experimentStoreRef.current,
+      () => dataRef.current,
+      (s) => updateStore(s),
+    );
+    if (nextPointer < trialByteCode.instructions.length) {
+      lastTrialEndTimeRef.current = now();
     }
+    setInstructionPointer(nextPointer);
   }
 
   const collectRefreshRate = useCallback((callback: (refreshRate: number | null) => void) => {
@@ -341,8 +324,39 @@ export default function ExperimentRunner({
 
   const currentInstruction = trialByteCode.instructions[instructionPointer];
 
+  const shouldSimulate = useMemo(() => {
+    if (simulationMode === 'none') return false;
+    if (currentInstruction?.type !== 'ExecuteContent') return false;
+    const content = currentInstruction.content;
+    if (!isRuntimeComponentContent(content)) return false;
+    if (content.simulate === false) return false;
+    return !!content.simulate || !!content.simulators;
+  }, [instructionPointer, simulationMode, currentInstruction]);
+
+  useEffect(() => {
+    if (!shouldSimulate) return;
+    if (lastSimulatedPointerRef.current === instructionPointer) return;
+    lastSimulatedPointerRef.current = instructionPointer;
+
+    (async () => {
+      const content = (currentInstruction as any).content;
+      const { trialProps, simulateFn, simulators } = resolveSimulation(content, dataRef.current, experimentStoreRef.current);
+
+      const result = await simulateFn(
+        trialProps,
+        { data: dataRef.current, store: experimentStoreRef.current },
+        simulators,
+        participantRef.current,
+      );
+
+      participantRef.current = result.participantState;
+      if (result.storeUpdates) updateStore(result.storeUpdates);
+      next(result.responseData);
+    })();
+  }, [shouldSimulate, instructionPointer]);
+
   let componentToRender = null;
-  if (currentInstruction?.type === 'ExecuteContent') {
+  if (currentInstruction?.type === 'ExecuteContent' && !shouldSimulate) {
     const content = currentInstruction.content;
     if (isRuntimeComponentContent(content)) {
       const Component = componentsMap[content.type];

package/src/components/microphonecheck.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect } from 'react';
 import { VoiceRecorder } from './voicerecorder';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
+
+registerSimulation('MicrophoneCheck', noopSimulate, {});
 
 interface MicrophoneDevice {
   deviceId: string;

package/src/components/mobilefilepermission.tsx

@@ -1,8 +1,11 @@
 import { BaseComponentProps, getPlatform } from '../utils/common';
 import { useEffect, useState } from 'react';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { Capacitor } from '@capacitor/core';
 
+registerSimulation('RequestFilePermission', noopSimulate, {});
+
 export default function RequestFilePermission({ next }: BaseComponentProps) {
   const [permissionStatus, setPermissionStatus] = useState('checking');
   

package/src/components/plaininput.tsx

@@ -1,5 +1,22 @@
 import { BaseComponentProps } from '../mod';
 import { useState } from 'react';
+import { registerSimulation } from '../utils/simulation';
+
+registerSimulation('PlainInput', (trialProps, _experimentState, simulators, participant) => {
+  const result = simulators.respond(trialProps, participant);
+  const typingDuration = String(result.value).length * (50 + Math.random() * 100);
+  return {
+    responseData: { value: result.value },
+    participantState: result.participantState,
+    storeUpdates: trialProps.storeupdate ? trialProps.storeupdate(result.value) : undefined,
+    duration: typingDuration,
+  };
+}, {
+  respond: (_input: any, participant: any) => ({
+    value: 'simulated_input',
+    participantState: participant,
+  }),
+});
 
 function PlainInput({
   content,

package/src/components/prolificending.tsx

@@ -1,5 +1,8 @@
 import { BaseComponentProps, getParam, registerComponentParams } from '../utils/common';
 import Text from '../components/text';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
+
+registerSimulation('ProlificEnding', noopSimulate, {});
 
 registerComponentParams('ProlificEnding', [
   { name: 'cc', defaultValue: '', type: 'string', description: 'Completion code of the Profilic experiment (more commonly supplied via the code)' },

package/src/components/quest.tsx

@@ -3,6 +3,63 @@ import { defaultCss, Model, Question, Serializer } from 'survey-core';
 import { ReactQuestionFactory, Survey, SurveyQuestionElementBase } from 'survey-react-ui';
 import { ContrastLight } from 'survey-core/themes';
 import 'survey-core/survey-core.min.css';
+import { registerSimulation } from '../utils/simulation';
+
+registerSimulation('Quest', (trialProps, _experimentState, simulators, participant) => {
+  const responseData: Record<string, any> = {};
+  let totalDuration = 0;
+  const pages = trialProps.surveyJson?.pages || [{ elements: trialProps.surveyJson?.elements || [] }];
+  for (const page of pages) {
+    for (const el of page.elements || []) {
+      if (!el.name) continue;
+      const result = simulators.answerQuestion(el, participant);
+      participant = result.participantState;
+      responseData[el.name] = result.value;
+      totalDuration += result.duration ?? 0;
+    }
+  }
+  return { responseData, participantState: participant, duration: totalDuration };
+}, {
+  answerQuestion: (question: any, participant: any) => {
+    let value;
+    switch (question.type) {
+      case 'rating': {
+        const min = question.rateMin ?? 1, max = question.rateMax ?? 5;
+        value = min + Math.floor(Math.random() * (max - min + 1));
+        break;
+      }
+      case 'boolean': value = Math.random() > 0.5; break;
+      case 'text': case 'comment': value = 'simulated_response'; break;
+      case 'radiogroup': case 'dropdown': {
+        const c = question.choices?.[Math.floor(Math.random() * (question.choices?.length || 0))];
+        value = c !== undefined ? (typeof c === 'object' ? c.value : c) : null;
+        break;
+      }
+      case 'checkbox': {
+        if (question.choices?.length) {
+          const n = 1 + Math.floor(Math.random() * question.choices.length);
+          value = [...question.choices]
+            .sort(() => Math.random() - 0.5).slice(0, n)
+            .map((c: any) => typeof c === 'object' ? c.value : c);
+        }
+        break;
+      }
+      case 'matrix': {
+        if (question.rows?.length && question.columns?.length) {
+          value = Object.fromEntries(
+            question.rows.map((r: any) => {
+              const col = question.columns[Math.floor(Math.random() * question.columns.length)];
+              return [typeof r === 'object' ? r.value : r, typeof col === 'object' ? col.value : col];
+            }),
+          );
+        }
+        break;
+      }
+      default: value = null;
+    }
+    return { value, participantState: participant, duration: 1000 + Math.random() * 4000 };
+  },
+});
 
 type ComponentsMap = {
   [key: string]: ComponentType<any>;