fix: support older browsers in docker template (#5346)

URL.canParse is very new method and need to be polyfilled. Docker is the
only place it is used.

Author: TrySound

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}`;
 };

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}`;
 };