Serenity

package.json

@@ -22,7 +22,7 @@
     "build:devtools-chrome": "npm run dev:devtools-chrome -- --config-env=production",
     "build:devtools-firefox": "npm run dev:devtools-firefox -- --config-env=production",
     "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
+    "test:debug": "node node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
     "test:watch": "jest --watch",
     "playground:serve": "python3 tools/playground_server.py || python tools/playground_server.py",
     "playground": "npm run build && npm run playground:serve",

signal.md

@@ -0,0 +1,18 @@
+# encountered issues
+## dropdown issue
+- there was a problem that writing in a state while the effect was updated.
+  - the tracking of signal being written were dropped because we cleared it
+    after re-running the effect that made a write.
+  - solution: clear the tracked signal before re-executing the effects
+- reading signal A while also writing signal A makes an infinite loop
+  - current solution: use toRaw in order to not track the read
+  - possible better solution to explore: do not track read if there is a write in a effect.
+## website issue
+- a rpc request was made on onWillStart, onWillStart was tracking reads. (see WebsiteBuilderClientAction)
+  - The read subsequently made a write, that re-triggered the onWillStart.
+  - A similar situation happened with onWillUpdateProps (see Transition)
+  - solution: prevent tracking reads in onWillStart and onWillUpdateProps
+
+# future
+- worker for computation?
+- cap'n web

src/common/types.ts

@@ -1,4 +1,28 @@
+export type ExecutionContext = {
+  onReadAtom: (atom: Atom) => void;
+  unsubcribe?: (scheduledContexts: Set<ExecutionContext>) => void;
+  update?: Function;
+  atoms?: Set<Atom>;
+  meta?: any;
+  // getParent: () => ExecutionContext | undefined;
+  // getChildren: () => ExecutionContext[];
+  // schedule: () => void;
+};
+
 export type customDirectives = Record<
   string,
   (node: Element, value: string, modifier: string[]) => void
 >;
+
+export type Atom = {
+  executionContexts: Set<ExecutionContext>;
+  dependents: Set<DerivedAtom>;
+  getValue: () => any;
+};
+
+export type OldValue = any;
+
+export type DerivedAtom = Atom & {
+  dependencies: Map<Atom, OldValue>;
+  computed: boolean;
+};

src/runtime/cancellableContext.ts

@@ -0,0 +1,46 @@
+export type TaskContext = { isCancelled: boolean; cancel: () => void; meta: Record<string, any> };
+
+export const taskContextStack: TaskContext[] = [];
+
+export function getTaskContext() {
+  return taskContextStack[taskContextStack.length - 1];
+}
+
+export function makeTaskContext(): TaskContext {
+  let isCancelled = false;
+  return {
+    get isCancelled() {
+      return isCancelled;
+    },
+    cancel() {
+      isCancelled = true;
+    },
+    meta: {},
+  };
+}
+
+export function useTaskContext(ctx?: TaskContext) {
+  ctx ??= makeTaskContext();
+  taskContextStack.push(ctx);
+  return {
+    ctx,
+    cleanup: () => {
+      taskContextStack.pop();
+    },
+  };
+}
+
+export function pushTaskContext(context: TaskContext) {
+  taskContextStack.push(context);
+}
+
+export function popTaskContext() {
+  taskContextStack.pop();
+}
+
+export function taskEffect(fn: Function) {
+  const { ctx, cleanup } = useTaskContext();
+  fn();
+  cleanup();
+  return ctx;
+}

src/runtime/component_node.ts

@@ -1,12 +1,13 @@
+import { OwlError } from "../common/owl_error";
+import { Atom, ExecutionContext } from "../common/types";
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
+import { makeTaskContext, TaskContext } from "./cancellableContext";
 import { Component, ComponentConstructor, Props } from "./component";
 import { fibersInError } from "./error_handling";
-import { OwlError } from "../common/owl_error";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
+import { addAtomToContext, reactive, targets, withoutReactivity } from "./reactivity";
 import { STATUS } from "./status";
-import { batched, Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -42,7 +43,7 @@ function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>)
 // Integration with reactivity system (useState)
 // -----------------------------------------------------------------------------
 
-const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
+// 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
@@ -54,15 +55,7 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  * @see reactive
  */
 export function useState<T extends object>(state: T): T {
-  const node = getCurrent();
-  let render = batchedRenderFunctions.get(node)!;
-  if (!render) {
-    render = batched(node.render.bind(node, false));
-    batchedRenderFunctions.set(node, render);
-    // manual implementation of onWillDestroy to break cyclic dependency
-    node.willDestroy.push(clearReactivesForCallback.bind(null, render));
-  }
-  return reactive(state, render);
+  return reactive(state);
 }
 
 // -----------------------------------------------------------------------------
@@ -96,6 +89,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
   willPatch: LifecycleHook[] = [];
   patched: LifecycleHook[] = [];
   willDestroy: LifecycleHook[] = [];
+  taskContext: TaskContext;
+  executionContext: ExecutionContext;
 
   constructor(
     C: ComponentConstructor<P, E>,
@@ -109,23 +104,34 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.parent = parent;
     this.props = props;
     this.parentKey = parentKey;
+    this.taskContext = makeTaskContext();
+    this.executionContext = {
+      meta: this,
+      update: () => {
+        this.render(false);
+      },
+      onReadAtom: (atom: Atom) => addAtomToContext(atom, this.executionContext),
+      atoms: new Set<Atom>(),
+    };
     const defaultProps = C.defaultProps;
     props = Object.assign({}, props);
     if (defaultProps) {
       applyDefaultProps(props, defaultProps);
     }
     const env = (parent && parent.childEnv) || app.env;
     this.childEnv = env;
-    for (const key in props) {
-      const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
-        props[key] = useState(prop);
-      }
-    }
+    // for (const key in props) {
+    //   const prop = props[key];
+    //   if (prop && typeof prop === "object" && targets.has(prop)) {
+    //     props[key] = useState(prop);
+    //   }
+    // }
     this.component = new C(props, env, this);
     const ctx = Object.assign(Object.create(this.component), { this: this.component });
     this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
