bugfix: ensure interop between assertSlots and old API

change/@fluentui-react-utilities-75019ddc-695b-4255-9b47-0aa69be7fbcf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: ensure interop between assertSlots and old API",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-jsx-runtime/src/interop.test.tsx

@@ -0,0 +1,190 @@
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { render } from '@testing-library/react';
+import { assertSlots, resolveShorthand, slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { createElement } from './createElement';
+
+describe('resolveShorthand with assertSlots', () => {
+  describe('custom behavior tests', () => {
+    it('keeps children from "defaultProps" in a render callback', () => {
+      const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+      type TestComponentSlots = {
+        someSlot: NonNullable<Slot<'div'>>;
+      };
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+      type TestComponentState = ComponentState<TestComponentSlots>;
+
+      const TestComponent = (props: TestComponentProps) => {
+        const state: TestComponentState = {
+          components: { someSlot: 'div' },
+          someSlot: resolveShorthand(props.someSlot, {
+            required: true,
+            defaultProps: { children: 'Default Children', id: 'slot' },
+          }),
+        };
+        assertSlots<TestComponentSlots>(state);
+        return <state.someSlot />;
+      };
+
+      const children = jest.fn().mockImplementation((Component, props) => (
+        <div id="render-fn">
+          <Component {...props} />
+        </div>
+      ));
+      const result = render(<TestComponent someSlot={{ children }} />);
+
+      expect(children).toHaveBeenCalledTimes(1);
+      expect(children).toHaveBeenCalledWith('div', { children: 'Default Children', id: 'slot' });
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div
+          id="render-fn"
+        >
+          <div
+            id="slot"
+          >
+            Default Children
+          </div>
+        </div>
+      `);
+
+      expect(consoleWarnMock).toHaveBeenCalledTimes(1);
+      consoleWarnMock.mockRestore();
+    });
+
+    it('keeps children from a render template in a render callback', () => {
+      const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+      type TestComponentSlots = { outer: NonNullable<Slot<'div'>>; inner: NonNullable<Slot<'div'>> };
+      type TestComponentState = ComponentState<TestComponentSlots>;
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+
+      const TestComponent = (props: TestComponentProps) => {
+        const state: TestComponentState = {
+          components: { outer: 'div', inner: 'div' },
+          inner: resolveShorthand(props.inner, { defaultProps: { id: 'inner' }, required: true }),
+          outer: resolveShorthand(props.outer, { defaultProps: { id: 'outer' }, required: true }),
+        };
+        assertSlots<TestComponentSlots>(state);
+        return (
+          <state.outer>
+            <state.inner />
+          </state.outer>
+        );
+      };
+
+      const children = jest.fn().mockImplementation((Component, props) => (
+        <div id="render-fn">
+          <Component {...props} />
+        </div>
+      ));
+      const result = render(<TestComponent outer={{ children }} inner={{ children: 'Inner children' }} />);
+
+      expect(children).toHaveBeenCalledTimes(1);
+      expect(children.mock.calls[0][0]).toBe('div');
+      expect(children.mock.calls[0][1].id).toBe('outer');
+      expect(children.mock.calls[0][1].children).toMatchInlineSnapshot(`
+        <React.Fragment>
+          <div
+            id="inner"
+          >
+            Inner children
+          </div>
+        </React.Fragment>
+      `);
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <div
+          id="render-fn"
+        >
+          <div
+            id="outer"
+          >
+            <div
+              id="inner"
+            >
+              Inner children
+            </div>
+          </div>
+        </div>
+      `);
+      expect(consoleWarnMock).toHaveBeenCalledTimes(2);
+      consoleWarnMock.mockRestore();
+    });
+
+    it("should support 'as' property to opt-out of base element type", () => {
+      const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+      type TestComponentSlots = { slot: NonNullable<Slot<'div', 'span'>> };
+      type TestComponentState = ComponentState<TestComponentSlots>;
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+
+      const TestComponent = (props: TestComponentProps) => {
+        const state: TestComponentState = {
+          components: { slot: 'div' },
+          slot: resolveShorthand(props.slot, { required: true }),
+        };
+        assertSlots<TestComponentSlots>(state);
+        return <state.slot />;
+      };
+
+      const result = render(<TestComponent slot={{ as: 'span' }} />);
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`<span />`);
+      expect(consoleWarnMock).toHaveBeenCalledTimes(1);
+      consoleWarnMock.mockRestore();
+    });
+    it('should support if someone passes an invalid slot', () => {
+      const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+      type TestComponentSlots = { slot: NonNullable<Slot<'div', 'span'>> };
+      type TestComponentState = ComponentState<TestComponentSlots>;
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+
+      const TestComponent = (props: TestComponentProps) => {
+        const state: TestComponentState = {
+          components: { slot: 'div' },
+          slot: {},
+        };
+        assertSlots<TestComponentSlots>(state);
+        return <state.slot />;
+      };
+
+      const result = render(<TestComponent slot={{ as: 'span' }} />);
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`<div />`);
+      expect(consoleWarnMock).toHaveBeenCalledTimes(1);
+      consoleWarnMock.mockRestore();
+    });
+    it('should support overriding a slot declaration with spread props', () => {
+      const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+      type TestComponentSlots = { slot: NonNullable<Slot<'div', 'span'>> };
+      type TestComponentState = ComponentState<TestComponentSlots>;
+      type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
+      const useHigherOrderStateHook = (props: TestComponentProps): TestComponentState => ({
+        components: { slot: 'div' },
+        slot: slot.always(props.slot, { elementType: 'div' }),
+      });
+      const TestComponent = (props: TestComponentProps) => {
+        const higherOrderState = useHigherOrderStateHook(props);
+        const state: TestComponentState = {
+          components: { ...higherOrderState.components, slot: 'span' },
+          slot: {
+            ...higherOrderState.slot,
+            children: 'slot children',
+          },
+        };
+        assertSlots<TestComponentSlots>(state);
+        return <state.slot />;
+      };
+      const result = render(<TestComponent />);
+
+      expect(result.container.firstChild).toMatchInlineSnapshot(`
+        <span>
+          slot children
+        </span>
+      `);
+      expect(consoleWarnMock).toHaveBeenCalledTimes(1);
+      consoleWarnMock.mockRestore();
+    });
+  });
+});

