Merge pull request #31 from jembezmamy/fix-hierarchy-request-error-with-empty-yield

Fix hierarchy request error with empty yield

Author: enna

react-migration-toolkit/src/components/react-bridge.gts

@@ -61,24 +61,27 @@ export default class ReactBridge<
   R = ComponentType,
 > extends Component<ReactBridgeArgs<T, R>> {
   tagName = (this.args.tagName ?? 'div') as T;
+  or = (a: unknown, b: unknown) => a ?? b;
   <template>
     {{#let (element this.tagName) as |Tag|}}
-      <Tag
-        class={{unless @tagName 'react-bridge-wrapper'}}
-        data-test-react-bridge-component
-        {{! @glint-nocheck }}
-        {{reactModifier
-          reactComponent=@reactComponent
-          props=(transformPropsWithLegacyContent @props)
-          providerOptions=@providerOptions
-          hasBlock=(has-block)
-        }}
-        ...attributes
-      >
-        {{~#if (has-block)~}}
-          {{yield}}
-        {{/if}}
-      </Tag>
+      {{#let (this.or @hasBlock (has-block)) as |normalizedHasBlock|}}
+        <Tag
+          class={{unless @tagName 'react-bridge-wrapper'}}
+          data-test-react-bridge-component
+          {{! @glint-nocheck }}
+          {{reactModifier
+            reactComponent=@reactComponent
+            props=(transformPropsWithLegacyContent @props)
+            providerOptions=@providerOptions
+            hasBlock=normalizedHasBlock
+          }}
+          ...attributes
+        >
+          {{~#if normalizedHasBlock~}}
+            {{yield}}
+          {{/if}}
+        </Tag>
+      {{/let}}
     {{/let}}
   </template>
 }

test-app/tests/integration/components/react-bridge-test.js

@@ -90,6 +90,55 @@ module('Integration | Component | react-bridge', function (hooks) {
     });
   });
 
+  module('when an empty block is passed', function () {
+    test('it should not pass children to the react component', async function (assert) {
+      this.setProperties({
+        reactExample: Example,
+        props: {
+          text: 'props content',
+        },
+      });
+
+      await render(hbs`
+        <ReactBridge
+          @reactComponent={{this.reactExample}}
+          @props={{this.props}}
+          @hasBlock={{false}}
+        > </ReactBridge>
+      `);
+
+      assert.dom('[data-test-children]').doesNotExist();
+    });
+
+    test('it should rerender without an error', async function (assert) {
+      this.setProperties({
+        reactExample: Example,
+        props: {
+          text: 'props content',
+        },
+      });
+
+      await render(hbs`
+        <ReactBridge
+          @reactComponent={{this.reactExample}}
+          @props={{this.props}}
+          @hasBlock={{false}}
+        > </ReactBridge>
+      `);
+
+      assert.dom('[data-test-children]').doesNotExist();
+
+      this.setProperties({
+        reactExample: Example,
+        props: {
+          text: 'another text',
+        },
+      });
+
+      assert.dom('[data-test-children]').doesNotExist();
+    });
+  });
+
   test('it can access the Ember application instance', async function (assert) {
     await render(hbs`
       <ReactBridge @reactComponent={{this.reactExample}} />