-    this.component.setup();
+    withoutReactivity(() => {
+      this.component.setup();
+    });
     currentNode = null;
   }
 
@@ -142,7 +148,11 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
     const component = this.component;
     try {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
+      let prom: Promise<any[]>;
+      withoutReactivity(() => {
+        prom = Promise.all(this.willStart.map((f) => f.call(component)));
+      });
+      await prom!;
     } catch (e) {
       this.app.handleError({ node: this, error: e });
       return;
@@ -258,15 +268,18 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
 
     currentNode = this;
-    for (const key in props) {
-      const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
-        props[key] = useState(prop);
-      }
-    }
+    // for (const key in props) {
+    //   const prop = props[key];
+    //   if (prop && typeof prop === "object" && targets.has(prop)) {
+    //     props[key] = useState(prop);
+    //   }
+    // }
     currentNode = null;
-    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
-    await prom;
+    let prom: Promise<any[]>;
+    withoutReactivity(() => {
+      prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    });
+    await prom!;
     if (fiber !== this.fiber) {
       return;
     }
@@ -384,8 +397,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     return this.component.constructor.name;
   }
 
-  get subscriptions(): ReturnType<typeof getSubscriptions> {
-    const render = batchedRenderFunctions.get(this);
-    return render ? getSubscriptions(render) : [];
-  }
+  // get subscriptions(): ReturnType<typeof getSubscriptions> {
+  //   const render = batchedRenderFunctions.get(this);
+  //   return render ? getSubscriptions(render) : [];
+  // }
 }

src/runtime/executionContext.ts

@@ -0,0 +1,26 @@
+import { ExecutionContext } from "../common/types";
+
+export const executionContexts: ExecutionContext[] = [];
+(window as any).executionContexts = executionContexts;
+// export const scheduledContexts: Set<ExecutionContext> = new Set();
+
+export function getExecutionContext() {
+  return executionContexts[executionContexts.length - 1];
+}
+
+export function pushExecutionContext(context: ExecutionContext) {
+  executionContexts.push(context);
+}
+
+export function popExecutionContext() {
+  executionContexts.pop();
+}
+
+// export function makeExecutionContext({ update, meta }: { update: () => void; meta?: any }) {
+//   const executionContext: ExecutionContext = {
+//     update,
+//     atoms: new Set(),
+//     meta: meta || {},
+//   };
+//   return executionContext;
+// }

src/runtime/fibers.ts

@@ -3,6 +3,8 @@ import type { ComponentNode } from "./component_node";
 import { fibersInError } from "./error_handling";
 import { OwlError } from "../common/owl_error";
 import { STATUS } from "./status";
+import { popTaskContext, pushTaskContext } from "./cancellableContext";
+import { popExecutionContext, pushExecutionContext } from "./executionContext";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
   let current = node.fiber;
@@ -133,12 +135,16 @@ export class Fiber {
     const node = this.node;
     const root = this.root;
     if (root) {
+      pushTaskContext(node.taskContext);
+      pushExecutionContext(node.executionContext);
       try {
         (this.bdom as any) = true;
         this.bdom = node.renderFn();
       } catch (e) {
         node.app.handleError({ node, error: e });
       }
+      popExecutionContext();
+      popTaskContext();
       root.setCounter(root.counter - 1);
     }
   }

src/runtime/hooks.ts

@@ -1,5 +1,6 @@
 import type { Env } from "./app";
 import { getCurrent } from "./component_node";
+import { popExecutionContext, pushExecutionContext } from "./executionContext";
 import { onMounted, onPatched, onWillUnmount } from "./lifecycle_hooks";
 import { inOwnerDocument } from "./utils";
 
@@ -86,22 +87,43 @@ export function useEffect<T extends unknown[]>(
   effect: Effect<T>,
   computeDependencies: () => [...T] = () => [NaN] as never
 ) {
+  const context = getCurrent().component.__owl__.executionContext;
   let cleanup: (() => void) | void;
   let dependencies: T;
+
+  const runEffect = () => {
+    pushExecutionContext(context);
+    try {
+      cleanup = effect(...dependencies);
+    } finally {
+      popExecutionContext();
+    }
+  };
+  const computeDependenciesWithContext = () => {
+    pushExecutionContext(context);
+    let r: any;
+    try {
+      r = computeDependencies();
+    } finally {
+      popExecutionContext();
+    }
+    return r;
+  };
+
   onMounted(() => {
-    dependencies = computeDependencies();
-    cleanup = effect(...dependencies);
+    dependencies = computeDependenciesWithContext();
+    runEffect();
   });
 
   onPatched(() => {
-    const newDeps = computeDependencies();
-    const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
+    const newDeps = computeDependenciesWithContext();
+    const shouldReapply = newDeps.some((val: any, i: number) => val !== dependencies[i]);
     if (shouldReapply) {
       dependencies = newDeps;
       if (cleanup) {
         cleanup();
       }
-      cleanup = effect(...dependencies);
+      runEffect();
     }
   });
 

src/runtime/index.ts

@@ -39,7 +39,7 @@ export { Component } from "./component";
 export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
-export { reactive, markRaw, toRaw } from "./reactivity";
+export { reactive, markRaw, toRaw, effect, withoutReactivity } from "./reactivity";
 export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
 export { batched, EventBus, htmlEscape, whenReady, loadFile, markup } from "./utils";
 export {