@webstudio-is/react-sdk 0.8.0 → 0.10.0

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

@@ -1,39 +1,62 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionStoragePolyfill = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// This is a temporary work around for https://github.com/remix-run/remix/issues/3659
-// The code is based on this discussion https://bugs.chromium.org/p/chromium/issues/detail?id=357625
-const polyfill = function () {
-    try {
-        const key = "__session_storage_availability_test__";
-        sessionStorage.setItem(key, "test"); // test
-        sessionStorage.removeItem(key); // cleanup
-    }
-    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');
-        const data = new Map();
-        Object.defineProperty(window, "sessionStorage", {
-            value: {
-                setItem: (key, val) => {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`);
-                    data.set(key, String(val));
-                },
-                getItem: (key) => {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`);
-                    return data.get(key);
-                },
-                removeItem: (key) => {
-                    data.delete(key);
-                },
-                clear: () => {
-                    data.clear();
-                },
-            },
-        });
-    }
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var session_storage_polyfill_exports = {};
+__export(session_storage_polyfill_exports, {
+  SessionStoragePolyfill: () => SessionStoragePolyfill
+});
+module.exports = __toCommonJS(session_storage_polyfill_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const polyfill = function() {
+  try {
+    const key = "__session_storage_availability_test__";
+    sessionStorage.setItem(key, "test");
+    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'
+    );
+    const data = /* @__PURE__ */ new Map();
+    Object.defineProperty(window, "sessionStorage", {
+      value: {
+        setItem: (key, val) => {
+          console.warn(
+            `Session storage is unavailable due to Error "${error.message}". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`
+          );
+          data.set(key, String(val));
+        },
+        getItem: (key) => {
+          console.warn(
+            `Session storage is unavailable due to Error "${error.message}". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`
+          );
+          return data.get(key);
+        },
+        removeItem: (key) => {
+          data.delete(key);
+        },
+        clear: () => {
+          data.clear();
+        }
+      }
+    });
+  }
 }.toString();
-const SessionStoragePolyfill = () => ((0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));
-exports.SessionStoragePolyfill = SessionStoragePolyfill;
+const SessionStoragePolyfill = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
+  dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
+  suppressHydrationWarning: true
+});

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

@@ -1,53 +1,60 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.idAttribute = exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const components = __importStar(require("../components"));
-const use_user_props_1 = require("../user-props/use-user-props");
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wrapper_component_exports = {};
+__export(wrapper_component_exports, {
+  WrapperComponent: () => WrapperComponent,
+  idAttribute: () => idAttribute,
+  renderWrapperComponentChildren: () => renderWrapperComponentChildren
+});
+module.exports = __toCommonJS(wrapper_component_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_components = require("../components");
+var import_use_user_props = require("../user-props/use-user-props");
 const renderText = (text) => {
-    const lines = text.split("\n");
-    return lines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [line, index < lines.length - 1 ? (0, jsx_runtime_1.jsx)("br", {}) : null] }, index)));
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+    children: [
+      line,
+      index < lines.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
+    ]
+  }, index));
 };
 const renderWrapperComponentChildren = (children) => {
-    // 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;
-    return children.map((child) => {
-        return typeof child === "string" ? renderText(child) : child;
-    });
+  if (children === void 0 || children.length === 0)
+    return;
+  return children.map((child) => {
+    return typeof child === "string" ? renderText(child) : child;
+  });
 };
-exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
-const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
-children, ...rest }) => {
-    const { Component } = components[instance.component];
-    const userProps = (0, use_user_props_1.useUserProps)(instance.id);
-    const props = { ...userProps, ...rest, [exports.idAttribute]: instance.id };
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, children: (0, exports.renderWrapperComponentChildren)(children) }));
+const WrapperComponent = ({
+  instance,
+  onChangeChildren,
+  children,
+  ...rest
+}) => {
+  const Component = (0, import_components.getComponent)(instance.component);
+  const userProps = (0, import_use_user_props.useUserProps)(instance.id);
+  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
+    ...props,
+    children: renderWrapperComponentChildren(children)
+  });
 };
-exports.WrapperComponent = WrapperComponent;
-exports.idAttribute = "data-ws-id";
+const idAttribute = "data-ws-id";

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

