ref: reorganize store (based on different principles)

This commit is contained in:
Géry Debongnie
2019-04-11 13:08:00 +02:00
parent d49f5670fe
commit 03511ce9ea
4 changed files with 241 additions and 449 deletions
+132 -110
View File
@@ -1,11 +1,9 @@
import { EventBus } from "./event_bus"; import { EventBus } from "./event_bus";
import { Component } from "./component"; import { Component } from "./component";
import { shallowEqual } from "./utils";
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Store Definition // Store Definition
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
interface StoreConfig { interface StoreConfig {
env?: any; env?: any;
state?: any; state?: any;
@@ -16,9 +14,9 @@ interface StoreConfig {
interface StoreOption { interface StoreOption {
debug?: boolean; debug?: boolean;
} }
export class Store extends EventBus { export class Store extends EventBus {
state: any; state: any;
mstate: any;
actions: any; actions: any;
mutations: any; mutations: any;
_isMutating: boolean = false; _isMutating: boolean = false;
@@ -26,23 +24,17 @@ export class Store extends EventBus {
history: any[] = []; history: any[] = [];
debug: boolean; debug: boolean;
env: any; env: any;
observer: Observer;
constructor(config: StoreConfig, options: StoreOption = {}) { constructor(config: StoreConfig, options: StoreOption = {}) {
super(); super();
this.debug = options.debug || false; this.debug = options.debug || false;
this.state = Object.assign({}, config.state); this.state = config.state || {};
const self = this;
this.mstate = magify({
raw: this.state,
key: "state",
parent: this,
onDirty: function() {
self._isDirty = true;
}
});
this.actions = config.actions; this.actions = config.actions;
this.mutations = config.mutations; this.mutations = config.mutations;
this.env = config.env; this.env = config.env;
this.observer = makeObserver();
this.observer.observe(this.state);
if (this.debug) { if (this.debug) {
this.history.push({ state: this.state }); this.history.push({ state: this.state });
@@ -75,8 +67,10 @@ export class Store extends EventBus {
throw new Error(`[Error] mutation ${type} is undefined`); throw new Error(`[Error] mutation ${type} is undefined`);
} }
this._isMutating = true; this._isMutating = true;
const currentRev = this.observer.__rev__;
// observer.enableMutating()
this.mutations[type].call(null, this.mstate, payload); this.mutations[type].call(null, this.state, payload);
if (this.debug) { if (this.debug) {
this.history.push({ this.history.push({
state: this.state, state: this.state,
@@ -87,17 +81,122 @@ export class Store extends EventBus {
await Promise.resolve(); await Promise.resolve();
if (this._isMutating) { if (this._isMutating) {
this._isMutating = false; this._isMutating = false;
if (this._isDirty) { // this.observer.disableMutations();
this._isDirty = false; if (currentRev !== this.observer.__rev__) {
this.trigger("update", this.state); this.trigger("update", this.state);
} }
} }
} }
} }
//------------------------------------------------------------------------------
// Observer
//------------------------------------------------------------------------------
interface Observer {
__rev__: number;
observe: (val: any) => void;
set: (target: any, key: number | string, value: any) => void;
}
export function makeObserver(): Observer {
const observer: Observer = {
__rev__: 0,
observe: observe,
set: set
};
function set(target: any, key: number | string, value: any) {
if (Array.isArray(target)) {
} else {
addProp(target, key as string, value);
}
target.__rev__++;
observer.__rev__++;
}
function addProp<T extends { __rev__?: number }>(
obj: T,
key: string,
value: any
) {
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newVal) {
// if (!isMutating) [
// throw new Error();
// ]
if (newVal !== value) {
value = newVal;
// observe(newVal);
obj.__rev__!++;
observer.__rev__++;
}
}
});
observe(value);
}
function observeObj<T extends { __rev__?: number }>(obj: T) {
const keys = Object.keys(obj);
obj.__rev__ = 0;
Object.defineProperty(obj, "__rev__", { enumerable: false });
for (let key of keys) {
addProp(obj, key, obj[key]);
}
}
const ArrayProto = Array.prototype;
const ModifiedArrayProto = Object.create(ArrayProto);
ModifiedArrayProto.push = function(...args) {
observer.__rev__++;
this.__rev__++;
return ArrayProto.push.call(this, ...args);
};
ModifiedArrayProto.pop = function(...args) {
observer.__rev__++;
this.__rev__++;
return ArrayProto.pop.call(this, ...args);
};
function observeArr(arr: Array<any>) {
(<any>arr).__rev__ = 0;
Object.defineProperty(arr, "__rev__", { enumerable: false });
(<any>arr).__proto__ = ModifiedArrayProto;
// for (let i = 0; i < arr.length; i++) {
// observe(arr[i]);
// }
}
function observe(value: any) {
if (typeof value !== "object") {
return;
}
if (Array.isArray(value)) {
observeArr(value);
} else {
observeObj(value);
}
}
return observer;
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Connect function // Connect function
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
function setStoreProps(__widget__: any, storeProps: any) {
__widget__.currentStoreProps = storeProps;
__widget__.currentStoreRevs = {};
__widget__.currentStoreRev = storeProps.__rev__;
for (let key in storeProps) {
__widget__.currentStoreRevs[key] = storeProps[key].__rev__;
}
}
export function connect(mapStateToProps) { export function connect(mapStateToProps) {
return function(Comp) { return function(Comp) {
return class extends Comp { return class extends Comp {
@@ -107,15 +206,29 @@ export function connect(mapStateToProps) {
const storeProps = mapStateToProps(env.store.state, ownProps); const storeProps = mapStateToProps(env.store.state, ownProps);
const mergedProps = Object.assign(props || {}, storeProps); const mergedProps = Object.assign(props || {}, storeProps);
super(parent, mergedProps); super(parent, mergedProps);
this.__widget__.currentStoreProps = storeProps; setStoreProps(this.__widget__, storeProps);
this.__widget__.ownProps = ownProps; this.__widget__.ownProps = ownProps;
} }
mounted() { mounted() {
this.env.store.on("update", this, () => { this.env.store.on("update", this, () => {
const ownProps = this.__widget__.ownProps; const ownProps = this.__widget__.ownProps;
const storeProps = mapStateToProps(this.env.store.state, ownProps); const storeProps = mapStateToProps(this.env.store.state, ownProps);
if (!shallowEqual(storeProps, this.__widget__.currentStoreProps)) { let didChange = false;
this.__widget__.currentStoreProps = storeProps; if (this.__widget__.currentStoreRev !== storeProps.__rev__) {
setStoreProps(this.__widget__, storeProps);
didChange = true;
} else {
const revs = this.__widget__.currentStoreRevs;
for (let key in storeProps) {
const val = storeProps[key];
if (val.__rev__ !== revs[key]) {
didChange = true;
revs[key] = val.__rev__;
this.__widget__.currentStoreProps[key] = val;
}
}
}
if (didChange) {
this.updateProps(ownProps, false); this.updateProps(ownProps, false);
} }
}); });
@@ -143,94 +256,3 @@ export function connect(mapStateToProps) {
}; };
}; };
} }
//------------------------------------------------------------------------------
// Magic Stuff
//------------------------------------------------------------------------------
function _magifyArray({ raw, key, parent, onDirty }) {
let magic = { raw, key, parent, magic: true };
Object.assign(magic, {
push: function(item) {
onDirty();
parent.raw[key] = [...magic.raw, item];
magic.raw = parent.raw[key];
const index = magic.raw.length - 1;
let prop = magify({ raw: item, key: index, parent: magic, onDirty });
Object.defineProperty(magic, index, {
set(newVal) {
onDirty();
parent.raw[key] = [...magic.raw];
parent.raw[key][index] = newVal;
magic.raw = parent.raw[key];
prop = magify({ raw: newVal, key: index, parent: magic, onDirty });
},
get() {
return prop;
}
});
}
});
raw.forEach((value, index) => {
let prop = magify({
raw: value,
key: index,
parent: magic,
onDirty
});
Object.defineProperty(magic, index, {
set(newVal) {
onDirty();
parent.raw[key] = [...magic.raw];
parent.raw[key][index] = newVal;
magic.raw = parent.raw[key];
prop = magify({ raw: newVal, key: index, parent: magic, onDirty });
},
get() {
return prop;
}
});
});
return magic;
}
function magify({ raw, key, parent, onDirty }) {
if (!parent.magic) {
parent = {
raw: parent,
magic: true,
parent: null
};
}
if (raw.magic) {
return raw;
}
if (typeof raw !== "object") {
return raw;
}
if (Array.isArray(raw)) {
return _magifyArray({ raw, key, parent, onDirty });
} else {
let magic = { raw, key, parent, magic: true };
Object.keys(raw).forEach(propKey => {
let prop = magify({
raw: raw[propKey],
key: propKey,
parent: magic,
onDirty
});
Object.defineProperty(magic, propKey, {
set(newVal) {
onDirty();
parent.raw[key] = { ...magic.raw, [propKey]: newVal };
magic.raw = parent.raw[key];
prop = magify({ raw: newVal, key: propKey, parent: magic, onDirty });
},
get() {
return prop;
}
});
});
return magic;
}
}
-13
View File
@@ -113,19 +113,6 @@ export function findInTree<T extends Tree<T>>(
return null; return null;
} }
export function shallowEqual(objA, objB) {
if (objA === objB) {
return true;
}
const keysA = Object.keys(objA);
for (let key of keysA) {
if (!(key in objB) || objA[key] !== objB[key]) {
return false;
}
}
return true;
}
export function patch(C: any, patchName: string, patch: any) { export function patch(C: any, patchName: string, patch: any) {
const proto = C.prototype; const proto = C.prototype;
if (!proto.__patches) { if (!proto.__patches) {
+100 -305
View File
@@ -1,11 +1,11 @@
import { Store, connect } from "../src/store"; import { Store, makeObserver, connect } from "../src/store";
import { Component, Env } from "../src/component";
import { import {
nextTick,
nextMicroTick, nextMicroTick,
makeTestWEnv,
makeTestFixture, makeTestFixture,
nextTick makeTestWEnv
} from "./helpers"; } from "./helpers";
import { Env, Component } from "../src/component";
describe("basic use", () => { describe("basic use", () => {
test("commit a mutation", () => { test("commit a mutation", () => {
@@ -106,110 +106,104 @@ describe("basic use", () => {
}); });
}); });
describe("observer", () => {
test("properly observe objects", () => {
const observer = makeObserver();
const obj: any = {};
observer.observe(obj);
expect(obj.__rev__).toBe(0);
expect(observer.__rev__).toBe(0);
const ob2: any = { a: 1 };
observer.observe(ob2);
expect(ob2.__rev__).toBe(0);
ob2.a = 2;
expect(observer.__rev__).toBe(1);
expect(ob2.__rev__).toBe(1);
ob2.b = 3;
expect(observer.__rev__).toBe(1);
expect(ob2.__rev__).toBe(1);
observer.set(ob2, "b", 4);
expect(observer.__rev__).toBe(2);
expect(ob2.__rev__).toBe(2);
});
test("various object property changes", () => {
const observer = makeObserver();
const obj: any = { a: 1 };
observer.observe(obj);
expect(obj.__rev__).toBe(0);
obj.a = 2;
expect(observer.__rev__).toBe(1);
expect(obj.__rev__).toBe(1);
// same value again
obj.a = 2;
expect(observer.__rev__).toBe(1);
expect(obj.__rev__).toBe(1);
obj.a = 3;
expect(observer.__rev__).toBe(2);
expect(obj.__rev__).toBe(2);
});
test("properly observe arrays", () => {
const observer = makeObserver();
const arr: any = [];
observer.observe(arr);
expect(arr.__rev__).toBe(0);
expect(observer.__rev__).toBe(0);
expect(arr.length).toBe(0);
arr.push(1);
expect(arr.__rev__).toBe(1);
expect(observer.__rev__).toBe(1);
expect(arr.length).toBe(1);
});
test("properly observe arrays in object", () => {
const observer = makeObserver();
const state: any = { arr: [] };
observer.observe(state);
expect(state.arr.__rev__).toBe(0);
expect(observer.__rev__).toBe(0);
expect(state.arr.length).toBe(0);
state.arr.push(1);
expect(state.arr.__rev__).toBe(1);
expect(observer.__rev__).toBe(1);
expect(state.arr.length).toBe(1);
});
});
describe("advanced state properties", () => { describe("advanced state properties", () => {
test("state in the store is reference equal after empty mutation", async () => { test("state in the store is reference equal after mutation", async () => {
const state = {};
const mutations = { const mutations = {
donothing() {} donothing() {}
}; };
const store = new Store({ state: {}, mutations }); const store = new Store({ state, mutations });
const state = store.state; expect(store.state).toBe(state);
store.commit("donothing"); store.commit("donothing");
expect(store.state).toBe(state); expect(store.state).toBe(state);
}); });
test("state in the store is not reference equal after changing one number value", async () => { test("can use array properties in mutations", () => {
expect.assertions(3);
const state = { a: [1, 2, 3] };
const mutations = { const mutations = {
dosomething(state) { m(state) {
expect(state.rochefort).toBe(8); expect(state.a.length).toBe(3);
state.rochefort += 2; const l = state.a.push(53);
expect(state.rochefort).toBe(10); expect(l).toBe(4);
}
};
const store = new Store({ state: { rochefort: 8 }, mutations });
const state = store.state;
expect(state.rochefort).toBe(8);
store.commit("dosomething");
expect(store.state.rochefort).toBe(10);
expect(store.state).not.toBe(state);
});
test("can push an item in a list with an existing item", async () => {
const mutations = {
addRochefort(state) {
state.rocheforts.push({ taste: 87 });
}
};
const store = new Store({
state: { rocheforts: [{ taste: 84 }] },
mutations
});
const state = store.state;
store.commit("addRochefort");
expect(store.state.rocheforts).toEqual([{ taste: 84 }, { taste: 87 }]);
expect(store.state).toBe(state);
});
test("state is reference equal after pushing in a list", async () => {
const mutations = {
addRochefort(state) {
state.rocheforts.push(10);
}
};
const store = new Store({ state: { rocheforts: [] }, mutations });
const state = store.state;
store.commit("addRochefort");
expect(store.state.rocheforts).toEqual([10]);
expect(store.state).toBe(state);
});
test("nested state in the store behaves properly", async () => {
const state = { jupiler: { maes: 1 } };
const mutations = {
dostuff(state, inc) {
state.jupiler.maes += inc;
} }
}; };
const store = new Store({ state, mutations }); const store = new Store({ state, mutations });
expect(store.state.jupiler.maes).toBe(1); store.commit("m");
const stateA = store.state; expect(store.state.a).toEqual([1, 2, 3, 53]);
const jupiler = store.state.jupiler;
store.commit("dostuff", 10);
expect(store.state.jupiler.maes).toBe(11);
expect(store.state).toBe(stateA);
expect(store.state.jupiler).not.toBe(jupiler);
});
test("sibling properties are not affected", async () => {
const state = { jupiler: { maes: 1 }, stella: 3 };
const mutations = {
dostuff(state, inc) {
state.stella += inc;
}
};
const store = new Store({ state, mutations });
const jupiler = store.state.jupiler;
const stateA = store.state;
store.commit("dostuff", 10);
expect(store.state.stella).toBe(13);
expect(store.state).not.toBe(stateA);
expect(store.state.jupiler).toBe(jupiler);
});
test("interaction between mutations on sibling properties", async () => {
const state = { jupiler: { maes: 1 }, stella: 3 };
const mutations = {
dostuffA(state, inc) {
state.stella += inc;
},
dostuffB(state, inc) {
state.jupiler.maes += inc;
}
};
const store = new Store({ state, mutations });
store.commit("dostuffA", 10);
const jupiler = store.state.jupiler;
store.commit("dostuffB", 10);
expect(store.state.jupiler).not.toBe(jupiler);
}); });
test("can use object assign in store", async () => { test("can use object assign in store", async () => {
@@ -234,217 +228,9 @@ describe("advanced state properties", () => {
}; };
const state = { counter: 0 }; const state = { counter: 0 };
const store = new Store({ state, mutations }); const store = new Store({ state, mutations });
const curState = store.state;
expect(store.state.counter).toBe(0); expect(store.state.counter).toBe(0);
store.commit("inc", {}); store.commit("inc", {});
expect(store.state.counter).toBe(1); expect(store.state.counter).toBe(1);
expect(store.state).not.toBe(curState);
});
test("aku reactive store state 2", async () => {
const mutations = {
inc(state) {
state.convo.counter++;
}
};
const state = { convo: { counter: 0 } };
const store = new Store({ state, mutations });
const curState = store.state;
const convo = state.convo;
expect(store.state.convo.counter).toBe(0);
store.commit("inc", {});
expect(store.state.convo.counter).toBe(1);
expect(store.state.convo).not.toBe(convo);
expect(store.state).toBe(curState);
});
test("aku reactive store state 3", async () => {
const mutations = {
inc1(state) {
state.threads[1].counter++;
},
inc2(state) {
state.threads[2].counter++;
}
};
const state = {
threads: {
1: { counter: 0 },
2: { counter: 0 }
}
};
const store = new Store({ state, mutations });
const curState = store.state;
const threads = state.threads;
const thread1 = state.threads[1];
const thread2 = state.threads[2];
expect(store.state.threads[1].counter).toBe(0);
expect(store.state.threads[2].counter).toBe(0);
store.commit("inc1", {});
expect(store.state.threads[1].counter).toBe(1);
expect(store.state.threads[2].counter).toBe(0);
expect(store.state.threads[1]).not.toBe(thread1);
expect(store.state.threads[2]).toBe(thread2);
expect(store.state.threads).toBe(threads);
expect(store.state).toBe(curState);
const newThread1 = curState.threads[1];
store.commit("inc2", {});
expect(store.state.threads[1].counter).toBe(1);
expect(store.state.threads[2].counter).toBe(1);
expect(store.state.threads[1]).toBe(newThread1);
expect(store.state.threads[2]).not.toBe(thread2);
expect(store.state.threads).toBe(threads);
expect(store.state).toBe(curState);
});
test("aku reactive store state 4", async () => {
const mutations = {
incT(state) {
state.threads[1].counter++;
},
incM(state) {
state.messages[1].counter++;
}
};
const state = {
threads: {
1: { counter: 0 }
},
messages: {
1: { counter: 0 }
}
};
const store = new Store({ state, mutations });
const curState = store.state;
const threads = state.threads;
const messages = state.messages;
const thread = state.threads[1];
const message = state.messages[1];
expect(store.state.threads[1].counter).toBe(0);
expect(store.state.messages[1].counter).toBe(0);
store.commit("incT", {});
expect(store.state.threads[1].counter).toBe(1);
expect(store.state.messages[1].counter).toBe(0);
expect(store.state.threads[1]).not.toBe(thread);
expect(store.state.messages[1]).toBe(message);
expect(store.state.threads).toBe(threads);
expect(store.state.messages).toBe(messages);
expect(store.state).toBe(curState);
const newThread = curState.threads[1];
store.commit("incM", {});
expect(store.state.threads[1].counter).toBe(1);
expect(store.state.messages[1].counter).toBe(1);
expect(store.state.threads[1]).toBe(newThread);
expect(store.state.messages[1]).not.toBe(message);
expect(store.state.threads).toBe(threads);
expect(store.state.messages).toBe(messages);
expect(store.state).toBe(curState);
});
test("aku reactive store state 5", async () => {
const mutations = {
inc(state) {
state.counter++;
},
incT(state) {
state.threads[1].counter++;
}
};
const state = {
threads: {
1: { counter: 0 }
},
counter: 0
};
const store = new Store({ state, mutations });
const curState = store.state;
const threads = state.threads;
const thread = state.threads[1];
expect(store.state.counter).toBe(0);
expect(store.state.threads[1].counter).toBe(0);
store.commit("inc", {});
expect(store.state.counter).toBe(1);
expect(store.state.threads[1].counter).toBe(0);
expect(store.state.threads[1]).toBe(thread);
expect(store.state.threads).toBe(threads);
expect(store.state).not.toBe(curState);
const newCurState = store.state;
store.commit("incT", {});
expect(store.state.counter).toBe(1);
expect(store.state.threads[1].counter).toBe(1);
expect(store.state.threads[1]).not.toBe(thread);
expect(store.state.threads).toBe(threads);
expect(store.state).toBe(newCurState);
});
test("aku reactive store state 6", async () => {
const mutations = {
inc1(state) {
state.threads[1].c1++;
},
inc2(state) {
state.threads[1].c2++;
}
};
const state = {
threads: {
1: { c1: 0, c2: 0 }
}
};
const store = new Store({ state, mutations });
const curState = store.state;
const threads = state.threads;
const thread = state.threads[1];
expect(store.state.threads[1].c1).toBe(0);
expect(store.state.threads[1].c2).toBe(0);
store.commit("inc1", {});
expect(store.state.threads[1].c1).toBe(1);
expect(store.state.threads[1].c2).toBe(0);
expect(store.state.threads[1]).not.toBe(thread);
expect(store.state.threads).toBe(threads);
expect(store.state).toBe(curState);
const newThread = store.state.threads[1];
store.commit("inc2", {});
expect(store.state.threads[1].c1).toBe(1);
expect(store.state.threads[1].c2).toBe(1);
expect(store.state.threads[1]).not.toBe(newThread);
expect(store.state.threads).toBe(threads);
expect(store.state).toBe(curState);
});
test("aku reactive store state 7", async () => {
const mutations = {
register(state) {
state.threads[1].messages.push(1);
}
};
const state = {
threads: {
1: {
messages: []
}
},
messages: {
1: {}
}
};
const store = new Store({ state, mutations });
const curState = store.state;
const threads = state.threads;
const messages = state.messages;
const thread = state.threads[1];
const threadMessages = state.threads[1].messages;
const message = state.messages[1];
expect(store.state.threads[1].messages.length).toBe(0);
store.commit("register", {});
expect(store.state.threads[1].messages.length).toBe(1);
expect(store.state.threads[1].messages[0]).toBe(1);
expect(store.state.threads[1].messages).not.toBe(threadMessages);
expect(store.state.threads[1]).toBe(thread);
expect(store.state.threads).toBe(threads);
expect(store.state.messages[1]).toBe(message);
expect(store.state.messages).toBe(messages);
expect(store.state).toBe(curState);
}); });
}); });
@@ -475,7 +261,11 @@ describe("updates triggered by the store", () => {
inc(state, delta) { inc(state, delta) {
state.n += delta; state.n += delta;
}, },
noop() {} noop() {},
noop2(state) {
const val = state.n;
state.n = val;
}
}; };
const store = new Store({ state, mutations }); const store = new Store({ state, mutations });
store.on("update", null, () => updateCounter++); store.on("update", null, () => updateCounter++);
@@ -483,9 +273,14 @@ describe("updates triggered by the store", () => {
store.commit("noop"); store.commit("noop");
await nextMicroTick(); await nextMicroTick();
expect(updateCounter).toBe(0); expect(updateCounter).toBe(0);
store.commit("inc", 50); store.commit("inc", 50);
await nextMicroTick(); await nextMicroTick();
expect(updateCounter).toBe(1); expect(updateCounter).toBe(1);
store.commit("noop2");
await nextMicroTick();
expect(updateCounter).toBe(1);
}); });
}); });
-12
View File
@@ -5,7 +5,6 @@ import {
memoize, memoize,
debounce, debounce,
findInTree, findInTree,
shallowEqual,
patch, patch,
unpatch unpatch
} from "../src/utils"; } from "../src/utils";
@@ -95,17 +94,6 @@ describe("findInTree", () => {
}); });
}); });
describe("shallowEqual", () => {
test("simple comparisons", () => {
const obj1 = {};
expect(shallowEqual(obj1, obj1)).toBe(true);
expect(shallowEqual({}, {})).toBe(true);
expect(shallowEqual({ a: 1 }, {})).toBe(false);
expect(shallowEqual({ a: 1 }, { a: 1 })).toBe(true);
expect(shallowEqual({ a: 1 }, ["a"])).toBe(false);
});
});
describe("patch/unpatch", () => { describe("patch/unpatch", () => {
test("can monkey patch a class", () => { test("can monkey patch a class", () => {
class Test { class Test {