feat: support number values with underscores

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support number values with underscores
+
 ### Changed
 
 - Invoke `disconnected` callback before [target]Disconnected callbacks

packages/core/src/element.ts

@@ -51,7 +51,12 @@ export default class ImpulseElement extends HTMLElement {
       );
     }
 
+    // Validate if value changed after transformation.
+    // Common case would be:
+    // -> 8_000 to 8000
     const { newValue, oldValue } = attributeValueTransformer(_newValue, _oldValue, property.type);
+    if (newValue === oldValue) return;
+
     fn.call(this, newValue, oldValue);
   }
 
@@ -108,8 +113,10 @@ function attributeValueTransformer(_newValue: string | null, _oldValue: string |
       const transform = (value: string | null) => value !== null && value !== 'false';
       return { newValue: transform(_newValue), oldValue: transform(_oldValue) };
     }
-    case Number:
-      return { newValue: Number(_newValue), oldValue: Number(_oldValue) };
+    case Number: {
+      const transform = (value: string | null) => value?.replace(/_/g, '');
+      return { newValue: Number(transform(_newValue)), oldValue: Number(transform(_oldValue)) };
+    }
     case Array:
       return { newValue: parseJSON(_newValue, []), oldValue: parseJSON(_oldValue, []) };
     case Object:

packages/core/src/property.ts

@@ -44,7 +44,7 @@ function descriptorProperties(element: Element, attributeName: string, type: Pro
   switch (type) {
     case Number:
       return {
-        get: () => Number(element.getAttribute(attributeName) || 0),
+        get: () => Number(element.getAttribute(attributeName)?.replace(/_/g, '') || 0),
         set: (value: number) => element.setAttribute(attributeName, (value || 0).toString()),
       };
     case Boolean:

packages/core/test/property.test.ts

@@ -17,13 +17,15 @@ describe('@property', () => {
     friendsChanged = Sinon.fake();
     configChanged = Sinon.fake();
     zeroConfigChanged = Sinon.fake();
+    numericValueChanged = Sinon.fake();
 
     // From HTML
     @property() placement: string;
     @property({ type: Boolean }) fallback: boolean;
     @property({ type: Number }) delay: number;
     @property({ type: Array }) fruits: string[];
     @property({ type: Object }) config: Record<string, string>;
+    @property({ type: Number }) numericValue: number;
 
     // Default value
     @property() name = 'foo';
@@ -61,6 +63,7 @@ describe('@property', () => {
         value="guava"
         started="false"
         record-count="22"
+        numeric-value="8_000"
         names='["Md", "Abeid"]'
         override-config='{ "property": false }'
       ></property-test>
@@ -82,6 +85,9 @@ describe('@property', () => {
 
     expect(el).to.have.property('config').to.deep.equal({ foo: 'bar' });
     expect(el).to.have.attribute('config').to.deep.equal('{ "foo": "bar" }');
+
+    expect(el).to.have.property('numericValue', 8000);
+    expect(el).to.have.attribute('numeric-value', '8_000');
   });
 
   it('should set the property value by default', () => {
@@ -221,5 +227,10 @@ describe('@property', () => {
     el.zeroConfig = { name: 'Abeid' };
     expect(el.zeroConfigChanged.getCall(0).args[0]).to.deep.equal({ name: 'Abeid' });
     expect(el.zeroConfigChanged.getCall(0).args[1]).to.deep.equal({});
+
+    el.numericValue = 8000;
+    expect(el.numericValueChanged.called).to.be.false;
+    el.numericValue = 9000;
+    expect(el.numericValueChanged.calledOnceWith(9000, 8000)).to.be.true;
   });
 });