Make inline scripts more robust

remix-run · Feb 11, 2022 · fbc947d · fbc947d
1 parent 008d32c
commit fbc947d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 37 deletions.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -1353,30 +1353,33 @@ export const LiveReload =
       }: {
         port?: number;
       }) {
+        const setupLiveReload = ((port: number) => {
+          let protocol = location.protocol === "https:" ? "wss:" : "ws:";
+          let host = location.hostname;
+          let socketPath = `${protocol}//${host}:${port}/socket`;
+
+          let ws = new WebSocket(socketPath);
+          ws.onmessage = message => {
+            let event = JSON.parse(message.data);
+            if (event.type === "LOG") {
+              console.log(event.message);
+            }
+            if (event.type === "RELOAD") {
+              console.log("💿 Reloading window ...");
+              window.location.reload();
+            }
+          };
+          ws.onerror = error => {
+            console.log("Remix dev asset server web socket error:");
+            console.error(error);
+          };
+        }).toString();
+
         return (
           <script
+            suppressHydrationWarning
             dangerouslySetInnerHTML={{
-              __html: `
-let protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-let host = location.hostname;
-let socketPath = protocol + '//' + host + ':${port}/socket';
-
-let ws = new WebSocket(socketPath);
-ws.onmessage = message => {
-  let event = JSON.parse(message.data);
-  if (event.type === "LOG") {
-    console.log(event.message);
-  }
-  if (event.type === "RELOAD") {
-    console.log("💿 Reloading window ...");
-    window.location.reload();
-  }
-};
-ws.onerror = error => {
-  console.log("Remix dev asset server web socket error:");
-  console.error(error);
-};
-              `.trim()
+              __html: `(${setupLiveReload})(${JSON.stringify(port)})`
             }}
           />
         );

diff --git a/packages/remix-react/scroll-restoration.tsx b/packages/remix-react/scroll-restoration.tsx
@@ -35,25 +35,28 @@ export function ScrollRestoration() {
     }, [])
   );
 
+  const restoreScroll = ((STORAGE_KEY: string) => {
+    if (!window.history.state || !window.history.state.key) {
+      const key = Math.random().toString(32).slice(2);
+      window.history.replaceState({ key }, "");
+    }
+    try {
+      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
+      let storedY = positions[window.history.state.key];
+      if (typeof storedY === "number") {
+        window.scrollTo(0, storedY);
+      }
+    } catch (error) {
+      console.error(error);
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  }).toString();
+
   return (
     <script
+      suppressHydrationWarning
       dangerouslySetInnerHTML={{
-        __html: `
-          let STORAGE_KEY = ${JSON.stringify(STORAGE_KEY)};
-          if (!window.history.state || !window.history.state.key) {
-            window.history.replaceState({ key: Math.random().toString(32).slice(2) }, null);
-          }
-          try {
-            let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}')
-            let storedY = positions[window.history.state.key];
-            if (typeof storedY === 'number') {
-              window.scrollTo(0, storedY)
-            }
-          } catch(error) {
-            console.error(error)
-            sessionStorage.removeItem(STORAGE_KEY)
-          }
-        `
+        __html: `(${restoreScroll})(${JSON.stringify(STORAGE_KEY)})`
       }}
     />
   );