@makeswift/runtime 0.0.6 → 0.0.7

package/dist/index.es.js

@@ -64,6 +64,8 @@ import Hotkeys from "slate-hotkeys";
 import ipsum from "corporate-ipsum";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
+import { S as ShapeControlType, I as ImageControlType, C as ColorControlType, a as SelectControlType, T as TextAreaControlType, b as TextInputControlType, N as NumberControlType, c as CheckboxControlType } from "./text-input.es.js";
+import { L as ListControlType } from "./list.es.js";
 import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
 import { findDOMNode } from "react-dom";
 const PlaceholderBase$1 = styled.div`
@@ -521,7 +523,7 @@ function useBoxShadow(value) {
     });
   });
 }
-function useColor(color) {
+function useResponsiveColor(color) {
   const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
   const skip = swatchIds.length === 0;
   const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
@@ -5625,7 +5627,7 @@ function DropDownItem$1(_S) {
     "color"
   ]);
   return /* @__PURE__ */ jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
-    color: useColor(color)
+    color: useResponsiveColor(color)
   }));
 }
 function DropDownButton(_U) {
@@ -5654,8 +5656,8 @@ function DropDownButton(_U) {
   return /* @__PURE__ */ jsxs(DropDownContainer, {
     ref: container,
     children: [/* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
-      textColor: useColor(textColor),
-      color: useColor(color),
+      textColor: useResponsiveColor(textColor),
+      color: useResponsiveColor(color),
       children: /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
@@ -5736,7 +5738,7 @@ function DropDownItem(_W) {
     "color"
   ]);
   return /* @__PURE__ */ jsx(StyledLink$2, __spreadProps(__spreadValues({}, restOfProps), {
-    color: useColor(color)
+    color: useResponsiveColor(color)
   }));
 }
 function MobileDropDownButton(_Y) {
@@ -5759,8 +5761,8 @@ function MobileDropDownButton(_Y) {
   const [isOpen, setIsOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(ButtonLink$1, __spreadProps(__spreadValues({}, restOfProps), {
-      textColor: useColor(textColor),
-      color: useColor(color),
+      textColor: useResponsiveColor(textColor),
+      color: useResponsiveColor(color),
       onPointerDown: () => setIsOpen((prev) => !prev),
       children: /* @__PURE__ */ jsxs("div", {
         style: {
@@ -5803,8 +5805,8 @@ function NavigationButton$1(props) {
     "color"
   ]);
   return /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
-    textColor: useColor(textColor),
-    color: useColor(color)
+    textColor: useResponsiveColor(textColor),
+    color: useResponsiveColor(color)
   }));
 }
 const ButtonLink = styled(NavigationButton$1)`
@@ -5935,8 +5937,8 @@ function NavigationButton(props) {
     "color"
   ]);
   return /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
-    textColor: useColor(textColor),
-    color: useColor(color)
+    textColor: useResponsiveColor(textColor),
+    color: useResponsiveColor(color)
   }));
 }
 const placeholder = {
@@ -8176,6 +8178,141 @@ function useFormattedStyle(styleControlData, controlDefinition) {
   });
   return `${cache.key}-${serialized.name}`;
 }
