@webstudio-is/react-sdk 0.28.0 → 0.30.0

package/lib/tree/session-storage-polyfill.js

@@ -6,7 +6,7 @@ const polyfill = function() {
     sessionStorage.removeItem(key);
   } catch (error) {
     alert(
-      'It looks like you have disabled cookies in your browser. Webstudio designer 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'
+      '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 = /* @__PURE__ */ new Map();
     Object.defineProperty(window, "sessionStorage", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -25,7 +25,7 @@
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
     "tsx": "^3.9.0",
-    "typescript": "4.7.4",
+    "typescript": "4.9.5",
     "zod": "^3.19.1",
     "@webstudio-is/generate-arg-types": "^0.0.1",
     "@webstudio-is/jest-config": "^1.0.2",
@@ -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.30.0",
+    "@webstudio-is/css-data": "^0.30.0",
+    "@webstudio-is/icons": "^0.30.0",
+    "@webstudio-is/image": "^0.30.0",
+    "@webstudio-is/prisma-client": "^0.30.0",
+    "@webstudio-is/project-build": "^0.30.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/app/custom-components/image.tsx

@@ -44,12 +44,12 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
     return (
       <WebstudioImage
         /**
-         * `key` is needed to recreate the image in case of asset change in designer,
+         * `key` is needed to recreate the image in case of asset change in builder,
          * this gives immediate feedback when an asset is changed.
          * Also, it visually fixes image distortion when another asset has a seriously different  aspectRatio
          * (we change aspectRatio CSS prop on asset change)
          *
-         * In non-designer mode, key on images are usually also a good idea,
+         * In non-builder mode, key on images are usually also a good idea,
          * prevents showing outdated images on route change.
          **/
         key={src}

package/src/app/custom-components/index.ts

@@ -2,7 +2,7 @@ import { Image } from "./image";
 import { Link } from "./link";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
-import type { MetaProps } from "../../components/component-type";
+import { WsComponentPropsMeta } from "../../components/component-type";
 
 export const customComponents = {
   Image,
@@ -10,8 +10,14 @@ export const customComponents = {
   RichTextLink,
 };
 
-export const customComponentsMeta = {
-  Image: {
-    props: imageProps as MetaProps,
-  },
+export const customComponentPropsMetas = {
+  Image: WsComponentPropsMeta.parse({
+    props: {
+      ...imageProps,
+      src: { ...imageProps.src, control: "file-image", name: "Source" },
+    },
+  }),
 };
+
+// just for completeness, maybe we add soemthing here later
+export const customComponentMetas = {};

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;

package/src/app/root.tsx

@@ -1,5 +1,4 @@
 import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-import { DynamicLinks } from "remix-utils";
 
 /**
  * We are using Outlet prop from index layout when user renders site from a subdomain.
@@ -17,7 +16,6 @@ export const Root = ({
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
         <Meta />
-        <DynamicLinks />
         <Links />
       </head>