diff --git a/packages/reactivity/README.md b/packages/reactivity/README.md index eec656ac..d633eb6f 100644 --- a/packages/reactivity/README.md +++ b/packages/reactivity/README.md @@ -1,4 +1,4 @@ -# @vue/observer +# @vue/reactivity ## Usage Note @@ -9,10 +9,9 @@ This package is inlined into Global & Browser ESM builds of user-facing renderer 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`. diff --git a/packages/reactivity/__tests__/collections/Map.spec.ts b/packages/reactivity/__tests__/collections/Map.spec.ts index 14558270..bb5f4f6b 100644 --- a/packages/reactivity/__tests__/collections/Map.spec.ts +++ b/packages/reactivity/__tests__/collections/Map.spec.ts @@ -1,6 +1,6 @@ import { reactive, effect, toRaw, isReactive } from '../../src' -describe('observer/collections', () => { +describe('reactivity/collections', () => { describe('Map', () => { test('instanceof', () => { const original = new Map() diff --git a/packages/reactivity/__tests__/collections/Set.spec.ts b/packages/reactivity/__tests__/collections/Set.spec.ts index 1fc4bfda..3efa1825 100644 --- a/packages/reactivity/__tests__/collections/Set.spec.ts +++ b/packages/reactivity/__tests__/collections/Set.spec.ts @@ -1,6 +1,6 @@ import { reactive, effect, isReactive, toRaw } from '../../src' -describe('observer/collections', () => { +describe('reactivity/collections', () => { describe('Set', () => { it('instanceof', () => { const original = new Set() diff --git a/packages/reactivity/__tests__/collections/WeakMap.spec.ts b/packages/reactivity/__tests__/collections/WeakMap.spec.ts index 0ad7b93a..ddf7db59 100644 --- a/packages/reactivity/__tests__/collections/WeakMap.spec.ts +++ b/packages/reactivity/__tests__/collections/WeakMap.spec.ts @@ -1,6 +1,6 @@ import { reactive, effect, toRaw, isReactive } from '../../src' -describe('observer/collections', () => { +describe('reactivity/collections', () => { describe('WeakMap', () => { test('instanceof', () => { const original = new WeakMap() diff --git a/packages/reactivity/__tests__/collections/WeakSet.spec.ts b/packages/reactivity/__tests__/collections/WeakSet.spec.ts index e26d4029..3dc2cc83 100644 --- a/packages/reactivity/__tests__/collections/WeakSet.spec.ts +++ b/packages/reactivity/__tests__/collections/WeakSet.spec.ts @@ -1,6 +1,6 @@ import { reactive, isReactive, effect, toRaw } from '../../src' -describe('observer/collections', () => { +describe('reactivity/collections', () => { describe('WeakSet', () => { it('instanceof', () => { const original = new Set() diff --git a/packages/reactivity/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts index abde4e08..585f7abb 100644 --- a/packages/reactivity/__tests__/computed.spec.ts +++ b/packages/reactivity/__tests__/computed.spec.ts @@ -1,6 +1,6 @@ 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) diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts index a99e9a40..650eda9c 100644 --- a/packages/reactivity/__tests__/effect.spec.ts +++ b/packages/reactivity/__tests__/effect.spec.ts @@ -9,7 +9,7 @@ import { } 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) @@ -269,7 +269,7 @@ describe('observer/effect', () => { 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) @@ -279,7 +279,7 @@ describe('observer/effect', () => { 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) @@ -437,7 +437,7 @@ describe('observer/effect', () => { 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] diff --git a/packages/reactivity/__tests__/immutableState.spec.ts b/packages/reactivity/__tests__/immutable.spec.ts similarity index 97% rename from packages/reactivity/__tests__/immutableState.spec.ts rename to packages/reactivity/__tests__/immutable.spec.ts index e30d027a..83d4de75 100644 --- a/packages/reactivity/__tests__/immutableState.spec.ts +++ b/packages/reactivity/__tests__/immutable.spec.ts @@ -11,7 +11,7 @@ import { effect } from '../src' -describe('observer/immutable', () => { +describe('reactivity/immutable', () => { let warn: any beforeEach(() => { @@ -341,16 +341,16 @@ describe('observer/immutable', () => { }) }) - 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 diff --git a/packages/reactivity/__tests__/reactive.spec.ts b/packages/reactivity/__tests__/reactive.spec.ts index 0fe68e73..8888aaed 100644 --- a/packages/reactivity/__tests__/reactive.spec.ts +++ b/packages/reactivity/__tests__/reactive.spec.ts @@ -1,6 +1,6 @@ import { reactive, isReactive, toRaw, markNonReactive } from '../src/reactive' -describe('observer/observable', () => { +describe('reactivity/reactive', () => { test('Object', () => { const original = { foo: 1 } const observed = reactive(original) @@ -30,7 +30,7 @@ describe('observer/observable', () => { 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() @@ -39,7 +39,7 @@ describe('observer/observable', () => { expect(clone[0]).toBe(observed[0]) }) - test('nested observables', () => { + test('nested reactives', () => { const original = { nested: { foo: 1 @@ -70,9 +70,9 @@ describe('observer/observable', () => { 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] @@ -80,11 +80,11 @@ describe('observer/observable', () => { 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 @@ -123,14 +123,15 @@ describe('observer/observable', () => { 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)) @@ -144,10 +145,8 @@ describe('observer/observable', () => { 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) diff --git a/packages/reactivity/__tests__/ref.spec.ts b/packages/reactivity/__tests__/ref.spec.ts index e5cff502..2d26c933 100644 --- a/packages/reactivity/__tests__/ref.spec.ts +++ b/packages/reactivity/__tests__/ref.spec.ts @@ -1,6 +1,6 @@ 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) diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts index e09882bb..c88ac28b 100644 --- a/packages/reactivity/src/reactive.ts +++ b/packages/reactivity/src/reactive.ts @@ -51,7 +51,7 @@ export const reactive = ((target: unknown): any => { if (immutableValues.has(target)) { return immutable(target) } - return createObservable( + return createReactiveObject( target, rawToObserved, observedToRaw, @@ -66,7 +66,7 @@ export const immutable = ((target: unknown): any => { if (observedToRaw.has(target)) { target = observedToRaw.get(target) } - return createObservable( + return createReactiveObject( target, rawToImmutable, immutableToRaw, @@ -75,7 +75,7 @@ export const immutable = ((target: unknown): any => { ) }) as ObservableFactory -function createObservable( +function createReactiveObject( target: any, toProxy: WeakMap, toRaw: WeakMap, @@ -84,7 +84,7 @@ function createObservable( ) { if (!isObject(target)) { if (__DEV__) { - console.warn(`value is not observable: ${String(target)}`) + console.warn(`value cannot be made reactive: ${String(target)}`) } return target } diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json index 81356f1c..14d2cb5c 100644 --- a/packages/runtime-core/package.json +++ b/packages/runtime-core/package.json @@ -20,6 +20,6 @@ }, "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" } } diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 117f4b47..25c2f6b7 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -242,7 +242,7 @@ export function setupStatefulComponent(instance: ComponentInstance) { } 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 } diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts index e687f1da..019999ff 100644 --- a/packages/runtime-dom/src/index.ts +++ b/packages/runtime-dom/src/index.ts @@ -8,5 +8,5 @@ export const render = createRenderer({ }) 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'