Dynamically load dialogSet based on url hash

public/dialogs/ftb.json

+{
+  "startDialogName": "start",
+  "dialogs": {
+    "start": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Hallo, kann ich etwas für sie tun?",
+      "options": [
+        {
+          "text": "Hallo Herr Breuer, ich grüße sie recht herzlich!",
+          "linksToDialog": "greetBreuer"
+        },
+        {
+          "text": "Hallo, ich suche den Hörsaal E23",
+          "linksToDialog": "seekHS"
+        }
+      ]
+    },
+    "seekHS": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Da müssen sie den Flur wieder zurück gehen und im Foyer nach hinten durchgehen. Den Hörsaal erkennen sie an der großen Doppeltür",
+      "options": []
+    },
+    "greetBreuer": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Ich grüße sie auch recht herzlich, studieren sie zufälligerweise Informatik?",
+      "options": [
+        {
+          "text": "Ich habe gerade damit angefangen",
+          "linksToDialog": "startedToStudy"
+        },
+        {
+          "text": "Ich studiere hier schon länger",
+          "linksToDialog": "longTimeStudent"
+        }
+      ]
+    },
+    "longTimeStudent": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Dann sollten sie mal schnell weiter studieren gehen!",
+      "options": []
+    },
+    "startedToStudy": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Wunderbar, ich kann deine, verzeihung, ich darf sie doch duzen, oder?\\n\\nAlso ich brauche deine Hilfe. Der Studiengang Informatik muss regelmäßig akkreditiert werden, damit wir ihn weiter anbieten dürfen. Jetzt haben leider die verdammten Studenten von der Fachschaft in den letzten genehnmigten Studienplan das Modul \"Angewandte Chaostheorie\" hineingeschmuggelt. Das ist bei uns leider niemanden aufgefallen, der Akkreditierungskommission vom Bildungsministerium aber schon. Wenn wir nicht bald nachweisen können, dass jemand dieses Modul auch belegt und erfolgreich abgeschlossen hat, wird uns die Akkreditierung entzogen und der Informatik-Studiengang muss eingestellt werden. Ich bitte sie, helfen sie mir!",
+      "options": [
+        { "text": "Ich helfe gerne!", "linksToDialog": "agreeToHelp" },
+        { "text": "Was geht mich das denn an?", "linksToDialog": "denyHelp" }
+      ]
+    },
+    "denyHelp": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Schade, ich dachte sie hätten das Zeug dazu. Nun gut, gehen sie studieren, ich finde schon selbst eine Lösung.",
+      "options": []
+    },
+    "agreeToHelp": {
+      "title": "Frank Thorsten Breuer – Studienkoordinator",
+      "imageUrl": "./Breuer_Frank_Thorsten.jpg",
+      "text": "Wunderbar, sobald mehr Story geschrieben wurde, erhalten sie hier eine epische Quest um die Fakultät vor Schmach und Schande zu retten.",
+      "options": []
+    }
+  }
+}

rollup.config.js

@@ -65,7 +65,7 @@ export default {
     }),
     commonjs(),
     typescript({
-      sourceMap: !production,
+      sourceMap: true,
       inlineSources: !production,
     }),
 

src/App.svelte

 <script lang="ts">
   import DialogSetComponent from "./DialogSetComponent.svelte";
+  import { fetchDialogSet } from "./utils";
 
-  import SingleDialogComponent from "./SingleDialogComponent.svelte";
-  import type { Dialog, DialogSet } from "./types";
-
-  export let dialogSet: DialogSet;
+  const dialogSetPromise = fetchDialogSet();
 </script>
 
 <main>
