feat(mount)!: add effect handling in mounting

Author: plusgut

src/index.ts

@@ -1,4 +1,4 @@
-import { Signal, signal } from "@preact/signals-core";
+import { effect, Signal, signal } from "@preact/signals-core";
 import { reconcile } from "./reconciler/index";
 import { ShadowCache } from "./reconciler/utils";
 import type {
@@ -20,19 +20,22 @@ import {
 export type { ShadowElement } from "./types";
 export { active, connectedCallback, disconnectedCallback } from "./utils";
 
-export function mount(parent: HTMLElement, JSXElement: ShadowElement) {
+export function mount(
+  render: () => ShadowElement,
+  parent: HTMLElement,
+): () => void {
   const shadowResult: ShadowCache = new ShadowCache(false);
-
-  active.parentElement = parent;
-  reconcile({
-    parentElement: parent,
-    previousSibling: parent.lastElementChild,
-    shadowCache: shadowResult,
-    shadowElement: JSXElement,
-    getParentOverwrite: null,
+  return effect(() => {
+    active.parentElement = parent;
+
+    reconcile({
+      parentElement: parent,
+      previousSibling: parent.lastElementChild,
+      shadowCache: shadowResult,
+      shadowElement: render(),
+      getParentOverwrite: null,
+    });
   });
-
-  return shadowResult.node;
 }
 
 export function createComponent<

src/types.ts

@@ -88,7 +88,7 @@ export namespace JSX {
       ? Tag
       : `svg:${Tag}`]: { [key: string]: any } & {
       children?: ShadowElement;
-      className: string;
+      className?: string;
       onplusnewerror?: (evt: PlusnewErrorEvent) => void;
     };
   };

test/async.test.tsx

@@ -42,7 +42,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component onfoo={() => promise} />);
+    mount(() => <Component onfoo={() => promise} />, container);
 
     expect(container.childNodes.length).to.equal(1);
 

test/base.test.tsx

@@ -38,7 +38,7 @@ describe("webcomponent", () => {
     // @ts-expect-error component with excessive property baz, should be an error
     <Component foo="bar" baz="mep" />;
 
-    mount(container, <Component foo="mep" className="some-class" />);
+    mount(() => <Component foo="mep" className="some-class" />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -67,7 +67,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component amount={0} />);
+    mount(() => <Component amount={0} />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -117,7 +117,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component show={false} />);
+    mount(() => <Component show={false} />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -139,7 +139,7 @@ describe("webcomponent", () => {
     expect(component.shadowRoot?.childNodes.length).to.equal(0);
 
     // Mounting same component a second time, should not interfer with the first
-    mount(container, <Component show={true} />);
+    mount(() => <Component show={true} />, container);
 
     expect(component.shadowRoot?.childNodes.length).to.equal(0);
   });
@@ -169,7 +169,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -234,7 +234,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 

test/context.test.tsx

@@ -41,10 +41,12 @@ describe("webcomponent", () => {
 
   it("finds context", () => {
     mount(
+      () => (
+        <Provider>
+          <Consumer />
+        </Provider>
+      ),
       container,
-      <Provider>
-        <Consumer />
-      </Provider>,
     );
 
     expect(container.childNodes.length).to.equal(1);
@@ -78,7 +80,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -97,7 +99,7 @@ describe("webcomponent", () => {
   });
 
   it("no context", () => {
-    mount(container, <Consumer />);
+    mount(() => <Consumer />, container);
 
     expect(container.childNodes.length).to.equal(1);
     expect((container.childNodes[0] as HTMLElement).tagName).to.equal(
@@ -123,10 +125,12 @@ describe("webcomponent", () => {
     );
 
     mount(
+      () => (
+        <Injection>
+          <Consumer />
+        </Injection>
+      ),
       container,
-      <Injection>
-        <Consumer />
-      </Injection>,
     );
 
     expect(container.childNodes.length).to.equal(1);

test/error.test.tsx

@@ -40,7 +40,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -66,11 +66,12 @@ describe("webcomponent", () => {
   //   );
 
   //   mount(
-  //     container,
-  //     <ErrorBoundary>
-  //       <Component />
-  //       <span slot="errored">error</span>
-  //     </ErrorBoundary>,
+  //     () =>
+  //       <ErrorBoundary>
+  //         <Component />
+  //         <span slot="errored">error</span>
+  //       </ErrorBoundary>,
+  //     container
   //   );
 
   //   expect(container.childNodes.length).to.equal(1);

test/events.test.tsx

@@ -51,7 +51,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     const component = container.childNodes[0] as HTMLElement;
     (
@@ -107,7 +107,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     const component = container.childNodes[0] as HTMLElement;
     const nestedComponent = component.shadowRoot?.childNodes[0] as HTMLElement;

test/fragment.test.tsx

@@ -32,7 +32,7 @@ describe("fragment", () => {
       },
     );
 
-    mount(container, <Component foo="mep" className="some-class" />);
+    mount(() => <Component foo="mep" className="some-class" />, container);
 
     expect(container.childNodes.length).to.equal(1);
 

test/host.test.tsx

@@ -25,7 +25,7 @@ describe("webcomponent", () => {
         }
       },
     );
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -59,7 +59,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -125,7 +125,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -169,7 +169,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
@@ -225,7 +225,7 @@ describe("webcomponent", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 

test/svg.test.tsx

@@ -27,7 +27,7 @@ describe("svg", () => {
       },
     );
 
-    mount(container, <Component />);
+    mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);