@webstudio-is/react-sdk 0.28.0 → 0.30.0

package/lib/app/custom-components/index.js

@@ -2,17 +2,23 @@ import { Image } from "./image";
 import { Link } from "./link";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
+import { WsComponentPropsMeta } from "../../components/component-type";
 const customComponents = {
   Image,
   Link,
   RichTextLink
 };
-const customComponentsMeta = {
-  Image: {
-    props: imageProps
-  }
+const customComponentPropsMetas = {
+  Image: WsComponentPropsMeta.parse({
+    props: {
+      ...imageProps,
+      src: { ...imageProps.src, control: "file-image", name: "Source" }
+    }
+  })
 };
+const customComponentMetas = {};
 export {
-  customComponents,
-  customComponentsMeta
+  customComponentMetas,
+  customComponentPropsMetas,
+  customComponents
 };

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/app/root.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-import { DynamicLinks } from "remix-utils";
 const Root = ({
   Outlet = DefaultOutlet
 }) => {
@@ -27,7 +26,6 @@ const Root = ({
             type: "image/x-icon"
           }),
           /* @__PURE__ */ jsx(Meta, {}),
-          /* @__PURE__ */ jsx(DynamicLinks, {}),
           /* @__PURE__ */ jsx(Links, {})
         ]
       }),

package/lib/cjs/app/custom-components/index.cjs

@@ -18,21 +18,27 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var custom_components_exports = {};
 __export(custom_components_exports, {
-  customComponents: () => customComponents,
-  customComponentsMeta: () => customComponentsMeta
+  customComponentMetas: () => customComponentMetas,
+  customComponentPropsMetas: () => customComponentPropsMetas,
+  customComponents: () => customComponents
 });
 module.exports = __toCommonJS(custom_components_exports);
 var import_image = require("./image");
 var import_link = require("./link");
 var import_rich_text_link = require("./rich-text-link");
 var import_image2 = require("@webstudio-is/image");
+var import_component_type = require("../../components/component-type");
 const customComponents = {
   Image: import_image.Image,
   Link: import_link.Link,
   RichTextLink: import_rich_text_link.RichTextLink
 };
-const customComponentsMeta = {
-  Image: {
-    props: import_image2.imageProps
-  }
+const customComponentPropsMetas = {
+  Image: import_component_type.WsComponentPropsMeta.parse({
+    props: {
+      ...import_image2.imageProps,
+      src: { ...import_image2.imageProps.src, control: "file-image", name: "Source" }
+    }
+  })
 };
+const customComponentMetas = {};

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/lib/cjs/app/root.cjs

@@ -23,7 +23,6 @@ __export(root_exports, {
 module.exports = __toCommonJS(root_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@remix-run/react");
-var import_remix_utils = require("remix-utils");
 const Root = ({
   Outlet = import_react.Outlet
 }) => {
@@ -50,7 +49,6 @@ const Root = ({
             type: "image/x-icon"
           }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Meta, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remix_utils.DynamicLinks, {}),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Links, {})
         ]
       }),