@vue/reactivity 3.5.0-beta.2 → 3.5.0-rc.1
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 +246 -14
- package/dist/reactivity.cjs.prod.js +228 -14
- package/dist/reactivity.d.ts +38 -0
- package/dist/reactivity.esm-browser.js +253 -15
- package/dist/reactivity.esm-browser.prod.js +2 -2
- package/dist/reactivity.esm-bundler.js +243 -16
- package/dist/reactivity.global.js +257 -14
- package/dist/reactivity.global.prod.js +2 -2
- package/package.json +2 -2
package/dist/reactivity.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vue/reactivity v3.5.0-
|
|
2
|
+
* @vue/reactivity v3.5.0-rc.1
|
|
3
3
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
4
|
* @license MIT
|
|
5
5
|
**/
|
|
@@ -43,12 +43,13 @@ class EffectScope {
|
|
|
43
43
|
pause() {
|
|
44
44
|
if (this._active) {
|
|
45
45
|
this._isPaused = true;
|
|
46
|
+
let i, l;
|
|
46
47
|
if (this.scopes) {
|
|
47
|
-
for (
|
|
48
|
+
for (i = 0, l = this.scopes.length; i < l; i++) {
|
|
48
49
|
this.scopes[i].pause();
|
|
49
50
|
}
|
|
50
51
|
}
|
|
51
|
-
for (
|
|
52
|
+
for (i = 0, l = this.effects.length; i < l; i++) {
|
|
52
53
|
this.effects[i].pause();
|
|
53
54
|
}
|
|
54
55
|
}
|
|
@@ -60,12 +61,13 @@ class EffectScope {
|
|
|
60
61
|
if (this._active) {
|
|
61
62
|
if (this._isPaused) {
|
|
62
63
|
this._isPaused = false;
|
|
64
|
+
let i, l;
|
|
63
65
|
if (this.scopes) {
|
|
64
|
-
for (
|
|
66
|
+
for (i = 0, l = this.scopes.length; i < l; i++) {
|
|
65
67
|
this.scopes[i].resume();
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
|
-
for (
|
|
70
|
+
for (i = 0, l = this.effects.length; i < l; i++) {
|
|
69
71
|
this.effects[i].resume();
|
|
70
72
|
}
|
|
71
73
|
}
|
|
@@ -274,11 +276,9 @@ function startBatch() {
|
|
|
274
276
|
batchDepth++;
|
|
275
277
|
}
|
|
276
278
|
function endBatch() {
|
|
277
|
-
if (batchDepth >
|
|
278
|
-
batchDepth--;
|
|
279
|
+
if (--batchDepth > 0) {
|
|
279
280
|
return;
|
|
280
281
|
}
|
|
281
|
-
batchDepth--;
|
|
282
282
|
let error;
|
|
283
283
|
while (batchedEffect) {
|
|
284
284
|
let e = batchedEffect;
|
|
@@ -805,14 +805,14 @@ function iterator(self, method, wrapValue) {
|
|
|
805
805
|
const arrayProto = Array.prototype;
|
|
806
806
|
function apply(self, method, fn, thisArg, wrappedRetFn, args) {
|
|
807
807
|
const arr = shallowReadArray(self);
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
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;
|
|
811
813
|
}
|
|
812
|
-
let needsWrap = false;
|
|
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);
|
|
@@ -950,7 +950,12 @@ class MutableReactiveHandler extends BaseReactiveHandler {
|
|
|
950
950
|
}
|
|
951
951
|
}
|
|
952
952
|
const hadKey = shared.isArray(target) && shared.isIntegerKey(key) ? Number(key) < target.length : shared.hasOwn(target, key);
|
|
953
|
-
const result = Reflect.set(
|
|
953
|
+
const result = Reflect.set(
|
|
954
|
+
target,
|
|
955
|
+
key,
|
|
956
|
+
value,
|
|
957
|
+
isRef(target) ? target : receiver
|
|
958
|
+
);
|
|
954
959
|
if (target === toRaw(receiver)) {
|
|
955
960
|
if (!hadKey) {
|
|
956
961
|
trigger(target, "add", key, value);
|
|
@@ -1682,6 +1687,228 @@ const ReactiveFlags = {
|
|
|
1682
1687
|
"IS_REF": "__v_isRef"
|
|
1683
1688
|
};
|
|
1684
1689
|
|
|
1690
|
+
const WatchErrorCodes = {
|
|
1691
|
+
"WATCH_GETTER": 2,
|
|
1692
|
+
"2": "WATCH_GETTER",
|
|
1693
|
+
"WATCH_CALLBACK": 3,
|
|
1694
|
+
"3": "WATCH_CALLBACK",
|
|
1695
|
+
"WATCH_CLEANUP": 4,
|
|
1696
|
+
"4": "WATCH_CLEANUP"
|
|
1697
|
+
};
|
|
1698
|
+
const INITIAL_WATCHER_VALUE = {};
|
|
1699
|
+
const cleanupMap = /* @__PURE__ */ new WeakMap();
|
|
1700
|
+
let activeWatcher = void 0;
|
|
1701
|
+
function getCurrentWatcher() {
|
|
1702
|
+
return activeWatcher;
|
|
1703
|
+
}
|
|
1704
|
+
function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
|
|
1705
|
+
if (owner) {
|
|
1706
|
+
let cleanups = cleanupMap.get(owner);
|
|
1707
|
+
if (!cleanups) cleanupMap.set(owner, cleanups = []);
|
|
1708
|
+
cleanups.push(cleanupFn);
|
|
1709
|
+
} else if (!failSilently) {
|
|
1710
|
+
warn(
|
|
1711
|
+
`onWatcherCleanup() was called when there was no active watcher to associate with.`
|
|
1712
|
+
);
|
|
1713
|
+
}
|
|
1714
|
+
}
|
|
1715
|
+
function watch(source, cb, options = shared.EMPTY_OBJ) {
|
|
1716
|
+
const { immediate, deep, once, scheduler, augmentJob, call } = options;
|
|
1717
|
+
const warnInvalidSource = (s) => {
|
|
1718
|
+
(options.onWarn || warn)(
|
|
1719
|
+
`Invalid watch source: `,
|
|
1720
|
+
s,
|
|
1721
|
+
`A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
|
|
1722
|
+
);
|
|
1723
|
+
};
|
|
1724
|
+
const reactiveGetter = (source2) => {
|
|
1725
|
+
if (deep) return source2;
|
|
1726
|
+
if (isShallow(source2) || deep === false || deep === 0)
|
|
1727
|
+
return traverse(source2, 1);
|
|
1728
|
+
return traverse(source2);
|
|
1729
|
+
};
|
|
1730
|
+
let effect;
|
|
1731
|
+
let getter;
|
|
1732
|
+
let cleanup;
|
|
1733
|
+
let boundCleanup;
|
|
1734
|
+
let forceTrigger = false;
|
|
1735
|
+
let isMultiSource = false;
|
|
1736
|
+
if (isRef(source)) {
|
|
1737
|
+
getter = () => source.value;
|
|
1738
|
+
forceTrigger = isShallow(source);
|
|
1739
|
+
} else if (isReactive(source)) {
|
|
1740
|
+
getter = () => reactiveGetter(source);
|
|
1741
|
+
forceTrigger = true;
|
|
1742
|
+
} else if (shared.isArray(source)) {
|
|
1743
|
+
isMultiSource = true;
|
|
1744
|
+
forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
|
|
1745
|
+
getter = () => source.map((s) => {
|
|
1746
|
+
if (isRef(s)) {
|
|
1747
|
+
return s.value;
|
|
1748
|
+
} else if (isReactive(s)) {
|
|
1749
|
+
return reactiveGetter(s);
|
|
1750
|
+
} else if (shared.isFunction(s)) {
|
|
1751
|
+
return call ? call(s, 2) : s();
|
|
1752
|
+
} else {
|
|
1753
|
+
warnInvalidSource(s);
|
|
1754
|
+
}
|
|
1755
|
+
});
|
|
1756
|
+
} else if (shared.isFunction(source)) {
|
|
1757
|
+
if (cb) {
|
|
1758
|
+
getter = call ? () => call(source, 2) : source;
|
|
1759
|
+
} else {
|
|
1760
|
+
getter = () => {
|
|
1761
|
+
if (cleanup) {
|
|
1762
|
+
pauseTracking();
|
|
1763
|
+
try {
|
|
1764
|
+
cleanup();
|
|
1765
|
+
} finally {
|
|
1766
|
+
resetTracking();
|
|
1767
|
+
}
|
|
1768
|
+
}
|
|
1769
|
+
const currentEffect = activeWatcher;
|
|
1770
|
+
activeWatcher = effect;
|
|
1771
|
+
try {
|
|
1772
|
+
return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
|
|
1773
|
+
} finally {
|
|
1774
|
+
activeWatcher = currentEffect;
|
|
1775
|
+
}
|
|
1776
|
+
};
|
|
1777
|
+
}
|
|
1778
|
+
} else {
|
|
1779
|
+
getter = shared.NOOP;
|
|
1780
|
+
warnInvalidSource(source);
|
|
1781
|
+
}
|
|
1782
|
+
if (cb && deep) {
|
|
1783
|
+
const baseGetter = getter;
|
|
1784
|
+
const depth = deep === true ? Infinity : deep;
|
|
1785
|
+
getter = () => traverse(baseGetter(), depth);
|
|
1786
|
+
}
|
|
1787
|
+
const scope = getCurrentScope();
|
|
1788
|
+
const watchHandle = () => {
|
|
1789
|
+
effect.stop();
|
|
1790
|
+
if (scope) {
|
|
1791
|
+
shared.remove(scope.effects, effect);
|
|
1792
|
+
}
|
|
1793
|
+
};
|
|
1794
|
+
if (once) {
|
|
1795
|
+
if (cb) {
|
|
1796
|
+
const _cb = cb;
|
|
1797
|
+
cb = (...args) => {
|
|
1798
|
+
_cb(...args);
|
|
1799
|
+
watchHandle();
|
|
1800
|
+
};
|
|
1801
|
+
} else {
|
|
1802
|
+
const _getter = getter;
|
|
1803
|
+
getter = () => {
|
|
1804
|
+
_getter();
|
|
1805
|
+
watchHandle();
|
|
1806
|
+
};
|
|
1807
|
+
}
|
|
1808
|
+
}
|
|
1809
|
+
let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
|
|
1810
|
+
const job = (immediateFirstRun) => {
|
|
1811
|
+
if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
|
|
1812
|
+
return;
|
|
1813
|
+
}
|
|
1814
|
+
if (cb) {
|
|
1815
|
+
const newValue = effect.run();
|
|
1816
|
+
if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => shared.hasChanged(v, oldValue[i])) : shared.hasChanged(newValue, oldValue))) {
|
|
1817
|
+
if (cleanup) {
|
|
1818
|
+
cleanup();
|
|
1819
|
+
}
|
|
1820
|
+
const currentWatcher = activeWatcher;
|
|
1821
|
+
activeWatcher = effect;
|
|
1822
|
+
try {
|
|
1823
|
+
const args = [
|
|
1824
|
+
newValue,
|
|
1825
|
+
// pass undefined as the old value when it's changed for the first time
|
|
1826
|
+
oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
|
|
1827
|
+
boundCleanup
|
|
1828
|
+
];
|
|
1829
|
+
call ? call(cb, 3, args) : (
|
|
1830
|
+
// @ts-expect-error
|
|
1831
|
+
cb(...args)
|
|
1832
|
+
);
|
|
1833
|
+
oldValue = newValue;
|
|
1834
|
+
} finally {
|
|
1835
|
+
activeWatcher = currentWatcher;
|
|
1836
|
+
}
|
|
1837
|
+
}
|
|
1838
|
+
} else {
|
|
1839
|
+
effect.run();
|
|
1840
|
+
}
|
|
1841
|
+
};
|
|
1842
|
+
if (augmentJob) {
|
|
1843
|
+
augmentJob(job);
|
|
1844
|
+
}
|
|
1845
|
+
effect = new ReactiveEffect(getter);
|
|
1846
|
+
effect.scheduler = scheduler ? () => scheduler(job, false) : job;
|
|
1847
|
+
boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
|
|
1848
|
+
cleanup = effect.onStop = () => {
|
|
1849
|
+
const cleanups = cleanupMap.get(effect);
|
|
1850
|
+
if (cleanups) {
|
|
1851
|
+
if (call) {
|
|
1852
|
+
call(cleanups, 4);
|
|
1853
|
+
} else {
|
|
1854
|
+
for (const cleanup2 of cleanups) cleanup2();
|
|
1855
|
+
}
|
|
1856
|
+
cleanupMap.delete(effect);
|
|
1857
|
+
}
|
|
1858
|
+
};
|
|
1859
|
+
{
|
|
1860
|
+
effect.onTrack = options.onTrack;
|
|
1861
|
+
effect.onTrigger = options.onTrigger;
|
|
1862
|
+
}
|
|
1863
|
+
if (cb) {
|
|
1864
|
+
if (immediate) {
|
|
1865
|
+
job(true);
|
|
1866
|
+
} else {
|
|
1867
|
+
oldValue = effect.run();
|
|
1868
|
+
}
|
|
1869
|
+
} else if (scheduler) {
|
|
1870
|
+
scheduler(job.bind(null, true), true);
|
|
1871
|
+
} else {
|
|
1872
|
+
effect.run();
|
|
1873
|
+
}
|
|
1874
|
+
watchHandle.pause = effect.pause.bind(effect);
|
|
1875
|
+
watchHandle.resume = effect.resume.bind(effect);
|
|
1876
|
+
watchHandle.stop = watchHandle;
|
|
1877
|
+
return watchHandle;
|
|
1878
|
+
}
|
|
1879
|
+
function traverse(value, depth = Infinity, seen) {
|
|
1880
|
+
if (depth <= 0 || !shared.isObject(value) || value["__v_skip"]) {
|
|
1881
|
+
return value;
|
|
1882
|
+
}
|
|
1883
|
+
seen = seen || /* @__PURE__ */ new Set();
|
|
1884
|
+
if (seen.has(value)) {
|
|
1885
|
+
return value;
|
|
1886
|
+
}
|
|
1887
|
+
seen.add(value);
|
|
1888
|
+
depth--;
|
|
1889
|
+
if (isRef(value)) {
|
|
1890
|
+
traverse(value.value, depth, seen);
|
|
1891
|
+
} else if (shared.isArray(value)) {
|
|
1892
|
+
for (let i = 0; i < value.length; i++) {
|
|
1893
|
+
traverse(value[i], depth, seen);
|
|
1894
|
+
}
|
|
1895
|
+
} else if (shared.isSet(value) || shared.isMap(value)) {
|
|
1896
|
+
value.forEach((v) => {
|
|
1897
|
+
traverse(v, depth, seen);
|
|
1898
|
+
});
|
|
1899
|
+
} else if (shared.isPlainObject(value)) {
|
|
1900
|
+
for (const key in value) {
|
|
1901
|
+
traverse(value[key], depth, seen);
|
|
1902
|
+
}
|
|
1903
|
+
for (const key of Object.getOwnPropertySymbols(value)) {
|
|
1904
|
+
if (Object.prototype.propertyIsEnumerable.call(value, key)) {
|
|
1905
|
+
traverse(value[key], depth, seen);
|
|
1906
|
+
}
|
|
1907
|
+
}
|
|
1908
|
+
}
|
|
1909
|
+
return value;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1685
1912
|
exports.ARRAY_ITERATE_KEY = ARRAY_ITERATE_KEY;
|
|
1686
1913
|
exports.EffectFlags = EffectFlags;
|
|
1687
1914
|
exports.EffectScope = EffectScope;
|
|
@@ -1691,12 +1918,14 @@ exports.ReactiveEffect = ReactiveEffect;
|
|
|
1691
1918
|
exports.ReactiveFlags = ReactiveFlags;
|
|
1692
1919
|
exports.TrackOpTypes = TrackOpTypes;
|
|
1693
1920
|
exports.TriggerOpTypes = TriggerOpTypes;
|
|
1921
|
+
exports.WatchErrorCodes = WatchErrorCodes;
|
|
1694
1922
|
exports.computed = computed;
|
|
1695
1923
|
exports.customRef = customRef;
|
|
1696
1924
|
exports.effect = effect;
|
|
1697
1925
|
exports.effectScope = effectScope;
|
|
1698
1926
|
exports.enableTracking = enableTracking;
|
|
1699
1927
|
exports.getCurrentScope = getCurrentScope;
|
|
1928
|
+
exports.getCurrentWatcher = getCurrentWatcher;
|
|
1700
1929
|
exports.isProxy = isProxy;
|
|
1701
1930
|
exports.isReactive = isReactive;
|
|
1702
1931
|
exports.isReadonly = isReadonly;
|
|
@@ -1705,6 +1934,7 @@ exports.isShallow = isShallow;
|
|
|
1705
1934
|
exports.markRaw = markRaw;
|
|
1706
1935
|
exports.onEffectCleanup = onEffectCleanup;
|
|
1707
1936
|
exports.onScopeDispose = onScopeDispose;
|
|
1937
|
+
exports.onWatcherCleanup = onWatcherCleanup;
|
|
1708
1938
|
exports.pauseTracking = pauseTracking;
|
|
1709
1939
|
exports.proxyRefs = proxyRefs;
|
|
1710
1940
|
exports.reactive = reactive;
|
|
@@ -1724,6 +1954,8 @@ exports.toRef = toRef;
|
|
|
1724
1954
|
exports.toRefs = toRefs;
|
|
1725
1955
|
exports.toValue = toValue;
|
|
1726
1956
|
exports.track = track;
|
|
1957
|
+
exports.traverse = traverse;
|
|
1727
1958
|
exports.trigger = trigger;
|
|
1728
1959
|
exports.triggerRef = triggerRef;
|
|
1729
1960
|
exports.unref = unref;
|
|
1961
|
+
exports.watch = watch;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vue/reactivity v3.5.0-
|
|
2
|
+
* @vue/reactivity v3.5.0-rc.1
|
|
3
3
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
4
|
* @license MIT
|
|
5
5
|
**/
|
|
@@ -39,12 +39,13 @@ class EffectScope {
|
|
|
39
39
|
pause() {
|
|
40
40
|
if (this._active) {
|
|
41
41
|
this._isPaused = true;
|
|
42
|
+
let i, l;
|
|
42
43
|
if (this.scopes) {
|
|
43
|
-
for (
|
|
44
|
+
for (i = 0, l = this.scopes.length; i < l; i++) {
|
|
44
45
|
this.scopes[i].pause();
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
|
-
for (
|
|
48
|
+
for (i = 0, l = this.effects.length; i < l; i++) {
|
|
48
49
|
this.effects[i].pause();
|
|
49
50
|
}
|
|
50
51
|
}
|
|
@@ -56,12 +57,13 @@ class EffectScope {
|
|
|
56
57
|
if (this._active) {
|
|
57
58
|
if (this._isPaused) {
|
|
58
59
|
this._isPaused = false;
|
|
60
|
+
let i, l;
|
|
59
61
|
if (this.scopes) {
|
|
60
|
-
for (
|
|
62
|
+
for (i = 0, l = this.scopes.length; i < l; i++) {
|
|
61
63
|
this.scopes[i].resume();
|
|
62
64
|
}
|
|
63
65
|
}
|
|
64
|
-
for (
|
|
66
|
+
for (i = 0, l = this.effects.length; i < l; i++) {
|
|
65
67
|
this.effects[i].resume();
|
|
66
68
|
}
|
|
67
69
|
}
|
|
@@ -259,11 +261,9 @@ function startBatch() {
|
|
|
259
261
|
batchDepth++;
|
|
260
262
|
}
|
|
261
263
|
function endBatch() {
|
|
262
|
-
if (batchDepth >
|
|
263
|
-
batchDepth--;
|
|
264
|
+
if (--batchDepth > 0) {
|
|
264
265
|
return;
|
|
265
266
|
}
|
|
266
|
-
batchDepth--;
|
|
267
267
|
let error;
|
|
268
268
|
while (batchedEffect) {
|
|
269
269
|
let e = batchedEffect;
|
|
@@ -746,14 +746,14 @@ function iterator(self, method, wrapValue) {
|
|
|
746
746
|
const arrayProto = Array.prototype;
|
|
747
747
|
function apply(self, method, fn, thisArg, wrappedRetFn, args) {
|
|
748
748
|
const arr = shallowReadArray(self);
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
749
|
+
const needsWrap = arr !== self && !isShallow(self);
|
|
750
|
+
const methodFn = arr[method];
|
|
751
|
+
if (methodFn !== arrayProto[method]) {
|
|
752
|
+
const result2 = methodFn.apply(arr, args);
|
|
753
|
+
return needsWrap ? toReactive(result2) : result2;
|
|
752
754
|
}
|
|
753
|
-
let needsWrap = false;
|
|
754
755
|
let wrappedFn = fn;
|
|
755
756
|
if (arr !== self) {
|
|
756
|
-
needsWrap = !isShallow(self);
|
|
757
757
|
if (needsWrap) {
|
|
758
758
|
wrappedFn = function(item, index) {
|
|
759
759
|
return fn.call(this, toReactive(item), index, self);
|
|
@@ -891,7 +891,12 @@ class MutableReactiveHandler extends BaseReactiveHandler {
|
|
|
891
891
|
}
|
|
892
892
|
}
|
|
893
893
|
const hadKey = shared.isArray(target) && shared.isIntegerKey(key) ? Number(key) < target.length : shared.hasOwn(target, key);
|
|
894
|
-
const result = Reflect.set(
|
|
894
|
+
const result = Reflect.set(
|
|
895
|
+
target,
|
|
896
|
+
key,
|
|
897
|
+
value,
|
|
898
|
+
isRef(target) ? target : receiver
|
|
899
|
+
);
|
|
895
900
|
if (target === toRaw(receiver)) {
|
|
896
901
|
if (!hadKey) {
|
|
897
902
|
trigger(target, "add", key, value);
|
|
@@ -1555,6 +1560,210 @@ const ReactiveFlags = {
|
|
|
1555
1560
|
"IS_REF": "__v_isRef"
|
|
1556
1561
|
};
|
|
1557
1562
|
|
|
1563
|
+
const WatchErrorCodes = {
|
|
1564
|
+
"WATCH_GETTER": 2,
|
|
1565
|
+
"2": "WATCH_GETTER",
|
|
1566
|
+
"WATCH_CALLBACK": 3,
|
|
1567
|
+
"3": "WATCH_CALLBACK",
|
|
1568
|
+
"WATCH_CLEANUP": 4,
|
|
1569
|
+
"4": "WATCH_CLEANUP"
|
|
1570
|
+
};
|
|
1571
|
+
const INITIAL_WATCHER_VALUE = {};
|
|
1572
|
+
const cleanupMap = /* @__PURE__ */ new WeakMap();
|
|
1573
|
+
let activeWatcher = void 0;
|
|
1574
|
+
function getCurrentWatcher() {
|
|
1575
|
+
return activeWatcher;
|
|
1576
|
+
}
|
|
1577
|
+
function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
|
|
1578
|
+
if (owner) {
|
|
1579
|
+
let cleanups = cleanupMap.get(owner);
|
|
1580
|
+
if (!cleanups) cleanupMap.set(owner, cleanups = []);
|
|
1581
|
+
cleanups.push(cleanupFn);
|
|
1582
|
+
}
|
|
1583
|
+
}
|
|
1584
|
+
function watch(source, cb, options = shared.EMPTY_OBJ) {
|
|
1585
|
+
const { immediate, deep, once, scheduler, augmentJob, call } = options;
|
|
1586
|
+
const reactiveGetter = (source2) => {
|
|
1587
|
+
if (deep) return source2;
|
|
1588
|
+
if (isShallow(source2) || deep === false || deep === 0)
|
|
1589
|
+
return traverse(source2, 1);
|
|
1590
|
+
return traverse(source2);
|
|
1591
|
+
};
|
|
1592
|
+
let effect;
|
|
1593
|
+
let getter;
|
|
1594
|
+
let cleanup;
|
|
1595
|
+
let boundCleanup;
|
|
1596
|
+
let forceTrigger = false;
|
|
1597
|
+
let isMultiSource = false;
|
|
1598
|
+
if (isRef(source)) {
|
|
1599
|
+
getter = () => source.value;
|
|
1600
|
+
forceTrigger = isShallow(source);
|
|
1601
|
+
} else if (isReactive(source)) {
|
|
1602
|
+
getter = () => reactiveGetter(source);
|
|
1603
|
+
forceTrigger = true;
|
|
1604
|
+
} else if (shared.isArray(source)) {
|
|
1605
|
+
isMultiSource = true;
|
|
1606
|
+
forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
|
|
1607
|
+
getter = () => source.map((s) => {
|
|
1608
|
+
if (isRef(s)) {
|
|
1609
|
+
return s.value;
|
|
1610
|
+
} else if (isReactive(s)) {
|
|
1611
|
+
return reactiveGetter(s);
|
|
1612
|
+
} else if (shared.isFunction(s)) {
|
|
1613
|
+
return call ? call(s, 2) : s();
|
|
1614
|
+
} else ;
|
|
1615
|
+
});
|
|
1616
|
+
} else if (shared.isFunction(source)) {
|
|
1617
|
+
if (cb) {
|
|
1618
|
+
getter = call ? () => call(source, 2) : source;
|
|
1619
|
+
} else {
|
|
1620
|
+
getter = () => {
|
|
1621
|
+
if (cleanup) {
|
|
1622
|
+
pauseTracking();
|
|
1623
|
+
try {
|
|
1624
|
+
cleanup();
|
|
1625
|
+
} finally {
|
|
1626
|
+
resetTracking();
|
|
1627
|
+
}
|
|
1628
|
+
}
|
|
1629
|
+
const currentEffect = activeWatcher;
|
|
1630
|
+
activeWatcher = effect;
|
|
1631
|
+
try {
|
|
1632
|
+
return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
|
|
1633
|
+
} finally {
|
|
1634
|
+
activeWatcher = currentEffect;
|
|
1635
|
+
}
|
|
1636
|
+
};
|
|
1637
|
+
}
|
|
1638
|
+
} else {
|
|
1639
|
+
getter = shared.NOOP;
|
|
1640
|
+
}
|
|
1641
|
+
if (cb && deep) {
|
|
1642
|
+
const baseGetter = getter;
|
|
1643
|
+
const depth = deep === true ? Infinity : deep;
|
|
1644
|
+
getter = () => traverse(baseGetter(), depth);
|
|
1645
|
+
}
|
|
1646
|
+
const scope = getCurrentScope();
|
|
1647
|
+
const watchHandle = () => {
|
|
1648
|
+
effect.stop();
|
|
1649
|
+
if (scope) {
|
|
1650
|
+
shared.remove(scope.effects, effect);
|
|
1651
|
+
}
|
|
1652
|
+
};
|
|
1653
|
+
if (once) {
|
|
1654
|
+
if (cb) {
|
|
1655
|
+
const _cb = cb;
|
|
1656
|
+
cb = (...args) => {
|
|
1657
|
+
_cb(...args);
|
|
1658
|
+
watchHandle();
|
|
1659
|
+
};
|
|
1660
|
+
} else {
|
|
1661
|
+
const _getter = getter;
|
|
1662
|
+
getter = () => {
|
|
1663
|
+
_getter();
|
|
1664
|
+
watchHandle();
|
|
1665
|
+
};
|
|
1666
|
+
}
|
|
1667
|
+
}
|
|
1668
|
+
let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
|
|
1669
|
+
const job = (immediateFirstRun) => {
|
|
1670
|
+
if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
|
|
1671
|
+
return;
|
|
1672
|
+
}
|
|
1673
|
+
if (cb) {
|
|
1674
|
+
const newValue = effect.run();
|
|
1675
|
+
if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => shared.hasChanged(v, oldValue[i])) : shared.hasChanged(newValue, oldValue))) {
|
|
1676
|
+
if (cleanup) {
|
|
1677
|
+
cleanup();
|
|
1678
|
+
}
|
|
1679
|
+
const currentWatcher = activeWatcher;
|
|
1680
|
+
activeWatcher = effect;
|
|
1681
|
+
try {
|
|
1682
|
+
const args = [
|
|
1683
|
+
newValue,
|
|
1684
|
+
// pass undefined as the old value when it's changed for the first time
|
|
1685
|
+
oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
|
|
1686
|
+
boundCleanup
|
|
1687
|
+
];
|
|
1688
|
+
call ? call(cb, 3, args) : (
|
|
1689
|
+
// @ts-expect-error
|
|
1690
|
+
cb(...args)
|
|
1691
|
+
);
|
|
1692
|
+
oldValue = newValue;
|
|
1693
|
+
} finally {
|
|
1694
|
+
activeWatcher = currentWatcher;
|
|
1695
|
+
}
|
|
1696
|
+
}
|
|
1697
|
+
} else {
|
|
1698
|
+
effect.run();
|
|
1699
|
+
}
|
|
1700
|
+
};
|
|
1701
|
+
if (augmentJob) {
|
|
1702
|
+
augmentJob(job);
|
|
1703
|
+
}
|
|
1704
|
+
effect = new ReactiveEffect(getter);
|
|
1705
|
+
effect.scheduler = scheduler ? () => scheduler(job, false) : job;
|
|
1706
|
+
boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
|
|
1707
|
+
cleanup = effect.onStop = () => {
|
|
1708
|
+
const cleanups = cleanupMap.get(effect);
|
|
1709
|
+
if (cleanups) {
|
|
1710
|
+
if (call) {
|
|
1711
|
+
call(cleanups, 4);
|
|
1712
|
+
} else {
|
|
1713
|
+
for (const cleanup2 of cleanups) cleanup2();
|
|
1714
|
+
}
|
|
1715
|
+
cleanupMap.delete(effect);
|
|
1716
|
+
}
|
|
1717
|
+
};
|
|
1718
|
+
if (cb) {
|
|
1719
|
+
if (immediate) {
|
|
1720
|
+
job(true);
|
|
1721
|
+
} else {
|
|
1722
|
+
oldValue = effect.run();
|
|
1723
|
+
}
|
|
1724
|
+
} else if (scheduler) {
|
|
1725
|
+
scheduler(job.bind(null, true), true);
|
|
1726
|
+
} else {
|
|
1727
|
+
effect.run();
|
|
1728
|
+
}
|
|
1729
|
+
watchHandle.pause = effect.pause.bind(effect);
|
|
1730
|
+
watchHandle.resume = effect.resume.bind(effect);
|
|
1731
|
+
watchHandle.stop = watchHandle;
|
|
1732
|
+
return watchHandle;
|
|
1733
|
+
}
|
|
1734
|
+
function traverse(value, depth = Infinity, seen) {
|
|
1735
|
+
if (depth <= 0 || !shared.isObject(value) || value["__v_skip"]) {
|
|
1736
|
+
return value;
|
|
1737
|
+
}
|
|
1738
|
+
seen = seen || /* @__PURE__ */ new Set();
|
|
1739
|
+
if (seen.has(value)) {
|
|
1740
|
+
return value;
|
|
1741
|
+
}
|
|
1742
|
+
seen.add(value);
|
|
1743
|
+
depth--;
|
|
1744
|
+
if (isRef(value)) {
|
|
1745
|
+
traverse(value.value, depth, seen);
|
|
1746
|
+
} else if (shared.isArray(value)) {
|
|
1747
|
+
for (let i = 0; i < value.length; i++) {
|
|
1748
|
+
traverse(value[i], depth, seen);
|
|
1749
|
+
}
|
|
1750
|
+
} else if (shared.isSet(value) || shared.isMap(value)) {
|
|
1751
|
+
value.forEach((v) => {
|
|
1752
|
+
traverse(v, depth, seen);
|
|
1753
|
+
});
|
|
1754
|
+
} else if (shared.isPlainObject(value)) {
|
|
1755
|
+
for (const key in value) {
|
|
1756
|
+
traverse(value[key], depth, seen);
|
|
1757
|
+
}
|
|
1758
|
+
for (const key of Object.getOwnPropertySymbols(value)) {
|
|
1759
|
+
if (Object.prototype.propertyIsEnumerable.call(value, key)) {
|
|
1760
|
+
traverse(value[key], depth, seen);
|
|
1761
|
+
}
|
|
1762
|
+
}
|
|
1763
|
+
}
|
|
1764
|
+
return value;
|
|
1765
|
+
}
|
|
1766
|
+
|
|
1558
1767
|
exports.ARRAY_ITERATE_KEY = ARRAY_ITERATE_KEY;
|
|
1559
1768
|
exports.EffectFlags = EffectFlags;
|
|
1560
1769
|
exports.EffectScope = EffectScope;
|
|
@@ -1564,12 +1773,14 @@ exports.ReactiveEffect = ReactiveEffect;
|
|
|
1564
1773
|
exports.ReactiveFlags = ReactiveFlags;
|
|
1565
1774
|
exports.TrackOpTypes = TrackOpTypes;
|
|
1566
1775
|
exports.TriggerOpTypes = TriggerOpTypes;
|
|
1776
|
+
exports.WatchErrorCodes = WatchErrorCodes;
|
|
1567
1777
|
exports.computed = computed;
|
|
1568
1778
|
exports.customRef = customRef;
|
|
1569
1779
|
exports.effect = effect;
|
|
1570
1780
|
exports.effectScope = effectScope;
|
|
1571
1781
|
exports.enableTracking = enableTracking;
|
|
1572
1782
|
exports.getCurrentScope = getCurrentScope;
|
|
1783
|
+
exports.getCurrentWatcher = getCurrentWatcher;
|
|
1573
1784
|
exports.isProxy = isProxy;
|
|
1574
1785
|
exports.isReactive = isReactive;
|
|
1575
1786
|
exports.isReadonly = isReadonly;
|
|
@@ -1578,6 +1789,7 @@ exports.isShallow = isShallow;
|
|
|
1578
1789
|
exports.markRaw = markRaw;
|
|
1579
1790
|
exports.onEffectCleanup = onEffectCleanup;
|
|
1580
1791
|
exports.onScopeDispose = onScopeDispose;
|
|
1792
|
+
exports.onWatcherCleanup = onWatcherCleanup;
|
|
1581
1793
|
exports.pauseTracking = pauseTracking;
|
|
1582
1794
|
exports.proxyRefs = proxyRefs;
|
|
1583
1795
|
exports.reactive = reactive;
|
|
@@ -1597,6 +1809,8 @@ exports.toRef = toRef;
|
|
|
1597
1809
|
exports.toRefs = toRefs;
|
|
1598
1810
|
exports.toValue = toValue;
|
|
1599
1811
|
exports.track = track;
|
|
1812
|
+
exports.traverse = traverse;
|
|
1600
1813
|
exports.trigger = trigger;
|
|
1601
1814
|
exports.triggerRef = triggerRef;
|
|
1602
1815
|
exports.unref = unref;
|
|
1816
|
+
exports.watch = watch;
|
package/dist/reactivity.d.ts
CHANGED
|
@@ -707,3 +707,41 @@ export declare function reactiveReadArray<T>(array: T[]): T[];
|
|
|
707
707
|
*/
|
|
708
708
|
export declare function shallowReadArray<T>(arr: T[]): T[];
|
|
709
709
|
|
|
710
|
+
export declare enum WatchErrorCodes {
|
|
711
|
+
WATCH_GETTER = 2,
|
|
712
|
+
WATCH_CALLBACK = 3,
|
|
713
|
+
WATCH_CLEANUP = 4
|
|
714
|
+
}
|
|
715
|
+
export type WatchEffect = (onCleanup: OnCleanup) => void;
|
|
716
|
+
export type WatchSource<T = any> = Ref<T, any> | ComputedRef<T> | (() => T);
|
|
717
|
+
export type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onCleanup: OnCleanup) => any;
|
|
718
|
+
export type OnCleanup = (cleanupFn: () => void) => void;
|
|
719
|
+
export interface WatchOptions<Immediate = boolean> extends DebuggerOptions {
|
|
720
|
+
immediate?: Immediate;
|
|
721
|
+
deep?: boolean | number;
|
|
722
|
+
once?: boolean;
|
|
723
|
+
scheduler?: WatchScheduler;
|
|
724
|
+
onWarn?: (msg: string, ...args: any[]) => void;
|
|
725
|
+
}
|
|
726
|
+
export type WatchStopHandle = () => void;
|
|
727
|
+
export interface WatchHandle extends WatchStopHandle {
|
|
728
|
+
pause: () => void;
|
|
729
|
+
resume: () => void;
|
|
730
|
+
stop: () => void;
|
|
731
|
+
}
|
|
732
|
+
export type WatchScheduler = (job: () => void, isFirstRun: boolean) => void;
|
|
733
|
+
/**
|
|
734
|
+
* Returns the current active effect if there is one.
|
|
735
|
+
*/
|
|
736
|
+
export declare function getCurrentWatcher(): ReactiveEffect<any> | undefined;
|
|
737
|
+
/**
|
|
738
|
+
* Registers a cleanup callback on the current active effect. This
|
|
739
|
+
* registered cleanup callback will be invoked right before the
|
|
740
|
+
* associated effect re-runs.
|
|
741
|
+
*
|
|
742
|
+
* @param cleanupFn - The callback function to attach to the effect's cleanup.
|
|
743
|
+
*/
|
|
744
|
+
export declare function onWatcherCleanup(cleanupFn: () => void, failSilently?: boolean, owner?: ReactiveEffect | undefined): void;
|
|
745
|
+
export declare function watch(source: WatchSource | WatchSource[] | WatchEffect | object, cb?: WatchCallback | null, options?: WatchOptions): WatchHandle;
|
|
746
|
+
export declare function traverse(value: unknown, depth?: number, seen?: Set<unknown>): unknown;
|
|
747
|
+
|