[WIP] temp

Author: Goaman

src/common/types.ts

@@ -1,28 +1,38 @@
+export type customDirectives = Record<
+  string,
+  (node: Element, value: string, modifier: string[]) => void
+>;
+
+// Reactivity system
+
 export enum ComputationState {
   EXECUTED = 0,
   STALE = 1,
   PENDING = 2,
 }
-
 export type Computation<T = any> = {
   compute?: () => T;
   state: ComputationState;
   sources: Set<Atom | Derived<any, any>>;
+  isEager?: boolean;
   isDerived?: boolean;
   value: T; // for effects, this is the cleanup function
   childrenEffect?: Computation[]; // only for effects
-};
-
-export type customDirectives = Record<
-  string,
-  (node: Element, value: string, modifier: string[]) => void
->;
+} & Opts;
 
+export type Opts = {
+  name?: string;
+};
 export type Atom<T = any> = {
   value: T;
   observers: Set<Computation>;
-};
+} & Opts;
 
 export interface Derived<Prev, Next = Prev> extends Atom<Next>, Computation<Next> {}
 
 export type OldValue = any;
+
+export type Getter<V> = () => V | null;
+export type Setter<T, V> = (this: T, value: V) => void;
+export type MakeGetSetReturn<T, V> = readonly [Getter<V>] | readonly [Getter<V>, Setter<T, V>];
+export type MakeGetSet<T, V> = (obj: T) => MakeGetSetReturn<T, V>;

src/runtime/component_node.ts

@@ -2,7 +2,6 @@ import { OwlError } from "../common/owl_error";
 import { Atom, Computation, ComputationState } 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 { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
@@ -44,7 +43,6 @@ function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>)
 // Integration with reactivity system (useState)
 // -----------------------------------------------------------------------------
 
-// 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
@@ -90,7 +88,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
   willPatch: LifecycleHook[] = [];
   patched: LifecycleHook[] = [];
   willDestroy: LifecycleHook[] = [];
-  taskContext: TaskContext;
   signalComputation: Computation;
 
   constructor(
@@ -105,15 +102,11 @@ 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.signalComputation = {
-      // data: this,
       value: undefined,
-      compute: () => {
-        this.render(false);
-      },
+      compute: () => this.render(false),
       sources: new Set<Atom>(),
-      state: ComputationState.EXECUTED,
+      state: ComputationState.STALE,
     };
     const defaultProps = C.defaultProps;
     props = Object.assign({}, props);
@@ -122,19 +115,13 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
     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);
-    //   }
-    // }
-    const currentContext = getCurrentComputation();
+    const previousComputation = getCurrentComputation();
     setComputation(this.signalComputation);
     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();
-    setComputation(currentContext);
+    setComputation(previousComputation);
     currentNode = null;
   }
 
@@ -151,11 +138,10 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
     const component = this.component;
     try {
-      let prom: Promise<any[]>;
-      withoutReactivity(() => {
-        prom = Promise.all(this.willStart.map((f) => f.call(component)));
-      });
-      await prom!;
+      const previousComputation = getCurrentComputation();
+      setComputation(undefined);
+      await Promise.all(this.willStart.map((f) => withoutReactivity(() => f.call(component))));
+      setComputation(previousComputation);
     } catch (e) {
       this.app.handleError({ node: this, error: e });
       return;
@@ -270,11 +256,11 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       applyDefaultProps(props, defaultProps);
     }
 
-    let prom: Promise<any[]>;
-    withoutReactivity(() => {
-      prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
-    });
-    await prom!;
+    const previouwsComputation = getCurrentComputation();
+    setComputation(undefined);
+    await Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    setComputation(previouwsComputation);
+
     if (fiber !== this.fiber) {
       return;
     }
@@ -391,9 +377,4 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
   get name(): string {
     return this.component.constructor.name;
   }
-
-  // get subscriptions(): ReturnType<typeof getSubscriptions> {
-  //   const render = batchedRenderFunctions.get(this);
-  //   return render ? getSubscriptions(render) : [];
-  // }
 }

src/runtime/fibers.ts

@@ -3,8 +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 { runWithComputation } from "./signals";
+import { ComputationState } from "../common/types";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
   let current = node.fiber;
@@ -135,16 +135,16 @@ export class Fiber {
     const node = this.node;
     const root = this.root;
     if (root) {
-      pushTaskContext(node.taskContext);
+      // todo: should use updateComputation somewhere else.
       runWithComputation(node.signalComputation, () => {
         try {
           (this.bdom as any) = true;
           this.bdom = node.renderFn();
         } catch (e) {
           node.app.handleError({ node, error: e });
         }
+        node.signalComputation.state = ComputationState.EXECUTED;
       });
-      popTaskContext();
       root.setCounter(root.counter - 1);
     }
   }

src/runtime/index.ts

@@ -32,15 +32,14 @@ export const blockDom = {
   html,
   comment,
 };
