chore: use swc-plugin-de-indent-template-literal for consoles

change/@fluentui-react-dialog-381cb78f-7833-41d3-a50e-d833a6089087.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adds swc-plugin-de-indent-template-literal to remove indentation of consoles",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-b35c76a9-4797-4f32-b17e-e1f739b4f84d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adds swc-plugin-de-indent-template-literal to remove indentation of consoles",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-710d0021-32c0-4b8c-8faa-04832a854ee8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adds swc-plugin-de-indent-template-literal to remove indentation of consoles",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/.swcrc

@@ -10,6 +10,9 @@
     "/**/*.test.tsx"
   ],
   "jsc": {
+    "experimental": {
+      "plugins": [["swc-plugin-de-indent-template-literal", {}]]
+    },
     "parser": {
       "syntax": "typescript",
       "tsx": true,

packages/react-components/react-dialog/src/components/Dialog/useDialog.ts

@@ -79,10 +79,11 @@ function childrenToTriggerAndContent(
   if (process.env.NODE_ENV !== 'production') {
     if (childrenArray.length !== 1 && childrenArray.length !== 2) {
       // eslint-disable-next-line no-console
-      console.warn(
-        'Dialog must contain at least one child <DialogSurface/>,\n' +
-          'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',
-      );
+      console.warn(/* #__DE-INDENT__ */ `
+        @fluentui/react-dialog [useDialog]:
+        Dialog must contain at least one child <DialogSurface/>,
+        and at most two children <DialogTrigger/> <DialogSurface/> (in this order).
+      `);
     }
   }
   switch (childrenArray.length) {

packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts

@@ -23,12 +23,11 @@ export function useFocusFirstElement(open: boolean, modalType: DialogModalType)
       dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.warn(
-          [
-            '@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',
-            'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`',
-          ].join('\n'),
-        );
+        console.warn(/** #__DE-INDENT__ */ `
+          @fluentui/react-dialog [useFocusFirstElement]:
+          A Dialog should have at least one focusable element inside DialogSurface.
+          Please add at least a close button either on \`DialogTitle\` action slot or inside \`DialogActions\`
+        `);
       }
     }
   }, [findFirstFocusable, open, modalType, targetDocument]);

packages/react-components/react-tree/.swcrc

@@ -10,6 +10,9 @@
     "/**/*.test.tsx"
   ],
   "jsc": {
+    "experimental": {
+      "plugins": [["swc-plugin-de-indent-template-literal", {}]]
+    },
     "parser": {
       "syntax": "typescript",
       "tsx": true,

packages/react-components/react-tree/src/components/FlatTree/useFlatControllableCheckedItems.ts

@@ -33,7 +33,10 @@ export function createNextFlatCheckedItems(
   if (!treeItem) {
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line no-console
-      console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);
+      console.error(/* #__DE-INDENT__ */ `
+        @fluentui/react-tree [useHeadlessFlatTree]:
+        Tree item ${data.value} not found.
+      `);
     }
     return previousCheckedItems;
   }

packages/react-components/react-tree/src/hooks/useRootTree.ts

@@ -150,7 +150,10 @@ function warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria
   if (process.env.NODE_ENV === 'development') {
     if (!props['aria-label'] && !props['aria-labelledby']) {
       // eslint-disable-next-line no-console
-      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
+      console.warn(/* #__DE-INDENT__ */ `
+        @fluentui/react-tree [useRootTree]:
+        Tree must have either a \`aria-label\` or \`aria-labelledby\` property defined
+      `);
     }
   }
 }

packages/react-components/react-tree/src/utils/createHeadlessTree.ts

@@ -109,9 +109,10 @@ export function createHeadlessTree<Props extends HeadlessTreeItemProps>(
       if (!parentItem) {
         if (process.env.NODE_ENV === 'development') {
           // eslint-disable-next-line no-console
-          console.error(
-            `HeadlessTree: item ${props.value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized, parents should come before children`,
-          );
+          console.error(/* #__DE-INDENT__ */ `
+            @fluentui/react-tree [createHeadlessTree]:
+            TreeItem "${props.value}" is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized, parents should come before children
+          `);
         }
         return;
       }
@@ -179,7 +180,10 @@ function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
     getTreeItemProps: () => {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
+        console.error(/* #__DE-INDENT__ */ `
+          @fluentui/react-tree [createHeadlessTree]:
+          Internal error, trying to access treeitem props from invalid root element
+        `);
       }
       return {
         id: headlessTreeRootId,
@@ -194,14 +198,20 @@ function createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {
     get index() {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
+        console.error(/* #__DE-INDENT__ */ `
+          @fluentui/react-tree [createHeadlessTree]:
+          Internal error, trying to access treeitem props from invalid root element
+        `);
       }
       return -1;
     },
     get position() {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');
+        console.error(/* #__DE-INDENT__ */ `
+          @fluentui/react-tree [createHeadlessTree]:
+          Internal error, trying to access treeitem props from invalid root element
+        `);
       }
       return -1;
     },

packages/react-components/react-utilities/.swcrc

@@ -10,6 +10,9 @@
     "/**/*.test.tsx"
   ],
   "jsc": {
+    "experimental": {
+      "plugins": [["swc-plugin-de-indent-template-literal", {}]]
+    },
     "parser": {
       "syntax": "typescript",
       "tsx": true,

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

@@ -47,21 +47,24 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
           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'.`,
-        );
+        console.warn(/** #__DE-INDENT__ */ `
+          @fluentui/react-utilities [${assertSlots.name}]:
+          "state.${slotName}" is not a slot!
+          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]) {
           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`,
-          );
+          console.warn(/** #__DE-INDENT__ */ `
+            @fluentui/react-utilities [${assertSlots.name}]:
+            "state.${slotName}" element type differs from "state.components.${slotName}",
+            ${elementType} !== ${typedState.components[slotName]}.
+            Be sure to create slots properly by using "slot.always" or "slot.optional" with the correct elementType.
+          `);
         }
       }
     }

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

