@plasmicapp/react-web 0.2.99 → 0.2.102

package/dist/all.d.ts

@@ -106,7 +106,12 @@ interface PlasmicImgProps extends ImgTagProps {
      * or just a src string with unknown intrinsic dimensions.
      */
     src?: string | {
-        src: string;
+        src: string | {
+            src: string;
+            height: number;
+            width: number;
+            blurDataURL?: string;
+        };
         fullHeight: number;
         fullWidth: number;
         aspectRatio?: number;
@@ -1177,4 +1182,18 @@ declare function useTriggeredOverlay<P extends BaseTriggeredOverlayProps, C exte
     };
 };
 
-export { BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+interface $State {
+    [key: string]: any;
+}
+interface $StateSpec<T> {
+    path: string;
+    initFunc?: ($props: Record<string, any>, $state: $State) => T;
+    initVal?: T;
+    type: "private" | "readonly" | "writable";
+    valueProp?: string;
+    onChangeProp?: string;
+}
+declare function useVanillaDollarState(specs: $StateSpec<any>[], props: Record<string, any>): $State;
+declare const useDollarState: typeof useVanillaDollarState;
+
+export { BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from "./plume/select";
 export * from "./plume/switch";
 export * from "./plume/text-input";
 export * from "./plume/triggered-overlay";
+export { default as useDollarState } from "./states/index";

package/dist/react-web.cjs.development.js

@@ -25,6 +25,8 @@ var listbox = require('@react-aria/listbox');
 var select$1 = require('@react-stately/select');
 var _switch = require('@react-aria/switch');
 var overlays = require('@react-aria/overlays');
+var get = _interopDefault(require('dlv'));
+var dset = require('dset');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -852,7 +854,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       fullHeight = _ref.fullHeight,
       aspectRatio = _ref.aspectRatio;
 
-  var srcStr = src ? typeof src === "string" ? src : src.src : ""; // Assume external image if either dimension is null and use usual <img>
+  var srcStr = src ? typeof src === "string" ? src : typeof src.src === "string" ? src.src : src.src.src : ""; // Assume external image if either dimension is null and use usual <img>
 
   if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
@@ -869,6 +871,8 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     displayWidth = "100%";
   }
 
+  var computedDisplayWidth = displayWidth;
+
   if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
     // If there's a pixel length specified for displayHeight but not displayWidth,
     // then we can derive the pixel length for displayWidth.  Having an explicit
@@ -878,7 +882,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       // We shouldn't do it for SVGs though, because `fullWidth` and
       // `fullHeight` might have rounded values so the final
       // `displayWidth` could differ by 1px or so.
-      displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
+      computedDisplayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
     }
   }
 
@@ -894,7 +898,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     spacerHeight = Math.round(spacerWidth / aspectRatio);
   }
 
