fix(react): hydrate react components on append/prepend/before/after

tchak · Jul 10, 2024 · f10e9bd · f10e9bd
1 parent bcf7eb5
commit f10e9bd
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 1 deletion.
diff --git a/.changeset/moody-turtles-retire.md b/.changeset/moody-turtles-retire.md
@@ -0,0 +1,6 @@
+---
+'@coldwired/actions': patch
+'@coldwired/react': patch
+---
+
+fix some actions
diff --git a/packages/actions/src/actions.ts b/packages/actions/src/actions.ts
@@ -345,18 +345,27 @@ export class Actions {
   private _after({ targets, fragment }: Pick<MaterializedFragmentAction, 'targets' | 'fragment'>) {
     for (const element of targets) {
       element.after(getDocumentFragment(fragment, element));
+      const parent = element.parentElement;
+      if (parent) {
+        this.plugins.forEach((plugin) => plugin.onCreateElement?.(parent));
+      }
     }
   }
 
   private _before({ targets, fragment }: Pick<MaterializedFragmentAction, 'targets' | 'fragment'>) {
     for (const element of targets) {
       element.before(getDocumentFragment(fragment, element));
+      const parent = element.parentElement;
+      if (parent) {
+        this.plugins.forEach((plugin) => plugin.onCreateElement?.(parent));
+      }
     }
   }
 
   private _append({ targets, fragment }: Pick<MaterializedFragmentAction, 'targets' | 'fragment'>) {
     for (const element of targets) {
       element.append(getDocumentFragment(fragment, element, true));
+      this.plugins.forEach((plugin) => plugin.onCreateElement?.(element));
     }
   }
 
@@ -366,6 +375,7 @@ export class Actions {
   }: Pick<MaterializedFragmentAction, 'targets' | 'fragment'>) {
     for (const element of targets) {
       element.prepend(getDocumentFragment(fragment, element, true));
+      this.plugins.forEach((plugin) => plugin.onCreateElement?.(element));
     }
   }
 

diff --git a/packages/react/src/actions-react-plugin.test.tsx b/packages/react/src/actions-react-plugin.test.tsx
@@ -223,5 +223,79 @@ describe('@coldwired/react', () => {
       );
       expect(root.getCache().size).toEqual(1);
     });
+
+    actions.append({
+      targets: 'section',
+      fragment: `<div>toto <${DEFAULT_TAG_NAME}><${REACT_COMPONENT_TAG} ${NAME_ATTRIBUTE}="Counter" ${PROPS_ATTRIBUTE}="${encodeProps({ label: 'One more Count' })}"></${REACT_COMPONENT_TAG}></${DEFAULT_TAG_NAME}></div>`,
+    });
+    await actions.ready();
+    await waitFor(() => {
+      expect(document.body.innerHTML).toEqual(
+        layout(
+          `<section><${DEFAULT_TAG_NAME} id="frag-1"><div><p>My New Count: 3</p><button>Increment</button></div></${DEFAULT_TAG_NAME}><div>toto <${DEFAULT_TAG_NAME}><div><p>One more Count: 0</p><button>Increment</button></div></${DEFAULT_TAG_NAME}></div></section>`,
+        ),
+      );
+      expect(root.getCache().size).toEqual(2);
+    });
+
+    actions.update({
+      targets: 'section',
+      fragment: '<p>hello</p>',
+    });
+    await actions.ready();
+
+    actions.prepend({
+      targets: 'section',
+      fragment: `<${DEFAULT_TAG_NAME}><${REACT_COMPONENT_TAG} ${NAME_ATTRIBUTE}="Counter" ${PROPS_ATTRIBUTE}="${encodeProps({ label: 'One more Count' })}"></${REACT_COMPONENT_TAG}></${DEFAULT_TAG_NAME}>`,
+    });
+    await actions.ready();
+    await waitFor(() => {
+      expect(document.body.innerHTML).toEqual(
+        layout(
+          `<section><${DEFAULT_TAG_NAME}><div><p>One more Count: 0</p><button>Increment</button></div></${DEFAULT_TAG_NAME}><p>hello</p></section>`,
+        ),
+      );
+      expect(root.getCache().size).toEqual(1);
+    });
+
+    actions.update({
+      targets: 'section',
+      fragment: '<p>hello</p>',
+    });
+    await actions.ready();
+
+    actions.after({
+      targets: 'p',
+      fragment: `<${DEFAULT_TAG_NAME}><${REACT_COMPONENT_TAG} ${NAME_ATTRIBUTE}="Counter" ${PROPS_ATTRIBUTE}="${encodeProps({ label: 'One more Count' })}"></${REACT_COMPONENT_TAG}></${DEFAULT_TAG_NAME}>`,
+    });
+    await actions.ready();
+    await waitFor(() => {
+      expect(document.body.innerHTML).toEqual(
+        layout(
+          `<section><p>hello</p><${DEFAULT_TAG_NAME}><div><p>One more Count: 0</p><button>Increment</button></div></${DEFAULT_TAG_NAME}></section>`,
+        ),
+      );
+      expect(root.getCache().size).toEqual(1);
+    });
+
+    actions.update({
+      targets: 'section',
+      fragment: '<p>hello</p>',
+    });
+    await actions.ready();
+
+    actions.before({
+      targets: 'p',
+      fragment: `<${DEFAULT_TAG_NAME}><${REACT_COMPONENT_TAG} ${NAME_ATTRIBUTE}="Counter" ${PROPS_ATTRIBUTE}="${encodeProps({ label: 'One more Count' })}"></${REACT_COMPONENT_TAG}></${DEFAULT_TAG_NAME}>`,
+    });
+    await actions.ready();
+    await waitFor(() => {
+      expect(document.body.innerHTML).toEqual(
+        layout(
+          `<section><${DEFAULT_TAG_NAME}><div><p>One more Count: 0</p><button>Increment</button></div></${DEFAULT_TAG_NAME}><p>hello</p></section>`,
+        ),
+      );
+      expect(root.getCache().size).toEqual(1);
+    });
   });
 });
diff --git a/packages/react/src/root.ts b/packages/react/src/root.ts
@@ -90,6 +90,12 @@ export function createRoot(
 
   const notify = () => {
     if (!isDestroyed) {
+      cache.forEach((_, element) => {
+        if (!element.isConnected) {
+          cache.delete(element);
+          mounted.delete(element);
+        }
+      });
       cache = new Map(cache);
       subscriptions.forEach((callback) => callback());
     }
@@ -107,7 +113,6 @@ export function createRoot(
     if (isElement(fragment) && fragment.tagName.toLowerCase() != schema.fragmentTagName) {
       throw new Error('Cannot rerender with a non-fragment element');
     }
-    //const { hydrate } = await import('./react-tree-builder');
     await preload(fragment, (names) => manifestLoader(names, loader, manifest), schema);
     const tree = hydrate(fragment, manifest, schema);
     if (reset) {