+function RenderHook({
+  hook: useHook,
+  parameters,
+  children
+}) {
+  return children(useHook(...parameters));
+}
+function useCheckboxControlValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function useColorValue(data, definition) {
+  var _a, _b;
+  const result = useQuery(SWATCHES_BY_ID, {
+    variables: { ids: [data == null ? void 0 : data.swatchId] },
+    skip: (data == null ? void 0 : data.swatchId) == null
+  });
+  if (data === void 0) {
+    const { defaultValue } = definition.config;
+    if (defaultValue === void 0)
+      return void 0;
+    let defaultColor;
+    try {
+      defaultColor = ColorHelper(definition.config.defaultValue);
+    } catch {
+      defaultColor = ColorHelper();
+    }
+    return defaultColor.rgb().string();
+  }
+  const [swatch] = (_b = (_a = result.data) == null ? void 0 : _a.swatches) != null ? _b : [null];
+  return ColorHelper({ h: swatch == null ? void 0 : swatch.hue, s: swatch == null ? void 0 : swatch.saturation, l: swatch == null ? void 0 : swatch.lightness }).alpha(data.alpha).rgb().string();
+}
+function useImageControlValue(data) {
+  var _a;
+  return (_a = useFile(data)) == null ? void 0 : _a.publicUrl;
+}
+function ListControlValue({
+  definition,
+  data,
+  children
+}) {
+  return (data != null ? data : []).reduce((renderFn, item) => (listControlValue) => /* @__PURE__ */ jsx(ControlValue, {
+    definition: definition.config.type,
+    data: item.value,
+    children: (value) => renderFn([value, ...listControlValue])
+  }), children)([]);
+}
+function useNumber(numberControlData, controlDefinition) {
+  return numberControlData != null ? numberControlData : controlDefinition.config.defaultValue;
+}
+function useSelectControlValue(data, definition) {
+  return data != null ? data : definition == null ? void 0 : definition.config.defaultValue;
+}
+function ShapeControlValue({
+  definition,
+  data,
+  children
+}) {
+  return Object.entries(definition.config.type).reduce((renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ jsx(ControlValue, {
+    definition: controlDefinition,
+    data: data == null ? void 0 : data[key],
+    children: (value) => renderFn(__spreadProps(__spreadValues({}, shapeControlValue), {
+      [key]: value
+    }))
+  }), children)({});
+}
+function useTextAreaValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function useTextInputValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function ControlValue({
+  data,
+  definition,
+  children
+}) {
+  switch (definition.type) {
+    case CheckboxControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useCheckboxControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case NumberControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useNumber,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case TextInputControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useTextInputValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case TextAreaControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useTextAreaValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case SelectControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useSelectControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case ColorControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useColorValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case ImageControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useImageControlValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
+    case ShapeControlType:
+      return /* @__PURE__ */ jsx(ShapeControlValue, {
+        definition,
+        data,
+        children: (value) => children(value)
+      });
+    case ListControlType:
+      return /* @__PURE__ */ jsx(ListControlValue, {
+        definition,
+        data,
+        children: (value) => children(value)
+      });
+    default:
+      return children(data);
+  }
+}
 function useDeviceMode() {
   return "desktop";
 }
@@ -8184,28 +8321,62 @@ function useWidth(value, descriptor, props) {
   const options = useMemo(() => typeof descriptor.options === "function" ? descriptor.options(props, deviceMode) : descriptor.options, [props, deviceMode]);
   return useMemo(() => options.format === WidthControlValueFormats.ClassName ? css$1(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
 }
-function useResponsiveColor(value) {
-  return useColor(value);
-}
-function useProps(element) {
+function PropsValue({
+  element,
+  children
+}) {
   var _a;
   const store = useStore();
   const propControllerDescriptorsRef = useRef((_a = getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
   const props = element.props;
-  return Object.fromEntries(Object.entries(propControllerDescriptorsRef.current).map(([propName, descriptor]) => {
+  return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
     switch (descriptor.type) {
-      case Types.ResponsiveColor: {
-        const color = useResponsiveColor(props[propName]);
-        return [propName, color];
-      }
-      case Types.Width:
-        return [propName, useWidth(props[propName], descriptor, props)];
+      case CheckboxControlType:
+      case NumberControlType:
+      case TextInputControlType:
+      case TextAreaControlType:
+      case SelectControlType:
+      case ColorControlType:
+      case ImageControlType:
+      case ShapeControlType:
+      case ListControlType:
+        return /* @__PURE__ */ jsx(ControlValue, {
+          definition: descriptor,
+          data: props[propName],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        });
       case StyleControlType:
-        return [propName, useFormattedStyle(props[propName], descriptor)];
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useFormattedStyle,
+          parameters: [props[propName], descriptor],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      case Types.Width:
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useWidth,
+          parameters: [props[propName], descriptor, props],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      case Types.ResponsiveColor:
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useResponsiveColor,
+          parameters: [props[propName]],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
       default:
-        return [propName, props[propName]];
+        return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+          [propName]: props[propName]
+        }));
     }
-  }));
+  }, children)({});
 }
 function suppressWarningAndFindDomNode(instance) {
   const error = console.error;
@@ -8385,7 +8556,6 @@ const ElementData = memo(forwardRef(function ElementData2({
   elementData
 }, ref) {
   const Component2 = useComponent(elementData.type);
-  const props = useProps(elementData);
   const [handle, setHandle] = useState(null);
   const [foundDomNode, setFoundDomNode] = useState(null);
   useImperativeHandle(ref, () => handle != null ? handle : foundDomNode, [handle, foundDomNode]);
@@ -8398,10 +8568,13 @@ const ElementData = memo(forwardRef(function ElementData2({
   }
   return /* @__PURE__ */ jsx(FindDomNode, {
     ref: setFoundDomNode,
-    children: /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
-      key: elementData.key,
-      ref: setHandle
-    }))
+    children: /* @__PURE__ */ jsx(PropsValue, {
+      element: elementData,
+      children: (props) => /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
+        key: elementData.key,
+        ref: setHandle
+      }))
+    })
   });
 }));
 const ElementReference = memo(forwardRef(function ElementReference2({
@@ -8497,5 +8670,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document
   });
 }));
-export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
+export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useResponsiveColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
 //# sourceMappingURL=index.es.js.map