@webstudio-is/react-sdk 0.10.0 → 0.10.1

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

@@ -15,10 +15,12 @@ const Image = forwardRef(
     const asset = useUserPropsAsset(componentId, "src");
     const params = getParams();
     const loader = useMemo(() => {
-      if (asset == null)
+      if (asset == null) {
         return null;
-      if (asset.location === "REMOTE")
+      }
+      if (asset.location === "REMOTE") {
         return loaders.cloudflareImageLoader(params);
+      }
       return loaders.localImageLoader();
     }, [asset, params]);
     let src = props.src;

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

@@ -35,10 +35,12 @@ const Image = (0, import_react.forwardRef)(
     const asset = (0, import_use_user_props_asset.useUserPropsAsset)(componentId, "src");
     const params = (0, import_params.getParams)();
     const loader = (0, import_react.useMemo)(() => {
-      if (asset == null)
+      if (asset == null) {
         return null;
-      if (asset.location === "REMOTE")
+      }
+      if (asset.location === "REMOTE") {
         return import_image.loaders.cloudflareImageLoader(params);
+      }
       return import_image.loaders.localImageLoader();
     }, [asset, params]);
     let src = props.src;

package/lib/cjs/css/get-browser-style.cjs

@@ -27,8 +27,9 @@ const unitRegex = new RegExp(`${import_css_data.units.join("|")}`);
 const parseValue = (property, value) => {
   const number = parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)")
+  if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
+  }
   if (isNaN(number) || parsedUnit === null) {
     return {
       type: "keyword",
@@ -46,13 +47,15 @@ const parseValue = (property, value) => {
 };
 const getBrowserStyle = (element) => {
   const browserStyle = {};
-  if (element === void 0)
+  if (element === void 0) {
     return browserStyle;
+  }
   let knownProperty;
   const computedStyle = getComputedStyle(element);
   for (knownProperty in import_css_data.properties) {
-    if (knownProperty in computedStyle === false)
+    if (knownProperty in computedStyle === false) {
       continue;
+    }
     const computedValue = computedStyle[knownProperty];
     browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
   }

package/lib/cjs/pubsub/create.cjs

@@ -52,8 +52,9 @@ const createPubsub = () => {
       const publishCallback = (0, import_react.useCallback)(
         (action) => {
           const element = iframeRef.current;
-          if (element?.contentWindow == null)
+          if (element?.contentWindow == null) {
             return;
+          }
           element.contentWindow.postMessage(action, "*");
           window.postMessage(action, "*");
         },

package/lib/cjs/tree/wrapper-component.cjs

@@ -37,8 +37,9 @@ const renderText = (text) => {
   }, index));
 };
 const renderWrapperComponentChildren = (children) => {
-  if (children === void 0 || children.length === 0)
+  if (children === void 0 || children.length === 0) {
     return;
+  }
   return children.map((child) => {
     return typeof child === "string" ? renderText(child) : child;
   });

package/lib/cjs/user-props/use-user-props-asset.cjs

@@ -27,11 +27,13 @@ const useUserPropsAsset = (instanceId, propName) => {
   const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
   const propsData = allUserProps[instanceId];
   const asset = (0, import_react.useMemo)(() => {
-    if (propsData == null)
+    if (propsData == null) {
       return void 0;
+    }
     const prop = propsData.props.find((prop2) => prop2.prop === propName);
-    if (prop == null)
+    if (prop == null) {
       return void 0;
+    }
     if (prop.type === "asset") {
       return prop.value;
     }

package/lib/cjs/user-props/use-user-props.cjs

@@ -27,8 +27,9 @@ const useUserProps = (instanceId) => {
   const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
   const propsData = allUserProps[instanceId];
   const props = (0, import_react.useMemo)(() => {
-    if (propsData == null)
+    if (propsData == null) {
       return {};
+    }
     const result = {};
     for (const userProp of propsData.props) {
       if (userProp.type !== "asset") {

package/lib/css/get-browser-style.js

@@ -4,8 +4,9 @@ const unitRegex = new RegExp(`${units.join("|")}`);
 const parseValue = (property, value) => {
   const number = parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)")
+  if (value === "rgba(0, 0, 0, 0)") {
     value = "transparent";
+  }
   if (isNaN(number) || parsedUnit === null) {
     return {
       type: "keyword",
@@ -23,13 +24,15 @@ const parseValue = (property, value) => {
 };
 const getBrowserStyle = (element) => {
   const browserStyle = {};
-  if (element === void 0)
+  if (element === void 0) {
     return browserStyle;
+  }
   let knownProperty;
   const computedStyle = getComputedStyle(element);
   for (knownProperty in properties) {
-    if (knownProperty in computedStyle === false)
+    if (knownProperty in computedStyle === false) {
       continue;
+    }
     const computedValue = computedStyle[knownProperty];
     browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
   }

package/lib/pubsub/create.js

@@ -23,8 +23,9 @@ const createPubsub = () => {
       const publishCallback = useCallback(
         (action) => {
           const element = iframeRef.current;
-          if (element?.contentWindow == null)
+          if (element?.contentWindow == null) {
             return;
+          }
           element.contentWindow.postMessage(action, "*");
           window.postMessage(action, "*");
         },

package/lib/tree/wrapper-component.js

@@ -12,8 +12,9 @@ const renderText = (text) => {
   }, index));
 };
 const renderWrapperComponentChildren = (children) => {
-  if (children === void 0 || children.length === 0)
+  if (children === void 0 || children.length === 0) {
     return;
+  }
   return children.map((child) => {
     return typeof child === "string" ? renderText(child) : child;
   });

package/lib/user-props/use-user-props-asset.js

@@ -4,11 +4,13 @@ const useUserPropsAsset = (instanceId, propName) => {
   const [allUserProps] = useAllUserProps();
   const propsData = allUserProps[instanceId];
   const asset = useMemo(() => {
-    if (propsData == null)
+    if (propsData == null) {
       return void 0;
+    }
     const prop = propsData.props.find((prop2) => prop2.prop === propName);
-    if (prop == null)
+    if (prop == null) {
       return void 0;
+    }
     if (prop.type === "asset") {
       return prop.value;
     }

package/lib/user-props/use-user-props.js

@@ -4,8 +4,9 @@ const useUserProps = (instanceId) => {
   const [allUserProps] = useAllUserProps();
   const propsData = allUserProps[instanceId];
   const props = useMemo(() => {
-    if (propsData == null)
+    if (propsData == null) {
       return {};
+    }
     const result = {};
     for (const userProp of propsData.props) {
       if (userProp.type !== "asset") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",

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

@@ -22,9 +22,12 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
     const params = getParams();
 
     const loader = useMemo(() => {
-      if (asset == null) return null;
-      if (asset.location === "REMOTE")
+      if (asset == null) {
+        return null;
+      }
+      if (asset.location === "REMOTE") {
         return loaders.cloudflareImageLoader(params);
+      }
       return loaders.localImageLoader();
     }, [asset, params]);
 

package/src/css/get-browser-style.ts

@@ -11,7 +11,9 @@ const parseValue = (
 ): StyleValue => {
   const number = parseFloat(value);
   const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") value = "transparent";
+  if (value === "rgba(0, 0, 0, 0)") {
+    value = "transparent";
+  }
   if (isNaN(number) || parsedUnit === null) {
     return {
       type: "keyword",
@@ -32,11 +34,15 @@ const parseValue = (
 
 export const getBrowserStyle = (element?: Element): Style => {
   const browserStyle: Style = {};
-  if (element === undefined) return browserStyle;
+  if (element === undefined) {
+    return browserStyle;
+  }
   let knownProperty: keyof typeof properties;
   const computedStyle = getComputedStyle(element);
   for (knownProperty in properties) {
-    if (knownProperty in computedStyle === false) continue;
+    if (knownProperty in computedStyle === false) {
+      continue;
+    }
     // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
     const computedValue = computedStyle[knownProperty as unknown as number];
     browserStyle[knownProperty] = parseValue(knownProperty, computedValue);

package/src/pubsub/create.ts

@@ -43,7 +43,9 @@ export const createPubsub = <PublishMap>() => {
       const publishCallback = useCallback(
         <Type extends keyof PublishMap>(action: Action<Type>) => {
           const element = iframeRef.current;
-          if (element?.contentWindow == null) return;
+          if (element?.contentWindow == null) {
+            return;
+          }
           element.contentWindow.postMessage(action, "*");
           window.postMessage(action, "*");
         },

package/src/tree/wrapper-component.tsx

@@ -19,7 +19,9 @@ export const renderWrapperComponentChildren = (
 ): Array<JSX.Element | string | Array<JSX.Element | string>> | undefined => {
   // Some elements like input can't have children
   // @todo needs to be made impossible to drag element into input
-  if (children === undefined || children.length === 0) return;
+  if (children === undefined || children.length === 0) {
+    return;
+  }
   return children.map((child) => {
     return typeof child === "string" ? renderText(child) : child;
   });

package/src/user-props/use-user-props-asset.ts

@@ -15,10 +15,14 @@ export const useUserPropsAsset = (
 
   const propsData = allUserProps[instanceId];
   const asset = useMemo(() => {
-    if (propsData == null) return undefined;
+    if (propsData == null) {
+      return undefined;
+    }
     const prop = propsData.props.find((prop) => prop.prop === propName);
 
-    if (prop == null) return undefined;
+    if (prop == null) {
+      return undefined;
+    }
 
     if (prop.type === "asset") {
       return prop.value;

package/src/user-props/use-user-props.ts

@@ -14,7 +14,9 @@ export const useUserProps = (instanceId: Instance["id"]) => {
 
   const propsData = allUserProps[instanceId];
   const props = useMemo(() => {
-    if (propsData == null) return {};
+    if (propsData == null) {
+      return {};
+    }
     const result: UserProps = {};
 
     for (const userProp of propsData.props) {