wip

src/component/component_node.ts

@@ -1,3 +1,4 @@
+import { useState } from "../reactivity";
 import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
 import { Component, Props } from "./component";
@@ -15,6 +16,8 @@ import { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";
 import { applyStyles } from "./style";
 
+let currentNode: ComponentNode | null = null;
+
 function arePropsDifferent(props1: Props, props2: Props): boolean {
   for (let k in props1) {
     if (props1[k] !== props2[k]) {
@@ -75,7 +78,6 @@ export function component(
 //  Component VNode
 // -----------------------------------------------------------------------------
 
-let currentNode: ComponentNode | null = null;
 
 export function getCurrent(): ComponentNode | null {
   return currentNode;
@@ -117,6 +119,11 @@ export class ComponentNode<T extends typeof Component = typeof Component>
     applyDefaultProps(props, C);
     const env = (parent && parent.childEnv) || app.env;
     this.childEnv = env;
+    if (props) {
+      props = useState(props);
+    } else {
+      console.trace()
+    }
     this.component = new C(props, env, this) as any;
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     if (C.style) {

tests/components/rendering.test.ts

@@ -53,7 +53,7 @@ describe("rendering semantics", () => {
     class Child extends Component {
       static template = xml`child`;
       setup() {
-        onRender(() => childN++);
+        onRendered(() => childN++);
       }
     }
 
@@ -66,7 +66,7 @@ describe("rendering semantics", () => {
 
       state = { value: "A" };
       setup() {
-        onRender(() => parentN++);
+        onRendered(() => parentN++);
       }
     }