fix(yield-wrapper): prevent circular reference in node replacement

Author: wandroll

react-migration-toolkit/src/components/yield-wrapper.tsx

@@ -12,7 +12,11 @@ export const YieldWrapper: React.FC<YieldWrapperProps> = ({ nodes }) => {
 
     if (element?.parentNode) {
       const fragment = document.createDocumentFragment();
-      for (const node of nodes) {
+
+      // Filter out the wrapper element itself from the nodes to prevent circular reference
+      const filteredNodes = nodes.filter((node) => node !== element);
+
+      for (const node of filteredNodes) {
         fragment.appendChild(node);
       }
 

react-migration-toolkit/src/react/components/index.ts

@@ -1,2 +1,3 @@
 export { Link } from './link';
 export { NavLink } from './nav-link';
+export { YieldWrapper } from './yield-wrapper';

react-migration-toolkit/src/react/components/yield-wrapper.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export interface YieldWrapperProps {
+  nodes: ChildNode[];
+}
+
+export const YieldWrapper: React.FC<YieldWrapperProps> = ({ nodes }) => {
+  const elRef = useRef<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    const element = elRef.current;
+
+    if (element?.parentNode) {
+      const fragment = document.createDocumentFragment();
+
+      // Filter out the wrapper element itself from the nodes to prevent circular reference
+      const filteredNodes = nodes.filter((node) => node !== element);
+
+      for (const node of filteredNodes) {
+        fragment.appendChild(node);
+      }
+
+      // Replace <span> by fragment with appended nodes
+      element.parentNode.replaceChild(fragment, element);
+    }
+  }, [nodes]);
+
+  // This element is temporary. When mounted, it is replaced by the children nodes received from Ember.
+  return <span ref={elRef}></span>;
+};

test-app/app/react/yield-wrapper-example.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { YieldWrapper } from "@qonto/react-migration-toolkit/react/components";
+
+interface YieldWrapperExampleProps {
+  nodes: ChildNode[];
+}
+
+export const YieldWrapperExample: React.FC<YieldWrapperExampleProps> = ({
+  nodes,
+}) => {
+  return <YieldWrapper nodes={nodes} />;
+};

test-app/react/yield-wrapper-example.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { YieldWrapper } from "@qonto/react-migration-toolkit/react/components";
+
+interface YieldWrapperExampleProps {
+  // eslint-disable-next-line no-undef
+  nodes: ChildNode[];
+}
+
+export const YieldWrapperExample: React.FC<YieldWrapperExampleProps> = ({
+  nodes,
+}) => {
+  return <YieldWrapper nodes={nodes} />;
+};

test-app/tests/integration/components/yield-wrapper-test.js

@@ -0,0 +1,88 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, settled } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { YieldWrapperExample } from 'test-app/react/yield-wrapper-example';
+
+module('Integration | Component | yield-wrapper', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.setProperties({
+      YieldWrapperExample,
+    });
+  });
+
+  test('it correctly handles yielded content through React bridge', async function (assert) {
+    // Create test nodes that would be yielded from an Ember component
+    const textNode = document.createTextNode('Hello World');
+    const divNode = document.createElement('div');
+    divNode.textContent = 'Test Div';
+    divNode.setAttribute('data-test-id', 'test-div');
+
+    const nodes = [textNode, divNode];
+
+    // Render using ReactBridge to simulate real usage
+    this.set('nodes', nodes);
+    await render(hbs`
+      <ReactBridge
+        @reactComponent={{this.YieldWrapperExample}}
+        @props={{hash nodes=this.nodes}}
+      />
+    `);
+
+    // Initially, there should be a span element
+    assert.dom('span').exists('Wrapper span should exist initially');
+
+    // Wait for the next tick to allow the useEffect to run
+    await settled();
+
+    // The span should be replaced with our nodes
+    assert.dom('span').doesNotExist('Wrapper span should be removed');
+    assert.dom().hasText('Hello World', 'Text node should be rendered');
+    assert
+      .dom('[data-test-id="test-div"]')
+      .hasText('Test Div', 'Div node should be rendered');
+  });
+
+  test('it handles empty nodes array through React bridge', async function (assert) {
+    this.set('nodes', []);
+    await render(hbs`
+      <ReactBridge
+        @reactComponent={{this.YieldWrapperExample}}
+        @props={{hash nodes=this.nodes}}
+      />
+    `);
+
+    await settled();
+
+    assert.dom('span').doesNotExist('Wrapper span should be removed');
+    assert.dom().hasText('', 'Container should be empty');
+  });
+
+  test('it handles nested elements through React bridge', async function (assert) {
+    const parentDiv = document.createElement('div');
+    parentDiv.setAttribute('data-test-id', 'parent');
+    const childSpan = document.createElement('span');
+    childSpan.textContent = 'Nested Content';
+    childSpan.setAttribute('data-test-id', 'child');
+    parentDiv.appendChild(childSpan);
+
+    const nodes = [parentDiv];
+
+    this.set('nodes', nodes);
+    await render(hbs`
+      <ReactBridge
+        @reactComponent={{this.YieldWrapperExample}}
+        @props={{hash nodes=this.nodes}}
+      />
+    `);
+
+    await settled();
+
+    assert.dom('span').doesNotExist('Wrapper span should be removed');
+    assert
+      .dom('[data-test-id="parent"] [data-test-id="child"]')
+      .hasText('Nested Content', 'Nested content should be rendered');
+  });
+});