-  <DialogSetComponent {...dialogSet} />
+  {#await dialogSetPromise then dialogSet}
+    <DialogSetComponent {...dialogSet} />
+  {:catch error}
+    <h3>Oh no :(</h3>
+    <p>
+      We could not load that dialogSet that you specified in the url. Sorry.
+    </p>
+  {/await}
 </main>

src/DialogSetComponent.svelte

 <script lang="ts">
-  import App from "./App.svelte";
   import SingleDialogComponent from "./SingleDialogComponent.svelte";
-  import type { Dialog, DialogMap } from "./types";
+  import type { DialogMap } from "./types";
   export let startDialogName: string;
   export let dialogs: DialogMap;
 

src/main.ts

 import App from "./App.svelte";
 import type { DialogSet } from "./types";
 
-const ftbDialogSet: DialogSet = {
-  startDialogName: "start",
-  dialogs: {
-    start: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text: "Hallo, kann ich etwas für sie tun?",
-      options: [
-        {
-          text: "Hallo Herr Breuer, ich grüße sie recht herzlich!",
-          linksToDialog: "greetBreuer",
-        },
-        {
-          text: "Hallo, ich suche den Hörsaal E23",
-          linksToDialog: "seekHS",
-        },
-      ],
-    },
-    seekHS: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text:
-        "Da müssen sie den Flur wieder zurück gehen und im Foyer nach hinten durchgehen. Den Hörsaal erkennen sie an der großen Doppeltür",
-      options: [],
-    },
-    greetBreuer: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text:
-        "Ich grüße sie auch recht herzlich, studieren sie zufälligerweise Informatik?",
-      options: [
-        {
-          text: "Ich habe gerade damit angefangen",
-          linksToDialog: "startedToStudy",
-        },
-        {
-          text: "Ich studiere hier schon länger",
-          linksToDialog: "longTimeStudent",
-        },
-      ],
-    },
-    longTimeStudent: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text: "Dann sollten sie mal schnell weiter studieren gehen!",
-      options: [],
-    },
-    startedToStudy: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text:
-        'Wunderbar, ich kann deine, verzeihung, ich darf sie doch duzen, oder?\n\nAlso ich brauche deine Hilfe. Der Studiengang Informatik muss regelmäßig akkreditiert werden, damit wir ihn weiter anbieten dürfen. Jetzt haben leider die verdammten Studenten von der Fachschaft in den letzten genehnmigten Studienplan das Modul "Angewandte Chaostheorie" hineingeschmuggelt. Das ist bei uns leider niemanden aufgefallen, der Akkreditierungskommission vom Bildungsministerium aber schon. Wenn wir nicht bald nachweisen können, dass jemand dieses Modul auch belegt und erfolgreich abgeschlossen hat, wird uns die Akkreditierung entzogen und der Informatik-Studiengang muss eingestellt werden. Ich bitte sie, helfen sie mir!',
-      options: [
-        {
-          text: "Ich helfe gerne!",
-          linksToDialog: "agreeToHelp",
-        },
-        {
-          text: "Was geht mich das denn an?",
-          linksToDialog: "denyHelp",
-        },
-      ],
-    },
-    denyHelp: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text:
-        "Schade, ich dachte sie hätten das Zeug dazu. Nun gut, gehen sie studieren, ich finde schon selbst eine Lösung.",
-      options: [],
-    },
-    agreeToHelp: {
-      title: "Frank Thorsten Breuer – Studienkoordinator",
-      imageUrl: "./Breuer_Frank_Thorsten.jpg",
-      text:
-        "Wunderbar, sobald mehr Story geschrieben wurde, erhalten sie hier eine epische Quest um die Fakultät vor Schmach und Schande zu retten.",
-      options: [],
-    },
-  },
-};
-
 const app = new App({
   target: document.body,
-  props: {
-    dialogSet: ftbDialogSet,
-  },
+  props: {},
 });
 
 export default app;

src/utils.ts

+import type { DialogSet } from "./types";
+
+/**
+ * Returns true, if input is a valid name of a dialogSet.
+ * Intended to protect from loading anything other than dialogSet json.
+ * @param input input to check
+ */
+function isValidDialogSetName(input: unknown) {
+  if (typeof input !== "string") {
+    return false;
+  }
+  if (input.length === 0) {
+    return false;
+  }
+  if (input.length > 50) {
+    return false;
+  }
+  return !/[^a-zA-Z0-9\-\_]/i.test(input);
+}
+
+function getHashValue(): string {
+  return window.location.hash.substr(1);
+}
+
+/**
+ * Fetch a dialogSet based on the hash value
+ */
+export async function fetchDialogSet(): Promise<DialogSet> {
+  const setName = getHashValue();
+  if (!isValidDialogSetName(setName))
+    throw new Error("Name is not valid dialogSet name");
+
+  const dialogSetUrl = "./dialogs/" + setName + ".json";
+
+  try {
+    const dialogSet: DialogSet = await (await fetch(dialogSetUrl)).json();
+    return dialogSet;
+  } catch (error) {
+    throw error;
+  }
+}

tsconfig.json

 {
   "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": true
+  },
 
   "include": ["src/**/*"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"]