vue-reactivity / watch Goto Github PK
View Code? Open in Web Editor NEWThe missing `watch` for @vue/reactivity
License: MIT License
watch's People
Contributors
Stargazers
Watchers
watch's Issues
Test cases to add. Mutating a reactive parent.
Just added these test cases for when mutating a reactive parent. I ran into the second issue realising the ref which I created had been overwritten. Don't know if this warning should be added to the docs which "watchers to refs that have been overwritten at the parent level will not fire".
test('should work with mutating parent', (assert) => {
let state = reactive({
settings: {
blocking: {
isEnabled: false,
isCosmetic: false,
whitelist: []
}
}
})
let triggered = 0
const stop = watch(() => {
return state.settings.blocking
}, () => {
triggered += 1
})
state.settings = {
blocking: {
isEnabled: true,
isCosmetic: true,
whitelist: []
}
}
assert.is(triggered, 1)
stop()
})
test('should not trigger when mutating parent because watching a ref that has been destroyed by the parent mutation.', (assert) => {
let state = reactive({
settings: {
blocking: {
isEnabled: false,
isCosmetic: false,
whitelist: []
}
}
})
let triggered = 0
const refBlocking = ref(state.settings.blocking)
const stop = watch(refBlocking, () => {
triggered += 1
})
state.settings = {
blocking: {
isEnabled: true,
isCosmetic: true,
whitelist: []
}
}
assert.is(triggered, 0)
stop()
})watching a reactive obj inside a vue app and outside vue
hi! fantastic library 👏
i wasn't exactly sure where to pose this question, but i thought here might be ok-
i've made a lib that uses @vue/reactivity to create a reactive() obj for global state management. internally i use this library/@vue-reactivity/watch's watch() to watch for changes and that works fine. but when importing my lib's global state into a vue project, i wasnt able to use vue's watch() function or the single-file-component's watch block to check for changes.
however, if i import this lib @vue-reactivity/watch into the frontend and watch the reactive global state obj with that instance of the watch() function it works as expected, but this solve seems redundant as vue already carries this watch function with it and i would love to avoid requiring other devs using my lib to do this work around too. is there some way to resolve this?
watchEffect usage and test fails
Hi,
I tried to use watchEffect in a node project and got the same error when I tried to execute the tests on this project:
...
should work with watchEffect
test/watch.spec.ts:65
64: t.is(sync, 0)
65: counter.value += 1
66: t.is(sync, 1)
Error thrown in test:
TypeError {
message: 'fn is not a function',
}
› ReactiveEffect.invoke [as scheduler] (src/index.ts:34:76)
› triggerEffects (node_modules/@vue/reactivity/dist/reactivity.cjs.js:354:24)
› triggerRefValue (node_modules/@vue/reactivity/dist/reactivity.cjs.js:951:13)
› RefImpl.set value [as value] (node_modules/@vue/reactivity/dist/reactivity.cjs.js:992:13)
› test/watch.spec.ts:65:11
...
I'm not sure why and therefore I don't know how to fix this, sorry.. Do you have an idea of whats going wrong?
Thank you in advance!
Watching a computed property depending on a reactive array
I wrote this test, which runs when removing the watcher, but fails when it's present.
import { computed, Ref, ref } from '@vue/reactivity'
import { watch } from '@vue-reactivity/watch'
import { fn } from 'jest-mock'
import { any } from 'jest-mock-extended'
it('should watch inside an array ref when an item is removed', () => {
const rowsData: { p1: Ref<number>, p2: Ref<number>, p3: Ref<number> }[] = []
for (let i = 0; i < 5; i++) {
const p1 = ref(1)
const p2 = ref(2)
const p3 = ref(3)
rowsData.push({ p1, p2, p3 })
}
const rows = ref(rowsData)
const c = computed(() => {
let sum = 0
for (const row of rows.value) {
sum += row.p1
sum += row.p2
sum += row.p3
}
return sum
})
const watchFunction = fn()
watch(c, watchFunction) // When removing this line, the test is OK.
expect(c.value).toBe(30)
rows.value.splice(1, 1)
expect(c.value).toBe(24)
expect(watchFunction).toBeCalledWith(24, 30, any()) // When removing this line, the test is OK.
})Cannot read properties of undefined (reading 'p1')
TypeError: Cannot read properties of undefined (reading 'p1')
at ReactiveEffect.fn (/home/toilal/projects/carbon-saver/platform.carbon-saver/packages/computation-core.carbon-saver/__tests__/reactivity.spec.ts:20:18)
at ReactiveEffect.run (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue/reactivity/dist/reactivity.cjs.js:189:25)
at ComputedRefImpl.get value [as value] (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1136:39)
at ReactiveEffect.getter [as fn] (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue-reactivity/watch/dist/index.js:83:27)
at ReactiveEffect.run (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue/reactivity/dist/reactivity.cjs.js:189:25)
at job (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue-reactivity/watch/dist/index.js:129:31)
at ReactiveEffect.scheduler (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue-reactivity/watch/dist/index.js:150:7)
at triggerEffect (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue/reactivity/dist/reactivity.cjs.js:393:20)
at triggerEffects (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue/reactivity/dist/reactivity.cjs.js:383:13)
at triggerRefValue (/home/toilal/projects/carbon-saver/platform.carbon-saver/node_modules/@vue/reactivity/dist/reactivity.cjs.js:995:13)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.