fix(config): allow LogLevel to work with isolatedModules and update all warns and errors to respect logLevel (#30350)

Issue number: internal

---------

## What is the current behavior?
- `LogLevel` throws error `Error: Cannot access ambient const enums when
'isolatedModules' is enabled`
- Several existing console warns and errors are not calling the function
that respects the `logLevel` config

## What is the new behavior?
- Remove `const` from the `enum` to work with `isolatedModules`
- Update `console.warn`s to `printIonWarning`
- Update `console.error`s to `printIonError`

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

## Other information

Dev build: `8.5.5-dev.11744729748.174bf7e0`

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

core/src/components/accordion-group/accordion-group.tsx

@@ -87,7 +87,7 @@ export class AccordionGroup implements ComponentInterface {
        * Custom behavior: ['a', 'b']
        */
       printIonWarning(
-        `ion-accordion-group was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+        `[ion-accordion-group] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
 
   Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
 `,

core/src/components/alert/alert.tsx

@@ -5,6 +5,7 @@ import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
 import { createLockController } from '@utils/lock-controller';
+import { printIonWarning } from '@utils/logging';
 import {
   createDelegateController,
   createTriggerController,
@@ -318,8 +319,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
     // checkboxes and inputs are all accepted, but they cannot be mixed.
     const inputTypes = new Set(inputs.map((i) => i.type));
     if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
-      console.warn(
-        `Alert cannot mix input types: ${Array.from(inputTypes.values()).join(
+      printIonWarning(
+        `[ion-alert] - Alert cannot mix input types: ${Array.from(inputTypes.values()).join(
           '/'
         )}. Please see alert docs for more info.`
       );

core/src/components/app/app.tsx

@@ -46,7 +46,7 @@ export class App implements ComponentInterface {
            */
           if (shouldUseCloseWatcher()) {
             printIonWarning(
-              'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
+              '[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
             );
           }
 

core/src/components/button/button.tsx

@@ -235,7 +235,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
            * element with that id is not a form element.
            */
           printIonWarning(
-            `Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`,
+            `[ion-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`,
             this.el
           );
           return null;
@@ -246,7 +246,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
          * element with that id could not be found in the DOM.
          */
         printIonWarning(
-          `Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
+          `[ion-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
           this.el
         );
         return null;
@@ -260,7 +260,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
        * as the form attribute.
        */
       printIonWarning(
-        `The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
+        `[ion-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
         this.el
       );
       return null;

core/src/components/button/test/form-reference/button.e2e.ts

@@ -169,7 +169,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
       expect(logs.length).toBe(1);
       expect(logs[0]).toContain(
-        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
+        '[Ionic Warning]: [ion-button] - Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
       );
     });
 
@@ -197,7 +197,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
       expect(logs.length).toBe(1);
       expect(logs[0]).toContain(
-        '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
+        '[Ionic Warning]: [ion-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
       );
     });
   });

core/src/components/datetime-button/datetime-button.tsx

@@ -63,15 +63,15 @@ export class DatetimeButton implements ComponentInterface {
     const { datetime } = this;
     if (!datetime) {
       printIonError(
-        'An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.',
+        '[ion-datetime-button] - An ID associated with an ion-datetime instance is required to function properly.',
         this.el
       );
       return;
     }
 
     const datetimeEl = (this.datetimeEl = document.getElementById(datetime) as HTMLIonDatetimeElement | null);
     if (!datetimeEl) {
-      printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
+      printIonError(`[ion-datetime-button] - No ion-datetime instance found for ID '${datetime}'.`, this.el);
       return;
     }
 
@@ -81,7 +81,7 @@ export class DatetimeButton implements ComponentInterface {
      */
     if (datetimeEl.tagName !== 'ION-DATETIME') {
       printIonError(
-        `Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`,
+        `[ion-datetime-button] - Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`,
         datetimeEl
       );
       return;
@@ -245,7 +245,7 @@ export class DatetimeButton implements ComponentInterface {
             try {
               headerText = titleSelectedDatesFormatter(parsedValues);
             } catch (e) {
-              printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+              printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
             }
           }
           this.dateText = headerText;

core/src/components/datetime/datetime.tsx

@@ -584,7 +584,7 @@ export class Datetime implements ComponentInterface {
        * Custom behavior: ['a', 'b']
        */
       printIonWarning(
-        `ion-datetime was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+        `[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
 
   Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
 `,
@@ -1389,24 +1389,24 @@ export class Datetime implements ComponentInterface {
 
     if (multiple) {
       if (presentation !== 'date') {
-        printIonWarning('Multiple date selection is only supported for presentation="date".', el);
+        printIonWarning('[ion-datetime] - Multiple date selection is only supported for presentation="date".', el);
       }
 
       if (preferWheel) {
-        printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
+        printIonWarning('[ion-datetime] - Multiple date selection is not supported with preferWheel="true".', el);
       }
     }
 
     if (highlightedDates !== undefined) {
       if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
         printIonWarning(
-          'The highlightedDates property is only supported with the date, date-time, and time-date presentations.',
+          '[ion-datetime] - The highlightedDates property is only supported with the date, date-time, and time-date presentations.',
           el
         );
       }
 
       if (preferWheel) {
-        printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
+        printIonWarning('[ion-datetime] - The highlightedDates property is not supported with preferWheel="true".', el);
       }
     }
 
@@ -1668,7 +1668,7 @@ export class Datetime implements ComponentInterface {
           disabled = !isDateEnabled(convertDataToISO(referenceParts));
         } catch (e) {
           printIonError(
-            'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
+            '[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
             e
           );
         }
@@ -1759,7 +1759,7 @@ export class Datetime implements ComponentInterface {
           disabled = !isDateEnabled(convertDataToISO(referenceParts));
         } catch (e) {
           printIonError(
-            'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
+            '[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
             e
           );
         }
@@ -2262,7 +2262,7 @@ export class Datetime implements ComponentInterface {
                 isCalDayDisabled = !isDateEnabled(dateIsoString);
               } catch (e) {
                 printIonError(
-                  'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
+                  '[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
                   el,
                   e
                 );
@@ -2483,7 +2483,7 @@ export class Datetime implements ComponentInterface {
         try {
           headerText = titleSelectedDatesFormatter(convertDataToISO(activeParts));
         } catch (e) {
-          printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+          printIonError('[ion-datetime] - Exception in provided `titleSelectedDatesFormatter`:', e);
         }
       }
     } else {

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -687,7 +687,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       expect(logs.length).toBe(1);
       expect(logs[0]).toContain(
-        '[Ionic Warning]: Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".'
+        '[Ionic Warning]: [ion-datetime] - "timeZone" and "timeZoneName" are not supported in "formatOptions".'
       );
     });
 
@@ -717,7 +717,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       expect(logs.length).toBe(1);
       expect(logs[0]).toContain(
-        "[Ionic Warning]: Datetime: The 'date-time' presentation requires either a date or time object (or both) in formatOptions."
+        "[Ionic Warning]: [ion-datetime] - The 'date-time' presentation requires either a date or time object (or both) in formatOptions."
       );
     });
   });

core/src/components/datetime/utils/comparison.ts

@@ -48,7 +48,7 @@ export const warnIfValueOutOfBounds = (
   for (const val of valueArray) {
     if ((min !== undefined && isBefore(val, min)) || (max !== undefined && isAfter(val, max))) {
       printIonWarning(
-        'The value provided to ion-datetime is out of bounds.\n\n' +
+        '[ion-datetime] - The value provided to ion-datetime is out of bounds.\n\n' +
           `Min: ${JSON.stringify(min)}\n` +
           `Max: ${JSON.stringify(max)}\n` +
           `Value: ${JSON.stringify(value)}`

core/src/components/datetime/utils/parse.ts

@@ -105,7 +105,9 @@ export function parseDate(val: string | string[] | undefined | null): DatetimePa
 
   if (parse === null) {
     // wasn't able to parse the ISO datetime
-    printIonWarning(`Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`);
+    printIonWarning(
+      `[ion-datetime] - Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`
+    );
     return undefined;
   }