@plasmicapp/react-web 0.2.156 → 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 +44 -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 +44 -24
- package/dist/react-web.esm.js.map +1 -1
- 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 +34 -22
- package/skinny/dist/index.js.map +1 -1
- 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
|
@@ -2617,7 +2617,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
|
|
|
2617
2617
|
});
|
|
2618
2618
|
var spec = node.getSpec();
|
|
2619
2619
|
if (spec.valueProp) {
|
|
2620
|
-
return $$state.props[spec.valueProp];
|
|
2620
|
+
return $$state.env.$props[spec.valueProp];
|
|
2621
2621
|
} else if (!node.hasState(path) && spec.initFunc) {
|
|
2622
2622
|
node.createStateCell(path);
|
|
2623
2623
|
return initializeStateValue($$state, node, path, proxyRoot);
|
|
@@ -2633,19 +2633,23 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
|
|
|
2633
2633
|
var node = _ref.node,
|
|
2634
2634
|
path = _ref.path;
|
|
2635
2635
|
node.addListener(path, function () {
|
|
2636
|
-
var newValue = initialSpecNode.getSpec().initFunc(
|
|
2636
|
+
var newValue = initialSpecNode.getSpec().initFunc(_extends({
|
|
2637
|
+
$state: $state
|
|
2638
|
+
}, $$state.env));
|
|
2637
2639
|
set(proxyRoot, initialStatePath, newValue);
|
|
2638
2640
|
});
|
|
2639
2641
|
});
|
|
2640
|
-
var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(
|
|
2642
|
+
var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(_extends({
|
|
2643
|
+
$state: $state
|
|
2644
|
+
}, $$state.env));
|
|
2641
2645
|
initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
|
|
2642
2646
|
var initialSpec = initialSpecNode.getSpec();
|
|
2643
2647
|
var value = initialSpec.isImmutable ? mkUntrackedValue(initialValue) : clone(initialValue);
|
|
2644
2648
|
set(proxyRoot, initialStatePath, value);
|
|
2645
2649
|
//immediately fire onChange
|
|
2646
2650
|
if (initialSpec.onChangeProp) {
|
|
2647
|
-
var _$$state$props$
|
|
2648
|
-
(_$$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);
|
|
2649
2653
|
}
|
|
2650
2654
|
return initialValue;
|
|
2651
2655
|
}
|
|
@@ -2663,11 +2667,11 @@ function create$StateProxy($$state, leafHandlers) {
|
|
|
2663
2667
|
}
|
|
2664
2668
|
delete _get($$state.stateValues, currPath)[property];
|
|
2665
2669
|
if (spec.onChangeProp) {
|
|
2666
|
-
var _$$state$props$
|
|
2670
|
+
var _$$state$env$$props$s, _$$state$env$$props2;
|
|
2667
2671
|
//we are always in a leaf, since we only have two cases:
|
|
2668
2672
|
// 1 - delete properties outside the state tree
|
|
2669
2673
|
// 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
|
|
2670
|
-
(_$$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)));
|
|
2671
2675
|
}
|
|
2672
2676
|
var nextPath = getNextPath(property);
|
|
2673
2677
|
var nextNode = currNode.makeTransition(property);
|
|
@@ -2731,12 +2735,19 @@ function create$StateProxy($$state, leafHandlers) {
|
|
|
2731
2735
|
} else {
|
|
2732
2736
|
Reflect.set(target, property, value, receiver);
|
|
2733
2737
|
}
|
|
2734
|
-
|
|
2738
|
+
if (currNode.isLeaf()) {
|
|
2735
2739
|
if (spec.onChangeProp) {
|
|
2736
|
-
var _$$state$props$
|
|
2737
|
-
(_$$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);
|
|
2738
2742
|
}
|
|
2739
|
-
}
|
|
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
|
+
}
|
|
2740
2751
|
var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable ? mkUntrackedValue(value) : value;
|
|
2741
2752
|
set($$state.stateValues, nextPath, newValue);
|
|
2742
2753
|
return true;
|
|
@@ -2764,22 +2775,27 @@ function create$StateProxy($$state, leafHandlers) {
|
|
|
2764
2775
|
var mkUntrackedValue = function mkUntrackedValue(o) {
|
|
2765
2776
|
return o != null && typeof o === "object" ? ref(o) : o;
|
|
2766
2777
|
};
|
|
2767
|
-
|
|
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) {
|
|
2768
2787
|
var $$state = React__default.useRef(function () {
|
|
2769
2788
|
var rootSpecTree = buildTree(specs);
|
|
2770
2789
|
return {
|
|
2771
2790
|
rootSpecTree: rootSpecTree,
|
|
2772
2791
|
specTreeLeaves: getStateCells(rootSpecTree),
|
|
2773
2792
|
stateValues: proxy({}),
|
|
2774
|
-
|
|
2775
|
-
ctx: {},
|
|
2793
|
+
env: envFieldsAreNonNill(env),
|
|
2776
2794
|
specs: [],
|
|
2777
2795
|
registrationsQueue: proxy([])
|
|
2778
2796
|
};
|
|
2779
2797
|
}()).current;
|
|
2780
|
-
$$state.
|
|
2781
|
-
$$state.ctx = $ctx != null ? $ctx : {};
|
|
2782
|
-
$$state.specs = specs;
|
|
2798
|
+
$$state.env = envFieldsAreNonNill(env), $$state.specs = specs;
|
|
2783
2799
|
var create$State = function create$State() {
|
|
2784
2800
|
var $state = Object.assign(create$StateProxy($$state, function (node, path) {
|
|
2785
2801
|
if (!node.hasState(path)) {
|
|
@@ -2795,7 +2811,7 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2795
2811
|
get: function get(target, property, receiver) {
|
|
2796
2812
|
var spec = node.getSpec();
|
|
2797
2813
|
if (spec.valueProp) {
|
|
2798
|
-
return $$state.props[spec.valueProp];
|
|
2814
|
+
return $$state.env.$props[spec.valueProp];
|
|
2799
2815
|
} else {
|
|
2800
2816
|
return Reflect.get(target, property, receiver);
|
|
2801
2817
|
}
|
|
@@ -2809,7 +2825,9 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2809
2825
|
if (!node.hasState(realPath)) {
|
|
2810
2826
|
node.createStateCell(realPath);
|
|
2811
2827
|
}
|
|
2812
|
-
if (!deepEqual(node.getState(realPath).initialValue, f(
|
|
2828
|
+
if (!deepEqual(node.getState(realPath).initialValue, f(_extends({
|
|
2829
|
+
$state: $state
|
|
2830
|
+
}, $$state.env)))) {
|
|
2813
2831
|
$$state.registrationsQueue.push(mkUntrackedValue({
|
|
2814
2832
|
node: node,
|
|
2815
2833
|
path: realPath,
|
|
@@ -2846,7 +2864,7 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2846
2864
|
return;
|
|
2847
2865
|
}
|
|
2848
2866
|
node.createStateCell(spec.pathObj);
|
|
2849
|
-
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;
|
|
2850
2868
|
set($state, spec.pathObj, init);
|
|
2851
2869
|
});
|
|
2852
2870
|
}
|
|
@@ -2865,7 +2883,9 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2865
2883
|
stateCell = _ref3.stateCell;
|
|
2866
2884
|
var initFunc = node.getInitFunc(stateCell);
|
|
2867
2885
|
if (initFunc) {
|
|
2868
|
-
var newInit = initFunc(
|
|
2886
|
+
var newInit = initFunc(_extends({
|
|
2887
|
+
$state: $state
|
|
2888
|
+
}, envFieldsAreNonNill(env)));
|
|
2869
2889
|
if (!deepEqual(newInit, stateCell.initialValue)) {
|
|
2870
2890
|
resetSpecs.push({
|
|
2871
2891
|
stateCell: stateCell,
|
|
@@ -2878,8 +2898,8 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2878
2898
|
var newInit = initializeStateValue($$state, node, stateCell.path, $state);
|
|
2879
2899
|
var spec = node.getSpec();
|
|
2880
2900
|
if (spec.onChangeProp) {
|
|
2881
|
-
var _$$state$props$
|
|
2882
|
-
(_$$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);
|
|
2883
2903
|
}
|
|
2884
2904
|
};
|
|
2885
2905
|
useIsomorphicLayoutEffect$1(function () {
|
|
@@ -2888,7 +2908,7 @@ function useDollarState(specs, props, $ctx, opts) {
|
|
|
2888
2908
|
node = _ref4.node;
|
|
2889
2909
|
reInitializeState(node, stateCell);
|
|
2890
2910
|
});
|
|
2891
|
-
}, [props, resetSpecs]);
|
|
2911
|
+
}, [env.$props, resetSpecs]);
|
|
2892
2912
|
useIsomorphicLayoutEffect$1(function () {
|
|
2893
2913
|
while ($$state.registrationsQueue.length) {
|
|
2894
2914
|
var _$$state$registration = $$state.registrationsQueue.shift(),
|