@vue/reactivity 3.5.0-beta.1 → 3.5.0-beta.3
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/reactivity.cjs.js +253 -26
- package/dist/reactivity.cjs.prod.js +235 -26
- package/dist/reactivity.d.ts +47 -6
- package/dist/reactivity.esm-browser.js +260 -27
- package/dist/reactivity.esm-browser.prod.js +2 -2
- package/dist/reactivity.esm-bundler.js +250 -28
- package/dist/reactivity.global.js +264 -26
- package/dist/reactivity.global.prod.js +2 -2
- package/package.json +2 -2
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vue/reactivity v3.5.0-beta.
|
|
2
|
+
* @vue/reactivity v3.5.0-beta.3
|
|
3
3
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
4
|
* @license MIT
|
|
5
5
|
**/
|
|
6
|
-
import { hasChanged, extend, isArray, isIntegerKey, isSymbol, isMap, hasOwn, isObject, makeMap, capitalize, toRawType, def, isFunction } from '@vue/shared';
|
|
6
|
+
import { hasChanged, extend, isArray, isIntegerKey, isSymbol, isMap, hasOwn, isObject, makeMap, capitalize, toRawType, def, isFunction, EMPTY_OBJ, isSet, isPlainObject, NOOP, remove } from '@vue/shared';
|
|
7
7
|
|
|
8
8
|
function warn(msg, ...args) {
|
|
9
9
|
console.warn(`[Vue warn] ${msg}`, ...args);
|
|
@@ -150,10 +150,8 @@ const EffectFlags = {
|
|
|
150
150
|
"16": "DIRTY",
|
|
151
151
|
"ALLOW_RECURSE": 32,
|
|
152
152
|
"32": "ALLOW_RECURSE",
|
|
153
|
-
"
|
|
154
|
-
"64": "
|
|
155
|
-
"PAUSED": 128,
|
|
156
|
-
"128": "PAUSED"
|
|
153
|
+
"PAUSED": 64,
|
|
154
|
+
"64": "PAUSED"
|
|
157
155
|
};
|
|
158
156
|
const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
|
|
159
157
|
class ReactiveEffect {
|
|
@@ -185,11 +183,11 @@ class ReactiveEffect {
|
|
|
185
183
|
}
|
|
186
184
|
}
|
|
187
185
|
pause() {
|
|
188
|
-
this.flags |=
|
|
186
|
+
this.flags |= 64;
|
|
189
187
|
}
|
|
190
188
|
resume() {
|
|
191
|
-
if (this.flags &
|
|
192
|
-
this.flags &= ~
|
|
189
|
+
if (this.flags & 64) {
|
|
190
|
+
this.flags &= ~64;
|
|
193
191
|
if (pausedQueueEffects.has(this)) {
|
|
194
192
|
pausedQueueEffects.delete(this);
|
|
195
193
|
this.trigger();
|
|
@@ -203,9 +201,6 @@ class ReactiveEffect {
|
|
|
203
201
|
if (this.flags & 2 && !(this.flags & 32)) {
|
|
204
202
|
return;
|
|
205
203
|
}
|
|
206
|
-
if (this.flags & 64) {
|
|
207
|
-
return this.trigger();
|
|
208
|
-
}
|
|
209
204
|
if (!(this.flags & 8)) {
|
|
210
205
|
this.flags |= 8;
|
|
211
206
|
this.nextEffect = batchedEffect;
|
|
@@ -249,7 +244,7 @@ class ReactiveEffect {
|
|
|
249
244
|
}
|
|
250
245
|
}
|
|
251
246
|
trigger() {
|
|
252
|
-
if (this.flags &
|
|
247
|
+
if (this.flags & 64) {
|
|
253
248
|
pausedQueueEffects.add(this);
|
|
254
249
|
} else if (this.scheduler) {
|
|
255
250
|
this.scheduler();
|
|
@@ -279,6 +274,7 @@ function endBatch() {
|
|
|
279
274
|
batchDepth--;
|
|
280
275
|
return;
|
|
281
276
|
}
|
|
277
|
+
batchDepth--;
|
|
282
278
|
let error;
|
|
283
279
|
while (batchedEffect) {
|
|
284
280
|
let e = batchedEffect;
|
|
@@ -297,7 +293,6 @@ function endBatch() {
|
|
|
297
293
|
e = next;
|
|
298
294
|
}
|
|
299
295
|
}
|
|
300
|
-
batchDepth--;
|
|
301
296
|
if (error) throw error;
|
|
302
297
|
}
|
|
303
298
|
function prepareDeps(sub) {
|
|
@@ -717,26 +712,26 @@ const arrayInstrumentations = {
|
|
|
717
712
|
});
|
|
718
713
|
},
|
|
719
714
|
every(fn, thisArg) {
|
|
720
|
-
return apply(this, "every", fn, thisArg);
|
|
715
|
+
return apply(this, "every", fn, thisArg, void 0, arguments);
|
|
721
716
|
},
|
|
722
717
|
filter(fn, thisArg) {
|
|
723
|
-
return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive));
|
|
718
|
+
return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
|
|
724
719
|
},
|
|
725
720
|
find(fn, thisArg) {
|
|
726
|
-
return apply(this, "find", fn, thisArg, toReactive);
|
|
721
|
+
return apply(this, "find", fn, thisArg, toReactive, arguments);
|
|
727
722
|
},
|
|
728
723
|
findIndex(fn, thisArg) {
|
|
729
|
-
return apply(this, "findIndex", fn, thisArg);
|
|
724
|
+
return apply(this, "findIndex", fn, thisArg, void 0, arguments);
|
|
730
725
|
},
|
|
731
726
|
findLast(fn, thisArg) {
|
|
732
|
-
return apply(this, "findLast", fn, thisArg, toReactive);
|
|
727
|
+
return apply(this, "findLast", fn, thisArg, toReactive, arguments);
|
|
733
728
|
},
|
|
734
729
|
findLastIndex(fn, thisArg) {
|
|
735
|
-
return apply(this, "findLastIndex", fn, thisArg);
|
|
730
|
+
return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
|
|
736
731
|
},
|
|
737
732
|
// flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
|
|
738
733
|
forEach(fn, thisArg) {
|
|
739
|
-
return apply(this, "forEach", fn, thisArg);
|
|
734
|
+
return apply(this, "forEach", fn, thisArg, void 0, arguments);
|
|
740
735
|
},
|
|
741
736
|
includes(...args) {
|
|
742
737
|
return searchProxy(this, "includes", args);
|
|
@@ -752,7 +747,7 @@ const arrayInstrumentations = {
|
|
|
752
747
|
return searchProxy(this, "lastIndexOf", args);
|
|
753
748
|
},
|
|
754
749
|
map(fn, thisArg) {
|
|
755
|
-
return apply(this, "map", fn, thisArg);
|
|
750
|
+
return apply(this, "map", fn, thisArg, void 0, arguments);
|
|
756
751
|
},
|
|
757
752
|
pop() {
|
|
758
753
|
return noTracking(this, "pop");
|
|
@@ -771,7 +766,7 @@ const arrayInstrumentations = {
|
|
|
771
766
|
},
|
|
772
767
|
// slice could use ARRAY_ITERATE but also seems to beg for range tracking
|
|
773
768
|
some(fn, thisArg) {
|
|
774
|
-
return apply(this, "some", fn, thisArg);
|
|
769
|
+
return apply(this, "some", fn, thisArg, void 0, arguments);
|
|
775
770
|
},
|
|
776
771
|
splice(...args) {
|
|
777
772
|
return noTracking(this, "splice", args);
|
|
@@ -807,12 +802,17 @@ function iterator(self, method, wrapValue) {
|
|
|
807
802
|
}
|
|
808
803
|
return iter;
|
|
809
804
|
}
|
|
810
|
-
|
|
805
|
+
const arrayProto = Array.prototype;
|
|
806
|
+
function apply(self, method, fn, thisArg, wrappedRetFn, args) {
|
|
811
807
|
const arr = shallowReadArray(self);
|
|
812
|
-
|
|
808
|
+
const needsWrap = arr !== self && !isShallow(self);
|
|
809
|
+
const methodFn = arr[method];
|
|
810
|
+
if (methodFn !== arrayProto[method]) {
|
|
811
|
+
const result2 = methodFn.apply(arr, args);
|
|
812
|
+
return needsWrap ? toReactive(result2) : result2;
|
|
813
|
+
}
|
|
813
814
|
let wrappedFn = fn;
|
|
814
815
|
if (arr !== self) {
|
|
815
|
-
needsWrap = !isShallow(self);
|
|
816
816
|
if (needsWrap) {
|
|
817
817
|
wrappedFn = function(item, index) {
|
|
818
818
|
return fn.call(this, toReactive(item), index, self);
|
|
@@ -823,7 +823,7 @@ function apply(self, method, fn, thisArg, wrappedRetFn) {
|
|
|
823
823
|
};
|
|
824
824
|
}
|
|
825
825
|
}
|
|
826
|
-
const result = arr
|
|
826
|
+
const result = methodFn.call(arr, wrappedFn, thisArg);
|
|
827
827
|
return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
|
|
828
828
|
}
|
|
829
829
|
function reduce(self, method, fn, args) {
|
|
@@ -1688,4 +1688,226 @@ const ReactiveFlags = {
|
|
|
1688
1688
|
"IS_REF": "__v_isRef"
|
|
1689
1689
|
};
|
|
1690
1690
|
|
|
1691
|
-
|
|
1691
|
+
const WatchErrorCodes = {
|
|
1692
|
+
"WATCH_GETTER": 2,
|
|
1693
|
+
"2": "WATCH_GETTER",
|
|
1694
|
+
"WATCH_CALLBACK": 3,
|
|
1695
|
+
"3": "WATCH_CALLBACK",
|
|
1696
|
+
"WATCH_CLEANUP": 4,
|
|
1697
|
+
"4": "WATCH_CLEANUP"
|
|
1698
|
+
};
|
|
1699
|
+
const INITIAL_WATCHER_VALUE = {};
|
|
1700
|
+
const cleanupMap = /* @__PURE__ */ new WeakMap();
|
|
1701
|
+
let activeWatcher = void 0;
|
|
1702
|
+
function getCurrentWatcher() {
|
|
1703
|
+
return activeWatcher;
|
|
1704
|
+
}
|
|
1705
|
+
function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
|
|
1706
|
+
if (owner) {
|
|
1707
|
+
let cleanups = cleanupMap.get(owner);
|
|
1708
|
+
if (!cleanups) cleanupMap.set(owner, cleanups = []);
|
|
1709
|
+
cleanups.push(cleanupFn);
|
|
1710
|
+
} else if (!!(process.env.NODE_ENV !== "production") && !failSilently) {
|
|
1711
|
+
warn(
|
|
1712
|
+
`onWatcherCleanup() was called when there was no active watcher to associate with.`
|
|
1713
|
+
);
|
|
1714
|
+
}
|
|
1715
|
+
}
|
|
1716
|
+
function watch(source, cb, options = EMPTY_OBJ) {
|
|
1717
|
+
const { immediate, deep, once, scheduler, augmentJob, call } = options;
|
|
1718
|
+
const warnInvalidSource = (s) => {
|
|
1719
|
+
(options.onWarn || warn)(
|
|
1720
|
+
`Invalid watch source: `,
|
|
1721
|
+
s,
|
|
1722
|
+
`A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
|
|
1723
|
+
);
|
|
1724
|
+
};
|
|
1725
|
+
const reactiveGetter = (source2) => {
|
|
1726
|
+
if (deep) return source2;
|
|
1727
|
+
if (isShallow(source2) || deep === false || deep === 0)
|
|
1728
|
+
return traverse(source2, 1);
|
|
1729
|
+
return traverse(source2);
|
|
1730
|
+
};
|
|
1731
|
+
let effect;
|
|
1732
|
+
let getter;
|
|
1733
|
+
let cleanup;
|
|
1734
|
+
let boundCleanup;
|
|
1735
|
+
let forceTrigger = false;
|
|
1736
|
+
let isMultiSource = false;
|
|
1737
|
+
if (isRef(source)) {
|
|
1738
|
+
getter = () => source.value;
|
|
1739
|
+
forceTrigger = isShallow(source);
|
|
1740
|
+
} else if (isReactive(source)) {
|
|
1741
|
+
getter = () => reactiveGetter(source);
|
|
1742
|
+
forceTrigger = true;
|
|
1743
|
+
} else if (isArray(source)) {
|
|
1744
|
+
isMultiSource = true;
|
|
1745
|
+
forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
|
|
1746
|
+
getter = () => source.map((s) => {
|
|
1747
|
+
if (isRef(s)) {
|
|
1748
|
+
return s.value;
|
|
1749
|
+
} else if (isReactive(s)) {
|
|
1750
|
+
return reactiveGetter(s);
|
|
1751
|
+
} else if (isFunction(s)) {
|
|
1752
|
+
return call ? call(s, 2) : s();
|
|
1753
|
+
} else {
|
|
1754
|
+
!!(process.env.NODE_ENV !== "production") && warnInvalidSource(s);
|
|
1755
|
+
}
|
|
1756
|
+
});
|
|
1757
|
+
} else if (isFunction(source)) {
|
|
1758
|
+
if (cb) {
|
|
1759
|
+
getter = call ? () => call(source, 2) : source;
|
|
1760
|
+
} else {
|
|
1761
|
+
getter = () => {
|
|
1762
|
+
if (cleanup) {
|
|
1763
|
+
pauseTracking();
|
|
1764
|
+
try {
|
|
1765
|
+
cleanup();
|
|
1766
|
+
} finally {
|
|
1767
|
+
resetTracking();
|
|
1768
|
+
}
|
|
1769
|
+
}
|
|
1770
|
+
const currentEffect = activeWatcher;
|
|
1771
|
+
activeWatcher = effect;
|
|
1772
|
+
try {
|
|
1773
|
+
return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
|
|
1774
|
+
} finally {
|
|
1775
|
+
activeWatcher = currentEffect;
|
|
1776
|
+
}
|
|
1777
|
+
};
|
|
1778
|
+
}
|
|
1779
|
+
} else {
|
|
1780
|
+
getter = NOOP;
|
|
1781
|
+
!!(process.env.NODE_ENV !== "production") && warnInvalidSource(source);
|
|
1782
|
+
}
|
|
1783
|
+
if (cb && deep) {
|
|
1784
|
+
const baseGetter = getter;
|
|
1785
|
+
const depth = deep === true ? Infinity : deep;
|
|
1786
|
+
getter = () => traverse(baseGetter(), depth);
|
|
1787
|
+
}
|
|
1788
|
+
if (once) {
|
|
1789
|
+
if (cb) {
|
|
1790
|
+
const _cb = cb;
|
|
1791
|
+
cb = (...args) => {
|
|
1792
|
+
_cb(...args);
|
|
1793
|
+
effect.stop();
|
|
1794
|
+
};
|
|
1795
|
+
} else {
|
|
1796
|
+
const _getter = getter;
|
|
1797
|
+
getter = () => {
|
|
1798
|
+
_getter();
|
|
1799
|
+
effect.stop();
|
|
1800
|
+
};
|
|
1801
|
+
}
|
|
1802
|
+
}
|
|
1803
|
+
let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
|
|
1804
|
+
const job = (immediateFirstRun) => {
|
|
1805
|
+
if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
|
|
1806
|
+
return;
|
|
1807
|
+
}
|
|
1808
|
+
if (cb) {
|
|
1809
|
+
const newValue = effect.run();
|
|
1810
|
+
if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
|
|
1811
|
+
if (cleanup) {
|
|
1812
|
+
cleanup();
|
|
1813
|
+
}
|
|
1814
|
+
const currentWatcher = activeWatcher;
|
|
1815
|
+
activeWatcher = effect;
|
|
1816
|
+
try {
|
|
1817
|
+
const args = [
|
|
1818
|
+
newValue,
|
|
1819
|
+
// pass undefined as the old value when it's changed for the first time
|
|
1820
|
+
oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
|
|
1821
|
+
boundCleanup
|
|
1822
|
+
];
|
|
1823
|
+
call ? call(cb, 3, args) : (
|
|
1824
|
+
// @ts-expect-error
|
|
1825
|
+
cb(...args)
|
|
1826
|
+
);
|
|
1827
|
+
oldValue = newValue;
|
|
1828
|
+
} finally {
|
|
1829
|
+
activeWatcher = currentWatcher;
|
|
1830
|
+
}
|
|
1831
|
+
}
|
|
1832
|
+
} else {
|
|
1833
|
+
effect.run();
|
|
1834
|
+
}
|
|
1835
|
+
};
|
|
1836
|
+
if (augmentJob) {
|
|
1837
|
+
augmentJob(job);
|
|
1838
|
+
}
|
|
1839
|
+
effect = new ReactiveEffect(getter);
|
|
1840
|
+
effect.scheduler = scheduler ? () => scheduler(job, false) : job;
|
|
1841
|
+
boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
|
|
1842
|
+
cleanup = effect.onStop = () => {
|
|
1843
|
+
const cleanups = cleanupMap.get(effect);
|
|
1844
|
+
if (cleanups) {
|
|
1845
|
+
if (call) {
|
|
1846
|
+
call(cleanups, 4);
|
|
1847
|
+
} else {
|
|
1848
|
+
for (const cleanup2 of cleanups) cleanup2();
|
|
1849
|
+
}
|
|
1850
|
+
cleanupMap.delete(effect);
|
|
1851
|
+
}
|
|
1852
|
+
};
|
|
1853
|
+
if (!!(process.env.NODE_ENV !== "production")) {
|
|
1854
|
+
effect.onTrack = options.onTrack;
|
|
1855
|
+
effect.onTrigger = options.onTrigger;
|
|
1856
|
+
}
|
|
1857
|
+
if (cb) {
|
|
1858
|
+
if (immediate) {
|
|
1859
|
+
job(true);
|
|
1860
|
+
} else {
|
|
1861
|
+
oldValue = effect.run();
|
|
1862
|
+
}
|
|
1863
|
+
} else if (scheduler) {
|
|
1864
|
+
scheduler(job.bind(null, true), true);
|
|
1865
|
+
} else {
|
|
1866
|
+
effect.run();
|
|
1867
|
+
}
|
|
1868
|
+
const scope = getCurrentScope();
|
|
1869
|
+
const watchHandle = () => {
|
|
1870
|
+
effect.stop();
|
|
1871
|
+
if (scope) {
|
|
1872
|
+
remove(scope.effects, effect);
|
|
1873
|
+
}
|
|
1874
|
+
};
|
|
1875
|
+
watchHandle.pause = effect.pause.bind(effect);
|
|
1876
|
+
watchHandle.resume = effect.resume.bind(effect);
|
|
1877
|
+
watchHandle.stop = watchHandle;
|
|
1878
|
+
return watchHandle;
|
|
1879
|
+
}
|
|
1880
|
+
function traverse(value, depth = Infinity, seen) {
|
|
1881
|
+
if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
|
|
1882
|
+
return value;
|
|
1883
|
+
}
|
|
1884
|
+
seen = seen || /* @__PURE__ */ new Set();
|
|
1885
|
+
if (seen.has(value)) {
|
|
1886
|
+
return value;
|
|
1887
|
+
}
|
|
1888
|
+
seen.add(value);
|
|
1889
|
+
depth--;
|
|
1890
|
+
if (isRef(value)) {
|
|
1891
|
+
traverse(value.value, depth, seen);
|
|
1892
|
+
} else if (isArray(value)) {
|
|
1893
|
+
for (let i = 0; i < value.length; i++) {
|
|
1894
|
+
traverse(value[i], depth, seen);
|
|
1895
|
+
}
|
|
1896
|
+
} else if (isSet(value) || isMap(value)) {
|
|
1897
|
+
value.forEach((v) => {
|
|
1898
|
+
traverse(v, depth, seen);
|
|
1899
|
+
});
|
|
1900
|
+
} else if (isPlainObject(value)) {
|
|
1901
|
+
for (const key in value) {
|
|
1902
|
+
traverse(value[key], depth, seen);
|
|
1903
|
+
}
|
|
1904
|
+
for (const key of Object.getOwnPropertySymbols(value)) {
|
|
1905
|
+
if (Object.prototype.propertyIsEnumerable.call(value, key)) {
|
|
1906
|
+
traverse(value[key], depth, seen);
|
|
1907
|
+
}
|
|
1908
|
+
}
|
|
1909
|
+
}
|
|
1910
|
+
return value;
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
export { ARRAY_ITERATE_KEY, EffectFlags, EffectScope, ITERATE_KEY, MAP_KEY_ITERATE_KEY, ReactiveEffect, ReactiveFlags, TrackOpTypes, TriggerOpTypes, WatchErrorCodes, computed, customRef, effect, effectScope, enableTracking, getCurrentScope, getCurrentWatcher, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, onEffectCleanup, onScopeDispose, onWatcherCleanup, pauseTracking, proxyRefs, reactive, reactiveReadArray, readonly, ref, resetTracking, shallowReactive, shallowReadArray, shallowReadonly, shallowRef, stop, toRaw, toReactive, toReadonly, toRef, toRefs, toValue, track, traverse, trigger, triggerRef, unref, watch };
|