refactor: add utility for issuing warnings once (#10015)

* refactor: add utility for issuing warnings once

* Update packages/component-base/src/warnings.js

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

---------

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: sissbruecker

packages/component-base/src/warnings.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Issues a warning in the browser console if it has not been issued before.
+ */
+export declare function issueWarning(warning: string): void;

packages/component-base/src/warnings.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const issuedWarnings = new Set();
+
+/**
+ * Issues a warning in the browser console if it has not been issued before.
+ * @param {string} warning
+ */
+export function issueWarning(warning) {
+  if (issuedWarnings.has(warning)) {
+    return;
+  }
+
+  issuedWarnings.add(warning);
+  console.warn(warning);
+}
+
+/**
+ * Clears all issued warnings. Only intended for testing purposes.
+ */
+export function clearWarnings() {
+  issuedWarnings.clear();
+}

packages/form-layout/src/vaadin-form-item-mixin.js

@@ -5,10 +5,7 @@
  */
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-
-let spacingDeprecationNotified = false;
-let labelWidthDeprecationNotified = false;
-let labelSpacingDeprecationNotified = false;
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 
 /**
  * @polymerMixin
@@ -58,25 +55,22 @@ export const FormItemMixin = (superClass) =>
       const labelWidth = computedStyle.getPropertyValue('--vaadin-form-item-label-width');
       const labelSpacing = computedStyle.getPropertyValue('--vaadin-form-item-label-spacing');
 
-      if (!spacingDeprecationNotified && spacing !== '' && parseInt(spacing) !== 0) {
-        console.warn(
+      if (spacing !== '' && parseInt(spacing) !== 0) {
+        issueWarning(
           '`--vaadin-form-item-row-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-row-spacing` on <vaadin-form-layout> instead.',
         );
-        spacingDeprecationNotified = true;
       }
 
-      if (!labelWidthDeprecationNotified && labelWidth !== '' && parseInt(labelWidth) !== 0) {
-        console.warn(
+      if (labelWidth !== '' && parseInt(labelWidth) !== 0) {
+        issueWarning(
           '`--vaadin-form-item-label-width` is deprecated since 24.7. Use `--vaadin-form-layout-label-width` on <vaadin-form-layout> instead.',
         );
-        labelWidthDeprecationNotified = true;
       }
 
-      if (!labelSpacingDeprecationNotified && labelSpacing !== '' && parseInt(labelSpacing) !== 0) {
-        console.warn(
+      if (labelSpacing !== '' && parseInt(labelSpacing) !== 0) {
+        issueWarning(
           '`--vaadin-form-item-label-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-label-spacing` on <vaadin-form-layout> instead.',
         );
-        labelSpacingDeprecationNotified = true;
       }
     }
 
@@ -185,7 +179,7 @@ export const FormItemMixin = (superClass) =>
 
       const fieldNodes = this.$.contentSlot.assignedElements();
       if (fieldNodes.length > 1) {
-        console.warn(
+        issueWarning(
           `WARNING: Since Vaadin 23, placing multiple fields directly to a <vaadin-form-item> is deprecated.
 Please wrap fields with a <vaadin-custom-field> instead.`,
         );

packages/form-layout/test/form-item.test.js

@@ -4,6 +4,7 @@ import sinon from 'sinon';
 import '../src/vaadin-form-item.js';
 import '@vaadin/custom-field/src/vaadin-custom-field.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
+import { clearWarnings } from '@vaadin/component-base/src/warnings.js';
 
 describe('form-item', () => {
   let item, label, input;
@@ -536,6 +537,7 @@ describe('form-item', () => {
 
     afterEach(() => {
       stub.restore();
+      clearWarnings();
     });
 
     it('should not warn when a single field is placed to an item', async () => {