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/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]];