-
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 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 { effect, withoutReactivity } from "./signals";
+export { effect, withoutReactivity, derived } from "./signals";
 export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
 export { batched, EventBus, htmlEscape, whenReady, loadFile, markup } from "./utils";
 export {

src/runtime/signals.ts

@@ -1,10 +1,30 @@
-import { Atom, Computation, ComputationState, Derived } from "../common/types";
+import { Atom, Computation, ComputationState, Derived, Opts } from "../common/types";
 import { batched } from "./utils";
 
 let Effects: Computation[];
-let CurrentComputation: Computation;
+let CurrentComputation: Computation | undefined;
 
-export function effect<T>(fn: () => T) {
+export function signal<T>(value: T, opts?: Opts) {
+  const atom: Atom<T> = {
+    value,
+    observers: new Set(),
+    name: opts?.name,
+  };
+  const read = () => {
+    onReadAtom(atom);
+    return atom.value;
+  };
+  const write = (newValue: T | ((prevValue: T) => T)) => {
+    if (typeof newValue === "function") {
+      newValue = (newValue as (prevValue: T) => T)(atom.value);
+    }
+    if (Object.is(atom.value, newValue)) return;
+    atom.value = newValue;
+    onWriteAtom(atom);
+  };
+  return [read, write] as const;
+}
+export function effect<T>(fn: () => T, opts?: Opts) {
   const effectComputation: Computation = {
     state: ComputationState.STALE,
     value: undefined,
@@ -18,8 +38,9 @@ export function effect<T>(fn: () => T) {
       return fn();
     },
     sources: new Set(),
-    childrenEffect: [],
+    name: opts?.name,
   };
+  effectComputation.childrenEffect = [];
   CurrentComputation?.childrenEffect?.push?.(effectComputation);
   updateComputation(effectComputation);
 
@@ -33,7 +54,22 @@ export function effect<T>(fn: () => T) {
     CurrentComputation = previousComputation!;
   };
 }
-export function derived<T>(fn: () => T): () => T {
+export function computed<T>(fn: () => T, opts?: Opts) {
+  // todo: handle cleanup
+  let computedComputation: Computation = {
+    state: ComputationState.STALE,
+    sources: new Set(),
+    isEager: true,
+    compute: () => {
+      return fn();
+    },
+    value: undefined,
+    name: opts?.name,
+  };
+  updateComputation(computedComputation);
+}
+export function derived<T>(fn: () => T, opts?: Opts): () => T {
+  // todo: handle cleanup
   let derivedComputation: Derived<any, any>;
   return () => {
     derivedComputation ??= {
@@ -46,6 +82,7 @@ export function derived<T>(fn: () => T): () => T {
       isDerived: true,
       value: undefined,
       observers: new Set<Computation>(),
+      name: opts?.name,
     };
     onDerived?.(derivedComputation);
     updateComputation(derivedComputation);
@@ -96,17 +133,18 @@ export function withoutReactivity<T extends (...args: any[]) => any>(fn: T): Ret
 export function getCurrentComputation() {
   return CurrentComputation;
 }
-export function setComputation(computation: Computation) {
+export function setComputation(computation: Computation | undefined) {
   CurrentComputation = computation;
 }
+// todo: should probably use updateComputation instead.
 export function runWithComputation<T>(computation: Computation, fn: () => T): T {
   const previousComputation = CurrentComputation;
   CurrentComputation = computation;
   let result: T;
   try {
     result = fn();
   } finally {
-    CurrentComputation = previousComputation!;
+    CurrentComputation = previousComputation;
   }
   return result;
 }

tests/components/lifecycle.test.ts

@@ -995,7 +995,7 @@ describe("lifecycle hooks", () => {
     `);
   });
 
-  test("onWillRender", async () => {
+  test.only("onWillRender", async () => {
     const def = makeDeferred();
 
     class Child extends Component {

tests/components/props_validation.test.ts

@@ -682,29 +682,6 @@ describe("props validation", () => {
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
   });
 
-  test("props validation does not cause additional subscription", async () => {
-    let obj = {
-      value: 1,
-      otherValue: 2,
-    };
-    class Child extends Component {
-      static props = {
-        obj: { type: Object, shape: { value: Number, otherValue: Number } },
-      };
-      static template = xml`<t t-esc="props.obj.value"/>`;
-    }
-    class Parent extends Component {
-      static template = xml`<Child obj="obj"/><t t-esc="obj.otherValue"/>`;
-      static components = { Child };
-
-      obj = useState(obj);
-    }
-    const app = new App(Parent, { test: true });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("12");
-    // expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
-  });
-
   test("props are validated whenever component is updated", async () => {
     let error: Error;
     class SubComp extends Component {

tests/helpers.ts

@@ -20,13 +20,20 @@ import { TemplateSet, globalTemplates } from "../src/runtime/template_set";
 import { BDom } from "../src/runtime/blockdom";
 import { compile } from "../src/compiler";
 import { OwlError } from "../src/common/owl_error";
+import { derived, effect } from "../src/runtime/signals";
 
 const mount = blockDom.mount;
 
 export function nextMicroTick(): Promise<void> {
   return Promise.resolve();
 }
 
+// todo: investigate why two ticks are needed
+export async function waitScheduler() {
+  await nextMicroTick();
+  await nextMicroTick();
+}
+
 let lastFixture: any = null;
 
 export function makeTestFixture() {
@@ -47,20 +54,20 @@ export async function nextTick(): Promise<void> {
   await new Promise((resolve) => requestAnimationFrame(resolve));
 }
 
-interface Deferred extends Promise<any> {
-  resolve(val?: any): void;
-  reject(val?: any): void;
+interface Deferred<T = any> extends Promise<T> {
+  resolve(val?: T): void;
+  reject(val?: T): void;
 }
 
-export function makeDeferred(): Deferred {
+export function makeDeferred<T = any>(): Deferred<T> {
   let resolve, reject;
   let def = new Promise((_resolve, _reject) => {
     resolve = _resolve;
     reject = _reject;
   });
   (def as any).resolve = resolve;
   (def as any).reject = reject;
-  return <Deferred>def;
+  return <Deferred<T>>def;
 }
 
 export function trim(str: string): string {
@@ -293,8 +300,6 @@ declare global {
   }
 }
 
-import { derived, effect } from "../src/runtime/signals";
-
 export type SpyDerived<T> = (() => T) & { spy: jest.Mock<any, T[]> };
 export function spyDerived<T>(fn: () => T): SpyDerived<T> {
   const spy = jest.fn(fn);