Refactor TourId to be an enum.

source/content-scripts/setup.ts

@@ -4,7 +4,7 @@ import {
   createIntroductionUnderstood,
 } from "../storage/common.js";
 import {introductionSteps} from "../tours/introduction.js";
-import {tourIdsAndSteps} from "../tours/exports.js";
+import {TourId, tourIdsAndSteps} from "../tours/exports.js";
 
 /** The main entry point for the content script. */
 async function main(): Promise<void> {
@@ -26,7 +26,7 @@ async function main(): Promise<void> {
     // If a different tour is selected but the introduction hasn't happened yet,
     // then the main function will be rerun once this tour finishes.
     startTour(
-      "introduction",
+      TourId.Introduction,
       introductionSteps,
       [],
       startsWithPrefix && anchorTourId !== "introduction",

source/options/components/tour.tsx

@@ -1,4 +1,5 @@
 import {Component, type JSX} from "preact";
+import {TourId} from "../../tours/exports.js";
 
 type Props = {
   hasBeenCompleted: boolean;
@@ -7,7 +8,7 @@ type Props = {
 };
 
 function tourDescription(tourId: Props["tourId"]): JSX.Element {
-  if (tourId === "introduction") {
+  if (tourId === TourId.Introduction) {
     return (
       <p class="tour-description">
         A short introduction to Tildes Shepherd and how the tours work. Normally
@@ -16,7 +17,7 @@ function tourDescription(tourId: Props["tourId"]): JSX.Element {
     );
   }
 
-  if (tourId === "interface-homepage") {
+  if (tourId === TourId.InterfaceHomepage) {
     return (
       <p class="tour-description">
         Let's take a look at the home page and all we can do there.
@@ -38,8 +39,8 @@ function tourLink(tourId: Props["tourId"]): string {
   let path = "";
 
   switch (tourId) {
-    case "interface-homepage":
-    case "introduction": {
+    case TourId.InterfaceHomepage:
+    case TourId.Introduction: {
       path = "/";
       break;
     }

source/options/components/tours.tsx

@@ -1,5 +1,6 @@
 import {Component, type JSX} from "preact";
 import {createToursCompleted} from "../../storage/common.js";
+import {TourId} from "../../tours/exports.js";
 import {Tour} from "./tour.js";
 
 type Props = Record<string, unknown>;
@@ -34,8 +35,8 @@ export class Tours extends Component<Props, State> {
     };
 
     const tourProps: Array<Tour["props"]> = [
-      createTour("introduction", "Introduction"),
-      createTour("interface-homepage", "The Homepage"),
+      createTour(TourId.Introduction, "Introduction"),
+      createTour(TourId.InterfaceHomepage, "The Homepage"),
     ];
 
     return (

source/storage/common.ts

@@ -1,5 +1,6 @@
 import browser from "webextension-polyfill";
 import {createValue} from "@holllo/webextension-storage";
+import {type TourId} from "../tours/exports.js";
 
 export enum StorageKey {
   IntroductionUnderstood = "introduction-understood",

source/tours/exports.ts

@@ -1,11 +1,14 @@
-import {homepageSteps, homepageEventHandlers} from "./interface/exports.js";
+import {homepageEventHandlers, homepageSteps} from "./interface/exports.js";
 import {introductionSteps} from "./introduction.js";
 
-export const tourIds = ["introduction", "interface-homepage"] as const;
+export enum TourId {
+  InterfaceHomepage = "interface-homepage",
+  Introduction = "introduction",
+}
 
 export const tourIdsAndSteps: Array<
   [TourId, TourStepOptions[], TourStepEventHandler[]]
 > = [
-  ["introduction", introductionSteps, []],
-  ["interface-homepage", homepageSteps, homepageEventHandlers],
+  [TourId.Introduction, introductionSteps, []],
+  [TourId.InterfaceHomepage, homepageSteps, homepageEventHandlers],
 ];

source/tours/interface/homepage.tsx

@@ -5,30 +5,11 @@ import {
   removeAllDatasetCounters,
   renderInContainer,
 } from "../utilities.js";
-
-const userIsLoggedIn =
-  document.querySelector(".logged-in-user-username") !== null;
+import {LoggedOutWarning} from "../shared/logged-out-warning.js";
 
 const step01 = renderInContainer(
   <>
-    {userIsLoggedIn ? (
-      ""
-    ) : (
-      <p class="tish-warning">
-        It looks like you aren't logged in to Tildes. Tildes Shepherd assumes
-        that you are logged in as a lot of the Tildes interface isn't shown to
-        logged out users.
-        <br />
-        To still let anyone without an account benefit from the extension you
-        may continue, however, know that certain parts of the tour <b>
-          will
-        </b>{" "}
-        break and look weird.
-        <br />
-        It's highly recommended that you exit the tour, log in and start it
-        again.
-      </p>
-    )}
+    <LoggedOutWarning />
 
     <h1>The Homepage</h1>
 

source/tours/shared/exports.ts

@@ -0,0 +1 @@
+export * from "./logged-out-warning.js";

source/tours/shared/logged-out-warning.tsx

@@ -0,0 +1,24 @@
+import {type JSX} from "preact";
+
+export function LoggedOutWarning(): JSX.Element {
+  const userIsLoggedIn =
+    document.querySelector(".logged-in-user-username") !== null;
+
+  if (userIsLoggedIn) {
+    return <></>;
+  }
+
+  return (
+    <p class="tish-warning">
+      It looks like you aren't logged in to Tildes. Tildes Shepherd assumes that
+      you are logged in as a lot of the Tildes interface isn't shown to logged
+      out users.
+      <br />
+      To still let anyone without an account benefit from the extension you may
+      continue, however, know that certain parts of the tour <b>will</b> break
+      and look weird.
+      <br />
+      It's highly recommended that you exit the tour, log in and start it again.
+    </p>
+  );
+}

source/types.d.ts

@@ -1,12 +1,10 @@
 import type Shepherd from "shepherd.js";
-import type {tourIds} from "./tours/exports.js";
 
 declare global {
   const $browser: "chromium" | "firefox";
   const $dev: boolean;
   const $test: boolean;
 
-  type TourId = (typeof tourIds)[number];
   type TourStepEvent = "show" | "destroy";
   type TourStepEventFunction = Parameters<Shepherd.Step["on"]>[1];
   type TourStepEventHandler = [string, [TourStepEvent, TourStepEventFunction]];