-  var _getWidths = getWidths(displayWidth, fullWidth, {
+  var _getWidths = getWidths(computedDisplayWidth, fullWidth, {
     minWidth: displayMinWidth
   }),
       sizes = _getWidths.sizes,
@@ -906,7 +910,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
 
   var wrapperStyle = _extends({}, style || {});
 
-  var spacerStyle = pick(style || {}, "objectFit", "objectPosition");
+  var spacerStyle = _extends({}, pick(style || {}, "objectFit", "objectPosition"));
 
   if (displayWidth != null && displayWidth !== "auto") {
     // If width is set, set it on the wrapper along with min/max width
@@ -3120,6 +3124,339 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   };
 }
 
+var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
+function keyBy(list, keyFunc) {
+  var keyedObject = {};
+
+  for (var _iterator = _createForOfIteratorHelperLoose(list), _step; !(_step = _iterator()).done;) {
+    var val = _step.value;
+    keyedObject[keyFunc(val)] = val;
+  }
+
+  return keyedObject;
+}
+
+function getObjectAtPath($state, path) {
+  var parts = path.split(".");
+  var parts2 = parts.slice(0, parts.length - 1);
+
+  if (parts2.length === 0) {
+    return $state;
+  }
+
+  var existing = get($state, parts2);
+
+  if (existing) {
+    return existing;
+  }
+
+  var newObj = {};
+  dset.dset($state, parts2, newObj);
+  return newObj;
+}
+
+function isRendering() {
+  return !!React__default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
+}
+
+function shallowEqual(a1, a2) {
+  if (a1.length !== a2.length) {
+    return false;
+  }
+
+  for (var i = 0; i < a1.length; i++) {
+    if (a1[i] !== a2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function useVanillaDollarState(specs, props) {
+  var _React$useState = React__default.useState(function () {
+    return {
+      stateValues: Object.fromEntries(specs.map(function (spec) {
+        return [spec.path, // If the initial value depends on initFunc, then we initialize
+        // it to this special UNINITIALIZED symbol. We can't just run
+        // spec.initFunc() here, because the expression may read from
+        // $state, which is not yet initialized.  Instead, we will
+        // lazily compute and initialize this at get() time.
+        spec.initFunc ? UNINITIALIZED : spec.initVal];
+      })),
+      initStateValues: Object.fromEntries(specs.filter(function (spec) {
+        return !spec.initFunc;
+      }).map(function (spec) {
+        return [spec.path, spec.initVal];
+      })),
+      initStateDeps: {},
+      fireOnChange: {}
+    };
+  }),
+      _$$state = _React$useState[0],
+      set$$State = _React$useState[1]; // We have a weird scheme here to reduce the number of state updates.
+  // Whenever user does a $state get() or set(), we may end up initializing
+  // a bunch of values. We don't want to call set$$State() a bunch of times.
+  // Instead, we will fork as we need to, and call set$$State() at the end of
+  // the hook and at the end of get() / set() as appropriate.
+  // $$state here is going to be copied-on-write; once copied, it will
+  // be directly mutated. Since $state will always be directly proxying $$state,
+  // that means you can "read what you wrote": after $state.count = $state.count + 1,
+  // if you read $state.count again, it will reflect the latest value.
+  //
+  // There are three places where we might actually call set$$State():
+  // 1. At the end of a "top-level" get(): we may have ended up initializing
+  //    some state values.
+  // 2. At the end of a "top-level" set(): we mutated this value, but also
+  //    may have reset some other state values that depended on this one.
+  // 3. At the end of the hook, where we compare the new initial value with
+  //    the previous initial value.
+
+
+  var $$state = _extends({}, _$$state);
+
+  var dirtyFields = {
+    stateValues: false,
+    initStateValues: false,
+    initStateDeps: false,
+    fireOnChange: false
+  };
+
+  function makeDirty(field, copy) {
+    if (!dirtyFields[field]) {
+      dirtyFields[field] = true;
+      $$state[field] = copy($$state[field]);
+    }
+  }
+
+  function updateStateValue(path, value) {
+    makeDirty("stateValues", function (x) {
+      return _extends({}, x);
+    });
+    console.log("UPDATE state value:", path, value);
+    $$state.stateValues[path] = value; // If any other state depends on this one, then reset their
+    // values to their initial as well
+
+    for (var _i = 0, _Object$entries = Object.entries($$state.initStateDeps); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          deps = _Object$entries$_i[1];
+
+      if (deps.includes(path)) {
+        resetPath(key);
+      }
+    }
+
+    var spec = specByPath[path];
+
+    if (spec.onChangeProp) {
+      if (isRendering()) {
+        // If we're currently rendering this component, then we
+        // CANNOT fire the event handler, as it is illegal to set
+        // the state of another component during rendering.
+        // Instead, we save it into our internal state, and fire
+        // it later in a layout effect.
+        updateFireOnChange(spec.path, value);
+      } else {
+        var _props$spec$onChangeP;
+
+        // Most of the time, state changes outside of rendering
+        // (in an event handler), and we just directly call the
+        // onChange
+        (_props$spec$onChangeP = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP.call(props, value);
+      }
+    }
+  }
+
+  function updateInitStateValue(path, value) {
+    makeDirty("initStateValues", function (x) {
+      return _extends({}, x);
+    });
+    console.log("UPDATE initValue:", path, value);
+    $$state.initStateValues[path] = value;
+  }
+
+  function updateInitStateDeps(path, deps) {
+    makeDirty("initStateDeps", function (x) {
+      return _extends({}, x);
+    });
+    console.log("UPDATE DEPS: " + path, deps);
+    $$state.initStateDeps[path] = deps;
+  }
+
+  function updateInternalStateIfDirty() {
+    if (Object.values(dirtyFields).some(function (x) {
+      return x;
+    })) {
+      console.log("UPDATE $$STATE");
+      set$$State($$state);
+    }
+  }
+
+  function updateFireOnChange(path, value) {
+    makeDirty("fireOnChange", function (x) {
+      return _extends({}, x);
+    });
+    $$state.fireOnChange[path] = value;
+  }
+
+  console.log("useDollarState", _extends({}, _$$state));
+  var specByPath = React__default.useMemo(function () {
+    return keyBy(specs, function (spec) {
+      return spec.path;
+    });
+  }, [specs]);
+  var stateAccessStack = [{}];
+  var $props = props;
+  /**
+   * Runs spec.initFunc, keeping track of the state accesses
+   * that occurred while running it
+   */
+
+  function trackedInit(spec) {
+    var _$$state$initStateDep;
+
+    var stateAccess = {};
+    stateAccessStack.push(stateAccess);
+    var res = spec.initFunc($props, $state);
+    var deps = Object.keys(stateAccess);
+
+    if (!shallowEqual(deps, (_$$state$initStateDep = $$state.initStateDeps[spec.path]) != null ? _$$state$initStateDep : [])) {
+      updateInitStateDeps(spec.path, deps);
+    }
+
+    stateAccessStack.pop();
+    return res;
+  }
+  /**
+   * Resets the value for this state
+   */
+
+
+  function resetPath(path) {
+    // Resets the value for this state
+    var spec = specByPath[path];
+    var initValue = trackedInit(spec);
+
+    if (initValue !== $$state.stateValues[spec.path]) {
+      updateStateValue(spec.path, initValue);
+    }
+
+    if (initValue !== $$state.initStateValues[spec.path]) {
+      updateInitStateValue(spec.path, initValue);
+    }
+
+    return initValue;
+  } // Since a get() or a set() may result in other get() or set(),
+  // we keep track of whether we're at the "top-level" so we know
+  // whether to update state at the end.
+
+
+  var accessLevel = 0;
+  var $state = {};
+
+  var _loop = function _loop() {
+    var spec = _step2.value;
+    var parts = spec.path.split(".");
+    var name = parts[parts.length - 1];
+    var obj = getObjectAtPath($state, spec.path); // Define get() and set() for this state cell
+
+    Object.defineProperty(obj, name, {
+      get: function get() {
+        if (spec.valueProp) {
+          return props[spec.valueProp];
+        }
+
+        accessLevel += 1;
+        var value = $$state.stateValues[spec.path];
+
+        if (value === UNINITIALIZED) {
+          // This value has a init expression; need to be evaluated.
+          value = resetPath(spec.path);
+        } // Record that this field had just been accessed; for
+        // trackInit() to know what fields were used to compute
+        // the init value
+
+
+        stateAccessStack[stateAccessStack.length - 1][spec.path] = true;
+        accessLevel -= 1;
+
+        if (accessLevel === 0) {
+          updateInternalStateIfDirty();
+        }
+
+        return value;
+      },
+      set: function set(newValue) {
+        accessLevel += 1;
+
+        if (newValue !== $$state.stateValues[spec.path]) {
+          updateStateValue(spec.path, newValue);
+        }
+
+        accessLevel -= 1;
+
+        if (accessLevel === 0) {
+          updateInternalStateIfDirty();
+        }
+      }
+    });
+  };
+
+  for (var _iterator2 = _createForOfIteratorHelperLoose(specs), _step2; !(_step2 = _iterator2()).done;) {
+    _loop();
+  } // For each spec with an initFunc, evaluate it and see if
+  // the init value has changed. If so, reset its state.
+
+
+  for (var _iterator3 = _createForOfIteratorHelperLoose(specs), _step3; !(_step3 = _iterator3()).done;) {
+    var spec = _step3.value;
+
+    if (spec.initFunc) {
+      var newInit = spec.initFunc($props, $state);
+
+      if (newInit !== $$state.initStateValues[spec.path]) {
+        console.log("init changed for " + spec.path + " from " + $$state.initStateValues[spec.path] + " to " + newInit + "; resetting state");
+        updateInitStateValue(spec.path, newInit);
+        updateStateValue(spec.path, newInit);
+
+        if (spec.onChangeProp) {
+          updateFireOnChange(spec.path, newInit);
+        }
+      }
+    }
+  }
+
+  var fireOnChange = $$state.fireOnChange;
+  React__default.useLayoutEffect(function () {
+    if (Object.keys(fireOnChange).length > 0) {
+      for (var _i2 = 0, _Object$entries2 = Object.entries(fireOnChange); _i2 < _Object$entries2.length; _i2++) {
+        var _Object$entries2$_i = _Object$entries2[_i2],
+            path = _Object$entries2$_i[0],
+            value = _Object$entries2$_i[1];
+        var spec = specByPath[path];
+
+        if (spec.onChangeProp) {
+          var _props$spec$onChangeP2;
+
+          (_props$spec$onChangeP2 = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP2.call(props, value);
+        }
+      }
+
+      set$$State(function (prev) {
+        return _extends({}, prev, {
+          fireOnChange: {}
+        });
+      });
+    }
+  }, [fireOnChange, props, specByPath]); // update state if the above did some writes.
+
+  updateInternalStateIfDirty();
+  return $state;
+}
+
+var useDollarState = useVanillaDollarState;
+
 exports.DropdownMenu = DropdownMenu;
 exports.PlasmicIcon = PlasmicIcon;
 exports.PlasmicImg = PlasmicImg;
@@ -3143,6 +3480,7 @@ exports.renderPlasmicSlot = renderPlasmicSlot;
 exports.setPlumeStrictMode = setPlumeStrictMode;
 exports.useButton = useButton;
 exports.useCheckbox = useCheckbox;
+exports.useDollarState = useDollarState;
 exports.useIsSSR = useIsSSR;
 exports.useMenu = useMenu;
 exports.useMenuButton = useMenuButton;