Use HA's official entity formatting functions when available

HA 2023.9+ exposes hass.formatEntityState/formatEntityAttributeValue,
which apply the user's own locale/number-format/precision preferences
the same way HA's own UI does. Delegate to them when present instead
of this project's own formatNumber/computeStateDisplay
reimplementation, falling back to the existing logic otherwise. A
custom `format:` config still takes precedence over both.

Based on the approach in benct#336 (originally by @mill1000), which should
close benct#333, benct#308, benct#286, and benct#220 - a cluster of long-standing
decimal/precision formatting complaints.

That PR alone would have introduced a regression, though: HA installs
stub formatEntityState/formatEntityAttributeValue functions on initial
connection that return completely raw, unformatted values (confirmed
by extracting the actual implementations from a running instance's
frontend bundle - the stub is literally `(e,t) => (t ?? e.state) ?? ""`),
and swaps in the real implementations asynchronously. This is the same
race benct#373/benct#379 fixed for formatEntityName, but benct#336 didn't extend that
re-render check to the new functions it depends on - so cards would
have been stuck showing raw values whenever the swap happened after
initial render, same bug class as benct#370/benct#371 but for values instead of
names.

Generalized hasConfigOrEntitiesChanged's formatEntityName check into a
list covering all three formatter keys, and added tests simulating the
swap for each. Also added tests covering the new delegation paths in
entityStateDisplay, which the original PR's diff had zero coverage for.

Fixes benct#333, benct#308, benct#286, benct#220

Co-Authored-By: Tucker Kern <mill1000@users.noreply.github.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: 3 people

src/entity.js

@@ -25,8 +25,16 @@ export const entityName = (stateObj, config) => {
 };
 
 export const entityStateDisplay = (hass, stateObj, config) => {
+    // HA 2023.9+ exposes hass.formatEntityState/formatEntityAttributeValue, which apply the
+    // user's own locale/number-format/precision preferences the same way HA's own UI does.
+    // Prefer them over our own formatNumber/computeStateDisplay reimplementation when present.
+    const hasOfficialStateFormatter = typeof hass.formatEntityState === 'function';
+    const hasOfficialAttributeFormatter = typeof hass.formatEntityAttributeValue === 'function';
+
     if (isUnavailable(stateObj)) {
-        return hass.localize(`state.default.${stateObj.state}`);
+        return hasOfficialStateFormatter
+            ? hass.formatEntityState(stateObj)
+            : hass.localize(`state.default.${stateObj.state}`);
     }
 
     let value = config.attribute ? stateObj.attributes[config.attribute] : stateObj.state;
@@ -74,13 +82,17 @@ export const entityStateDisplay = (hass, stateObj, config) => {
         return `${value}${unit ? ` ${unit}` : ''}`;
     }
 
+    const modifiedStateObj = { ...stateObj, attributes: { ...stateObj.attributes, unit_of_measurement: unit } };
+
     if (config.attribute) {
-        return `${isNaN(value) ? value : formatNumber(value, hass.locale)}${unit ? ` ${unit}` : ''}`;
+        return hasOfficialAttributeFormatter
+            ? hass.formatEntityAttributeValue(modifiedStateObj, config.attribute)
+            : `${isNaN(value) ? value : formatNumber(value, hass.locale)}${unit ? ` ${unit}` : ''}`;
     }
 
-    const modifiedStateObj = { ...stateObj, attributes: { ...stateObj.attributes, unit_of_measurement: unit } };
-
-    return computeStateDisplay(hass.localize, modifiedStateObj, hass.locale, hass.entities);
+    return hasOfficialStateFormatter
+        ? hass.formatEntityState(modifiedStateObj)
+        : computeStateDisplay(hass.localize, modifiedStateObj, hass.locale, hass.entities);
 };
 
 export const entityStyles = (config) =>

src/entity.test.js

@@ -117,6 +117,39 @@ describe('entityStateDisplay', () => {
         const stateObj = { entity_id: 'sensor.temp', state: '21', attributes: { unit_of_measurement: '°C' } };
         expect(entityStateDisplay(hass, stateObj, {})).toBe('21 °C');
     });
