-# @vue/observer
+# @vue/reactivity
## Usage Note
The implementation of this module is inspired by the following prior art in the JavaScript ecosystem:
- [Meteor Tracker](https://docs.meteor.com/api/tracker.html)
-- [nx-js/observer-util](https://github.com/nx-js/observer-util)
+- [nx-js/reactivity-util](https://github.com/nx-js/reactivity-util)
- [salesforce/observable-membrane](https://github.com/salesforce/observable-membrane)
-
## Caveats
- Built-in objects are not observed except for `Map`, `WeakMap`, `Set` and `WeakSet`.
import { reactive, effect, toRaw, isReactive } from '../../src'
-describe('observer/collections', () => {
+describe('reactivity/collections', () => {
describe('Map', () => {
test('instanceof', () => {
const original = new Map()
import { reactive, effect, isReactive, toRaw } from '../../src'
-describe('observer/collections', () => {
+describe('reactivity/collections', () => {
describe('Set', () => {
it('instanceof', () => {
const original = new Set()
import { reactive, effect, toRaw, isReactive } from '../../src'
-describe('observer/collections', () => {
+describe('reactivity/collections', () => {
describe('WeakMap', () => {
test('instanceof', () => {
const original = new WeakMap()
import { reactive, isReactive, effect, toRaw } from '../../src'
-describe('observer/collections', () => {
+describe('reactivity/collections', () => {
describe('WeakSet', () => {
it('instanceof', () => {
const original = new Set()
import { computed, reactive, effect, stop } from '../src'
-describe('observer/computed', () => {
+describe('reactivity/computed', () => {
it('should return updated value', () => {
const value: any = reactive({})
const cValue = computed(() => value.foo)
} from '../src/index'
import { ITERATE_KEY } from '../src/effect'
-describe('observer/effect', () => {
+describe('reactivity/effect', () => {
it('should run the passed function once (wrapped by a effect)', () => {
const fnSpy = jest.fn(() => {})
effect(fnSpy)
it('should not observe raw mutations', () => {
let dummy
- const obj: any = reactive()
+ const obj: any = reactive({})
effect(() => (dummy = toRaw(obj).prop))
expect(dummy).toBe(undefined)
it('should not be triggered by raw mutations', () => {
let dummy
- const obj: any = reactive()
+ const obj: any = reactive({})
effect(() => (dummy = obj.prop))
expect(dummy).toBe(undefined)
it('should not run multiple times for a single mutation', () => {
let dummy
- const obj: any = reactive()
+ const obj: any = reactive({})
const fnSpy = jest.fn(() => {
for (const key in obj) {
dummy = obj[key]
effect
} from '../src'
-describe('observer/immutable', () => {
+describe('reactivity/immutable', () => {
let warn: any
beforeEach(() => {
})
})
- test('calling observable on an immutable should return immutable', () => {
- const a = immutable()
+ test('calling reactive on an immutable should return immutable', () => {
+ const a = immutable({})
const b = reactive(a)
expect(isImmutable(b)).toBe(true)
// should point to same original
expect(toRaw(a)).toBe(toRaw(b))
})
- test('calling immutable on an observable should return immutable', () => {
- const a = reactive()
+ test('calling immutable on a reactive object should return immutable', () => {
+ const a = reactive({})
const b = immutable(a)
expect(isImmutable(b)).toBe(true)
// should point to same original
import { reactive, isReactive, toRaw, markNonReactive } from '../src/reactive'
-describe('observer/observable', () => {
+describe('reactivity/reactive', () => {
test('Object', () => {
const original = { foo: 1 }
const observed = reactive(original)
expect(Object.keys(observed)).toEqual(['0'])
})
- test('cloned observable Array should point to observed values', () => {
+ test('cloned reactive Array should point to observed values', () => {
const original = [{ foo: 1 }]
const observed = reactive(original)
const clone = observed.slice()
expect(clone[0]).toBe(observed[0])
})
- test('nested observables', () => {
+ test('nested reactives', () => {
const original = {
nested: {
foo: 1
const observed = reactive(original)
// set
const value = { baz: 3 }
- const observableValue = reactive(value)
+ const reactiveValue = reactive(value)
observed[0] = value
- expect(observed[0]).toBe(observableValue)
+ expect(observed[0]).toBe(reactiveValue)
expect(original[0]).toBe(value)
// delete
delete observed[0]
expect(original[0]).toBeUndefined()
// mutating methods
observed.push(value)
- expect(observed[2]).toBe(observableValue)
+ expect(observed[2]).toBe(reactiveValue)
expect(original[2]).toBe(value)
})
- test('setting a property with an unobserved value should wrap with observable', () => {
+ test('setting a property with an unobserved value should wrap with reactive', () => {
const observed: any = reactive({})
const raw = {}
observed.foo = raw
expect(toRaw(original)).toBe(original)
})
- test('unobservable values', () => {
+ test('non-observable values', () => {
const warn = jest.spyOn(console, 'warn')
let lastMsg: string
warn.mockImplementation(msg => {
lastMsg = msg
})
- const getMsg = (value: any) => `value is not observable: ${String(value)}`
+ const getMsg = (value: any) =>
+ `value cannot be made reactive: ${String(value)}`
const assertValue = (value: any) => {
reactive(value)
expect(lastMsg).toMatch(getMsg(value))
assertValue(false)
// null
assertValue(null)
- // undefined should work because it returns empty object observable
- lastMsg = ''
- reactive(undefined)
- expect(lastMsg).toBe('')
+ // undefined
+ assertValue(undefined)
// symbol
const s = Symbol()
assertValue(s)
import { ref, effect, reactive } from '../src/index'
-describe('observer/value', () => {
+describe('reactivity/value', () => {
it('should hold a value', () => {
const a = ref(1)
expect(a.value).toBe(1)
if (immutableValues.has(target)) {
return immutable(target)
}
- return createObservable(
+ return createReactiveObject(
target,
rawToObserved,
observedToRaw,
if (observedToRaw.has(target)) {
target = observedToRaw.get(target)
}
- return createObservable(
+ return createReactiveObject(
target,
rawToImmutable,
immutableToRaw,
)
}) as ObservableFactory
-function createObservable(
+function createReactiveObject(
target: any,
toProxy: WeakMap<any, any>,
toRaw: WeakMap<any, any>,
) {
if (!isObject(target)) {
if (__DEV__) {
- console.warn(`value is not observable: ${String(target)}`)
+ console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
},
"homepage": "https://github.com/vuejs/vue/tree/dev/packages/runtime-core#readme",
"dependencies": {
- "@vue/observer": "3.0.0-alpha.1"
+ "@vue/reactivity": "3.0.0-alpha.1"
}
}
} else {
// setup returned bindings.
// assuming a render function compiled from template is present.
- instance.data = reactive(setupResult)
+ instance.data = reactive(setupResult || {})
if (__DEV__ && !Component.render) {
// TODO warn missing render fn
}
}) as (vnode: VNode | null, container: HTMLElement) => VNode
// re-export everything from core
-// h, Component, observer API, nextTick, flags & types
+// h, Component, reactivity API, nextTick, flags & types
export * from '@vue/runtime-core'
projects / thirdparty / vuejs / core.git / commitdiff
