@webstudio-is/react-sdk 0.29.0 → 0.31.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.29.0",
+  "version": "0.31.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -25,9 +25,9 @@
     "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/generate-arg-types": "^0.31.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
@@ -47,12 +47,12 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@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"
+    "@webstudio-is/asset-uploader": "^0.31.0",
+    "@webstudio-is/css-data": "^0.31.0",
+    "@webstudio-is/icons": "^0.31.0",
+    "@webstudio-is/image": "^0.31.0",
+    "@webstudio-is/prisma-client": "^0.31.0",
+    "@webstudio-is/project-build": "^0.31.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/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>