@@ -94,13 +94,12 @@ export function resolveShorthand<Props extends UnknownSlotProps | null | undefin
   if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {
     // TODO: would be nice to have a link to slot documentation in this error message
     // eslint-disable-next-line no-console
-    console.error(
-      [
-        `[slot.resolveShorthand]: A slot got invalid value "${value}" (${typeof value}).`,
-        'A valid value is a slot shorthand or slot properties object.',
-        'Slot shorthands can be strings, numbers, arrays or JSX elements',
-      ].join('\n'),
-    );
+    console.error(/** #__DE-INDENT__ */ `
+      @fluentui/react-utilities [slot.${resolveShorthand.name}]:
+      A slot got an invalid value "${value}" (${typeof value}).
+      A valid value for a slot is a slot shorthand or slot properties object.
+      Slot shorthands can be strings, numbers, arrays or JSX elements
+    `);
   }
 
   return value;

packages/react-components/react-utilities/src/hooks/useControllableState.test.ts

@@ -158,7 +158,5 @@ describe('useControllableState', () => {
     rerender();
 
     expect(spy).toHaveBeenCalledTimes(1);
-    const expectedWarning = `A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components`;
-    expect(spy).toHaveBeenCalledWith(expect.stringContaining(expectedWarning));
   });
 });

packages/react-components/react-utilities/src/hooks/useControllableState.ts

@@ -94,16 +94,13 @@ const useIsControlled = <V>(controlledValue: V | undefined): controlledValue is
         const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
 
         // eslint-disable-next-line no-console
-        console.error(
-          [
-            // Default react error
-            'A component is changing ' + controlWarning + '. This is likely caused by the value',
-            'changing from ' + undefinedWarning + ' value, which should not happen.',
-            'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',
-            'More info: https://reactjs.org/link/controlled-components',
-            error.stack,
-          ].join(' '),
-        );
+        console.error(/** #__DE-INDENT__ */ `
+          @fluentui/react-utilities [${useControllableState.name}]:
+          A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.
+          Decide between using a controlled or uncontrolled input element for the lifetime of the component.
+          More info: https://reactjs.org/link/controlled-components
+          ${error.stack}
+        `);
       }
     }, [isControlled, controlledValue]);
   }

packages/react-components/react-utilities/src/ssr/SSRContext.tsx

@@ -54,16 +54,13 @@ export function useIsSSR(): boolean {
   if (process.env.NODE_ENV !== 'production') {
     if (!isInSSRContext && !canUseDOM()) {
       // eslint-disable-next-line no-console
-      console.error(
-        [
-          '@fluentui/react-components: ',
-          'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' +
-            'generated between the client and server.',
-          '\n',
-          '\n',
-          'Check documentation at https://aka.ms/fluentui-ssr',
-        ].join(''),
-      );
+      console.error(/** #__DE-INDENT__ */ `
+        @fluentui/react-components [${useIsSSR.name}]:
+        When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.
+
+
+        Check documentation at https://aka.ms/fluentui-ssr.
+      `);
     }
   }
 

packages/react-components/react-utilities/src/utils/getReactCallbackName.ts

@@ -44,9 +44,9 @@ export function getReactCallbackName(event: ReactSyntheticEvent): ReactCallbackN
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
-    console.error([
-      'Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName".',
-      'This should not happen, please report it to https://github.com/microsoft/fluentui',
-    ]);
+    console.error(/** #__DE-INDENT__ */ `
+      @fluentui/react-utilities [${getReactCallbackName.name}]:
+      Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName". This should not happen, please report it to https://github.com/microsoft/fluentui.
+    `);
   }
 }