packages/react-components/react-utilities/src/compose/assertSlots.test.tsx

@@ -1,4 +1,5 @@
 import { assertSlots } from './assertSlots';
+import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';
 import * as slot from './slot';
 import { ComponentProps, ComponentState, Slot } from './types';
 
@@ -27,7 +28,8 @@ describe('assertSlots', () => {
     };
     expect(() => assertSlots<TestSlots>(state)).not.toThrow();
   });
-  it('should throw if a slot is not declared with the `slot` function', () => {
+  it('should not throw if a slot is not declared with the `slot` function', () => {
+    const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
     const state: TestState = {
       components: {
         slotA: 'div',
@@ -36,9 +38,13 @@ describe('assertSlots', () => {
       },
       slotA: {},
     };
-    expect(() => assertSlots<TestSlots>(state)).toThrow();
+    expect(() => assertSlots<TestSlots>(state)).not.toThrow();
+    expect(state.slotA).toEqual({ [SLOT_ELEMENT_TYPE_SYMBOL]: 'div' });
+    expect(consoleWarnMock).toHaveBeenCalledTimes(1);
+    consoleWarnMock.mockRestore();
   });
-  it('should throw if a state.components.SLOT_NAME is not equivalent to the slot elementType', () => {
+  it('should not throw if a state.components.SLOT_NAME is not equivalent to the slot elementType', () => {
+    const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
     const props: TestProps = { slotA: 'hello' };
     const state: TestState = {
       components: {
@@ -48,6 +54,9 @@ describe('assertSlots', () => {
       },
       slotA: slot.optional(props.slotA, { elementType: 'div' }),
     };
-    expect(() => assertSlots<TestSlots>(state)).toThrow();
+    expect(() => assertSlots<TestSlots>(state)).not.toThrow();
+    expect(state.slotA).toEqual({ children: 'hello', [SLOT_ELEMENT_TYPE_SYMBOL]: 'a' });
+    expect(consoleWarnMock).toHaveBeenCalledTimes(1);
+    consoleWarnMock.mockRestore();
   });
 });

packages/react-components/react-utilities/src/compose/assertSlots.ts

@@ -1,6 +1,8 @@
+import * as React from 'react';
 import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';
 import { isSlot } from './isSlot';
 import { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';
+import { slot } from './index';
 
 type SlotComponents<Slots extends SlotPropsRecord> = {
   [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>>;
@@ -37,16 +39,27 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
       if (slotElement === undefined) {
         continue;
       }
+      // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,
+      // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
+      // FIXME: this slot will still fail to support child render function scenario
       if (!isSlot(slotElement)) {
-        throw new Error(
-          `${assertSlots.name} error: state.${slotName} is not a slot.\n` +
+        typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {
+          elementType: typedState.components[slotName] as React.ComponentType<{}>,
+        }) as ComponentState<Slots>[keyof ComponentState<Slots>];
+        // eslint-disable-next-line no-console
+        console.warn(
+          `${assertSlots.name} warning: state.${slotName} is not a slot.\n` +
             `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`,
         );
       } else {
+        // This means a slot is being declared by using resolveShorthand on the state hook,
+        // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
         const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
         if (elementType !== typedState.components[slotName]) {
-          throw new TypeError(
-            `${assertSlots.name} error: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \n` +
+          slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;
+          // eslint-disable-next-line no-console
+          console.warn(
+            `${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \n` +
               `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`,
           );
         }