@@ -1,21 +1,39 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAllUserProps = exports.allUserPropsContainer = void 0;
-const react_1 = require("react");
-const react_nano_state_1 = require("react-nano-state");
-exports.allUserPropsContainer = (0, react_nano_state_1.createValueContainer)({});
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var all_user_props_exports = {};
+__export(all_user_props_exports, {
+  allUserPropsContainer: () => allUserPropsContainer,
+  useAllUserProps: () => useAllUserProps
+});
+module.exports = __toCommonJS(all_user_props_exports);
+var import_react = require("react");
+var import_react_nano_state = require("react-nano-state");
+const allUserPropsContainer = (0, import_react_nano_state.createValueContainer)({});
 const useAllUserProps = (initialUserProps) => {
-    // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
-    const ref = (0, react_1.useRef)(false);
-    if (ref.current === false && initialUserProps !== undefined) {
-        const propsMap = {};
-        for (const props of initialUserProps) {
-            propsMap[props.instanceId] = props;
-        }
-        //We don't need to trigger rerender when setting the initial value
-        exports.allUserPropsContainer.value = propsMap;
-        ref.current = true;
+  const ref = (0, import_react.useRef)(false);
+  if (ref.current === false && initialUserProps !== void 0) {
+    const propsMap = {};
+    for (const props of initialUserProps) {
+      propsMap[props.instanceId] = props;
     }
-    return (0, react_nano_state_1.useValue)(exports.allUserPropsContainer);
+    allUserPropsContainer.value = propsMap;
+    ref.current = true;
+  }
+  return (0, import_react_nano_state.useValue)(allUserPropsContainer);
 };
-exports.useAllUserProps = useAllUserProps;

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

@@ -1,20 +1,21 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./all-user-props"), exports);
-__exportStar(require("./use-user-props"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./schema"), exports);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var user_props_exports = {};
+module.exports = __toCommonJS(user_props_exports);
+__reExport(user_props_exports, require("./all-user-props"), module.exports);
+__reExport(user_props_exports, require("./use-user-props"), module.exports);
+__reExport(user_props_exports, require("./types"), module.exports);
+__reExport(user_props_exports, require("./schema"), module.exports);

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

@@ -1,33 +1,54 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserUserProps = exports.UserDbProps = void 0;
-const zod_1 = require("zod");
-const UserPropDb = zod_1.z.object({
-    id: zod_1.z.string(),
-    prop: zod_1.z.string(),
-    value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
-    assetId: zod_1.z.optional(zod_1.z.string()),
-    required: zod_1.z.optional(zod_1.z.boolean()),
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var schema_exports = {};
+__export(schema_exports, {
+  UserProp: () => UserProp,
+  UserProps: () => UserProps
 });
-exports.UserDbProps = zod_1.z.array(UserPropDb);
-const UserUserProp = zod_1.z
-    .object({
-    id: zod_1.z.string(),
-    prop: zod_1.z.string(),
-    value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
-    // We are not interested in Props data does any other props on asset exists
-    asset: zod_1.z.optional(zod_1.z.object({ id: zod_1.z.string() })),
-    required: zod_1.z.optional(zod_1.z.boolean()),
-})
-    .transform(({ id, prop, value, asset, required }) => {
-    // Check with infer that we are transforming to UserPropDb
-    const res = {
-        id,
-        prop,
-        value,
-        assetId: asset?.id,
-        required,
-    };
-    return res;
-});
-exports.UserUserProps = zod_1.z.array(UserUserProp);
+module.exports = __toCommonJS(schema_exports);
+var import_zod = require("zod");
+var import_asset_uploader = require("@webstudio-is/asset-uploader");
+const baseUserProps = {
+  id: import_zod.z.string(),
+  prop: import_zod.z.string(),
+  required: import_zod.z.optional(import_zod.z.boolean())
+};
+const UserProp = import_zod.z.discriminatedUnion("type", [
+  import_zod.z.object({
+    ...baseUserProps,
+    type: import_zod.z.literal("number"),
+    value: import_zod.z.number()
+  }),
+  import_zod.z.object({
+    ...baseUserProps,
+    type: import_zod.z.literal("string"),
+    value: import_zod.z.string()
+  }),
+  import_zod.z.object({
+    ...baseUserProps,
+    type: import_zod.z.literal("boolean"),
+    value: import_zod.z.boolean()
+  }),
+  import_zod.z.object({
+    ...baseUserProps,
+    type: import_zod.z.literal("asset"),
+    value: import_asset_uploader.Asset
+  })
+]);
+const UserProps = import_zod.z.array(UserProp);

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

@@ -1,2 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_user_props_asset_exports = {};
+__export(use_user_props_asset_exports, {
+  useUserPropsAsset: () => useUserPropsAsset
+});
+module.exports = __toCommonJS(use_user_props_asset_exports);
+var import_react = require("react");
+var import_all_user_props = require("./all-user-props");
+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)
+      return void 0;
+    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    if (prop == null)
+      return void 0;
+    if (prop.type === "asset") {
+      return prop.value;
+    }
+    return void 0;
+  }, [propName, propsData]);
+  return asset;
+};

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

@@ -1,33 +1,41 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUserProps = void 0;
-const react_1 = require("react");
-const all_user_props_1 = require("./all-user-props");
-/**
- * User props mapped in prop:value format,
- * up to date with props panel.
- */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_user_props_exports = {};
+__export(use_user_props_exports, {
+  useUserProps: () => useUserProps
+});
+module.exports = __toCommonJS(use_user_props_exports);
+var import_react = require("react");
+var import_all_user_props = require("./all-user-props");
 const useUserProps = (instanceId) => {
-    const [allUserProps] = (0, all_user_props_1.useAllUserProps)();
-    const propsData = allUserProps[instanceId];
-    const initialUserProps = (0, react_1.useMemo)(() => {
-        if (propsData === undefined)
-            return {};
-        return propsData.props.reduce((props, { prop, value }) => {
-            props[prop] = value;
-            return props;
-        }, {});
-    }, [propsData]);
-    const [props, setProps] = (0, react_1.useState)(initialUserProps);
-    (0, react_1.useEffect)(() => {
-        if (propsData == undefined)
-            return;
-        const nextProps = {};
-        for (const prop of propsData.props) {
-            nextProps[prop.prop] = prop.value;
-        }
-        setProps(nextProps);
-    }, [propsData]);
-    return props;
+  const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
+  const propsData = allUserProps[instanceId];
+  const props = (0, import_react.useMemo)(() => {
+    if (propsData == null)
+      return {};
+    const result = {};
+    for (const userProp of propsData.props) {
+      if (userProp.type !== "asset") {
+        result[userProp.prop] = userProp.value;
+      }
+    }
+    return result;
+  }, [propsData]);
+  return props;
 };
-exports.useUserProps = useUserProps;