@webstudio-is/react-sdk 0.28.0 → 0.29.0

package/lib/app/custom-components/shared/remix-link.js

@@ -9,18 +9,24 @@ const isAbsoluteUrl = (href) => {
     return false;
   }
 };
+const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
 const wrapLinkComponent = (BaseLink) => {
-  const Component = forwardRef(
-    ({ href = "", ...props }, ref) => isAbsoluteUrl(href) ? /* @__PURE__ */ jsx("a", {
-      ...props,
-      href,
-      ref
-    }) : /* @__PURE__ */ jsx(Link, {
+  const Component = forwardRef(({ href = "", ...props }, ref) => {
+    const isAbsolute = isAbsoluteUrl(href);
+    const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
+    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
+      return /* @__PURE__ */ jsx("a", {
+        ...props,
+        href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
+        ref
+      });
+    }
+    return /* @__PURE__ */ jsx(Link, {
       ...props,
       to: href,
       ref
-    })
-  );
+    });
+  });
   Component.displayName = BaseLink.displayName;
   return Component;
 };

package/lib/cjs/app/custom-components/shared/remix-link.cjs

@@ -32,18 +32,24 @@ const isAbsoluteUrl = (href) => {
     return false;
   }
 };
+const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
 const wrapLinkComponent = (BaseLink) => {
-  const Component = (0, import_react2.forwardRef)(
-    ({ href = "", ...props }, ref) => isAbsoluteUrl(href) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-      ...props,
-      href,
-      ref
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, {
+  const Component = (0, import_react2.forwardRef)(({ href = "", ...props }, ref) => {
+    const isAbsolute = isAbsoluteUrl(href);
+    const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
+    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+        ...props,
+        href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
+        ref
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, {
       ...props,
       to: href,
       ref
-    })
-  );
+    });
+  });
   Component.displayName = BaseLink.displayName;
   return Component;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -47,12 +47,12 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.28.0",
-    "@webstudio-is/css-data": "^0.28.0",
-    "@webstudio-is/icons": "^0.28.0",
-    "@webstudio-is/image": "^0.28.0",
-    "@webstudio-is/prisma-client": "^0.28.0",
-    "@webstudio-is/project-build": "^0.28.0"
+    "@webstudio-is/asset-uploader": "^0.29.0",
+    "@webstudio-is/css-data": "^0.29.0",
+    "@webstudio-is/icons": "^0.29.0",
+    "@webstudio-is/image": "^0.29.0",
+    "@webstudio-is/prisma-client": "^0.29.0",
+    "@webstudio-is/project-build": "^0.29.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/app/custom-components/shared/remix-link.tsx

@@ -16,6 +16,11 @@ const isAbsoluteUrl = (href: string) => {
   }
 };
 
+// Remix's check for absolute URL copied from here:
+// https://github.com/remix-run/react-router/blob/react-router-dom%406.8.0/packages/react-router-dom/index.tsx#L423-L424
+const isAbsoluteUrlRemix = (href: string) =>
+  /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
+
 type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
 
 type Ref = ElementRef<"a">;
@@ -25,13 +30,27 @@ export const wrapLinkComponent = (
 ) => {
   // We're not actually wrapping BaseLink (no way to wrap with Remix's Link),
   // but this is still useful because we're making sure that props/ref types are compatible
-  const Component = forwardRef<Ref, Props>(({ href = "", ...props }, ref) =>
-    isAbsoluteUrl(href) ? (
-      <a {...props} href={href} ref={ref} />
-    ) : (
-      <Link {...props} to={href} ref={ref} />
-    )
-  );
+  const Component = forwardRef<Ref, Props>(({ href = "", ...props }, ref) => {
+    const isAbsolute = isAbsoluteUrl(href);
+
+    // This is a workaround for a bug in Remix: https://github.com/remix-run/remix/issues/5440
+    // It has a buggy absolute URL detection, which gives false positives on value like "//" or "http://"
+    // and causes entire app to crash
+    const willRemixTryToTreatAsAbsoluteAndCrash =
+      isAbsolute === false && isAbsoluteUrlRemix(href);
+
+    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
+      return (
+        <a
+          {...props}
+          href={willRemixTryToTreatAsAbsoluteAndCrash ? "" : href}
+          ref={ref}
+        />
+      );
+    }
+
+    return <Link {...props} to={href} ref={ref} />;
+  });
 
   // This is the only part that we use from BaseLink at runtime
   Component.displayName = BaseLink.displayName;