@plasmicapp/react-web 0.2.103 → 0.2.104

package/dist/react-web.esm.js

@@ -3167,8 +3167,8 @@ function mkProxy(specs, maybeHandlers) {
     };
   };
 
-  var rec = function rec(currPath) {
-    var nextParts = Object.fromEntries(specs.filter(function (spec) {
+  var getNextParts = function getNextParts(currPath) {
+    return Object.fromEntries(Object.values(specs).filter(function (spec) {
       return shallowEqual(currPath.map(function (p) {
         return isNum(p) ? "[]" : p;
       }), spec.path.slice(0, currPath.length));
@@ -3178,16 +3178,74 @@ function mkProxy(specs, maybeHandlers) {
       if (spec.path.length === currPath.length + 1) {
         return [nextPart, {
           isLast: true,
-          spec: spec
+          specKey: spec.pathStr
         }];
       } else {
         return [nextPart, {
           isLast: false,
-          spec: spec
+          specKey: spec.pathStr
         }];
       }
     }));
+  };
+  /**
+   * We use this function when we're setting a value in the middle of the state path.
+   * We can't just set the value, because we need to keep the proxy properties, so
+   * we use the specs to walk through the object and just set the value in the end of the path
+   **/
+
+
+  var cloneValue = function cloneValue(target, currPath, value) {
+    if (typeof value !== "object") {
+      return;
+    }
+
+    var nextParts = getNextParts(currPath);
+
+    for (var _i = 0, _Object$entries = Object.entries(nextParts); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          nextPart = _Object$entries$_i[0],
+          _Object$entries$_i$ = _Object$entries$_i[1],
+          isLast = _Object$entries$_i$.isLast,
+          specKey = _Object$entries$_i$.specKey;
+
+      if (nextPart === "[]" && Array.isArray(value)) {
+        for (var i = 0; i < value.length; i++) {
+          cloneValue(target[i], [].concat(currPath, [i]), value[i]);
+        }
+      } else if (nextPart in value) {
+        if (isLast) {
+          var _handlers$set, _handlers;
+
+          handlers == null ? void 0 : (_handlers$set = (_handlers = handlers({
+            specKey: specKey,
+            path: [].concat(currPath, [nextPart])
+          })).set) == null ? void 0 : _handlers$set.call(_handlers, target, nextPart, value[nextPart], undefined);
+        } else {
+          cloneValue(target[nextPart], [].concat(currPath, [nextPart]), value[nextPart]);
+        }
+      }
+    }
+  };
+
+  var rec = function rec(currPath) {
+    var nextParts = getNextParts(currPath);
     return new Proxy("[]" in nextParts ? [] : {}, {
+      deleteProperty: function deleteProperty(target, property) {
+        if ("[]" in nextParts && isNum(property)) {
+          var _handlers$deletePrope, _handlers2;
+
+          delete target[property];
+          handlers == null ? void 0 : (_handlers$deletePrope = (_handlers2 = handlers({
+            path: [].concat(currPath, [+property]),
+            specKey: nextParts["[]"].specKey
+          })).deleteProperty) == null ? void 0 : _handlers$deletePrope.call(_handlers2, target, property);
+        } else {
+          throw new Error("You can't delete a non-repeated property in the middle of the path");
+        }
+
+        return true;
+      },
       get: function get(target, property, receiver) {
         if ("[]" in nextParts && isNum(property)) {
           if (!(property in target)) {
@@ -3195,12 +3253,12 @@ function mkProxy(specs, maybeHandlers) {
           }
         } else if (property in nextParts) {
           if (nextParts[property].isLast) {
-            var _handlers$get, _handlers;
+            var _handlers$get, _handlers3;
 
-            return handlers == null ? void 0 : (_handlers$get = (_handlers = handlers({
+            return target[property] = handlers == null ? void 0 : (_handlers$get = (_handlers3 = handlers({
               path: [].concat(currPath, [property]),
-              spec: nextParts[property].spec
-            })).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
+              specKey: nextParts[property].specKey
+            })).get) == null ? void 0 : _handlers$get.call(_handlers3, target, property, receiver);
           } else if (!(property in target)) {
             target[property] = rec([].concat(currPath, [property]));
           }
@@ -3209,21 +3267,29 @@ function mkProxy(specs, maybeHandlers) {
         return target[property];
       },
       set: function set(target, property, value, receiver) {
-        if (!(property in target) && property in nextParts) {
+        if ("[]" in nextParts && isNum(property)) {
+          if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [+property]));
+          }
+        } else if (property in nextParts) {
           if (nextParts[property].isLast) {
-            var _handlers$set, _handlers$set2, _handlers2;
+            var _handlers$set2, _handlers$set3, _handlers4;
 
-            return (_handlers$set = (_handlers$set2 = (_handlers2 = handlers({
+            target[property] = value;
+            return (_handlers$set2 = (_handlers$set3 = (_handlers4 = handlers({
               path: [].concat(currPath, [property]),
-              spec: nextParts[property].spec
-            })).set) == null ? void 0 : _handlers$set2.call(_handlers2, target, property, value, receiver)) != null ? _handlers$set : false;
-          } else {
-            throw new Error("You can't set a value in the middle of the path");
+              specKey: nextParts[property].specKey
+            })).set) == null ? void 0 : _handlers$set3.call(_handlers4, target, property, value, receiver)) != null ? _handlers$set2 : false;
           }
-        } else {
+        }
+
+        if (property === "registerInitFunc") {
           target[property] = value;
-          return true;
+        } else if (typeof value === "object") {
+          cloneValue(target[property], [].concat(currPath, [isNum(property) ? +property : property]), value);
         }
+
+        return true;
       }
     });
   };
@@ -3259,133 +3325,141 @@ var transformPathStringToObj = function transformPathStringToObj(str) {
 };
 
 function useVanillaDollarState(_specs, props) {
-  var specs = _specs.map(function (_ref2) {
-    var pathStr = _ref2.path,
-        spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
-
-    return _extends({}, spec, {
-      pathStr: pathStr,
-      path: transformPathStringToObj(pathStr),
-      isRepeated: pathStr.split(".").some(function (part) {
-        return part.endsWith("[]");
-      })
-    });
-  });
-
-  var _React$useState = React__default.useState(function () {
-    var stateValues = mkProxy(specs);
-    var initStates = {};
-
-    for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
-      var spec = _step.value;
-
-      if (spec.valueProp || spec.isRepeated) {
-        continue;
-      } else if (spec.initFunc) {
-        dset(stateValues, spec.path, UNINITIALIZED);
-      } else {
-        var _spec$initVal;
-
-        dset(stateValues, spec.path, (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
-      }
-
-      saveState({
-        path: spec.path,
-        spec: spec
-      }, initStates);
-    }
-
-    var deps = fillUninitializedStateValues(specs, props, stateValues, initStates);
+  var forceRender = React__default.useState(0)[1];
+  var $$state = React__default.useMemo(function () {
+    var specs = Object.fromEntries(_specs.map(function (_ref2) {
+      var pathStr = _ref2.path,
+          spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
+
+      return [pathStr, _extends({}, spec, {
+        pathStr: pathStr,
+        path: transformPathStringToObj(pathStr),
+        isRepeated: pathStr.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    }));
     return {
-      stateValues: stateValues,
-      initStateDeps: deps,
-      initStateValues: cloneProxy(specs, initStates, stateValues),
-      states: initStates
+      stateValues: mkProxy(specs),
+      initStateDeps: {},
+      initStateValues: mkProxy(specs),
+      states: {},
+      specs: specs
     };
-  }),
-      $$state = _React$useState[0],
-      set$$State = _React$useState[1];
-
-  var $state = mkProxy(specs, function (state) {
+  }, []);
+  var $state = Object.assign(mkProxy($$state.specs, function (state) {
     return {
+      deleteProperty: function deleteProperty(_target, _property) {
+        var prefixPath = state.path;
+
+        for (var _i2 = 0, _Object$entries2 = Object.entries($$state.states); _i2 < _Object$entries2.length; _i2++) {
+          var _Object$entries2$_i = _Object$entries2[_i2],
+              key = _Object$entries2$_i[0],
+              existingState = _Object$entries2$_i[1];
+
+          if (existingState.path.length >= prefixPath.length && shallowEqual(existingState.path.slice(0, prefixPath.length), prefixPath)) {
+            delete $$state.states[key];
+          }
+        }
+
+        forceRender(function (r) {
+          return r + 1;
+        });
+        return true;
+      },
       get: function get(_target, _property) {
-        if (state.spec.valueProp) {
-          if (!state.spec.isRepeated) {
-            return props[state.spec.valueProp];
+        var spec = $$state.specs[state.specKey];
+
+        if (spec.valueProp) {
+          if (!spec.isRepeated) {
+            return props[spec.valueProp];
           } else {
-            return _get(props[state.spec.valueProp], state.path.slice(1));
+            return _get(props[spec.valueProp], state.path.slice(1));
           }
         }
 
         if (!hasState(state, $$state.states)) {
-          var _state$spec$initVal;
+          var _spec$initVal;
 
           saveState(state, $$state.states);
 
-          dset($$state.stateValues, state.path, state.spec.initFunc ? UNINITIALIZED : (_state$spec$initVal = state.spec.initVal) != null ? _state$spec$initVal : undefined);
+          dset($$state.stateValues, state.path, spec.initFunc ? UNINITIALIZED : (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
 
-          var deps = state.spec.initFunc ? fillUninitializedStateValues(specs, props, $$state.stateValues, $$state.states) : {};
+          var deps = spec.initFunc ? fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states) : {};
 
           dset($$state.initStateValues, state.path, _get($$state.stateValues, state.path));
 
-          set$$State(function (prev) {
-            return {
-              initStateValues: cloneProxy(specs, prev.states, prev.stateValues),
-              stateValues: cloneProxy(specs, prev.states, prev.initStateValues),
-              initStateDeps: _extends({}, prev.initStateDeps, deps),
-              states: _extends({}, prev.states)
-            };
+          $$state.initStateDeps = _extends({}, $$state.initStateDeps, deps);
+          forceRender(function (r) {
+            return r + 1;
           });
+          return spec.initFunc ? spec.initFunc(props, $state) : spec.initVal;
         }
 
         return _get($$state.stateValues, state.path);
       },
       set: function set(_target, _property, newValue) {
-        saveState(state, $$state.states);
-
         if (newValue !== _get($$state.stateValues, state.path)) {
+          saveState(state, $$state.states);
+
           dset($$state.stateValues, state.path, newValue);
 
-          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];
+          for (var _i3 = 0, _Object$entries3 = Object.entries($$state.initStateDeps); _i3 < _Object$entries3.length; _i3++) {
+            var _Object$entries3$_i = _Object$entries3[_i3],
+                key = _Object$entries3$_i[0],
+                deps = _Object$entries3$_i[1];
 
             if (deps.includes(JSON.stringify(state.path))) {
               dset($$state.stateValues, JSON.parse(key), UNINITIALIZED);
             }
           }
 
-          var newDeps = fillUninitializedStateValues(specs, props, $$state.stateValues, $$state.states);
-          set$$State(function (prev) {
-            return {
-              initStateValues: _extends({}, prev.initStateValues),
-              stateValues: cloneProxy(specs, prev.states, prev.stateValues),
-              initStateDeps: _extends({}, prev.initStateDeps, newDeps),
-              states: _extends({}, prev.states)
-            };
+          var newDeps = fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states);
+          $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
+          forceRender(function (r) {
+            return r + 1;
           });
+        }
 
-          if (state.spec.onChangeProp) {
-            var _props$state$spec$onC;
+        var spec = $$state.specs[state.specKey];
 
-            (_props$state$spec$onC = props[state.spec.onChangeProp]) == null ? void 0 : _props$state$spec$onC.call(props, newValue, state.path);
-          }
+        if (spec.onChangeProp) {
+          var _props$spec$onChangeP;
+
+          (_props$spec$onChangeP = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP.call(props, newValue, state.path);
         }
 
         return true;
       }
     };
+  }), {
+    registerInitFunc: function registerInitFunc(pathStr, f) {
+      if (Object.values($$state.states).filter(function (_ref3) {
+        var specKey = _ref3.specKey;
+        return specKey === pathStr;
+      }).some(function (_ref4) {
+        var path = _ref4.path;
+        return _get($$state.stateValues, path) !== f(props, $state);
+      })) {
+        $$state.specs[pathStr] = _extends({}, $$state.specs[pathStr], {
+          initFunc: f
+        });
+        forceRender(function (r) {
+          return r + 1;
+        });
+      }
+    }
   }); // For each spec with an initFunc, evaluate it and see if
   // the init value has changed. If so, reset its state.
 
   var newStateValues = undefined;
   var resetSpecs = [];
 
-  for (var _i2 = 0, _Object$values = Object.values($$state.states); _i2 < _Object$values.length; _i2++) {
-    var _Object$values$_i = _Object$values[_i2],
+  for (var _i4 = 0, _Object$values = Object.values($$state.states); _i4 < _Object$values.length; _i4++) {
+    var _Object$values$_i = _Object$values[_i4],
         path = _Object$values$_i.path,
-        spec = _Object$values$_i.spec;
+        specKey = _Object$values$_i.specKey;
+    var spec = $$state.specs[specKey];
 
     if (spec.initFunc) {
       var newInit = spec.initFunc(props, $state);
@@ -3394,11 +3468,11 @@ function useVanillaDollarState(_specs, props) {
         console.log("init changed for " + JSON.stringify(path) + " from " + _get($$state.initStateValues, path) + " to " + newInit + "; resetting state");
         resetSpecs.push({
           path: path,
-          spec: spec
+          specKey: specKey
         });
 
         if (!newStateValues) {
-          newStateValues = cloneProxy(specs, $$state.states, $$state.stateValues);
+          newStateValues = cloneProxy($$state.specs, $$state.states, $$state.stateValues);
         }
 
         dset(newStateValues, path, UNINITIALIZED);
@@ -3408,26 +3482,25 @@ function useVanillaDollarState(_specs, props) {
 
   React__default.useLayoutEffect(function () {
     if (newStateValues !== undefined) {
-      var newDeps = fillUninitializedStateValues(specs, props, newStateValues, $$state.states);
-      set$$State(function (prev) {
-        var initStateValues = cloneProxy(specs, prev.states, prev.initStateValues);
-        resetSpecs.forEach(function (_ref3) {
-          var path = _ref3.path;
+      var newDeps = fillUninitializedStateValues($$state.specs, props, newStateValues, $$state.states);
+      var initStateValues = cloneProxy($$state.specs, $$state.states, $$state.initStateValues);
+      resetSpecs.forEach(function (_ref5) {
+        var path = _ref5.path;
 
-          dset(initStateValues, path, _get(newStateValues, path));
-        });
-        return {
-          stateValues: cloneProxy(specs, prev.states, newStateValues),
-          initStateDeps: _extends({}, prev.initStateDeps, newDeps),
-          initStateValues: initStateValues,
-          states: _extends({}, prev.states)
-        };
+        dset(initStateValues, path, _get(newStateValues, path));
+      });
+      $$state.stateValues = cloneProxy($$state.specs, $$state.states, newStateValues);
+      $$state.initStateValues = initStateValues;
+      $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
+      forceRender(function (r) {
+        return r + 1;
       });
 
-      for (var _iterator2 = _createForOfIteratorHelperLoose(resetSpecs), _step2; !(_step2 = _iterator2()).done;) {
-        var _step2$value = _step2.value,
-            _path = _step2$value.path,
-            _spec = _step2$value.spec;
+      for (var _iterator = _createForOfIteratorHelperLoose(resetSpecs), _step; !(_step = _iterator()).done;) {
+        var _step$value = _step.value,
+            _path = _step$value.path,
+            _specKey = _step$value.specKey;
+        var _spec = $$state.specs[_specKey];
 
         if (_spec.onChangeProp) {
           var _props$_spec$onChange;
@@ -3437,21 +3510,38 @@ function useVanillaDollarState(_specs, props) {
         }
       }
     }
-  }, [newStateValues, props, resetSpecs, specs]);
+  }, [newStateValues, props, resetSpecs, $$state.specs]);
+  /* *
+   * Initialize all known states. (we need to do it for repeated states
+   * because they're created only after the first get/set operation)
+   * If we don't initialize them, we won't be able to consume the repeated states properly.
+   * For example, let's say the consumer is just mapping the repeated states. The first operation
+   * is to get the length of the array which will always be 0 because the existing states
+   * weren't allocated yet -- they're only stored in internal state)
+   * */
+
+  for (var _i5 = 0, _Object$values2 = Object.values($$state.states); _i5 < _Object$values2.length; _i5++) {
+    var _path2 = _Object$values2[_i5].path;
+
+    _get($state, _path2);
+  }
+
   return $state;
 }
 
 function fillUninitializedStateValues(specs, props, stateValues, states) {
   var stateAccessStack = [new Set()];
   var initFuncDeps = {};
-  var $state = mkProxy(specs, function (state) {
+  var $state = Object.assign(mkProxy(specs, function (state) {
     return {
       get: function get(_target, _property) {
-        if (state.spec.valueProp) {
-          if (!state.spec.isRepeated) {
-            return props[state.spec.valueProp];
+        var spec = specs[state.specKey];
+
+        if (spec.valueProp) {
+          if (!spec.isRepeated) {
+            return props[spec.valueProp];
           } else {
-            return _get(props[state.spec.valueProp], state.path.slice(1));
+            return _get(props[spec.valueProp], state.path.slice(1));
           }
         }
 
@@ -3474,18 +3564,20 @@ function fillUninitializedStateValues(specs, props, stateValues, states) {
         throw new Error("Cannot update state values during initialization");
       }
     };
+  }), {
+    registerInitFunc: function registerInitFunc() {}
   });
 
   function tracked(state) {
     stateAccessStack.push(new Set());
-    var res = state.spec.initFunc(props, $state);
+    var res = specs[state.specKey].initFunc(props, $state);
     var deps = stateAccessStack.pop();
     initFuncDeps[JSON.stringify(state.path)] = [].concat(deps.values());
     return res;
   }
 
-  for (var _i3 = 0, _Object$values2 = Object.values(states); _i3 < _Object$values2.length; _i3++) {
-    var path = _Object$values2[_i3].path;
+  for (var _i6 = 0, _Object$values3 = Object.values(states); _i6 < _Object$values3.length; _i6++) {
+    var path = _Object$values3[_i6].path;
 
     if (_get(stateValues, path) === UNINITIALIZED) {
       _get($state, path);