From e5ef9b05c7a248b91aeb0314065fca6e366bdc4b Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sun, 3 Aug 2025 02:23:43 +0200
Subject: [PATCH] fix: support older browsers in docker template

URL.canParse is very new method and need to be polyfilled.
Docker is the only place it is used.
---
 fixtures/react-router-docker/app/constants.mjs    | 15 ++++++++++++++-
 .../react-router-docker/app/constants.mjs         | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/fixtures/react-router-docker/app/constants.mjs b/fixtures/react-router-docker/app/constants.mjs
index 5dbbec107ce4..dedee9f093f9 100644
--- a/fixtures/react-router-docker/app/constants.mjs
+++ b/fixtures/react-router-docker/app/constants.mjs
@@ -4,6 +4,19 @@
  */
 export const assetBaseUrl = "/assets/";
 
+/**
+ * URL.canParse(props.src)
+ * @type {(url: string) => boolean}
+ */
+const UrlCanParse = (url) => {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * @type {import("@webstudio-is/image").ImageLoader}
  */
@@ -12,7 +25,7 @@ export const imageLoader = (props) => {
     return props.src;
   }
   // handle absolute urls
-  const path = URL.canParse(props.src) ? `/${props.src}` : props.src;
+  const path = UrlCanParse(props.src) ? `/${props.src}` : props.src;
   // https://github.com/unjs/ipx?tab=readme-ov-file#modifiers
   return `/_image/w_${props.width},q_${props.quality}${path}`;
 };
diff --git a/packages/cli/templates/react-router-docker/app/constants.mjs b/packages/cli/templates/react-router-docker/app/constants.mjs
index 5dbbec107ce4..dedee9f093f9 100644
--- a/packages/cli/templates/react-router-docker/app/constants.mjs
+++ b/packages/cli/templates/react-router-docker/app/constants.mjs
@@ -4,6 +4,19 @@
  */
 export const assetBaseUrl = "/assets/";
 
+/**
+ * URL.canParse(props.src)
+ * @type {(url: string) => boolean}
+ */
+const UrlCanParse = (url) => {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * @type {import("@webstudio-is/image").ImageLoader}
  */
@@ -12,7 +25,7 @@ export const imageLoader = (props) => {
     return props.src;
   }
   // handle absolute urls
-  const path = URL.canParse(props.src) ? `/${props.src}` : props.src;
+  const path = UrlCanParse(props.src) ? `/${props.src}` : props.src;
   // https://github.com/unjs/ipx?tab=readme-ov-file#modifiers
   return `/_image/w_${props.width},q_${props.quality}${path}`;
 };