+
+    // See https://developers.home-assistant.io/docs/frontend/data#entity-state-formatting -
+    // HA 2023.9+ exposes hass.formatEntityState/formatEntityAttributeValue, which apply the user's
+    // own locale/precision preferences. Prefer these over our own reimplementation when present.
+    describe('with HA official formatting functions available', () => {
+        const officialHass = {
+            ...hass,
+            formatEntityState: vi.fn((stateObj) => `official-state:${stateObj.state}`),
+            formatEntityAttributeValue: vi.fn((stateObj, attribute) => `official-attr:${attribute}`),
+        };
+
+        it('delegates unavailable-state localization to formatEntityState', () => {
+            const stateObj = { state: 'unavailable', attributes: {} };
+            expect(entityStateDisplay(officialHass, stateObj, {})).toBe('official-state:unavailable');
+        });
+
+        it('delegates attribute display to formatEntityAttributeValue', () => {
+            const stateObj = { state: 'on', attributes: { battery_level: 42 } };
+            expect(entityStateDisplay(officialHass, stateObj, { attribute: 'battery_level' })).toBe(
+                'official-attr:battery_level'
+            );
+        });
+
+        it('delegates main state display to formatEntityState', () => {
+            const stateObj = { entity_id: 'sensor.temp', state: '21', attributes: {} };
+            expect(entityStateDisplay(officialHass, stateObj, {})).toBe('official-state:21');
+        });
+
+        it('still applies a custom format instead of the official formatters', () => {
+            const stateObj = { state: '90', attributes: {} };
+            expect(entityStateDisplay(officialHass, stateObj, { format: 'duration' })).toBe('1:30');
+        });
+    });
 });
 
 describe('entityStyles', () => {

src/util.js

@@ -45,17 +45,21 @@ export const getEntityIds = (config) =>
         .concat(config.entities?.map((entity) => (typeof entity === 'string' ? entity : entity.entity)))
         .filter((entity) => entity);
 
+// HA installs stub formatEntityName/formatEntityState/formatEntityAttributeValue functions on
+// initial connection (returning raw, unformatted values) and replaces them asynchronously with
+// the real implementations once translations load. None of that swap is otherwise observable, so
+// without this check a row can get stuck showing stale/raw output until some unrelated entity
+// state change happens to force a re-render.
+const HASS_FORMATTER_KEYS = ['formatEntityName', 'formatEntityState', 'formatEntityAttributeValue'];
+
 export const hasConfigOrEntitiesChanged = (node, changedProps) => {
     if (changedProps.has('config')) {
         return true;
     }
 
     const oldHass = changedProps.get('_hass');
     if (oldHass) {
-        // HA installs a stub `formatEntityName` that ignores the name override on initial connection
-        // and replaces it asynchronously once translations load. Re-render when that swap happens so
-        // the `name` override actually takes effect on the main row.
-        if (oldHass.formatEntityName !== node._hass.formatEntityName) {
+        if (HASS_FORMATTER_KEYS.some((key) => oldHass[key] !== node._hass[key])) {
             return true;
         }
         return node.entityIds.some((entity) => oldHass.states[entity] !== node._hass.states[entity]);

src/util.test.js

@@ -142,20 +142,23 @@ describe('hasConfigOrEntitiesChanged', () => {
     });
 
     // See https://github.com/benct/lovelace-multiple-entity-row/issues/370 and
-    // https://github.com/benct/lovelace-multiple-entity-row/issues/371 - HA 2026.2+ installs a stub
-    // `formatEntityName` on initial connection and swaps in the real implementation asynchronously
-    // once translations load. A `name` override wouldn't take effect until some unrelated entity
-    // state changed forced a re-render, because this swap alone wasn't treated as a change.
-    it('is true when hass swaps in a new formatEntityName implementation', () => {
-        const sharedState = { state: 'on' };
-        const stubFormatEntityName = () => 'stub';
-        const realFormatEntityName = () => 'real';
-        const oldHass = { states: { 'sensor.a': sharedState }, formatEntityName: stubFormatEntityName };
-        const node = {
-            entityIds: ['sensor.a'],
-            _hass: { states: { 'sensor.a': sharedState }, formatEntityName: realFormatEntityName },
-        };
-        const changedProps = new Map([['_hass', oldHass]]);
-        expect(hasConfigOrEntitiesChanged(node, changedProps)).toBe(true);
-    });
+    // https://github.com/benct/lovelace-multiple-entity-row/issues/371 - HA 2026.2+ installs stub
+    // formatEntityName/formatEntityState/formatEntityAttributeValue functions on initial connection
+    // (returning raw, unformatted values) and swaps in the real implementations asynchronously once
+    // translations load. Without detecting that swap, a row can get stuck showing stale/raw output
+    // (e.g. a `name` override reverting, or a numeric state showing unformatted) until some
+    // unrelated entity state change happens to force a re-render.
+    it.each(['formatEntityName', 'formatEntityState', 'formatEntityAttributeValue'])(
+        'is true when hass swaps in a new %s implementation',
+        (key) => {
+            const sharedState = { state: 'on' };
+            const oldHass = { states: { 'sensor.a': sharedState }, [key]: () => 'stub' };
+            const node = {
+                entityIds: ['sensor.a'],
+                _hass: { states: { 'sensor.a': sharedState }, [key]: () => 'real' },
+            };
+            const changedProps = new Map([['_hass', oldHass]]);
+            expect(hasConfigOrEntitiesChanged(node, changedProps)).toBe(true);
+        }
+    );
 });