mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] reactivity: overhaul reactivity system
This commit makes the reactivity system more fine grained and makes it more eager to stop observing keys or objects when they are modified, this results in fewer "false positive" notifications.
This commit is contained in:
Samuel Degueldre
committed by
Aaron Bohy
Aaron Bohy
parent
5d4a38ad0f
commit
a400fc5e69
@@ -72,7 +72,9 @@ export function getCurrent(): ComponentNode | null {
|
||||
|
||||
type LifecycleHook = Function;
|
||||
|
||||
export class ComponentNode<T extends typeof Component = any> implements VNode<ComponentNode> {
|
||||
export class ComponentNode<T extends typeof Component = typeof Component>
|
||||
implements VNode<ComponentNode>
|
||||
{
|
||||
el?: HTMLElement | Text | undefined;
|
||||
app: App;
|
||||
fiber: Fiber | null = null;
|
||||
|
||||
@@ -26,7 +26,7 @@ function _handleError(node: ComponentNode | null, error: any, isFirstRound = fal
|
||||
h(error);
|
||||
propagate = false;
|
||||
} catch (e) {
|
||||
error = e as Error;
|
||||
error = e;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+221
-258
@@ -1,132 +1,28 @@
|
||||
import { ComponentNode, getCurrent } from "./component/component_node";
|
||||
import { onWillUnmount } from "./component/lifecycle_hooks";
|
||||
import { ComponentNode, getCurrent } from "./component/component_node";
|
||||
|
||||
type Observer = ComponentNode | Function;
|
||||
type Atom = any; // proxy linked to a unique observer and source
|
||||
type Source = any; // trackable that is not an atom
|
||||
// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
|
||||
const TARGET = Symbol("Target");
|
||||
// Special key to subscribe to, to be notified of key creation/deletion
|
||||
const KEYCHANGES = Symbol("Key changes");
|
||||
|
||||
const sourceAtoms: WeakMap<Source, Map<any, ObserverSet>> = new WeakMap();
|
||||
const observerSourceAtom: WeakMap<Observer, Map<any, Atom>> = new WeakMap();
|
||||
type ObjectKey = string | number | symbol;
|
||||
type Target = object;
|
||||
type Callback = () => void;
|
||||
type Reactive<T extends Target = Target> = T & {
|
||||
[TARGET]: any;
|
||||
};
|
||||
|
||||
const SOURCE = Symbol("source");
|
||||
const OBSERVER = Symbol("observer");
|
||||
const KEYS = Symbol("keys");
|
||||
const ROOT = Symbol("root");
|
||||
const SEED = Symbol("Seed");
|
||||
|
||||
export function observe(source: any, observer: Observer): [Atom, Function] {
|
||||
if (!isTrackable(source)) {
|
||||
throw new Error("First argument is not trackable");
|
||||
}
|
||||
const unregisterObserver = registerObserver(observer);
|
||||
const newAtom = atom(source, observer);
|
||||
return [newAtom, unregisterObserver];
|
||||
}
|
||||
|
||||
function atom(source: any, observer: Observer) {
|
||||
return _atom(source, observer, true);
|
||||
}
|
||||
|
||||
function _atom(source: any, observer: Observer, seed = false) {
|
||||
if (isTrackable(source) && observerSourceAtom.has(observer)) {
|
||||
source = (source as any)[SOURCE] || source;
|
||||
const oldAtom = observerSourceAtom.get(observer)!.get(source);
|
||||
if (oldAtom) {
|
||||
if (seed) {
|
||||
oldAtom[SEED] = true;
|
||||
}
|
||||
return oldAtom;
|
||||
}
|
||||
if (!sourceAtoms.get(source)) {
|
||||
sourceAtoms.set(source, new Map([[ROOT, new ObserverSet()]]));
|
||||
}
|
||||
const newAtom = createAtom(source, observer);
|
||||
if (seed) {
|
||||
newAtom[SEED] = true;
|
||||
}
|
||||
observerSourceAtom.get(observer)!.set(source, newAtom);
|
||||
sourceAtoms.get(source)!.get(ROOT)!.add(newAtom);
|
||||
return newAtom;
|
||||
}
|
||||
return source;
|
||||
}
|
||||
|
||||
function createAtom(source: Source, observer: Observer): Atom {
|
||||
const keys: Set<any> = new Set();
|
||||
let seed: boolean = false;
|
||||
const newAtom: Atom = new Proxy(source as any, {
|
||||
set(target: any, key: any, value: any): boolean {
|
||||
if (key === SEED) {
|
||||
seed = value;
|
||||
return true;
|
||||
}
|
||||
if (!(key in target)) {
|
||||
target[key] = value;
|
||||
notify(sourceAtoms.get(source)!.get(ROOT)!);
|
||||
return true;
|
||||
}
|
||||
const current = target[key];
|
||||
if (current !== value) {
|
||||
target[key] = value;
|
||||
const observerSet = sourceAtoms.get(source)!.get(key);
|
||||
if (observerSet) {
|
||||
const clean = isTrackable(current);
|
||||
notify(observerSet, clean);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
deleteProperty(target: any, key: string): boolean {
|
||||
if (key in target) {
|
||||
const current = target[key];
|
||||
delete target[key];
|
||||
// notify source observers
|
||||
const clean = isTrackable(current);
|
||||
notify(sourceAtoms.get(source)!.get(ROOT)!, clean);
|
||||
const atoms = sourceAtoms.get(source)!;
|
||||
if (atoms.has(key)) {
|
||||
// clear source-key observers
|
||||
for (const atom of atoms.get(key)!) {
|
||||
atom[KEYS].delete(key);
|
||||
}
|
||||
atoms.delete(key);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
get(target: any, key: any, proxy: any): any {
|
||||
switch (key) {
|
||||
case OBSERVER:
|
||||
return observer;
|
||||
case SOURCE:
|
||||
return source;
|
||||
case KEYS:
|
||||
return keys;
|
||||
case SEED:
|
||||
return seed;
|
||||
default:
|
||||
const value = target[key];
|
||||
// register observer to source-key
|
||||
if (!keys.has(key) && observerSourceAtom.has(observer)) {
|
||||
const atoms = sourceAtoms.get(source)!;
|
||||
if (!atoms.has(key)) {
|
||||
atoms.set(key, new ObserverSet());
|
||||
}
|
||||
atoms.get(key)!.add(newAtom);
|
||||
keys.add(key);
|
||||
}
|
||||
//
|
||||
return _atom(value, observer);
|
||||
}
|
||||
},
|
||||
});
|
||||
return newAtom;
|
||||
}
|
||||
|
||||
function isTrackable(value: any): boolean {
|
||||
/**
|
||||
* Checks whether a given value can be made into a reactive object.
|
||||
*
|
||||
* @param value the value to check
|
||||
* @returns whether the value can be made reactive
|
||||
*/
|
||||
function canBeMadeReactive(value: any): boolean {
|
||||
return (
|
||||
value !== null &&
|
||||
typeof value === "object" &&
|
||||
value !== null &&
|
||||
!(value instanceof Date) &&
|
||||
!(value instanceof Promise) &&
|
||||
!(value instanceof String) &&
|
||||
@@ -134,144 +30,211 @@ function isTrackable(value: any): boolean {
|
||||
);
|
||||
}
|
||||
|
||||
function registerObserver(observer: Observer) {
|
||||
if (!observerSourceAtom.get(observer)) {
|
||||
observerSourceAtom.set(observer, new Map());
|
||||
const targetToKeysToCallbacks = new WeakMap<Target, Map<ObjectKey, Set<Callback>>>();
|
||||
/**
|
||||
* Observes a given key on a target with an callback. The callback will be
|
||||
* called when the given key changes on the target.
|
||||
*
|
||||
* @param target the target whose key should be observed
|
||||
* @param key the key to observe (or Symbol(KEYCHANGES) for key creation
|
||||
* or deletion)
|
||||
* @param callback the function to call when the key changes
|
||||
*/
|
||||
function observeTargetKey(target: Target, key: ObjectKey, callback: Callback): void {
|
||||
if (!targetToKeysToCallbacks.get(target)) {
|
||||
targetToKeysToCallbacks.set(target, new Map());
|
||||
}
|
||||
return unregisterObserverAtoms.bind(null, observer, false);
|
||||
const keyToCallbacks = targetToKeysToCallbacks.get(target)!;
|
||||
if (!keyToCallbacks.get(key)) {
|
||||
keyToCallbacks.set(key, new Set());
|
||||
}
|
||||
keyToCallbacks.get(key)!.add(callback);
|
||||
}
|
||||
|
||||
function unregisterObserverAtoms(observer: Observer, keepSeeds: boolean) {
|
||||
const observerAtoms = observerSourceAtom.get(observer)!;
|
||||
for (const [source, atom] of observerAtoms) {
|
||||
if (keepSeeds && atom[SEED]) {
|
||||
continue;
|
||||
}
|
||||
observerAtoms.delete(source);
|
||||
const atoms = sourceAtoms.get(source)!;
|
||||
atoms.get(ROOT)!.delete(atom);
|
||||
for (const key of atom[KEYS]) {
|
||||
atoms.get(key)!.delete(atom);
|
||||
}
|
||||
}
|
||||
if (!keepSeeds) {
|
||||
observerSourceAtom.delete(observer);
|
||||
}
|
||||
}
|
||||
|
||||
export function useState(state: any): Atom {
|
||||
const node = getCurrent()!;
|
||||
const [newAtom, unregisterObserver] = observe(state, node);
|
||||
onWillUnmount(() => unregisterObserver());
|
||||
return newAtom;
|
||||
}
|
||||
|
||||
class ObserverSet {
|
||||
nodeAntichain: Antichain = new Antichain();
|
||||
callbackSet: Set<Atom> = new Set();
|
||||
add(atom: Atom) {
|
||||
if (atom[OBSERVER] instanceof ComponentNode) {
|
||||
this.nodeAntichain.add(atom);
|
||||
} else {
|
||||
this.callbackSet.add(atom);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
delete(atom: Atom) {
|
||||
if (atom[OBSERVER] instanceof ComponentNode) {
|
||||
return this.nodeAntichain.delete(atom);
|
||||
} else {
|
||||
return this.callbackSet.delete(atom);
|
||||
}
|
||||
}
|
||||
union(other: ObserverSet) {
|
||||
for (const atom of other.nodeAntichain) {
|
||||
this.nodeAntichain.add(atom);
|
||||
}
|
||||
for (const callback of other.callbackSet) {
|
||||
this.callbackSet.add(callback);
|
||||
}
|
||||
}
|
||||
notify() {
|
||||
for (const atom of this.nodeAntichain) {
|
||||
// an observer cannot be found twice here: <= in add is based on observers
|
||||
atom[OBSERVER].render();
|
||||
}
|
||||
const called = new Set();
|
||||
for (const atom of this.callbackSet) {
|
||||
const observer = atom[OBSERVER];
|
||||
if (!called.has(observer)) {
|
||||
observer();
|
||||
}
|
||||
called.add(observer);
|
||||
}
|
||||
}
|
||||
*[Symbol.iterator]() {
|
||||
yield* this.nodeAntichain;
|
||||
yield* this.callbackSet;
|
||||
}
|
||||
}
|
||||
|
||||
// Need to optimize this!
|
||||
function isLessOrEqual(node1: ComponentNode, node2: ComponentNode) {
|
||||
let current: any = node1;
|
||||
if (current.level <= node2.level) {
|
||||
return false;
|
||||
}
|
||||
do {
|
||||
if (current === node2) {
|
||||
return true;
|
||||
}
|
||||
current = current.parent;
|
||||
} while (current);
|
||||
return false;
|
||||
}
|
||||
|
||||
// set of atoms linked to observers of type ComponentNode
|
||||
class Antichain extends Set<Atom> {
|
||||
level?: number;
|
||||
add(atom: Atom) {
|
||||
const node = atom[OBSERVER];
|
||||
if (this.level === node.level || this.level === undefined) {
|
||||
super.add(atom);
|
||||
this.level = node.level;
|
||||
return this;
|
||||
}
|
||||
let willAdd = false;
|
||||
for (const atom2 of this) {
|
||||
const node2 = atom2[OBSERVER];
|
||||
if (!willAdd && isLessOrEqual(node, node2)) {
|
||||
return this;
|
||||
} else if (isLessOrEqual(node2, node)) {
|
||||
super.delete(atom2);
|
||||
willAdd = true;
|
||||
}
|
||||
}
|
||||
super.add(atom);
|
||||
this.level = NaN;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
let toNotify: ObserverSet | null = null;
|
||||
let toClean: Set<Observer> = new Set();
|
||||
async function notify(observers: ObserverSet, clean = false) {
|
||||
if (clean) {
|
||||
for (const atom of observers) {
|
||||
toClean.add(atom[OBSERVER]);
|
||||
}
|
||||
}
|
||||
if (toNotify) {
|
||||
toNotify.union(observers);
|
||||
/**
|
||||
* Notify Reactives that are observing a given target that a key has changed on
|
||||
* the target.
|
||||
*
|
||||
* @param target target whose Reactives should be notified that the target was
|
||||
* changed.
|
||||
* @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
|
||||
* or deleted)
|
||||
*/
|
||||
function notifyReactives(target: Target, key: ObjectKey): void {
|
||||
const keyToCallbacks = targetToKeysToCallbacks.get(target);
|
||||
if (!keyToCallbacks) {
|
||||
return;
|
||||
}
|
||||
toNotify = new ObserverSet();
|
||||
toNotify.union(observers);
|
||||
await Promise.resolve();
|
||||
for (const observer of toClean) {
|
||||
unregisterObserverAtoms(observer, true);
|
||||
const callbacks = keyToCallbacks.get(key);
|
||||
if (!callbacks) {
|
||||
return;
|
||||
}
|
||||
// Loop on copy because clearReactivesForCallback will modify the set in place
|
||||
for (const callback of [...callbacks]) {
|
||||
clearReactivesForCallback(callback);
|
||||
callback();
|
||||
}
|
||||
toClean.clear();
|
||||
toNotify.notify();
|
||||
toNotify = null;
|
||||
}
|
||||
|
||||
const callbacksToTargets = new WeakMap<Callback, Set<Target>>();
|
||||
/**
|
||||
* Clears all subscriptions of the Reactives associated with a given callback.
|
||||
*
|
||||
* @param callback the callback for which the reactives need to be cleared
|
||||
*/
|
||||
function clearReactivesForCallback(callback: Callback): void {
|
||||
const targetsToClear = callbacksToTargets.get(callback);
|
||||
if (!targetsToClear) {
|
||||
return;
|
||||
}
|
||||
for (const target of targetsToClear) {
|
||||
const observedKeys = targetToKeysToCallbacks.get(target);
|
||||
if (!observedKeys) {
|
||||
continue;
|
||||
}
|
||||
for (const callbacks of observedKeys.values()) {
|
||||
callbacks.delete(callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reactiveCache = new WeakMap<Target, Map<Callback, Reactive>>();
|
||||
/**
|
||||
* Creates a reactive proxy for an object. Reading data on the reactive object
|
||||
* subscribes to changes to the data. Writing data on the object will cause the
|
||||
* notify callback to be called if there are suscriptions to that data. Nested
|
||||
* objects and arrays are automatically made reactive as well.
|
||||
*
|
||||
* Whenever you are notified of a change, all subscriptions are cleared, and if
|
||||
* you would like to be notified of any further changes, you should go read
|
||||
* the underlying data again. We assume that if you don't go read it again after
|
||||
* being notified, it means that you are no longer interested in that data.
|
||||
*
|
||||
* Subscriptions:
|
||||
* + Reading a property on an object will subscribe you to changes in the value
|
||||
* of that property.
|
||||
* + Accessing an object keys (eg with Object.keys or with `for..in`) will
|
||||
* subscribe you to the creation/deletion of keys. Checking the presence of a
|
||||
* key on the object with 'in' has the same effect.
|
||||
* - getOwnPropertyDescriptor does not currently subscribe you to the property.
|
||||
* This is a choice that was made because changing a key's value will trigger
|
||||
* this trap and we do not want to subscribe by writes. This also means that
|
||||
* Object.hasOwnProperty doesn't subscribe as it goes through this trap.
|
||||
*
|
||||
* @param target the object for which to create a reactive proxy
|
||||
* @param callback the function to call when an observed property of the
|
||||
* reactive has changed
|
||||
* @returns a proxy that tracks changes to it
|
||||
*/
|
||||
export function reactive<T extends Target>(target: T, callback: Callback): Reactive<T> {
|
||||
if (!canBeMadeReactive(target)) {
|
||||
throw new Error(`Cannot make the given value reactive`);
|
||||
}
|
||||
const originalTarget = (target as Reactive)[TARGET];
|
||||
if (originalTarget) {
|
||||
return reactive(originalTarget, callback);
|
||||
}
|
||||
if (!reactiveCache.has(target)) {
|
||||
reactiveCache.set(target, new Map());
|
||||
}
|
||||
const reactivesForTarget = reactiveCache.get(target)!;
|
||||
if (!reactivesForTarget.has(callback)) {
|
||||
const proxy = new Proxy(target, {
|
||||
get(target: any, key: ObjectKey, proxy: Reactive<T>) {
|
||||
if (key === TARGET) {
|
||||
return target;
|
||||
}
|
||||
observeTargetKey(target, key, callback);
|
||||
const value = Reflect.get(target, key, proxy);
|
||||
if (!canBeMadeReactive(value)) {
|
||||
return value;
|
||||
}
|
||||
return reactive(value, callback);
|
||||
},
|
||||
set(target, key, value, proxy) {
|
||||
const isNewKey = !Object.hasOwnProperty.call(target, key);
|
||||
const originalValue = Reflect.get(target, key, proxy);
|
||||
const ret = Reflect.set(target, key, value, proxy);
|
||||
if (isNewKey) {
|
||||
notifyReactives(target, KEYCHANGES);
|
||||
}
|
||||
// While Array length may trigger the set trap, it's not actually set by this
|
||||
// method but is updated behind the scenes, and the trap is not called with the
|
||||
// new value. We disable the "same-value-optimization" for it because of that.
|
||||
if (originalValue !== value || (Array.isArray(target) && key === "length")) {
|
||||
notifyReactives(target, key);
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
deleteProperty(target, key) {
|
||||
const ret = Reflect.deleteProperty(target, key);
|
||||
notifyReactives(target, KEYCHANGES);
|
||||
notifyReactives(target, key);
|
||||
return ret;
|
||||
},
|
||||
ownKeys(target) {
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
return Reflect.ownKeys(target);
|
||||
},
|
||||
has(target, key) {
|
||||
// TODO: this observes all key changes instead of only the presence of the argument key
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
return Reflect.has(target, key);
|
||||
},
|
||||
});
|
||||
reactivesForTarget.set(callback, proxy);
|
||||
if (!callbacksToTargets.has(callback)) {
|
||||
callbacksToTargets.set(callback, new Set());
|
||||
}
|
||||
callbacksToTargets.get(callback)!.add(target);
|
||||
}
|
||||
return reactivesForTarget.get(callback) as Reactive<T>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a batched version of a callback so that all calls to it in the same
|
||||
* microtick will only call the original callback once.
|
||||
*
|
||||
* @param callback the callback to batch
|
||||
* @returns a batched version of the original callback
|
||||
*/
|
||||
export function batched(callback: Callback): Callback {
|
||||
let called = false;
|
||||
return async () => {
|
||||
// This await blocks all calls to the callback here, then releases them sequentially
|
||||
// in the next microtick. This line decides the granularity of the batch.
|
||||
await Promise.resolve();
|
||||
if (!called) {
|
||||
called = true;
|
||||
callback();
|
||||
// wait for all calls in this microtick to fall through before resetting "called"
|
||||
// so that only the first call to the batched function calls the original callback
|
||||
await Promise.resolve();
|
||||
called = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
|
||||
/**
|
||||
* Creates a reactive object that will be observed by the current component.
|
||||
* Reading data from the returned object (eg during rendering) will cause the
|
||||
* component to subscribe to that data and be rerendered when it changes.
|
||||
*
|
||||
* @param state the state to observe
|
||||
* @returns a reactive object that will cause the component to re-render on
|
||||
* relevant changes
|
||||
* @see reactive
|
||||
*/
|
||||
export function useState<T extends object>(state: T): Reactive<T> {
|
||||
const node = getCurrent()!;
|
||||
if (!batchedRenderFunctions.has(node)) {
|
||||
batchedRenderFunctions.set(
|
||||
node,
|
||||
batched(() => node.render())
|
||||
);
|
||||
}
|
||||
const render = batchedRenderFunctions.get(node)!;
|
||||
const reactiveState = reactive(state, render);
|
||||
onWillUnmount(() => clearReactivesForCallback(render));
|
||||
return reactiveState;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,51 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Reactivity: useState concurrent renderings 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['context'][ctx['props'].key].n;
|
||||
let d2 = ctx['state'].x;
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState concurrent renderings 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ComponentC\`, {key: ctx['props'].key}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState concurrent renderings 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ComponentB\`, {key: ctx['context'].key}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
|
||||
+480
-443
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user