From cfdcbbaebe331394a74b412a8ad7028fdb3ec761 Mon Sep 17 00:00:00 2001
From: Corey Alexander <coreyja@gmail.com>
Date: Sat, 20 Jan 2024 18:09:17 -0500
Subject: [PATCH] Fix Deploys: Move all Logic from `load` to `onMount` (#80)

Builds are currently failing with this error message

Accessing url.searchParams during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in onMount).

It was introduced in #79

This error is because we are trying to access url.searchParams in the load function and ALSO have preloading enabled.
Since load gets called on the server to pre-render, it doesn't allow us to access url.searchParams since that can only be known in the browser

But this must be new behavior, since it was working for us previously. I think it was working previously is because load was acting as a 'universal` loader and running both in the 'server' when preloading, and also in the client when mounting for the first time.

kit.svelte.dev/docs/load#universal-vs-server-when-does-which-load-function-run

I imagine the server load was getting an empty searchSet, but continuing to work. And then the client load correctly filled in the query param values

But from reading the Changelog I can't find anything that seems obviously like it would have broken this behavior

I do think this is a good change to prepare for v2, since it seems required there as well!
---
 .github/workflows/tests.yaml               |  9 +++++
 .node-version                              |  2 +-
 src/routes/(iframed)/+page.svelte          | 41 +++++++++++++++-------
 src/routes/(iframed)/+page.ts              | 21 -----------
 src/routes/(iframed)/settings/+page.svelte |  4 ++-
 5 files changed, 42 insertions(+), 35 deletions(-)
 delete mode 100644 src/routes/(iframed)/+page.ts

diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
index eec8367..be84e2c 100644
--- a/.github/workflows/tests.yaml
+++ b/.github/workflows/tests.yaml
@@ -32,3 +32,12 @@ jobs:
       - uses: actions/checkout@v3
       - run: npm ci
       - run: npm run test:unit
+
+  build:
+    name: npm run build
+    needs: [check]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: npm run build
diff --git a/.node-version b/.node-version
index 3c03207..4a1f488 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-18
+18.17.1
diff --git a/src/routes/(iframed)/+page.svelte b/src/routes/(iframed)/+page.svelte
index cf96df9..b535383 100644
--- a/src/routes/(iframed)/+page.svelte
+++ b/src/routes/(iframed)/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import { beforeNavigate, goto } from "$app/navigation";
 
   import { keybind } from "$lib/actions/keybind";
   import { tooltip } from "$lib/actions/tooltip";
   import { resize } from "$lib/actions/resize";
-  import { sendResizeMessage } from "$lib/playback/messages";
+  import { initWindowMessages, sendResizeMessage } from "$lib/playback/messages";
   import { playbackError, playbackState } from "$lib/playback/stores";
 
   import Gameboard from "$lib/components/Gameboard.svelte";
@@ -17,9 +19,8 @@
   import IconCog from "~icons/heroicons/cog-8-tooth";
   import IconHelp from "~icons/heroicons/question-mark-circle";
 
-  import type { PageData } from "./$types";
-
-  export let data: PageData;
+  import { getDefaultSettings, loadSettingsWithURLOverrides } from "$lib/settings/stores";
+  import { setTheme } from "$lib/theme";
 
   const helpTooltipOptions = {
     templateId: "hotkeysTooltip",
@@ -49,6 +50,22 @@
   function onResize(width: number, height: number) {
     sendResizeMessage(width, height);
   }
+
+  let settings = getDefaultSettings();
+  let settingError = true;
+
+  onMount(() => {
+    const url = new URL(window.location.href);
+    settings = loadSettingsWithURLOverrides(url);
+
+    setTheme(settings.theme);
+
+    if (settings.game.length > 0 && settings.engine.length > 0) {
+      settingError = false;
+      playbackState.load(fetch, settings);
+      initWindowMessages();
+    }
+  });
 </script>
 
 <svelte:window
@@ -63,7 +80,7 @@
 />
 
 <div use:resize={{ f: onResize }} class="h-full w-full flex flex-col items-center justify-center">
-  {#if data.settingError}
+  {#if settingError}
     <p class="p-4 font-bold text-lg text-center">
       To display a game you need to specify the ID in the URL.
     </p>
@@ -76,15 +93,15 @@
     </p>
   {:else if $playbackState}
     <TooltipTemplateHotkeys id={helpTooltipOptions.templateId} />
-    <TooltipTemplateSettings id={settingsTooltipOptions.templateId} settings={data.settings} />
+    <TooltipTemplateSettings id={settingsTooltipOptions.templateId} {settings} />
     <div class="w-full h-full flex flex-col md:flex-row">
       <div class="flex flex-col grow">
-        {#if data.settings.title}
-          <h1 class="text-center font-bold pt-2 text-lg">{data.settings.title}</h1>
+        {#if settings.title}
+          <h1 class="text-center font-bold pt-2 text-lg">{settings.title}</h1>
         {/if}
-        <Gameboard showCoordinates={data.settings.showCoords} />
-        {#if data.settings.showControls}
-          {#if data.settings.showScrubber}
+        <Gameboard showCoordinates={settings.showCoords} />
+        {#if settings.showControls}
+          {#if settings.showScrubber}
             <div class="w-full px-[7.5%]">
               <Scrubber />
             </div>
@@ -102,7 +119,7 @@
           </div>
         {/if}
       </div>
-      {#if data.settings.showScoreboard}
+      {#if settings.showScoreboard}
         <div class="basis-full md:basis-[45%] order-first p-2 md:order-last">
           <Scoreboard />
         </div>
diff --git a/src/routes/(iframed)/+page.ts b/src/routes/(iframed)/+page.ts
deleted file mode 100644
index c31686d..0000000
--- a/src/routes/(iframed)/+page.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { initWindowMessages } from "$lib/playback/messages";
-import { playbackState } from "$lib/playback/stores";
-import { loadSettingsWithURLOverrides } from "$lib/settings/stores";
-import { setTheme } from "$lib/theme";
-
-import type { PageLoad } from "./$types";
-
-export const load = (({ fetch, url }) => {
-  const settings = loadSettingsWithURLOverrides(url);
-
-  setTheme(settings.theme);
-
-  let settingError = true;
-  if (settings.game.length > 0 && settings.engine.length > 0) {
-    settingError = false;
-    playbackState.load(fetch, settings);
-    initWindowMessages();
-  }
-
-  return { settings, settingError };
-}) satisfies PageLoad;
diff --git a/src/routes/(iframed)/settings/+page.svelte b/src/routes/(iframed)/settings/+page.svelte
index 878128b..79e749e 100644
--- a/src/routes/(iframed)/settings/+page.svelte
+++ b/src/routes/(iframed)/settings/+page.svelte
@@ -7,7 +7,9 @@
     { value: 18, text: "Fast" }
   ];
 
-  function navigateBack() {
+  function navigateBack(e: MouseEvent) {
+    e.preventDefault();
+
     history.back();
   }
 </script>