@webstudio-is/sdk-components-react 0.122.0 → 0.124.0

package/README.md

@@ -1,3 +1,3 @@
 # Webstudio SDK Components
 
-Webstudio SDK is a TypeScript API that lets you use your Webstudio site or some components in your custom codebase or just render a complete Remix Document.
+Webstudio SDK is a TypeScript API that lets you use your Webstudio project or some components in your custom codebase or just render a complete Remix Document.

package/lib/components.js

@@ -75,7 +75,7 @@ var Placeholder = (props) => {
 var HtmlEmbed = forwardRef3((props, ref) => {
   const { renderer } = useContext(ReactSdkContext);
   const { code, executeScriptOnCanvas, clientOnly, ...rest } = props;
-  if (code === void 0 || code.trim().length === 0) {
+  if (code === void 0 || String(code).trim().length === 0) {
     return /* @__PURE__ */ jsx3(Placeholder, { innerRef: ref, ...rest });
   }
   if (renderer === "canvas" && executeScriptOnCanvas === true || renderer === "preview" || clientOnly) {
@@ -408,8 +408,8 @@ var warmConnections = () => {
   preconnect(IMAGE_CDN);
   warmed = true;
 };
-var createPlayer = (parent, options, callback) => {
-  const url = getUrl(options);
+var createPlayer = (parent, vimeoOptions, extendedOptions, callback) => {
+  const url = getUrl(vimeoOptions);
   if (url === void 0) {
     return;
   }
@@ -425,6 +425,9 @@ var createPlayer = (parent, options, callback) => {
     "style",
     "position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s;"
   );
+  if (extendedOptions.loading) {
+    iframe.setAttribute("loading", extendedOptions.loading);
+  }
   iframe.addEventListener(
     "load",
     () => {
@@ -465,7 +468,8 @@ var loadPreviewImage = async (element, videoUrl) => {
 var useVimeo = ({
   options,
   renderer,
-  showPreview
+  showPreview,
+  loading
 }) => {
   const [playerStatus, setPlayerStatus] = useState("initial");
   const elementRef = useRef2(null);
@@ -498,15 +502,16 @@ var useVimeo = ({
     if (elementRef.current === null || playerStatus === "initial") {
       return;
     }
-    return createPlayer(elementRef.current, stableOptions, () => {
+    return createPlayer(elementRef.current, stableOptions, { loading }, () => {
       setPlayerStatus("ready");
     });
-  }, [stableOptions, playerStatus]);
+  }, [stableOptions, playerStatus, loading]);
   return { previewImageUrl, playerStatus, setPlayerStatus, elementRef };
 };
 var Vimeo = forwardRef29(
   ({
     url,
+    loading,
     autoplay = false,
     autopause = true,
     backgroundMode = false,
@@ -536,6 +541,7 @@ var Vimeo = forwardRef29(
     const { previewImageUrl, playerStatus, setPlayerStatus, elementRef } = useVimeo({
       renderer,
       showPreview,
+      loading,
       options: {
         url,
         autoplay,

package/lib/props.js

@@ -14328,6 +14328,14 @@ var props26 = {
     type: "string",
     description: "Defines the language used in the element."
   },
+  loading: {
+    description: "Not a Vimeo attribute: Loading attribute for the iframe allows to eager or lazy load the source",
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "lazy",
+    options: ["eager", "lazy"]
+  },
   loop: {
     description: "Whether to restart the video automatically after reaching the end.",
     required: false,
@@ -14419,7 +14427,7 @@ var props26 = {
     defaultValue: true
   },
   showPreview: {
-    description: "Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your site feel slower.",
+    description: "Not a Vimeo attribute: Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your project feel slower.",
     required: false,
     control: "boolean",
     type: "boolean",
@@ -14516,6 +14524,7 @@ var initialProps = [
   "quality",
   "showPreview",
   "autoplay",
+  "loading",
   "backgroundMode",
   "doNotTrack",
   "loop",

package/lib/types/vimeo.d.ts

@@ -44,8 +44,10 @@ type VimeoPlayerOptions = {
 };
 type PlayerStatus = "initial" | "initialized" | "ready";
 export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params" | "background" | "controls" | "color" | "byline" | "title" | "portrait"> & {
-    /** Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your site feel slower. */
+    /** Not a Vimeo attribute: Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your project feel slower. */
     showPreview?: boolean;
+    /** Not a Vimeo attribute: Loading attribute for the iframe allows to eager or lazy load the source */
+    loading?: "eager" | "lazy";
     /** Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats. */
     doNotTrack?: VimeoPlayerOptions["dnt"];
     /** Key-value pairs representing dynamic parameters that are utilized on interactive videos with live elements, such as title=my-video,subtitle=interactive. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.122.0",
+  "version": "0.124.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,9 +40,9 @@
     "@react-aria/utils": "^3.21.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/icons": "0.122.0",
-    "@webstudio-is/image": "0.122.0",
-    "@webstudio-is/react-sdk": "0.122.0"
+    "@webstudio-is/icons": "0.124.0",
+    "@webstudio-is/image": "0.124.0",
+    "@webstudio-is/react-sdk": "0.124.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.4.0",
@@ -51,7 +51,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "0.122.0",
+    "@webstudio-is/generate-arg-types": "0.124.0",
     "@webstudio-is/storybook-config": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },