From 653300bbdf04e6af4e591ec53b6b6fd8e71d2e80 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Fri, 12 May 2023 01:07:14 +0700
Subject: [PATCH] Drop session storage polyfill (#1501)

Looks like we do not have problems anymore in canvas without this
polyfill.
---
 apps/builder/app/canvas/canvas.tsx            |  1 -
 .../src/tree/create-elements-tree.tsx         |  4 --
 .../src/tree/session-storage-polyfill.tsx     | 50 -------------------
 3 files changed, 55 deletions(-)
 delete mode 100644 packages/react-sdk/src/tree/session-storage-polyfill.tsx

diff --git a/apps/builder/app/canvas/canvas.tsx b/apps/builder/app/canvas/canvas.tsx
index 1a4688ff65..f88d3971a5 100644
--- a/apps/builder/app/canvas/canvas.tsx
+++ b/apps/builder/app/canvas/canvas.tsx
@@ -89,7 +89,6 @@ const useElementsTree = (getComponent: GetComponent) => {
 
   return useMemo(() => {
     return createElementsTree({
-      sandbox: true,
       instances: instances.size === 0 ? temporaryInstances : instances,
       // fallback to temporary root instance to render scripts
       // and receive real data from builder
diff --git a/packages/react-sdk/src/tree/create-elements-tree.tsx b/packages/react-sdk/src/tree/create-elements-tree.tsx
index abbfcd975f..82cbfd9789 100644
--- a/packages/react-sdk/src/tree/create-elements-tree.tsx
+++ b/packages/react-sdk/src/tree/create-elements-tree.tsx
@@ -7,14 +7,12 @@ import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
 type InstanceSelector = Instance["id"][];
 
 export const createElementsTree = ({
   instances,
   rootInstanceId,
-  sandbox,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
@@ -23,7 +21,6 @@ export const createElementsTree = ({
 }: {
   instances: Instances;
   rootInstanceId: Instance["id"];
-  sandbox?: boolean;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;
@@ -50,7 +47,6 @@ export const createElementsTree = ({
     children: [
       <Fragment key="children">
         {children}
-        {sandbox && <SessionStoragePolyfill />}
         <ScrollRestoration />
         <Scripts />
       </Fragment>,
diff --git a/packages/react-sdk/src/tree/session-storage-polyfill.tsx b/packages/react-sdk/src/tree/session-storage-polyfill.tsx
deleted file mode 100644
index 5c463ed9f1..0000000000
--- a/packages/react-sdk/src/tree/session-storage-polyfill.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// This is a temporary work around for https://github.com/remix-run/remix/issues/3659
-
-// The code is based on this discussion https://bugs.chromium.org/p/chromium/issues/detail?id=357625
-const polyfill = function () {
-  try {
-    const key = "__session_storage_availability_test__";
-    sessionStorage.setItem(key, "test"); // test
-    sessionStorage.removeItem(key); // cleanup
-  } catch (error) {
-    alert(
-      'It looks like you have disabled cookies in your browser. Webstudio builder may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647'
-    );
-    const data = new Map();
-    Object.defineProperty(window, "sessionStorage", {
-      value: {
-        setItem: (key: string, val: unknown) => {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Session storage is unavailable due to Error "${
-              (error as Error).message
-            }". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`
-          );
-          data.set(key, String(val));
-        },
-        getItem: (key: string) => {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Session storage is unavailable due to Error "${
-              (error as Error).message
-            }". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`
-          );
-          return data.get(key);
-        },
-        removeItem: (key: string) => {
-          data.delete(key);
-        },
-        clear: () => {
-          data.clear();
-        },
-      },
-    });
-  }
-}.toString();
-
-export const SessionStoragePolyfill = () => (
-  <script
-    dangerouslySetInnerHTML={{ __html: `(${polyfill})()` }}
-    suppressHydrationWarning
-  />
-);