Read Step options from tour.getCurrentStep()

[cyremur]

For context, I have a tour that I want to advance when the user interacts with a highlighted object in a certain manner.

My component structure looks somewhat like this:

<ShepherdTour steps={steps} tourOptions={tourOptions}>
  <Page>
    <ShepherdTourContext.Consumer>{tour =>
      <TourTarget onClick={()=>advanceTourConditionally(tour) />
    </ShepherdTourContext.Consumer>
  </Page>
</ShepherdTour>

Now when advanceTourConditionally(tour) is triggered, I want to check if I'm in tour step X when the click occurs and if the current step is X then show the next step with tour.next().

I was trying to use tour.getCurrentStep() but the react typing doesn't give me any access to Step.id or Step.options.id, even though it's there when I log tour.getCurrentStep(). I can only access Step.id and log it to console if I force @ts-ignore.

Is it an intentional framework choice to hide Step properties? The Shepherd js main documentation doesn't give a getOptions() function or similar either. What is the intended use of tour.getCurrentStep()?

[cyremur]

Was able to achieve the desired behaviour with tour.getById("step-x").isOpen(), but I'm still confused as to why the Step information is hidden like this.

[RobbieTheWagner]

@cyremur tour.getCurrentStep() should give you the step. If something with the types is hiding things, we would greatly appreciate your help fixing them. The types are here https://github.com/shipshapecode/shepherd/tree/master/src/types

[cyremur]

@rwwagner90 So what I'm missing is the options field of both Tour and Step. I'm not sure if there is a possibility to expose them and keep them immutable, which I assume is desired since at least Step has a dedicated updateStepOptions(options: Step.StepOptions): void;. I don't think it's possible to create a public getter like getOptions() just in the typings.

So with only touching the typings and not the underlying code, I assume one could just add the fields into the typings and have them fully accessible like so:

options: Step.StepOptions;

I can make a PR for exposing the options.

Also, what's your release cycle for Shepherd and the React wrapping? I saw the react version still builds against Shepherd 7.1.0. Is there any chance the new typing can make it into a release soonish or will I have to build against my own fork? :)

[RobbieTheWagner]

@cyremur the options are not meant to be exposed. Options are for building the tour and steps and not necessarily properties that will live on the final thing.

As for releases, we're pretty good about updating. No need for a fork.

[cyremur]

@rwwagner90 I assumed they were meant to be hidden by design. Hm... I think the most important info is really Step.id. This is also part of the Step fields and not only nested in options. Can that be made accessible? I'd be fine in wrapping it in a getter to guarantee immutability, but I think having

Step.getId() {
  return this.id;
}

would be beneficial for more complex tours that advance steps on complicated interaction with Step targets.

Specifically, I am working on a complex web app and want to say something like "Step 1: Type 'Hello World' into this textfield". The tour should then advance when the user actually types 'Hello World', which is a bit to complicated for the Shepherd 8 Step.advanceOn(). That's why I want to build a component TourTarget as described in my first post.

[RobbieTheWagner]

@cyremur anything accessible in vanilla JS should also be exposed when using TS, so if you need some types to expose id please feel free to add them and open a PR! I don't think we need a getter, and should be able to just use step.id if that works normally. Types are here if you want to add it https://github.com/shipshapecode/shepherd/tree/master/src/types

[cyremur]

@cyremur the options are not meant to be exposed. Options are for building the tour and steps and not necessarily properties that will live on the final thing.

As for releases, we're pretty good about updating. No need for a fork.

Just so you know, currently, the JavaScript library as used in the demo website exposes pretty much everything.

That's why I got the idea of just exposing options to React. You might want to consider hiding the properties in the vanilla JS framework if that's possible and intended.

Another candidate to be discussed is Tour.steps. I can access that in the vanilla JS version, however I'm again not sure if it's intended to be used.

Anyway, @rwwagner90 here's a PR to close the issue: shipshapecode/shepherd#1044

[RobbieTheWagner]

@cyremur essentially anything you can do in JS should be possible in TS. We're not intentionally hiding anything. I just think options is mostly internal to step building, so wasn't sure if we really needed types for it.

[chuckcarpenter]

closed by shipshapecode/shepherd#1044