withoutReactivity

src/runtime/component_node.ts

@@ -7,7 +7,7 @@ import { Component, ComponentConstructor, Props } from "./component";
 import { fibersInError } from "./error_handling";
 import { makeExecutionContext } from "./executionContext";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import { reactive, targets } from "./reactivity";
+import { reactive, targets, withoutReactivity } from "./reactivity";
 import { STATUS } from "./status";
 
 let currentNode: ComponentNode | null = null;
@@ -149,7 +149,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;
@@ -272,8 +276,11 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       }
     }
     currentNode = null;
-    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    let prom: Promise<any[]>;
-    await prom;
+    withoutReactivity(() => {
+      prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    });
+    await prom!;
     if (fiber !== this.fiber) {
       return;
     }

src/runtime/executionContext.ts

@@ -1,10 +1,11 @@
 import { ExecutionContext } from "../common/types";
 
-export const executionContext: ExecutionContext[] = [];
+export const executionContexts: ExecutionContext[] = [];
+(window as any).executionContexts = executionContexts;
 // export const scheduledContexts: Set<ExecutionContext> = new Set();
 
 export function getExecutionContext() {
-  return executionContext[executionContext.length - 1];
+  return executionContexts[executionContexts.length - 1];
 }
 
 export function makeExecutionContext({
@@ -29,9 +30,9 @@ export function makeExecutionContext({
 }
 
 export function pushExecutionContext(context: ExecutionContext) {
-  executionContext.push(context);
+  executionContexts.push(context);
 }
 
 export function popExecutionContext() {
-  executionContext.pop();
+  executionContexts.pop();
 }

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, effect } 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 {

src/runtime/reactivity.ts

@@ -266,6 +266,16 @@ function unsubscribeChildEffect(
   }
   executionContext.meta.children.length = 0;
 }
+export function withoutReactivity<T extends (...args: any[]) => any>(fn: T): ReturnType<T> {
+  pushExecutionContext(undefined!);
+  let r: ReturnType<T>;
+  try {
+    r = fn();
+  } finally {
+    popExecutionContext();
+  }
+  return r;
+}
 export function effect(fn: Function) {
   let parent = getExecutionContext();
   // todo: is it useful?