Function useTourEngine

src/hooks/useTourEngine.ts:33–106

(props: Props)

}

export default function useTourEngine(props: Props): UseTourEngineReturn {
  const mergedProps = useMemoDeepCompare(() => mergeProps(defaultProps, props), [props]);
  const { debug, initialStepIndex, onEvent, run, stepIndex, steps } = mergedProps;

  const store = useRef(createStore(mergedProps));
  const state = useSyncExternalStore<StoreState>(
    store.current.subscribe,
    store.current.getSnapshot,
    store.current.getServerSnapshot,
  );

  const [failures, setFailures] = useState<StepFailure[]>([]);

  const addFailure: AddFailure = useCallback((failedStep, reason) => {
    setFailures(previous => [...previous, { reason, step: failedStep }]);
  }, []);

  const clearFailures = useCallback(() => {
    setFailures([]);
  }, []);

  useDebugLogger(store, debug);

  const controls = useControls(store, debug, clearFailures);
  const emitEvent = useEventEmitter(onEvent, controls, store);

  const { index, size, status } = state;

  const previousState = usePrevious(state);

  const step = useMemo(() => getMergedStep(mergedProps, steps[index]), [index, mergedProps, steps]);

  useMount(() => {
    if (run && size && validateSteps(steps, debug)) {
      controls.start(stepIndex ?? initialStepIndex);
    }
  });

  useUpdateEffect(() => {
    if (run && size && status === STATUS.IDLE) {
      store.current.updateState({ status: STATUS.READY });
    }
  }, [run, size, status]);

  usePropSync({
    controls,
    emitEvent,
    props: mergedProps,
    state,
    store,
  });

  useLifecycleEffect({
    addFailure,
    controls,
    emitEvent,
    previousState,
    props: mergedProps,