From 471899af8b71a3814475915518163fd29e90814b Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 11 Jun 2019 23:50:28 +0800 Subject: [PATCH] refactor: rename reactivity package name and APIs --- packages/observer/index.js | 7 - packages/{observer => reactivity}/.npmignore | 0 packages/{observer => reactivity}/README.md | 0 .../__tests__/collections/Map.spec.ts | 64 +++---- .../__tests__/collections/Set.spec.ts | 82 ++++----- .../__tests__/collections/WeakMap.spec.ts | 30 ++-- .../__tests__/collections/WeakSet.spec.ts | 24 +-- .../__tests__/computed.spec.ts | 16 +- .../__tests__/effect.spec.ts | 98 +++++------ .../__tests__/immutableState.spec.ts} | 164 +++++++++--------- .../__tests__/state.spec.ts} | 72 ++++---- .../__tests__/value.spec.ts | 4 +- packages/reactivity/index.js | 7 + .../{observer => reactivity}/package.json | 10 +- .../src/baseHandlers.ts | 10 +- .../src/collectionHandlers.ts | 36 ++-- .../{observer => reactivity}/src/computed.ts | 0 .../{observer => reactivity}/src/effect.ts | 2 +- .../{observer => reactivity}/src/index.ts | 12 +- packages/{observer => reactivity}/src/lock.ts | 0 .../src/operations.ts | 0 .../{observer => reactivity}/src/state.ts | 0 .../{observer => reactivity}/src/value.ts | 4 +- .../__tests__/createComponent.spec.ts | 2 +- packages/runtime-core/src/apiState.ts | 14 +- packages/runtime-core/src/apiWatch.ts | 2 +- packages/runtime-core/src/component.ts | 10 +- packages/runtime-core/src/componentProps.ts | 10 +- packages/runtime-core/src/createRenderer.ts | 2 +- packages/runtime-core/src/errorHandling.ts | 0 tsconfig.json | 2 +- 31 files changed, 342 insertions(+), 342 deletions(-) delete mode 100644 packages/observer/index.js rename packages/{observer => reactivity}/.npmignore (100%) rename packages/{observer => reactivity}/README.md (100%) rename packages/{observer => reactivity}/__tests__/collections/Map.spec.ts (82%) rename packages/{observer => reactivity}/__tests__/collections/Set.spec.ts (80%) rename packages/{observer => reactivity}/__tests__/collections/WeakMap.spec.ts (77%) rename packages/{observer => reactivity}/__tests__/collections/WeakSet.spec.ts (79%) rename packages/{observer => reactivity}/__tests__/computed.spec.ts (89%) rename packages/{observer => reactivity}/__tests__/effect.spec.ts (88%) rename packages/{observer/__tests__/immutable.spec.ts => reactivity/__tests__/immutableState.spec.ts} (68%) rename packages/{observer/__tests__/observable.spec.ts => reactivity/__tests__/state.spec.ts} (69%) rename packages/{observer => reactivity}/__tests__/value.spec.ts (93%) create mode 100644 packages/reactivity/index.js rename packages/{observer => reactivity}/package.json (65%) rename packages/{observer => reactivity}/src/baseHandlers.ts (95%) rename packages/{observer => reactivity}/src/collectionHandlers.ts (91%) rename packages/{observer => reactivity}/src/computed.ts (100%) rename packages/{observer => reactivity}/src/effect.ts (99%) rename packages/{observer => reactivity}/src/index.ts (92%) rename packages/{observer => reactivity}/src/lock.ts (100%) rename packages/{observer => reactivity}/src/operations.ts (100%) rename packages/{observer => reactivity}/src/state.ts (100%) rename packages/{observer => reactivity}/src/value.ts (96%) create mode 100644 packages/runtime-core/src/errorHandling.ts diff --git a/packages/observer/index.js b/packages/observer/index.js deleted file mode 100644 index 50a792c2..00000000 --- a/packages/observer/index.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict' - -if (process.env.NODE_ENV === 'production') { - module.exports = require('./dist/observer.cjs.prod.js') -} else { - module.exports = require('./dist/observer.cjs.js') -} diff --git a/packages/observer/.npmignore b/packages/reactivity/.npmignore similarity index 100% rename from packages/observer/.npmignore rename to packages/reactivity/.npmignore diff --git a/packages/observer/README.md b/packages/reactivity/README.md similarity index 100% rename from packages/observer/README.md rename to packages/reactivity/README.md diff --git a/packages/observer/__tests__/collections/Map.spec.ts b/packages/reactivity/__tests__/collections/Map.spec.ts similarity index 82% rename from packages/observer/__tests__/collections/Map.spec.ts rename to packages/reactivity/__tests__/collections/Map.spec.ts index 6ba047b8..090e40e6 100644 --- a/packages/observer/__tests__/collections/Map.spec.ts +++ b/packages/reactivity/__tests__/collections/Map.spec.ts @@ -1,18 +1,18 @@ -import { observable, effect, unwrap, isObservable } from '../../src' +import { state, effect, toRaw, isState } from '../../src' describe('observer/collections', () => { describe('Map', () => { test('instanceof', () => { const original = new Map() - const observed = observable(original) - expect(isObservable(observed)).toBe(true) + const observed = state(original) + expect(isState(observed)).toBe(true) expect(original instanceof Map).toBe(true) expect(observed instanceof Map).toBe(true) }) it('should observe mutations', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => { dummy = map.get('key') }) @@ -28,7 +28,7 @@ describe('observer/collections', () => { it('should observe size mutations', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => (dummy = map.size)) expect(dummy).toBe(0) @@ -43,7 +43,7 @@ describe('observer/collections', () => { it('should observe for of iteration', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => { dummy = 0 // eslint-disable-next-line no-unused-vars @@ -66,7 +66,7 @@ describe('observer/collections', () => { it('should observe forEach iteration', () => { let dummy: any - const map = observable(new Map()) + const map = state(new Map()) effect(() => { dummy = 0 map.forEach((num: any) => (dummy += num)) @@ -85,7 +85,7 @@ describe('observer/collections', () => { it('should observe keys iteration', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => { dummy = 0 for (let key of map.keys()) { @@ -106,7 +106,7 @@ describe('observer/collections', () => { it('should observe values iteration', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => { dummy = 0 for (let num of map.values()) { @@ -127,7 +127,7 @@ describe('observer/collections', () => { it('should observe entries iteration', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => { dummy = 0 // eslint-disable-next-line no-unused-vars @@ -150,7 +150,7 @@ describe('observer/collections', () => { it('should be triggered by clearing', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) effect(() => (dummy = map.get('key'))) expect(dummy).toBe(undefined) @@ -162,7 +162,7 @@ describe('observer/collections', () => { it('should not observe custom property mutations', () => { let dummy - const map: any = observable(new Map()) + const map: any = state(new Map()) effect(() => (dummy = map.customProp)) expect(dummy).toBe(undefined) @@ -172,7 +172,7 @@ describe('observer/collections', () => { it('should not observe non value changing mutations', () => { let dummy - const map = observable(new Map()) + const map = state(new Map()) const mapSpy = jest.fn(() => (dummy = map.get('key'))) effect(mapSpy) @@ -197,8 +197,8 @@ describe('observer/collections', () => { it('should not observe raw data', () => { let dummy - const map = observable(new Map()) - effect(() => (dummy = unwrap(map).get('key'))) + const map = state(new Map()) + effect(() => (dummy = toRaw(map).get('key'))) expect(dummy).toBe(undefined) map.set('key', 'Hello') @@ -209,24 +209,24 @@ describe('observer/collections', () => { it('should not pollute original Map with Proxies', () => { const map = new Map() - const observed = observable(map) - const value = observable({}) + const observed = state(map) + const value = state({}) observed.set('key', value) expect(map.get('key')).not.toBe(value) - expect(map.get('key')).toBe(unwrap(value)) + expect(map.get('key')).toBe(toRaw(value)) }) it('should return observable versions of contained values', () => { - const observed = observable(new Map()) + const observed = state(new Map()) const value = {} observed.set('key', value) const wrapped = observed.get('key') - expect(isObservable(wrapped)).toBe(true) - expect(unwrap(wrapped)).toBe(value) + expect(isState(wrapped)).toBe(true) + expect(toRaw(wrapped)).toBe(value) }) it('should observed nested data', () => { - const observed = observable(new Map()) + const observed = state(new Map()) observed.set('key', { a: 1 }) let dummy effect(() => { @@ -237,12 +237,12 @@ describe('observer/collections', () => { }) it('should observe nested values in iterations (forEach)', () => { - const map = observable(new Map([[1, { foo: 1 }]])) + const map = state(new Map([[1, { foo: 1 }]])) let dummy: any effect(() => { dummy = 0 map.forEach(value => { - expect(isObservable(value)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo }) }) @@ -252,12 +252,12 @@ describe('observer/collections', () => { }) it('should observe nested values in iterations (values)', () => { - const map = observable(new Map([[1, { foo: 1 }]])) + const map = state(new Map([[1, { foo: 1 }]])) let dummy: any effect(() => { dummy = 0 for (const value of map.values()) { - expect(isObservable(value)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo } }) @@ -268,14 +268,14 @@ describe('observer/collections', () => { it('should observe nested values in iterations (entries)', () => { const key = {} - const map = observable(new Map([[key, { foo: 1 }]])) + const map = state(new Map([[key, { foo: 1 }]])) let dummy: any effect(() => { dummy = 0 for (const [key, value] of map.entries()) { key - expect(isObservable(key)).toBe(true) - expect(isObservable(value)).toBe(true) + expect(isState(key)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo } }) @@ -286,14 +286,14 @@ describe('observer/collections', () => { it('should observe nested values in iterations (for...of)', () => { const key = {} - const map = observable(new Map([[key, { foo: 1 }]])) + const map = state(new Map([[key, { foo: 1 }]])) let dummy: any effect(() => { dummy = 0 for (const [key, value] of map) { key - expect(isObservable(key)).toBe(true) - expect(isObservable(value)).toBe(true) + expect(isState(key)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo } }) diff --git a/packages/observer/__tests__/collections/Set.spec.ts b/packages/reactivity/__tests__/collections/Set.spec.ts similarity index 80% rename from packages/observer/__tests__/collections/Set.spec.ts rename to packages/reactivity/__tests__/collections/Set.spec.ts index d2d999c2..9abc56a2 100644 --- a/packages/observer/__tests__/collections/Set.spec.ts +++ b/packages/reactivity/__tests__/collections/Set.spec.ts @@ -1,18 +1,18 @@ -import { observable, effect, isObservable, unwrap } from '../../src' +import { state, effect, isState, toRaw } from '../../src' describe('observer/collections', () => { describe('Set', () => { it('instanceof', () => { const original = new Set() - const observed = observable(original) - expect(isObservable(observed)).toBe(true) + const observed = state(original) + expect(isState(observed)).toBe(true) expect(original instanceof Set).toBe(true) expect(observed instanceof Set).toBe(true) }) it('should observe mutations', () => { let dummy - const set = observable(new Set()) + const set = state(new Set()) effect(() => (dummy = set.has('value'))) expect(dummy).toBe(false) @@ -24,7 +24,7 @@ describe('observer/collections', () => { it('should observe for of iteration', () => { let dummy - const set = observable(new Set()) + const set = state(new Set() as Set) effect(() => { dummy = 0 for (let num of set) { @@ -44,7 +44,7 @@ describe('observer/collections', () => { it('should observe forEach iteration', () => { let dummy: any - const set = observable(new Set()) + const set = state(new Set()) effect(() => { dummy = 0 set.forEach(num => (dummy += num)) @@ -62,7 +62,7 @@ describe('observer/collections', () => { it('should observe values iteration', () => { let dummy - const set = observable(new Set()) + const set = state(new Set() as Set) effect(() => { dummy = 0 for (let num of set.values()) { @@ -82,7 +82,7 @@ describe('observer/collections', () => { it('should observe keys iteration', () => { let dummy - const set = observable(new Set()) + const set = state(new Set() as Set) effect(() => { dummy = 0 for (let num of set.keys()) { @@ -102,7 +102,7 @@ describe('observer/collections', () => { it('should observe entries iteration', () => { let dummy - const set = observable(new Set()) + const set = state(new Set() as Set) effect(() => { dummy = 0 // eslint-disable-next-line no-unused-vars @@ -124,7 +124,7 @@ describe('observer/collections', () => { it('should be triggered by clearing', () => { let dummy - const set = observable(new Set()) + const set = state(new Set()) effect(() => (dummy = set.has('key'))) expect(dummy).toBe(false) @@ -136,7 +136,7 @@ describe('observer/collections', () => { it('should not observe custom property mutations', () => { let dummy - const set: any = observable(new Set()) + const set: any = state(new Set()) effect(() => (dummy = set.customProp)) expect(dummy).toBe(undefined) @@ -146,7 +146,7 @@ describe('observer/collections', () => { it('should observe size mutations', () => { let dummy - const set = observable(new Set()) + const set = state(new Set()) effect(() => (dummy = set.size)) expect(dummy).toBe(0) @@ -161,7 +161,7 @@ describe('observer/collections', () => { it('should not observe non value changing mutations', () => { let dummy - const set = observable(new Set()) + const set = state(new Set()) const setSpy = jest.fn(() => (dummy = set.has('value'))) effect(setSpy) @@ -186,8 +186,8 @@ describe('observer/collections', () => { it('should not observe raw data', () => { let dummy - const set = observable(new Set()) - effect(() => (dummy = unwrap(set).has('value'))) + const set = state(new Set()) + effect(() => (dummy = toRaw(set).has('value'))) expect(dummy).toBe(false) set.add('value') @@ -196,22 +196,22 @@ describe('observer/collections', () => { it('should not observe raw iterations', () => { let dummy = 0 - const set = observable(new Set()) + const set = state(new Set() as Set) effect(() => { dummy = 0 - for (let [num] of unwrap(set).entries()) { + for (let [num] of toRaw(set).entries()) { dummy += num } - for (let num of unwrap(set).keys()) { + for (let num of toRaw(set).keys()) { dummy += num } - for (let num of unwrap(set).values()) { + for (let num of toRaw(set).values()) { dummy += num } - unwrap(set).forEach(num => { + toRaw(set).forEach(num => { dummy += num }) - for (let num of unwrap(set)) { + for (let num of toRaw(set)) { dummy += num } }) @@ -226,23 +226,23 @@ describe('observer/collections', () => { it('should not be triggered by raw mutations', () => { let dummy - const set = observable(new Set()) + const set = state(new Set()) effect(() => (dummy = set.has('value'))) expect(dummy).toBe(false) - unwrap(set).add('value') + toRaw(set).add('value') expect(dummy).toBe(false) dummy = true - unwrap(set).delete('value') + toRaw(set).delete('value') expect(dummy).toBe(true) - unwrap(set).clear() + toRaw(set).clear() expect(dummy).toBe(true) }) it('should not observe raw size mutations', () => { let dummy - const set = observable(new Set()) - effect(() => (dummy = unwrap(set).size)) + const set = state(new Set()) + effect(() => (dummy = toRaw(set).size)) expect(dummy).toBe(0) set.add('value') @@ -251,18 +251,18 @@ describe('observer/collections', () => { it('should not be triggered by raw size mutations', () => { let dummy - const set = observable(new Set()) + const set = state(new Set()) effect(() => (dummy = set.size)) expect(dummy).toBe(0) - unwrap(set).add('value') + toRaw(set).add('value') expect(dummy).toBe(0) }) it('should support objects as key', () => { let dummy const key = {} - const set = observable(new Set()) + const set = state(new Set()) const setSpy = jest.fn(() => (dummy = set.has(key))) effect(setSpy) @@ -280,20 +280,20 @@ describe('observer/collections', () => { it('should not pollute original Set with Proxies', () => { const set = new Set() - const observed = observable(set) - const value = observable({}) + const observed = state(set) + const value = state({}) observed.add(value) expect(observed.has(value)).toBe(true) expect(set.has(value)).toBe(false) }) it('should observe nested values in iterations (forEach)', () => { - const set = observable(new Set([{ foo: 1 }])) + const set = state(new Set([{ foo: 1 }])) let dummy: any effect(() => { dummy = 0 set.forEach(value => { - expect(isObservable(value)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo }) }) @@ -305,12 +305,12 @@ describe('observer/collections', () => { }) it('should observe nested values in iterations (values)', () => { - const set = observable(new Set([{ foo: 1 }])) + const set = state(new Set([{ foo: 1 }])) let dummy: any effect(() => { dummy = 0 for (const value of set.values()) { - expect(isObservable(value)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo } }) @@ -322,13 +322,13 @@ describe('observer/collections', () => { }) it('should observe nested values in iterations (entries)', () => { - const set = observable(new Set([{ foo: 1 }])) + const set = state(new Set([{ foo: 1 }])) let dummy: any effect(() => { dummy = 0 for (const [key, value] of set.entries()) { - expect(isObservable(key)).toBe(true) - expect(isObservable(value)).toBe(true) + expect(isState(key)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo } }) @@ -340,12 +340,12 @@ describe('observer/collections', () => { }) it('should observe nested values in iterations (for...of)', () => { - const set = observable(new Set([{ foo: 1 }])) + const set = state(new Set([{ foo: 1 }])) let dummy: any effect(() => { dummy = 0 for (const value of set) { - expect(isObservable(value)).toBe(true) + expect(isState(value)).toBe(true) dummy += value.foo } }) diff --git a/packages/observer/__tests__/collections/WeakMap.spec.ts b/packages/reactivity/__tests__/collections/WeakMap.spec.ts similarity index 77% rename from packages/observer/__tests__/collections/WeakMap.spec.ts rename to packages/reactivity/__tests__/collections/WeakMap.spec.ts index ec6550dc..8bad5f42 100644 --- a/packages/observer/__tests__/collections/WeakMap.spec.ts +++ b/packages/reactivity/__tests__/collections/WeakMap.spec.ts @@ -1,11 +1,11 @@ -import { observable, effect, unwrap, isObservable } from '../../src' +import { state, effect, toRaw, isState } from '../../src' describe('observer/collections', () => { describe('WeakMap', () => { test('instanceof', () => { const original = new WeakMap() - const observed = observable(original) - expect(isObservable(observed)).toBe(true) + const observed = state(original) + expect(isState(observed)).toBe(true) expect(original instanceof WeakMap).toBe(true) expect(observed instanceof WeakMap).toBe(true) }) @@ -13,7 +13,7 @@ describe('observer/collections', () => { it('should observe mutations', () => { let dummy const key = {} - const map = observable(new WeakMap()) + const map = state(new WeakMap()) effect(() => { dummy = map.get(key) }) @@ -29,7 +29,7 @@ describe('observer/collections', () => { it('should not observe custom property mutations', () => { let dummy - const map: any = observable(new WeakMap()) + const map: any = state(new WeakMap()) effect(() => (dummy = map.customProp)) expect(dummy).toBe(undefined) @@ -40,7 +40,7 @@ describe('observer/collections', () => { it('should not observe non value changing mutations', () => { let dummy const key = {} - const map = observable(new WeakMap()) + const map = state(new WeakMap()) const mapSpy = jest.fn(() => (dummy = map.get(key))) effect(mapSpy) @@ -63,8 +63,8 @@ describe('observer/collections', () => { it('should not observe raw data', () => { let dummy const key = {} - const map = observable(new WeakMap()) - effect(() => (dummy = unwrap(map).get(key))) + const map = state(new WeakMap()) + effect(() => (dummy = toRaw(map).get(key))) expect(dummy).toBe(undefined) map.set(key, 'Hello') @@ -75,26 +75,26 @@ describe('observer/collections', () => { it('should not pollute original Map with Proxies', () => { const map = new WeakMap() - const observed = observable(map) + const observed = state(map) const key = {} - const value = observable({}) + const value = state({}) observed.set(key, value) expect(map.get(key)).not.toBe(value) - expect(map.get(key)).toBe(unwrap(value)) + expect(map.get(key)).toBe(toRaw(value)) }) it('should return observable versions of contained values', () => { - const observed = observable(new WeakMap()) + const observed = state(new WeakMap()) const key = {} const value = {} observed.set(key, value) const wrapped = observed.get(key) - expect(isObservable(wrapped)).toBe(true) - expect(unwrap(wrapped)).toBe(value) + expect(isState(wrapped)).toBe(true) + expect(toRaw(wrapped)).toBe(value) }) it('should observed nested data', () => { - const observed = observable(new Map()) + const observed = state(new Map()) const key = {} observed.set(key, { a: 1 }) let dummy diff --git a/packages/observer/__tests__/collections/WeakSet.spec.ts b/packages/reactivity/__tests__/collections/WeakSet.spec.ts similarity index 79% rename from packages/observer/__tests__/collections/WeakSet.spec.ts rename to packages/reactivity/__tests__/collections/WeakSet.spec.ts index 1ec2a464..45e27896 100644 --- a/packages/observer/__tests__/collections/WeakSet.spec.ts +++ b/packages/reactivity/__tests__/collections/WeakSet.spec.ts @@ -1,11 +1,11 @@ -import { observable, isObservable, effect, unwrap } from '../../src' +import { state, isState, effect, toRaw } from '../../src' describe('observer/collections', () => { describe('WeakSet', () => { it('instanceof', () => { const original = new Set() - const observed = observable(original) - expect(isObservable(observed)).toBe(true) + const observed = state(original) + expect(isState(observed)).toBe(true) expect(original instanceof Set).toBe(true) expect(observed instanceof Set).toBe(true) }) @@ -13,7 +13,7 @@ describe('observer/collections', () => { it('should observe mutations', () => { let dummy const value = {} - const set = observable(new WeakSet()) + const set = state(new WeakSet()) effect(() => (dummy = set.has(value))) expect(dummy).toBe(false) @@ -25,7 +25,7 @@ describe('observer/collections', () => { it('should not observe custom property mutations', () => { let dummy - const set: any = observable(new WeakSet()) + const set: any = state(new WeakSet()) effect(() => (dummy = set.customProp)) expect(dummy).toBe(undefined) @@ -36,7 +36,7 @@ describe('observer/collections', () => { it('should not observe non value changing mutations', () => { let dummy const value = {} - const set = observable(new WeakSet()) + const set = state(new WeakSet()) const setSpy = jest.fn(() => (dummy = set.has(value))) effect(setSpy) @@ -59,8 +59,8 @@ describe('observer/collections', () => { it('should not observe raw data', () => { const value = {} let dummy - const set = observable(new WeakSet()) - effect(() => (dummy = unwrap(set).has(value))) + const set = state(new WeakSet()) + effect(() => (dummy = toRaw(set).has(value))) expect(dummy).toBe(false) set.add(value) @@ -70,18 +70,18 @@ describe('observer/collections', () => { it('should not be triggered by raw mutations', () => { const value = {} let dummy - const set = observable(new WeakSet()) + const set = state(new WeakSet()) effect(() => (dummy = set.has(value))) expect(dummy).toBe(false) - unwrap(set).add(value) + toRaw(set).add(value) expect(dummy).toBe(false) }) it('should not pollute original Set with Proxies', () => { const set = new WeakSet() - const observed = observable(set) - const value = observable({}) + const observed = state(set) + const value = state({}) observed.add(value) expect(observed.has(value)).toBe(true) expect(set.has(value)).toBe(false) diff --git a/packages/observer/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts similarity index 89% rename from packages/observer/__tests__/computed.spec.ts rename to packages/reactivity/__tests__/computed.spec.ts index e9ef8d57..37955661 100644 --- a/packages/observer/__tests__/computed.spec.ts +++ b/packages/reactivity/__tests__/computed.spec.ts @@ -1,8 +1,8 @@ -import { computed, observable, effect, stop } from '../src' +import { computed, state, effect, stop } from '../src' describe('observer/computed', () => { it('should return updated value', () => { - const value: any = observable({}) + const value: any = state({}) const cValue = computed(() => value.foo) expect(cValue.value).toBe(undefined) value.foo = 1 @@ -10,7 +10,7 @@ describe('observer/computed', () => { }) it('should compute lazily', () => { - const value: any = observable({}) + const value: any = state({}) const getter = jest.fn(() => value.foo) const cValue = computed(getter) @@ -38,7 +38,7 @@ describe('observer/computed', () => { }) it('should trigger effect', () => { - const value: any = observable({}) + const value: any = state({}) const cValue = computed(() => value.foo) let dummy effect(() => { @@ -50,7 +50,7 @@ describe('observer/computed', () => { }) it('should work when chained', () => { - const value: any = observable({ foo: 0 }) + const value: any = state({ foo: 0 }) const c1 = computed(() => value.foo) const c2 = computed(() => c1.value + 1) expect(c2.value).toBe(1) @@ -61,7 +61,7 @@ describe('observer/computed', () => { }) it('should trigger effect when chained', () => { - const value: any = observable({ foo: 0 }) + const value: any = state({ foo: 0 }) const getter1 = jest.fn(() => value.foo) const getter2 = jest.fn(() => { return c1.value + 1 @@ -84,7 +84,7 @@ describe('observer/computed', () => { }) it('should trigger effect when chained (mixed invocations)', () => { - const value: any = observable({ foo: 0 }) + const value: any = state({ foo: 0 }) const getter1 = jest.fn(() => value.foo) const getter2 = jest.fn(() => { return c1.value + 1 @@ -108,7 +108,7 @@ describe('observer/computed', () => { }) it('should no longer update when stopped', () => { - const value: any = observable({}) + const value: any = state({}) const cValue = computed(() => value.foo) let dummy effect(() => { diff --git a/packages/observer/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts similarity index 88% rename from packages/observer/__tests__/effect.spec.ts rename to packages/reactivity/__tests__/effect.spec.ts index fcbc31fb..042900a7 100644 --- a/packages/observer/__tests__/effect.spec.ts +++ b/packages/reactivity/__tests__/effect.spec.ts @@ -1,8 +1,8 @@ import { - observable, + state, effect, stop, - unwrap, + toRaw, OperationTypes, DebuggerEvent, markNonReactive @@ -18,7 +18,7 @@ describe('observer/effect', () => { it('should observe basic properties', () => { let dummy - const counter = observable({ num: 0 }) + const counter = state({ num: 0 }) effect(() => (dummy = counter.num)) expect(dummy).toBe(0) @@ -28,7 +28,7 @@ describe('observer/effect', () => { it('should observe multiple properties', () => { let dummy - const counter = observable({ num1: 0, num2: 0 }) + const counter = state({ num1: 0, num2: 0 }) effect(() => (dummy = counter.num1 + counter.num1 + counter.num2)) expect(dummy).toBe(0) @@ -38,7 +38,7 @@ describe('observer/effect', () => { it('should handle multiple effects', () => { let dummy1, dummy2 - const counter = observable({ num: 0 }) + const counter = state({ num: 0 }) effect(() => (dummy1 = counter.num)) effect(() => (dummy2 = counter.num)) @@ -51,7 +51,7 @@ describe('observer/effect', () => { it('should observe nested properties', () => { let dummy - const counter = observable({ nested: { num: 0 } }) + const counter = state({ nested: { num: 0 } }) effect(() => (dummy = counter.nested.num)) expect(dummy).toBe(0) @@ -61,7 +61,7 @@ describe('observer/effect', () => { it('should observe delete operations', () => { let dummy - const obj = observable({ prop: 'value' }) + const obj = state({ prop: 'value' }) effect(() => (dummy = obj.prop)) expect(dummy).toBe('value') @@ -71,7 +71,7 @@ describe('observer/effect', () => { it('should observe has operations', () => { let dummy - const obj: any = observable({ prop: 'value' }) + const obj: any = state({ prop: 'value' }) effect(() => (dummy = 'prop' in obj)) expect(dummy).toBe(true) @@ -83,8 +83,8 @@ describe('observer/effect', () => { it('should observe properties on the prototype chain', () => { let dummy - const counter = observable({ num: 0 }) - const parentCounter = observable({ num: 2 }) + const counter = state({ num: 0 }) + const parentCounter = state({ num: 2 }) Object.setPrototypeOf(counter, parentCounter) effect(() => (dummy = counter.num)) @@ -99,8 +99,8 @@ describe('observer/effect', () => { it('should observe has operations on the prototype chain', () => { let dummy - const counter = observable({ num: 0 }) - const parentCounter = observable({ num: 2 }) + const counter = state({ num: 0 }) + const parentCounter = state({ num: 2 }) Object.setPrototypeOf(counter, parentCounter) effect(() => (dummy = 'num' in counter)) @@ -115,8 +115,8 @@ describe('observer/effect', () => { it('should observe inherited property accessors', () => { let dummy, parentDummy, hiddenValue: any - const obj: any = observable({}) - const parent = observable({ + const obj: any = state({}) + const parent = state({ set prop(value) { hiddenValue = value }, @@ -141,7 +141,7 @@ describe('observer/effect', () => { it('should observe function call chains', () => { let dummy - const counter = observable({ num: 0 }) + const counter = state({ num: 0 }) effect(() => (dummy = getNum())) function getNum() { @@ -155,7 +155,7 @@ describe('observer/effect', () => { it('should observe iteration', () => { let dummy - const list = observable(['Hello']) + const list = state(['Hello']) effect(() => (dummy = list.join(' '))) expect(dummy).toBe('Hello') @@ -167,7 +167,7 @@ describe('observer/effect', () => { it('should observe implicit array length changes', () => { let dummy - const list = observable(['Hello']) + const list = state(['Hello']) effect(() => (dummy = list.join(' '))) expect(dummy).toBe('Hello') @@ -179,7 +179,7 @@ describe('observer/effect', () => { it('should observe sparse array mutations', () => { let dummy - const list: any[] = observable([]) + const list: any[] = state([]) list[1] = 'World!' effect(() => (dummy = list.join(' '))) @@ -192,7 +192,7 @@ describe('observer/effect', () => { it('should observe enumeration', () => { let dummy = 0 - const numbers: any = observable({ num1: 3 }) + const numbers: any = state({ num1: 3 }) effect(() => { dummy = 0 for (let key in numbers) { @@ -210,7 +210,7 @@ describe('observer/effect', () => { it('should observe symbol keyed properties', () => { const key = Symbol('symbol keyed prop') let dummy, hasDummy - const obj = observable({ [key]: 'value' }) + const obj = state({ [key]: 'value' }) effect(() => (dummy = obj[key])) effect(() => (hasDummy = key in obj)) @@ -226,7 +226,7 @@ describe('observer/effect', () => { it('should not observe well-known symbol keyed properties', () => { const key = Symbol.isConcatSpreadable let dummy - const array: any = observable([]) + const array: any = state([]) effect(() => (dummy = array[key])) expect(array[key]).toBe(undefined) @@ -241,7 +241,7 @@ describe('observer/effect', () => { const newFunc = () => {} let dummy - const obj = observable({ func: oldFunc }) + const obj = state({ func: oldFunc }) effect(() => (dummy = obj.func)) expect(dummy).toBe(oldFunc) @@ -251,7 +251,7 @@ describe('observer/effect', () => { it('should not observe set operations without a value change', () => { let hasDummy, getDummy - const obj = observable({ prop: 'value' }) + const obj = state({ prop: 'value' }) const getSpy = jest.fn(() => (getDummy = obj.prop)) const hasSpy = jest.fn(() => (hasDummy = 'prop' in obj)) @@ -269,8 +269,8 @@ describe('observer/effect', () => { it('should not observe raw mutations', () => { let dummy - const obj: any = observable() - effect(() => (dummy = unwrap(obj).prop)) + const obj: any = state() + effect(() => (dummy = toRaw(obj).prop)) expect(dummy).toBe(undefined) obj.prop = 'value' @@ -279,18 +279,18 @@ describe('observer/effect', () => { it('should not be triggered by raw mutations', () => { let dummy - const obj: any = observable() + const obj: any = state() effect(() => (dummy = obj.prop)) expect(dummy).toBe(undefined) - unwrap(obj).prop = 'value' + toRaw(obj).prop = 'value' expect(dummy).toBe(undefined) }) it('should not be triggered by inherited raw setters', () => { let dummy, parentDummy, hiddenValue: any - const obj: any = observable({}) - const parent = observable({ + const obj: any = state({}) + const parent = state({ set prop(value) { hiddenValue = value }, @@ -304,13 +304,13 @@ describe('observer/effect', () => { expect(dummy).toBe(undefined) expect(parentDummy).toBe(undefined) - unwrap(obj).prop = 4 + toRaw(obj).prop = 4 expect(dummy).toBe(undefined) expect(parentDummy).toBe(undefined) }) it('should avoid implicit infinite recursive loops with itself', () => { - const counter = observable({ num: 0 }) + const counter = state({ num: 0 }) const counterSpy = jest.fn(() => counter.num++) effect(counterSpy) @@ -322,7 +322,7 @@ describe('observer/effect', () => { }) it('should allow explicitly recursive raw function loops', () => { - const counter = observable({ num: 0 }) + const counter = state({ num: 0 }) const numSpy = jest.fn(() => { counter.num++ if (counter.num < 10) { @@ -335,7 +335,7 @@ describe('observer/effect', () => { }) it('should avoid infinite loops with other effects', () => { - const nums = observable({ num1: 0, num2: 1 }) + const nums = state({ num1: 0, num2: 1 }) const spy1 = jest.fn(() => (nums.num1 = nums.num2)) const spy2 = jest.fn(() => (nums.num2 = nums.num1)) @@ -371,7 +371,7 @@ describe('observer/effect', () => { it('should discover new branches while running automatically', () => { let dummy - const obj = observable({ prop: 'value', run: false }) + const obj = state({ prop: 'value', run: false }) const conditionalSpy = jest.fn(() => { dummy = obj.run ? obj.prop : 'other' @@ -394,7 +394,7 @@ describe('observer/effect', () => { it('should discover new branches when running manually', () => { let dummy let run = false - const obj = observable({ prop: 'value' }) + const obj = state({ prop: 'value' }) const runner = effect(() => { dummy = run ? obj.prop : 'other' }) @@ -411,7 +411,7 @@ describe('observer/effect', () => { it('should not be triggered by mutating a property, which is used in an inactive branch', () => { let dummy - const obj = observable({ prop: 'value', run: true }) + const obj = state({ prop: 'value', run: true }) const conditionalSpy = jest.fn(() => { dummy = obj.run ? obj.prop : 'other' @@ -437,7 +437,7 @@ describe('observer/effect', () => { it('should not run multiple times for a single mutation', () => { let dummy - const obj: any = observable() + const obj: any = state() const fnSpy = jest.fn(() => { for (const key in obj) { dummy = obj[key] @@ -453,7 +453,7 @@ describe('observer/effect', () => { }) it('should allow nested effects', () => { - const nums = observable({ num1: 0, num2: 1, num3: 2 }) + const nums = state({ num1: 0, num2: 1, num3: 2 }) const dummy: any = {} const childSpy = jest.fn(() => (dummy.num1 = nums.num1)) @@ -495,7 +495,7 @@ describe('observer/effect', () => { this.count++ } } - const model = observable(new Model()) + const model = state(new Model()) let dummy effect(() => { dummy = model.count @@ -510,7 +510,7 @@ describe('observer/effect', () => { const scheduler = jest.fn(_runner => { runner = _runner }) - const obj = observable({ foo: 1 }) + const obj = state({ foo: 1 }) effect( () => { dummy = obj.foo @@ -536,7 +536,7 @@ describe('observer/effect', () => { const onTrack = jest.fn((e: DebuggerEvent) => { events.push(e) }) - const obj = observable({ foo: 1, bar: 2 }) + const obj = state({ foo: 1, bar: 2 }) const runner = effect( () => { dummy = obj.foo @@ -550,19 +550,19 @@ describe('observer/effect', () => { expect(events).toEqual([ { effect: runner, - target: unwrap(obj), + target: toRaw(obj), type: OperationTypes.GET, key: 'foo' }, { effect: runner, - target: unwrap(obj), + target: toRaw(obj), type: OperationTypes.HAS, key: 'bar' }, { effect: runner, - target: unwrap(obj), + target: toRaw(obj), type: OperationTypes.ITERATE, key: ITERATE_KEY } @@ -575,7 +575,7 @@ describe('observer/effect', () => { const onTrigger = jest.fn((e: DebuggerEvent) => { events.push(e) }) - const obj = observable({ foo: 1 }) + const obj = state({ foo: 1 }) const runner = effect( () => { dummy = obj.foo @@ -588,7 +588,7 @@ describe('observer/effect', () => { expect(onTrigger).toHaveBeenCalledTimes(1) expect(events[0]).toEqual({ effect: runner, - target: unwrap(obj), + target: toRaw(obj), type: OperationTypes.SET, key: 'foo', oldValue: 1, @@ -600,7 +600,7 @@ describe('observer/effect', () => { expect(onTrigger).toHaveBeenCalledTimes(2) expect(events[1]).toEqual({ effect: runner, - target: unwrap(obj), + target: toRaw(obj), type: OperationTypes.DELETE, key: 'foo', oldValue: 2 @@ -609,7 +609,7 @@ describe('observer/effect', () => { it('stop', () => { let dummy - const obj = observable({ prop: 1 }) + const obj = state({ prop: 1 }) const runner = effect(() => { dummy = obj.prop }) @@ -625,7 +625,7 @@ describe('observer/effect', () => { }) it('markNonReactive', () => { - const obj = observable({ + const obj = state({ foo: markNonReactive({ prop: 0 }) diff --git a/packages/observer/__tests__/immutable.spec.ts b/packages/reactivity/__tests__/immutableState.spec.ts similarity index 68% rename from packages/observer/__tests__/immutable.spec.ts rename to packages/reactivity/__tests__/immutableState.spec.ts index 07c7fe93..51facb30 100644 --- a/packages/observer/__tests__/immutable.spec.ts +++ b/packages/reactivity/__tests__/immutableState.spec.ts @@ -1,9 +1,9 @@ import { - observable, - immutable, - unwrap, - isObservable, - isImmutable, + state, + immutableState, + toRaw, + isState, + isImmutableState, markNonReactive, markImmutable, lock, @@ -26,16 +26,16 @@ describe('observer/immutable', () => { describe('Object', () => { it('should make nested values immutable', () => { const original = { foo: 1, bar: { baz: 2 } } - const observed = immutable(original) + const observed = immutableState(original) expect(observed).not.toBe(original) - expect(isObservable(observed)).toBe(true) - expect(isImmutable(observed)).toBe(true) - expect(isObservable(original)).toBe(false) - expect(isImmutable(original)).toBe(false) - expect(isObservable(observed.bar)).toBe(true) - expect(isImmutable(observed.bar)).toBe(true) - expect(isObservable(original.bar)).toBe(false) - expect(isImmutable(original.bar)).toBe(false) + expect(isState(observed)).toBe(true) + expect(isImmutableState(observed)).toBe(true) + expect(isState(original)).toBe(false) + expect(isImmutableState(original)).toBe(false) + expect(isState(observed.bar)).toBe(true) + expect(isImmutableState(observed.bar)).toBe(true) + expect(isState(original.bar)).toBe(false) + expect(isImmutableState(original.bar)).toBe(false) // get expect(observed.foo).toBe(1) // has @@ -45,7 +45,7 @@ describe('observer/immutable', () => { }) it('should not allow mutation', () => { - const observed = immutable({ foo: 1, bar: { baz: 2 } }) + const observed = immutableState({ foo: 1, bar: { baz: 2 } }) observed.foo = 2 expect(observed.foo).toBe(1) expect(warn).toHaveBeenCalledTimes(1) @@ -61,7 +61,7 @@ describe('observer/immutable', () => { }) it('should allow mutation when unlocked', () => { - const observed: any = immutable({ foo: 1, bar: { baz: 2 } }) + const observed: any = immutableState({ foo: 1, bar: { baz: 2 } }) unlock() observed.prop = 2 observed.bar.qux = 3 @@ -76,7 +76,7 @@ describe('observer/immutable', () => { }) it('should not trigger effects when locked', () => { - const observed = immutable({ a: 1 }) + const observed = immutableState({ a: 1 }) let dummy effect(() => { dummy = observed.a @@ -88,7 +88,7 @@ describe('observer/immutable', () => { }) it('should trigger effects when unlocked', () => { - const observed = immutable({ a: 1 }) + const observed = immutableState({ a: 1 }) let dummy effect(() => { dummy = observed.a @@ -105,16 +105,16 @@ describe('observer/immutable', () => { describe('Array', () => { it('should make nested values immutable', () => { const original: any[] = [{ foo: 1 }] - const observed = immutable(original) + const observed = immutableState(original) expect(observed).not.toBe(original) - expect(isObservable(observed)).toBe(true) - expect(isImmutable(observed)).toBe(true) - expect(isObservable(original)).toBe(false) - expect(isImmutable(original)).toBe(false) - expect(isObservable(observed[0])).toBe(true) - expect(isImmutable(observed[0])).toBe(true) - expect(isObservable(original[0])).toBe(false) - expect(isImmutable(original[0])).toBe(false) + expect(isState(observed)).toBe(true) + expect(isImmutableState(observed)).toBe(true) + expect(isState(original)).toBe(false) + expect(isImmutableState(original)).toBe(false) + expect(isState(observed[0])).toBe(true) + expect(isImmutableState(observed[0])).toBe(true) + expect(isState(original[0])).toBe(false) + expect(isImmutableState(original[0])).toBe(false) // get expect(observed[0].foo).toBe(1) // has @@ -124,7 +124,7 @@ describe('observer/immutable', () => { }) it('should not allow mutation', () => { - const observed: any = immutable([{ foo: 1 }]) + const observed: any = immutableState([{ foo: 1 }]) observed[0] = 1 expect(observed[0]).not.toBe(1) expect(warn).toHaveBeenCalledTimes(1) @@ -146,7 +146,7 @@ describe('observer/immutable', () => { }) it('should allow mutation when unlocked', () => { - const observed: any[] = immutable([{ foo: 1, bar: { baz: 2 } }]) + const observed: any[] = immutableState([{ foo: 1, bar: { baz: 2 } }]) unlock() observed[1] = 2 observed.push(3) @@ -162,7 +162,7 @@ describe('observer/immutable', () => { }) it('should not trigger effects when locked', () => { - const observed = immutable([{ a: 1 }]) + const observed = immutableState([{ a: 1 }]) let dummy effect(() => { dummy = observed[0].a @@ -177,7 +177,7 @@ describe('observer/immutable', () => { }) it('should trigger effects when unlocked', () => { - const observed = immutable([{ a: 1 }]) + const observed = immutableState([{ a: 1 }]) let dummy effect(() => { dummy = observed[0].a @@ -208,20 +208,20 @@ describe('observer/immutable', () => { const key1 = {} const key2 = {} const original = new Collection([[key1, {}], [key2, {}]]) - const observed = immutable(original) + const observed = immutableState(original) expect(observed).not.toBe(original) - expect(isObservable(observed)).toBe(true) - expect(isImmutable(observed)).toBe(true) - expect(isObservable(original)).toBe(false) - expect(isImmutable(original)).toBe(false) - expect(isObservable(observed.get(key1))).toBe(true) - expect(isImmutable(observed.get(key1))).toBe(true) - expect(isObservable(original.get(key1))).toBe(false) - expect(isImmutable(original.get(key1))).toBe(false) + expect(isState(observed)).toBe(true) + expect(isImmutableState(observed)).toBe(true) + expect(isState(original)).toBe(false) + expect(isImmutableState(original)).toBe(false) + expect(isState(observed.get(key1))).toBe(true) + expect(isImmutableState(observed.get(key1))).toBe(true) + expect(isState(original.get(key1))).toBe(false) + expect(isImmutableState(original.get(key1))).toBe(false) }) test('should not allow mutation & not trigger effect', () => { - const map = immutable(new Collection()) + const map = immutableState(new Collection()) const key = {} let dummy effect(() => { @@ -235,7 +235,7 @@ describe('observer/immutable', () => { }) test('should allow mutation & trigger effect when unlocked', () => { - const map = immutable(new Collection()) + const map = immutableState(new Collection()) const isWeak = Collection === WeakMap const key = {} let dummy @@ -256,16 +256,16 @@ describe('observer/immutable', () => { const key1 = {} const key2 = {} const original = new Collection([[key1, {}], [key2, {}]]) - const observed = immutable(original) + const observed = immutableState(original) for (const [key, value] of observed) { - expect(isImmutable(key)).toBe(true) - expect(isImmutable(value)).toBe(true) + expect(isImmutableState(key)).toBe(true) + expect(isImmutableState(value)).toBe(true) } observed.forEach((value: any) => { - expect(isImmutable(value)).toBe(true) + expect(isImmutableState(value)).toBe(true) }) for (const value of observed.values()) { - expect(isImmutable(value)).toBe(true) + expect(isImmutableState(value)).toBe(true) } }) } @@ -279,18 +279,18 @@ describe('observer/immutable', () => { const key1 = {} const key2 = {} const original = new Collection([key1, key2]) - const observed = immutable(original) + const observed = immutableState(original) expect(observed).not.toBe(original) - expect(isObservable(observed)).toBe(true) - expect(isImmutable(observed)).toBe(true) - expect(isObservable(original)).toBe(false) - expect(isImmutable(original)).toBe(false) - expect(observed.has(observable(key1))).toBe(true) - expect(original.has(observable(key1))).toBe(false) + expect(isState(observed)).toBe(true) + expect(isImmutableState(observed)).toBe(true) + expect(isState(original)).toBe(false) + expect(isImmutableState(original)).toBe(false) + expect(observed.has(state(key1))).toBe(true) + expect(original.has(state(key1))).toBe(false) }) test('should not allow mutation & not trigger effect', () => { - const set = immutable(new Collection()) + const set = immutableState(new Collection()) const key = {} let dummy effect(() => { @@ -304,7 +304,7 @@ describe('observer/immutable', () => { }) test('should allow mutation & trigger effect when unlocked', () => { - const set = immutable(new Collection()) + const set = immutableState(new Collection()) const key = {} let dummy effect(() => { @@ -322,19 +322,19 @@ describe('observer/immutable', () => { if (Collection === Set) { test('should retrive immutable values on iteration', () => { const original = new Collection([{}, {}]) - const observed = immutable(original) + const observed = immutableState(original) for (const value of observed) { - expect(isImmutable(value)).toBe(true) + expect(isImmutableState(value)).toBe(true) } observed.forEach((value: any) => { - expect(isImmutable(value)).toBe(true) + expect(isImmutableState(value)).toBe(true) }) for (const value of observed.values()) { - expect(isImmutable(value)).toBe(true) + expect(isImmutableState(value)).toBe(true) } for (const [v1, v2] of observed.entries()) { - expect(isImmutable(v1)).toBe(true) - expect(isImmutable(v2)).toBe(true) + expect(isImmutableState(v1)).toBe(true) + expect(isImmutableState(v2)).toBe(true) } }) } @@ -342,52 +342,52 @@ describe('observer/immutable', () => { }) test('calling observable on an immutable should return immutable', () => { - const a = immutable() - const b = observable(a) - expect(isImmutable(b)).toBe(true) + const a = immutableState() + const b = state(a) + expect(isImmutableState(b)).toBe(true) // should point to same original - expect(unwrap(a)).toBe(unwrap(b)) + expect(toRaw(a)).toBe(toRaw(b)) }) test('calling immutable on an observable should return immutable', () => { - const a = observable() - const b = immutable(a) - expect(isImmutable(b)).toBe(true) + const a = state() + const b = immutableState(a) + expect(isImmutableState(b)).toBe(true) // should point to same original - expect(unwrap(a)).toBe(unwrap(b)) + expect(toRaw(a)).toBe(toRaw(b)) }) test('observing already observed value should return same Proxy', () => { const original = { foo: 1 } - const observed = immutable(original) - const observed2 = immutable(observed) + const observed = immutableState(original) + const observed2 = immutableState(observed) expect(observed2).toBe(observed) }) test('observing the same value multiple times should return same Proxy', () => { const original = { foo: 1 } - const observed = immutable(original) - const observed2 = immutable(original) + const observed = immutableState(original) + const observed2 = immutableState(original) expect(observed2).toBe(observed) }) test('markNonReactive', () => { - const obj = immutable({ + const obj = immutableState({ foo: { a: 1 }, bar: markNonReactive({ b: 2 }) }) - expect(isObservable(obj.foo)).toBe(true) - expect(isObservable(obj.bar)).toBe(false) + expect(isState(obj.foo)).toBe(true) + expect(isState(obj.bar)).toBe(false) }) test('markImmutable', () => { - const obj = observable({ + const obj = state({ foo: { a: 1 }, bar: markImmutable({ b: 2 }) }) - expect(isObservable(obj.foo)).toBe(true) - expect(isObservable(obj.bar)).toBe(true) - expect(isImmutable(obj.foo)).toBe(false) - expect(isImmutable(obj.bar)).toBe(true) + expect(isState(obj.foo)).toBe(true) + expect(isState(obj.bar)).toBe(true) + expect(isImmutableState(obj.foo)).toBe(false) + expect(isImmutableState(obj.bar)).toBe(true) }) }) diff --git a/packages/observer/__tests__/observable.spec.ts b/packages/reactivity/__tests__/state.spec.ts similarity index 69% rename from packages/observer/__tests__/observable.spec.ts rename to packages/reactivity/__tests__/state.spec.ts index bdf4a75a..d5f3a00d 100644 --- a/packages/observer/__tests__/observable.spec.ts +++ b/packages/reactivity/__tests__/state.spec.ts @@ -1,12 +1,12 @@ -import { observable, isObservable, unwrap, markNonReactive } from '../src/index' +import { state, isState, toRaw, markNonReactive } from '../src/index' describe('observer/observable', () => { test('Object', () => { const original = { foo: 1 } - const observed = observable(original) + const observed = state(original) expect(observed).not.toBe(original) - expect(isObservable(observed)).toBe(true) - expect(isObservable(original)).toBe(false) + expect(isState(observed)).toBe(true) + expect(isState(original)).toBe(false) // get expect(observed.foo).toBe(1) // has @@ -17,11 +17,11 @@ describe('observer/observable', () => { test('Array', () => { const original: any[] = [{ foo: 1 }] - const observed = observable(original) + const observed = state(original) expect(observed).not.toBe(original) - expect(isObservable(observed)).toBe(true) - expect(isObservable(original)).toBe(false) - expect(isObservable(observed[0])).toBe(true) + expect(isState(observed)).toBe(true) + expect(isState(original)).toBe(false) + expect(isState(observed[0])).toBe(true) // get expect(observed[0].foo).toBe(1) // has @@ -32,9 +32,9 @@ describe('observer/observable', () => { test('cloned observable Array should point to observed values', () => { const original = [{ foo: 1 }] - const observed = observable(original) + const observed = state(original) const clone = observed.slice() - expect(isObservable(clone[0])).toBe(true) + expect(isState(clone[0])).toBe(true) expect(clone[0]).not.toBe(original[0]) expect(clone[0]).toBe(observed[0]) }) @@ -46,15 +46,15 @@ describe('observer/observable', () => { }, array: [{ bar: 2 }] } - const observed = observable(original) - expect(isObservable(observed.nested)).toBe(true) - expect(isObservable(observed.array)).toBe(true) - expect(isObservable(observed.array[0])).toBe(true) + const observed = state(original) + expect(isState(observed.nested)).toBe(true) + expect(isState(observed.array)).toBe(true) + expect(isState(observed.array[0])).toBe(true) }) test('observed value should proxy mutations to original (Object)', () => { const original: any = { foo: 1 } - const observed = observable(original) + const observed = state(original) // set observed.bar = 1 expect(observed.bar).toBe(1) @@ -67,10 +67,10 @@ describe('observer/observable', () => { test('observed value should proxy mutations to original (Array)', () => { const original: any[] = [{ foo: 1 }, { bar: 2 }] - const observed = observable(original) + const observed = state(original) // set const value = { baz: 3 } - const observableValue = observable(value) + const observableValue = state(value) observed[0] = value expect(observed[0]).toBe(observableValue) expect(original[0]).toBe(value) @@ -85,32 +85,32 @@ describe('observer/observable', () => { }) test('setting a property with an unobserved value should wrap with observable', () => { - const observed: any = observable({}) + const observed: any = state({}) const raw = {} observed.foo = raw expect(observed.foo).not.toBe(raw) - expect(isObservable(observed.foo)).toBe(true) + expect(isState(observed.foo)).toBe(true) }) test('observing already observed value should return same Proxy', () => { const original = { foo: 1 } - const observed = observable(original) - const observed2 = observable(observed) + const observed = state(original) + const observed2 = state(observed) expect(observed2).toBe(observed) }) test('observing the same value multiple times should return same Proxy', () => { const original = { foo: 1 } - const observed = observable(original) - const observed2 = observable(original) + const observed = state(original) + const observed2 = state(original) expect(observed2).toBe(observed) }) test('should not pollute original object with Proxies', () => { const original: any = { foo: 1 } const original2 = { bar: 2 } - const observed = observable(original) - const observed2 = observable(original2) + const observed = state(original) + const observed2 = state(original2) observed.bar = observed2 expect(observed.bar).toBe(observed2) expect(original.bar).toBe(original2) @@ -118,9 +118,9 @@ describe('observer/observable', () => { test('unwrap', () => { const original = { foo: 1 } - const observed = observable(original) - expect(unwrap(observed)).toBe(original) - expect(unwrap(original)).toBe(original) + const observed = state(original) + expect(toRaw(observed)).toBe(original) + expect(toRaw(original)).toBe(original) }) test('unobservable values', () => { @@ -132,7 +132,7 @@ describe('observer/observable', () => { const getMsg = (value: any) => `value is not observable: ${String(value)}` const assertValue = (value: any) => { - observable(value) + state(value) expect(lastMsg).toMatch(getMsg(value)) } @@ -146,7 +146,7 @@ describe('observer/observable', () => { assertValue(null) // undefined should work because it returns empty object observable lastMsg = '' - observable(undefined) + state(undefined) expect(lastMsg).toBe('') // symbol const s = Symbol() @@ -156,19 +156,19 @@ describe('observer/observable', () => { // built-ins should work and return same value const p = Promise.resolve() - expect(observable(p)).toBe(p) + expect(state(p)).toBe(p) const r = new RegExp('') - expect(observable(r)).toBe(r) + expect(state(r)).toBe(r) const d = new Date() - expect(observable(d)).toBe(d) + expect(state(d)).toBe(d) }) test('markNonReactive', () => { - const obj = observable({ + const obj = state({ foo: { a: 1 }, bar: markNonReactive({ b: 2 }) }) - expect(isObservable(obj.foo)).toBe(true) - expect(isObservable(obj.bar)).toBe(false) + expect(isState(obj.foo)).toBe(true) + expect(isState(obj.bar)).toBe(false) }) }) diff --git a/packages/observer/__tests__/value.spec.ts b/packages/reactivity/__tests__/value.spec.ts similarity index 93% rename from packages/observer/__tests__/value.spec.ts rename to packages/reactivity/__tests__/value.spec.ts index 2e46dfcb..f72026fd 100644 --- a/packages/observer/__tests__/value.spec.ts +++ b/packages/reactivity/__tests__/value.spec.ts @@ -1,5 +1,5 @@ import { value } from '../src/value' -import { effect, observable } from '../src/index' +import { effect, state } from '../src/index' describe('observer/value', () => { it('should hold a value', () => { @@ -35,7 +35,7 @@ describe('observer/value', () => { it('should work like a normal property when nested in an observable', () => { const a = value(1) - const obj = observable({ + const obj = state({ a, b: { c: a, diff --git a/packages/reactivity/index.js b/packages/reactivity/index.js new file mode 100644 index 00000000..2fcac04c --- /dev/null +++ b/packages/reactivity/index.js @@ -0,0 +1,7 @@ +'use strict' + +if (process.env.NODE_ENV === 'production') { + module.exports = require('./dist/reactivity.cjs.prod.js.js') +} else { + module.exports = require('./dist/reactivity.cjs.js.js') +} diff --git a/packages/observer/package.json b/packages/reactivity/package.json similarity index 65% rename from packages/observer/package.json rename to packages/reactivity/package.json index da6feeac..10791194 100644 --- a/packages/observer/package.json +++ b/packages/reactivity/package.json @@ -1,11 +1,11 @@ { - "name": "@vue/observer", + "name": "@vue/reactivity", "version": "3.0.0-alpha.1", - "description": "@vue/observer", + "description": "@vue/reactivity", "main": "index.js", - "module": "dist/observer.esm-bundler.js", + "module": "dist/reactivity.esm-bundler.js", "types": "dist/index.d.ts", - "unpkg": "dist/observer.global.js", + "unpkg": "dist/reactivity.global.js", "sideEffects": false, "repository": { "type": "git", @@ -23,5 +23,5 @@ "bugs": { "url": "https://github.com/vuejs/vue/issues" }, - "homepage": "https://github.com/vuejs/vue/tree/dev/packages/observer#readme" + "homepage": "https://github.com/vuejs/vue/tree/dev/packages/reactivity#readme" } diff --git a/packages/observer/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts similarity index 95% rename from packages/observer/src/baseHandlers.ts rename to packages/reactivity/src/baseHandlers.ts index 40f57fd8..cdb9f7b1 100644 --- a/packages/observer/src/baseHandlers.ts +++ b/packages/reactivity/src/baseHandlers.ts @@ -1,4 +1,4 @@ -import { observable, immutable, unwrap } from './index' +import { state, immutableState, toRaw } from './index' import { OperationTypes } from './operations' import { track, trigger } from './effect' import { LOCKED } from './lock' @@ -27,8 +27,8 @@ function createGetter(isImmutable: boolean) { ? isImmutable ? // need to lazy access immutable and observable here to avoid // circular dependency - immutable(res) - : observable(res) + immutableState(res) + : state(res) : res } } @@ -39,7 +39,7 @@ function set( value: any, receiver: any ): boolean { - value = unwrap(value) + value = toRaw(value) const hadKey = hasOwnProperty.call(target, key) const oldValue = target[key] if (isValue(oldValue)) { @@ -48,7 +48,7 @@ function set( } const result = Reflect.set(target, key, value, receiver) // don't trigger if target is something up in the prototype chain of original - if (target === unwrap(receiver)) { + if (target === toRaw(receiver)) { /* istanbul ignore else */ if (__DEV__) { const extraInfo = { oldValue, newValue: value } diff --git a/packages/observer/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts similarity index 91% rename from packages/observer/src/collectionHandlers.ts rename to packages/reactivity/src/collectionHandlers.ts index 75e32c7b..d781dae0 100644 --- a/packages/observer/src/collectionHandlers.ts +++ b/packages/reactivity/src/collectionHandlers.ts @@ -1,16 +1,16 @@ -import { unwrap, observable, immutable } from './index' +import { toRaw, state, immutableState } from './index' import { track, trigger } from './effect' import { OperationTypes } from './operations' import { LOCKED } from './lock' import { isObject } from '@vue/shared' -const toObservable = (value: any) => - isObject(value) ? observable(value) : value -const toImmutable = (value: any) => (isObject(value) ? immutable(value) : value) +const toObservable = (value: any) => (isObject(value) ? state(value) : value) +const toImmutable = (value: any) => + isObject(value) ? immutableState(value) : value function get(target: any, key: any, wrap: (t: any) => any): any { - target = unwrap(target) - key = unwrap(key) + target = toRaw(target) + key = toRaw(key) const proto: any = Reflect.getPrototypeOf(target) track(target, OperationTypes.GET, key) const res = proto.get.call(target, key) @@ -18,23 +18,23 @@ function get(target: any, key: any, wrap: (t: any) => any): any { } function has(key: any): boolean { - const target = unwrap(this) - key = unwrap(key) + const target = toRaw(this) + key = toRaw(key) const proto: any = Reflect.getPrototypeOf(target) track(target, OperationTypes.HAS, key) return proto.has.call(target, key) } function size(target: any) { - target = unwrap(target) + target = toRaw(target) const proto = Reflect.getPrototypeOf(target) track(target, OperationTypes.ITERATE) return Reflect.get(proto, 'size', target) } function add(value: any) { - value = unwrap(value) - const target = unwrap(this) + value = toRaw(value) + const target = toRaw(this) const proto: any = Reflect.getPrototypeOf(this) const hadKey = proto.has.call(target, value) const result = proto.add.call(target, value) @@ -50,8 +50,8 @@ function add(value: any) { } function set(key: any, value: any) { - value = unwrap(value) - const target = unwrap(this) + value = toRaw(value) + const target = toRaw(this) const proto: any = Reflect.getPrototypeOf(this) const hadKey = proto.has.call(target, key) const oldValue = proto.get.call(target, key) @@ -77,7 +77,7 @@ function set(key: any, value: any) { } function deleteEntry(key: any) { - const target = unwrap(this) + const target = toRaw(this) const proto: any = Reflect.getPrototypeOf(this) const hadKey = proto.has.call(target, key) const oldValue = proto.get ? proto.get.call(target, key) : undefined @@ -95,7 +95,7 @@ function deleteEntry(key: any) { } function clear() { - const target = unwrap(this) + const target = toRaw(this) const proto: any = Reflect.getPrototypeOf(this) const hadItems = target.size !== 0 const oldTarget = target instanceof Map ? new Map(target) : new Set(target) @@ -115,7 +115,7 @@ function clear() { function createForEach(isImmutable: boolean) { return function forEach(callback: Function, thisArg?: any) { const observed = this - const target = unwrap(observed) + const target = toRaw(observed) const proto: any = Reflect.getPrototypeOf(target) const wrap = isImmutable ? toImmutable : toObservable track(target, OperationTypes.ITERATE) @@ -131,7 +131,7 @@ function createForEach(isImmutable: boolean) { function createIterableMethod(method: string | symbol, isImmutable: boolean) { return function(...args: any[]) { - const target = unwrap(this) + const target = toRaw(this) const proto: any = Reflect.getPrototypeOf(target) const isPair = method === 'entries' || @@ -170,7 +170,7 @@ function createImmutableMethod( const key = args[0] ? `on key "${args[0]}"` : `` console.warn( `${type} operation ${key}failed: target is immutable.`, - unwrap(this) + toRaw(this) ) } return type === OperationTypes.DELETE ? false : this diff --git a/packages/observer/src/computed.ts b/packages/reactivity/src/computed.ts similarity index 100% rename from packages/observer/src/computed.ts rename to packages/reactivity/src/computed.ts diff --git a/packages/observer/src/effect.ts b/packages/reactivity/src/effect.ts similarity index 99% rename from packages/observer/src/effect.ts rename to packages/reactivity/src/effect.ts index 95d93a38..9d9295c0 100644 --- a/packages/observer/src/effect.ts +++ b/packages/reactivity/src/effect.ts @@ -25,7 +25,7 @@ export interface ReactiveEffectOptions { export type Scheduler = (run: () => any) => void -export type DebuggerEvent = { +export interface DebuggerEvent { effect: ReactiveEffect target: any type: OperationTypes diff --git a/packages/observer/src/index.ts b/packages/reactivity/src/index.ts similarity index 92% rename from packages/observer/src/index.ts rename to packages/reactivity/src/index.ts index cf575ec4..28f89519 100644 --- a/packages/observer/src/index.ts +++ b/packages/reactivity/src/index.ts @@ -46,14 +46,14 @@ const canObserve = (value: any): boolean => { type ObservableFactory = (target?: T) => UnwrapValue -export const observable = ((target: any = {}): any => { +export const state = ((target: any = {}): any => { // if trying to observe an immutable proxy, return the immutable version. if (immutableToRaw.has(target)) { return target } // target is explicitly marked as immutable by user if (immutableValues.has(target)) { - return immutable(target) + return immutableState(target) } return createObservable( target, @@ -64,7 +64,7 @@ export const observable = ((target: any = {}): any => { ) }) as ObservableFactory -export const immutable = ((target: any = {}): any => { +export const immutableState = ((target: any = {}): any => { // value is a mutable observable, retrive its original and return // a readonly version. if (observedToRaw.has(target)) { @@ -141,15 +141,15 @@ export function stop(effect: ReactiveEffect) { } } -export function isObservable(value: any): boolean { +export function isState(value: any): boolean { return observedToRaw.has(value) || immutableToRaw.has(value) } -export function isImmutable(value: any): boolean { +export function isImmutableState(value: any): boolean { return immutableToRaw.has(value) } -export function unwrap(observed: T): T { +export function toRaw(observed: T): T { return observedToRaw.get(observed) || immutableToRaw.get(observed) || observed } diff --git a/packages/observer/src/lock.ts b/packages/reactivity/src/lock.ts similarity index 100% rename from packages/observer/src/lock.ts rename to packages/reactivity/src/lock.ts diff --git a/packages/observer/src/operations.ts b/packages/reactivity/src/operations.ts similarity index 100% rename from packages/observer/src/operations.ts rename to packages/reactivity/src/operations.ts diff --git a/packages/observer/src/state.ts b/packages/reactivity/src/state.ts similarity index 100% rename from packages/observer/src/state.ts rename to packages/reactivity/src/state.ts diff --git a/packages/observer/src/value.ts b/packages/reactivity/src/value.ts similarity index 96% rename from packages/observer/src/value.ts rename to packages/reactivity/src/value.ts index 306aab17..761d4ebb 100644 --- a/packages/observer/src/value.ts +++ b/packages/reactivity/src/value.ts @@ -1,7 +1,7 @@ import { track, trigger } from './effect' import { OperationTypes } from './operations' import { isObject } from '@vue/shared' -import { observable } from './index' +import { state } from './index' export const knownValues = new WeakSet() @@ -9,7 +9,7 @@ export interface Value { value: T } -const convert = (val: any): any => (isObject(val) ? observable(val) : val) +const convert = (val: any): any => (isObject(val) ? state(val) : val) export function value(raw: T): Value { raw = convert(raw) diff --git a/packages/runtime-core/__tests__/createComponent.spec.ts b/packages/runtime-core/__tests__/createComponent.spec.ts index 8afefcdc..41789ff7 100644 --- a/packages/runtime-core/__tests__/createComponent.spec.ts +++ b/packages/runtime-core/__tests__/createComponent.spec.ts @@ -1,5 +1,5 @@ import { createComponent } from '../src/component' -import { value } from '@vue/observer' +import { value } from '@vue/reactivity' import { PropType } from '../src/componentProps' test('createComponent type inference', () => { diff --git a/packages/runtime-core/src/apiState.ts b/packages/runtime-core/src/apiState.ts index 9b971c27..b66199f2 100644 --- a/packages/runtime-core/src/apiState.ts +++ b/packages/runtime-core/src/apiState.ts @@ -1,11 +1,11 @@ export { value, isValue, - observable, - immutable, - isObservable, - isImmutable, - unwrap, + state, + isState, + immutableState, + isImmutableState, + toRaw, markImmutable, markNonReactive, effect, @@ -17,13 +17,13 @@ export { Value, ComputedValue, UnwrapValue -} from '@vue/observer' +} from '@vue/reactivity' import { computed as _computed, ComputedValue, ReactiveEffect -} from '@vue/observer' +} from '@vue/reactivity' import { currentInstance } from './component' diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index f8de749f..85e33e75 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -4,7 +4,7 @@ import { isValue, Value, ReactiveEffectOptions -} from '@vue/observer' +} from '@vue/reactivity' import { queueJob, queuePostFlushCb } from './scheduler' import { EMPTY_OBJ, isObject, isArray } from '@vue/shared' import { recordEffect } from './apiState' diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 20a6b718..b68fee36 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -2,9 +2,9 @@ import { VNode, normalizeVNode, VNodeChild } from './vnode' import { ReactiveEffect, UnwrapValue, - observable, - immutable -} from '@vue/observer' + state, + immutableState +} from '@vue/reactivity' import { EMPTY_OBJ } from '@vue/shared' import { RenderProxyHandlers } from './componentProxy' import { ComponentPropsOptions, ExtractPropTypes } from './componentProps' @@ -151,9 +151,9 @@ export function setupStatefulComponent(instance: ComponentInstance) { // only need to create it if setup() actually expects it // it will be updated in resolveProps() on updates before render const propsProxy = (instance.propsProxy = setup.length - ? immutable(instance.props) + ? immutableState(instance.props) : null) - instance.state = observable(setup.call(proxy, propsProxy)) + instance.state = state(setup.call(proxy, propsProxy)) currentInstance = null } } diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index 06d92fb8..0dfe477c 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -1,4 +1,4 @@ -import { immutable, unwrap, lock, unlock } from '@vue/observer' +import { immutableState, toRaw, lock, unlock } from '@vue/reactivity' import { EMPTY_OBJ, camelize, @@ -140,7 +140,7 @@ export function resolveProps( } // runtime validation if (__DEV__ && rawProps) { - validateProp(key, unwrap(rawProps[key]), opt, isAbsent) + validateProp(key, toRaw(rawProps[key]), opt, isAbsent) } } } else { @@ -152,7 +152,7 @@ export function resolveProps( // the props proxy const { patchFlag } = instance.vnode if (propsProxy !== null && (patchFlag === 0 || patchFlag & FULL_PROPS)) { - const rawInitialProps = unwrap(propsProxy) + const rawInitialProps = toRaw(propsProxy) for (const key in rawInitialProps) { if (!props.hasOwnProperty(key)) { delete propsProxy[key] @@ -163,10 +163,10 @@ export function resolveProps( // lock immutable lock() - instance.props = __DEV__ ? immutable(props) : props + instance.props = __DEV__ ? immutableState(props) : props instance.attrs = options ? __DEV__ - ? immutable(attrs) + ? immutableState(attrs) : attrs : instance.props } diff --git a/packages/runtime-core/src/createRenderer.ts b/packages/runtime-core/src/createRenderer.ts index 1a27b113..e9a17697 100644 --- a/packages/runtime-core/src/createRenderer.ts +++ b/packages/runtime-core/src/createRenderer.ts @@ -31,7 +31,7 @@ import { FULL_PROPS } from './patchFlags' import { queueJob, queuePostFlushCb, flushPostFlushCbs } from './scheduler' -import { effect, stop, ReactiveEffectOptions } from '@vue/observer' +import { effect, stop, ReactiveEffectOptions } from '@vue/reactivity' import { resolveProps } from './componentProps' import { resolveSlots } from './componentSlots' import { diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts new file mode 100644 index 00000000..e69de29b diff --git a/tsconfig.json b/tsconfig.json index 8c69e693..f7e7ec24 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,7 @@ "@vue/runtime-core": ["packages/runtime-core/src"], "@vue/runtime-dom": ["packages/runtime-dom/src"], "@vue/runtime-test": ["packages/runtime-test/src"], - "@vue/observer": ["packages/observer/src"], + "@vue/reactivity": ["packages/reactivity/src"], "@vue/compiler-core": ["packages/compiler-core/src"], "@vue/server-renderer": ["packages/server-renderer/src"] }