Render the steps before the tour starts.

By defining the steps as consts in the top level they were
being initialized immediately as the page loads. By having
them initialized in a function it will correctly have access
to everything on the page and not render steps of tours
we aren't going to start.

source/content-scripts/setup.ts

@@ -131,7 +131,7 @@ function startTour(data: TourData, runMainAgainAfterComplete: boolean): void {
 
   // For every step we have, add it to the tour and subsequently add all the
   // event handlers to that step.
-  for (const [stepNumber, stepOptions] of data.steps.entries()) {
+  for (const [stepNumber, stepOptions] of data.steps().entries()) {
     // If the final step doesn't have buttons defined, set the "Continue" button
     // text to "Finish".
     if (

source/tours/interface/account-settings.tsx

@@ -1,18 +1,22 @@
 import {type TourData, TourId} from "../types.js";
 import {renderInContainer} from "../utilities.js";
 
+function renderSteps(): ReturnType<TourData["steps"]> {
   const step01 = renderInContainer(
     <>
       <h1>Your Account Settings</h1>
     </>,
   );
 
-const steps: TourData["steps"] = [
+  return [
     {
       id: "account-settings-01",
       text: step01,
     },
   ];
+}
+
+const steps: TourData["steps"] = renderSteps;
 
 const eventHandlers: TourData["eventHandlers"] = [];
 

source/tours/interface/homepage.tsx

@@ -7,6 +7,7 @@ import {
   renderInContainer,
 } from "../utilities.js";
 
+function renderSteps(): ReturnType<TourData["steps"]> {
   const step01 = renderInContainer(
     <>
       <LoggedOutWarning />
@@ -27,15 +28,15 @@ const step02 = renderInContainer(
       <h1>The Main Header</h1>
 
       <p>
-      On the left there is the Tildes logo and title, which you can click to get
+        On the left there is the Tildes logo and title, which you can click to
-      back to the homepage, or refresh it if you're already there. If you are in
+        get back to the homepage, or refresh it if you're already there. If you
-      a group, the group name will also be shown next to it.
+        are in a group, the group name will also be shown next to it.
       </p>
 
       <p>
-      On the right is the notifications section and your username. When you have
+        On the right is the notifications section and your username. When you
-      unread messages and/or are mentioned, they will show up next to the left
+        have unread messages and/or are mentioned, they will show up next to the
-      of it. If you don't have any notifications right now, you can{" "}
+        left of it. If you don't have any notifications right now, you can{" "}
         <a href="#" onClick={toggleMockNotifications}>
           click here
         </a>{" "}
@@ -43,8 +44,8 @@ const step02 = renderInContainer(
       </p>
 
       <p>
-      At the moment mentions only work in comments, so if you get mentioned in a
+        At the moment mentions only work in comments, so if you get mentioned in
-      topic's text body and don't get a notification,{" "}
+        a topic's text body and don't get a notification,{" "}
         <a target="_blank" href="https://gitlab.com/tildes/tildes/-/issues/195">
           that's why
         </a>
@@ -64,7 +65,11 @@ function toggleMockNotifications(event: Event): void {
     const root = document.querySelector("#site-header .logged-in-user-info");
 
     /* Generic function to toggle a mock notification. */
-  function toggle(existingSelector: string, href: string, text: string): void {
+    function toggle(
+      existingSelector: string,
+      href: string,
+      text: string,
+    ): void {
       const existing =
         root?.querySelector<HTMLElement>(existingSelector) ?? undefined;
       if (existing === undefined) {
@@ -97,9 +102,9 @@ const step03 = renderInContainer(
       <h1>The Listing Options</h1>
 
       <p>
-      Right below the main header are the topic listing options. These determine
+        Right below the main header are the topic listing options. These
-      how the topics in the listing are sorted and from what period topics
+        determine how the topics in the listing are sorted and from what period
-      should be shown.
+        topics should be shown.
       </p>
 
       <p>
@@ -121,14 +126,15 @@ const step03 = renderInContainer(
       </ul>
 
       <p>
-      Then the first <b>Activity</b> sort will sort topics by bumping topics up
+        Then the first <b>Activity</b> sort will sort topics by bumping topics
-      as they receive comments, however this sort makes use of comment labels.
+        up as they receive comments, however this sort makes use of comment
+        labels.
       </p>
 
       {/* TODO: When the comment labels tour is made, change the prose. */}
       <p>
-      If you don't know what comment labels are yet, don't worry, there will be
+        If you don't know what comment labels are yet, don't worry, there will
-      a tour that explains them. But in short they are a community tool to
+        be a tour that explains them. But in short they are a community tool to
         emphasize and de-emphasize comments, similar to votes but with more
         specific intention. If you'd like to read more, check out{" "}
         <a
@@ -146,10 +152,10 @@ const step03 = renderInContainer(
       </p>
 
       <p>
-      If you only want to see topics from a certain period, click on the "from"
+        If you only want to see topics from a certain period, click on the
-      dropdown and select the period you want. Aside from a set of predefined
+        "from" dropdown and select the period you want. Aside from a set of
-      options, you can also set a custom one by clicking the "other period"
+        predefined options, you can also set a custom one by clicking the "other
-      option, after which you'll be prompted to input it.
+        period" option, after which you'll be prompted to input it.
       </p>
     </>,
   );
@@ -159,8 +165,8 @@ const step04 = renderInContainer(
       <h1>The Topic Listing</h1>
 
       <p>
-      Next up, just below the listing options is the topic listing itself. We've
+        Next up, just below the listing options is the topic listing itself.
-      only highlighted the first topic here, but you can probably see it
+        We've only highlighted the first topic here, but you can probably see it
         continues all the way down the page.
       </p>
 
@@ -169,29 +175,30 @@ const step04 = renderInContainer(
       <ol>
         <li>
           The topic title, when the topic is a "text topic" it links to the same
-        place as the comments link does. Otherwise when it's a "link topic", it
+          place as the comments link does. Otherwise when it's a "link topic",
-        will link to an external site.
+          it will link to an external site.
         </li>
 
         <li>
           The topic metadata, which by default includes the group it's in. If a
           topic has specific notable tags and you have the "show tags" setting
-        enabled in your user settings, they will be shown after the group name.
+          enabled in your user settings, they will be shown after the group
-        A "topic type" may also be shown to indicate whether the topic is a text
+          name. A "topic type" may also be shown to indicate whether the topic
-        topic, a video, an "ask" topic for recommendations or a survey, etc.
+          is a text topic, a video, an "ask" topic for recommendations or a
+          survey, etc.
         </li>
 
         <li>
-        The amount of comments the topic has received. If any new comments have
+          The amount of comments the topic has received. If any new comments
-        been posted since you last viewed the topic, in orange a "(X new)" will
+          have been posted since you last viewed the topic, in orange a "(X
-        be added.
+          new)" will be added.
         </li>
 
         <li>
           The topic source. For text topics this is always the poster of the
-        topic, but for link topics in certain groups it will be the domain name
+          topic, but for link topics in certain groups it will be the domain
-        together with that website's icon. For topics automatically posted by
+          name together with that website's icon. For topics automatically
-        Tildes itself, it will say "Scheduled topic".
+          posted by Tildes itself, it will say "Scheduled topic".
         </li>
       </ol>
 
@@ -205,9 +212,9 @@ const step05 = renderInContainer(
 
       <ol start={5}>
         <li>
-        The date when the topic was posted. For dates that are pretty recent it
+          The date when the topic was posted. For dates that are pretty recent
-        will show something like "X days ago" while for longer dates it will be
+          it will show something like "X days ago" while for longer dates it
-        the exact date, like "April 26th, 2021".
+          will be the exact date, like "April 26th, 2021".
         </li>
 
         <li>
@@ -238,8 +245,8 @@ const step06 = renderInContainer(
       <h1>The Sidebar</h1>
 
       <p>
-      Let's take a look at the sidebar, where the first thing we're greeted with
+        Let's take a look at the sidebar, where the first thing we're greeted
-      is the search bar.
+        with is the search bar.
       </p>
 
       <p>
@@ -248,16 +255,17 @@ const step06 = renderInContainer(
       </p>
 
       <p>
-      When searching from the homepage, topics will be included from any group.
+        When searching from the homepage, topics will be included from any
-      However, searching when inside a group will only include topics from that
+        group. However, searching when inside a group will only include topics
-      group and any of its sub-groups.
+        from that group and any of its sub-groups.
       </p>
 
       {/* TODO: Update the prose once the groups tour is created. */}
       <p>
-      Below the search bar you will also find the title of the page, or name of
+        Below the search bar you will also find the title of the page, or name
-      the group, and a small description. The sidebar has more elements when in
+        of the group, and a small description. The sidebar has more elements
-      you're in a group page, but those will be touched upon in the groups tour.
+        when in you're in a group page, but those will be touched upon in the
+        groups tour.
       </p>
     </>,
   );
@@ -273,9 +281,9 @@ const step07 = renderInContainer(
       </p>
 
       <p>
-      To post a topic, subscribe or unsubscribe from any group, go to the group
+        To post a topic, subscribe or unsubscribe from any group, go to the
-      page in question and in its sidebar there will be buttons to do all those
+        group page in question and in its sidebar there will be buttons to do
-      things.
+        all those things.
       </p>
     </>,
   );
@@ -308,10 +316,10 @@ const step09 = renderInContainer(
 
       <p>
         And finally, the very last part of the homepage is the footer. Here you
-      will find a theme selector (more on that in a moment) and various links to
+        will find a theme selector (more on that in a moment) and various links
-      places, such as the Tildes Documentation, Contact page, the source code,
+        to places, such as the Tildes Documentation, Contact page, the source
-      etc. We highly recommend reading through the documentation as it explains
+        code, etc. We highly recommend reading through the documentation as it
-      a lot of the how and why Tildes does certain things.
+        explains a lot of the how and why Tildes does certain things.
       </p>
 
       <p>
@@ -345,7 +353,7 @@ const step10 = renderInContainer(
     </>,
   );
 
-const steps: TourData["steps"] = [
+  return [
     {
       id: "homepage-01",
       text: step01,
@@ -432,6 +440,9 @@ const steps: TourData["steps"] = [
       text: step10,
     },
   ];
+}
+
+const steps: TourData["steps"] = renderSteps;
 
 const eventHandlers: TourData["eventHandlers"] = [
   {

source/tours/introduction.tsx

@@ -2,18 +2,20 @@ import {fromStorage, StorageKey} from "../storage/common.js";
 import {TourId, type TourData} from "./types.js";
 import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js";
 
+function renderSteps(): ReturnType<TourData["steps"]> {
   const step01 = renderInContainer(
     <>
       <h1>Thank you for installing Tildes Shepherd!</h1>
 
       <p>
         Tildes Shepherd is a set of interactive guided tours for Tildes to show
-      you around and introduce you to the concepts that make this website great.
+        you around and introduce you to the concepts that make this website
+        great.
       </p>
 
       <p>
-      To see and start the tours that are available, click on the extension icon
+        To see and start the tours that are available, click on the extension
-      to go to the options page or{" "}
+        icon to go to the options page or{" "}
         <a href="#" onClick={openOptionsPageFromBackground}>
           click here now
         </a>
@@ -34,17 +36,17 @@ const step02 = renderInContainer(
 
       <p>
         During the tours at various points we will want to highlight specific
-      areas. When that happens you won't be able to click anything inside them,
+        areas. When that happens you won't be able to click anything inside
-      mainly to prevent you from accidentally going to a different page and
+        them, mainly to prevent you from accidentally going to a different page
-      interrupting the tour. But also to prevent you from taking actions you
+        and interrupting the tour. But also to prevent you from taking actions
-      maybe don't want to take, like voting on something you don't necessarily
+        you maybe don't want to take, like voting on something you don't
-      want to vote on.
+        necessarily want to vote on.
       </p>
 
       <p>
-      Depending on your selected theme, the highlighted areas will have a yellow
+        Depending on your selected theme, the highlighted areas will have a
-      or orange border and some extra added whitespace. As you can see in this
+        yellow or orange border and some extra added whitespace. As you can see
-      example where the main site header has been highlighted.
+        in this example where the main site header has been highlighted.
       </p>
     </>,
   );
@@ -82,7 +84,7 @@ const step03 = renderInContainer(
     </>,
   );
 
-const steps: TourData["steps"] = [
+  return [
     {
       canClickTarget: false,
       id: "introduction-01",
@@ -124,6 +126,9 @@ const steps: TourData["steps"] = [
       text: step03,
     },
   ];
+}
+
+const steps: TourData["steps"] = renderSteps;
 
 const eventHandlers: TourData["eventHandlers"] = [];
 

source/tours/types.ts

@@ -50,8 +50,8 @@ export type TourData = {
   /** The requirements this tour must match before starting it. */
   requirements: TourRequirement;
 
-  /** All the steps this tour will take. */
+  /** A function that returns all the steps this tour will take. */
-  steps: Shepherd.Step.StepOptions[];
+  steps: () => Shepherd.Step.StepOptions[];
 
   /** The title of the tour for use in the options page. */
   title: string;