Idea: alternative way to define steps

[knownasilya]

Currently steps are very brittle, because they are dependent on the template but defined outside of it and with duplicated logic. This shows it's ugly head when you start filtering steps based by state in your app and the filtered steps don't necessarily match the UI because you missed something that might have filtered out the step in the UI. The UI should be the source of the steps, since they are describing the UI.

I'd love to see a template based solution for defining steps, something like:

{{#if this.sessionService.isAuthenticated}}
  <TourStep
	@id='user-menu'
	@text='Menu for setting user settings or logging out'
	@next='somethingelse'
  >
    <UserAvatarMenu />
  </TourStep>
{{else}}
  <TourStep
	@id='login'
	@text='Click here to log into the .... application'
	@next='somethotherthing'
  >
    {{#link-to 'login'}}Login{{/link-to}}
  </TourStep>
{{/if}}

<TourStep @id='somethingelse' @text='..'>
  Something here..
</TourStep>

The issue is what order to present the steps and where to start. The order can be defined by using @next='nextid'. The start step could be a special component or a flag on the TourStep component, like @initialStep={{true}}.

[RobbieTheWagner]

@knownasilya couldn't you use the same things you use for your if on the JS side to determine the steps? I'm not opposed to also supporting some sort of template based setup for steps, but I think it's much easier in JS because you can do complex logic to really customize everything.

[knownasilya]

You can, but the issue arises when the location you setup your tour, most likely in the application route, doesn't have access to all of the local data necessary to determine the state. So you start pulling out data into services just for the tour and it's messy.