@plasmicapp/react-web 0.2.155 → 0.2.157
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.d.ts +12 -2
- package/dist/react-web.cjs.development.js +60 -24
- package/dist/react-web.cjs.development.js.map +1 -1
- package/dist/react-web.cjs.production.min.js +1 -1
- package/dist/react-web.cjs.production.min.js.map +1 -1
- package/dist/react-web.esm.js +60 -24
- package/dist/react-web.esm.js.map +1 -1
- package/dist/states/graph.d.ts +1 -0
- package/dist/states/types.d.ts +11 -1
- package/dist/states/valtio.d.ts +2 -2
- package/dist/stories/UseDollarState.stories.d.ts +3 -0
- package/package.json +4 -4
- package/skinny/dist/index.js +50 -22
- package/skinny/dist/index.js.map +1 -1
- package/skinny/dist/states/graph.d.ts +1 -0
- package/skinny/dist/states/types.d.ts +11 -1
- package/skinny/dist/states/valtio.d.ts +2 -2
- package/skinny/dist/stories/UseDollarState.stories.d.ts +3 -0
package/dist/react-web.esm.js
CHANGED
|
@@ -2350,6 +2350,15 @@ var StateSpecNode = /*#__PURE__*/function () {
|
|
|
2350
2350
|
path: path
|
|
2351
2351
|
};
|
|
2352
2352
|
};
|
|
2353
|
+
_proto.deleteStateCell = function deleteStateCell(prefixPath) {
|
|
2354
|
+
var _this = this;
|
|
2355
|
+
[].concat(Object.keys(this._state)).forEach(function (key) {
|
|
2356
|
+
var path = JSON.parse(key);
|
|
2357
|
+
if (shallowEqual(prefixPath, path.slice(0, prefixPath.length))) {
|
|
2358
|
+
delete _this._state[key];
|
|
2359
|
+
}
|
|
2360
|
+
});
|
|
2361
|
+
};
|
|
2353
2362
|
_proto.setInitialValue = function setInitialValue(path, value) {
|
|
2354
2363
|
var key = JSON.stringify(path);
|
|
2355
2364
|
this._state[key].initialValue = value;
|
|
@@ -2608,7 +2617,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
|
|
|
2608
2617
|
});
|
|
2609
2618
|
var spec = node.getSpec();
|
|
2610
2619
|
if (spec.valueProp) {
|
|
2611
|
-
return $$state.props[spec.valueProp];
|
|
2620
|
+
return $$state.env.$props[spec.valueProp];
|
|
2612
2621
|
} else if (!node.hasState(path) && spec.initFunc) {
|
|
2613
2622
|
node.createStateCell(path);
|
|
2614
2623
|
return initializeStateValue($$state, node, path, proxyRoot);
|
|
@@ -2624,19 +2633,23 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
|
|
|
2624
2633
|
var node = _ref.node,
|
|
2625
2634
|
path = _ref.path;
|
|
2626
2635
|
node.addListener(path, function () {
|
|
2627
|
-
var newValue = initialSpecNode.getSpec().initFunc(
|
|
2636
|
+
var newValue = initialSpecNode.getSpec().initFunc(_extends({
|
|
2637
|
+
$state: $state
|
|
2638
|
+
}, $$state.env));
|
|
2628
2639
|
set(proxyRoot, initialStatePath, newValue);
|
|
2629
2640
|
});
|
|
2630
2641
|
});
|
|
2631
|
-
var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(
|
|
2642
|
+
var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(_extends({
|
|
2643
|
+
$state: $state
|
|
2644
|
+
}, $$state.env));
|
|
2632
2645
|
initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
|
|
2633
2646
|
var initialSpec = initialSpecNode.getSpec();
|
|
2634
2647
|
var value = initialSpec.isImmutable ? mkUntrackedValue(initialValue) : clone(initialValue);
|
|
2635
2648
|
set(proxyRoot, initialStatePath, value);
|
|
2636
2649
|
//immediately fire onChange
|
|
2637
2650
|
if (initialSpec.onChangeProp) {
|
|
2638
|
-
var _$$state$props$
|
|
2639
|
-
(_$$state$props$
|
|
2651
|
+
var _$$state$env$$props$i, _$$state$env$$props;
|
|
2652
|
+
(_$$state$env$$props$i = (_$$state$env$$props = $$state.env.$props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$env$$props$i.call(_$$state$env$$props, initialValue);
|
|
2640
2653
|
}
|
|
2641
2654
|
return initialValue;
|
|
2642
2655
|
}
|
|
@@ -2654,11 +2667,18 @@ function create$StateProxy($$state, leafHandlers) {
|
|
|
2654
2667
|
}
|
|
2655
2668
|
delete _get($$state.stateValues, currPath)[property];
|
|
2656
2669
|
if (spec.onChangeProp) {
|
|
2657
|
-
var _$$state$props$
|
|
2670
|
+
var _$$state$env$$props$s, _$$state$env$$props2;
|
|
2658
2671
|
//we are always in a leaf, since we only have two cases:
|
|
2659
2672
|
// 1 - delete properties outside the state tree
|
|
2660
2673
|
// 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
|
|
2661
|
-
(_$$state$props$
|
|
2674
|
+
(_$$state$env$$props$s = (_$$state$env$$props2 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s.call(_$$state$env$$props2, _get(proxyRoot, currPath.slice(spec.pathObj.length)));
|
|
2675
|
+
}
|
|
2676
|
+
var nextPath = getNextPath(property);
|
|
2677
|
+
var nextNode = currNode.makeTransition(property);
|
|
2678
|
+
if (nextNode) {
|
|
2679
|
+
getStateCells(nextNode).forEach(function (node) {
|
|
2680
|
+
node.deleteStateCell(nextPath);
|
|
2681
|
+
});
|
|
2662
2682
|
}
|
|
2663
2683
|
return Reflect.deleteProperty(target, property);
|
|
2664
2684
|
},
|
|
@@ -2715,12 +2735,19 @@ function create$StateProxy($$state, leafHandlers) {
|
|
|
2715
2735
|
} else {
|
|
2716
2736
|
Reflect.set(target, property, value, receiver);
|
|
2717
2737
|
}
|
|
2718
|
-
|
|
2738
|
+
if (currNode.isLeaf()) {
|
|
2719
2739
|
if (spec.onChangeProp) {
|
|
2720
|
-
var _$$state$props$
|
|
2721
|
-
(_$$state$props$
|
|
2740
|
+
var _$$state$env$$props$s2, _$$state$env$$props3;
|
|
2741
|
+
(_$$state$env$$props$s2 = (_$$state$env$$props3 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s2.call(_$$state$env$$props3, target);
|
|
2722
2742
|
}
|
|
2723
|
-
}
|
|
2743
|
+
} else {
|
|
2744
|
+
nextNode.getAllSpecs().forEach(function (spec) {
|
|
2745
|
+
if (spec.onChangeProp) {
|
|
2746
|
+
var _$$state$env$$props$s3, _$$state$env$$props4;
|
|
2747
|
+
(_$$state$env$$props$s3 = (_$$state$env$$props4 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s3.call(_$$state$env$$props4, value);
|
|
2748
|
+
}
|
|
2749
|
+
});
|
|
2750
|
+
}
|
|
2724
2751
|
var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable ? mkUntrackedValue(value) : value;
|
|
2725
2752
|
set($$state.stateValues, nextPath, newValue);
|
|
2726
2753
|
return true;
|
|
@@ -2748,22 +2775,27 @@ function create$StateProxy($$state, leafHandlers) {
|
|
|
2748
2775
|
var mkUntrackedValue = function mkUntrackedValue(o) {
|
|
2749
2776
|
return o != null && typeof o === "object" ? ref(o) : o;
|
|
2750
2777
|
};
|
|
2751
|
-
|
|
2778
|
+
var envFieldsAreNonNill = function envFieldsAreNonNill(env) {
|
|
2779
|
+
var _env$$ctx, _env$$queries;
|
|
2780
|
+
return {
|
|
2781
|
+
$props: env.$props,
|
|
2782
|
+
$ctx: (_env$$ctx = env.$ctx) != null ? _env$$ctx : {},
|
|
2783
|
+
$queries: (_env$$queries = env.$queries) != null ? _env$$queries : {}
|
|
2784
|
+
};
|
|
2785
|
+
};
|
|
2786
|
+
function useDollarState(specs, env, opts) {
|
|
2752
2787
|
var $$state = React__default.useRef(function () {
|
|
2753
2788
|
var rootSpecTree = buildTree(specs);
|
|
2754
2789
|
return {
|
|
2755
2790
|
rootSpecTree: rootSpecTree,
|
|
2756
2791
|
specTreeLeaves: getStateCells(rootSpecTree),
|
|
2757
2792
|
stateValues: proxy({}),
|
|
2758
|
-
|
|
2759
|
-
ctx: {},
|
|
2793
|
+
env: envFieldsAreNonNill(env),
|
|
2760
2794
|
specs: [],
|
|
2761
2795
|
registrationsQueue: proxy([])
|
|
2762
2796
|
};
|
|
2763
2797
|
}()).current;
|
|
2764
|
-
$$state.
|
|
2765
|
-
$$state.ctx = $ctx != null ? $ctx : {};
|
|
2766
|
-
$$state.specs = specs;
|
|
2798
|
+
$$state.env = envFieldsAreNonNill(env), $$state.specs = specs;
|
|
2767
2799
|
var create$State = function create$State() {
|
|
2768
2800
|
var $state = Object.assign(create$StateProxy($$state, function (node, path) {
|
|
2769
2801
|
if (!node.hasState(path)) {
|
|
@@ -2779,7 +2811,7 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2779
2811
|
get: function get(target, property, receiver) {
|
|
2780
2812
|
var spec = node.getSpec();
|
|
2781
2813
|
if (spec.valueProp) {
|
|
2782
|
-
return $$state.props[spec.valueProp];
|
|
2814
|
+
return $$state.env.$props[spec.valueProp];
|
|
2783
2815
|
} else {
|
|
2784
2816
|
return Reflect.get(target, property, receiver);
|
|
2785
2817
|
}
|
|
@@ -2793,7 +2825,9 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2793
2825
|
if (!node.hasState(realPath)) {
|
|
2794
2826
|
node.createStateCell(realPath);
|
|
2795
2827
|
}
|
|
2796
|
-
if (!deepEqual(node.getState(realPath).initialValue, f(
|
|
2828
|
+
if (!deepEqual(node.getState(realPath).initialValue, f(_extends({
|
|
2829
|
+
$state: $state
|
|
2830
|
+
}, $$state.env)))) {
|
|
2797
2831
|
$$state.registrationsQueue.push(mkUntrackedValue({
|
|
2798
2832
|
node: node,
|
|
2799
2833
|
path: realPath,
|
|
@@ -2830,7 +2864,7 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2830
2864
|
return;
|
|
2831
2865
|
}
|
|
2832
2866
|
node.createStateCell(spec.pathObj);
|
|
2833
|
-
var init = spec.valueProp ? $$state.props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, node, spec.pathObj, $state) : spec.initVal;
|
|
2867
|
+
var init = spec.valueProp ? $$state.env.$props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, node, spec.pathObj, $state) : spec.initVal;
|
|
2834
2868
|
set($state, spec.pathObj, init);
|
|
2835
2869
|
});
|
|
2836
2870
|
}
|
|
@@ -2849,7 +2883,9 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2849
2883
|
stateCell = _ref3.stateCell;
|
|
2850
2884
|
var initFunc = node.getInitFunc(stateCell);
|
|
2851
2885
|
if (initFunc) {
|
|
2852
|
-
var newInit = initFunc(
|
|
2886
|
+
var newInit = initFunc(_extends({
|
|
2887
|
+
$state: $state
|
|
2888
|
+
}, envFieldsAreNonNill(env)));
|
|
2853
2889
|
if (!deepEqual(newInit, stateCell.initialValue)) {
|
|
2854
2890
|
resetSpecs.push({
|
|
2855
2891
|
stateCell: stateCell,
|
|
@@ -2862,8 +2898,8 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2862
2898
|
var newInit = initializeStateValue($$state, node, stateCell.path, $state);
|
|
2863
2899
|
var spec = node.getSpec();
|
|
2864
2900
|
if (spec.onChangeProp) {
|
|
2865
|
-
var _$$state$props$
|
|
2866
|
-
(_$$state$props$
|
|
2901
|
+
var _$$state$env$$props$s4, _$$state$env$$props5;
|
|
2902
|
+
(_$$state$env$$props$s4 = (_$$state$env$$props5 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s4.call(_$$state$env$$props5, newInit);
|
|
2867
2903
|
}
|
|
2868
2904
|
};
|
|
2869
2905
|
useIsomorphicLayoutEffect$1(function () {
|
|
@@ -2872,7 +2908,7 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2872
2908
|
node = _ref4.node;
|
|
2873
2909
|
reInitializeState(node, stateCell);
|
|
2874
2910
|
});
|
|
2875
|
-
}, [props, resetSpecs]);
|
|
2911
|
+
}, [env.$props, resetSpecs]);
|
|
2876
2912
|
useIsomorphicLayoutEffect$1(function () {
|
|
2877
2913
|
while ($$state.registrationsQueue.length) {
|
|
2878
2914
|
var _$$state$registration = $$state.registrationsQueue.shift(),
|