Remain on npm 11

.github/workflows/npm-publish.yml

@@ -25,5 +25,5 @@ jobs:
       - run: pebble sdk install 4.9.127
       - run: pebble build
       - name: Update npm
-        run: npm install -g npm@latest
+        run: npm install -g npm@next-11
       - run: npm publish

README.md

@@ -169,6 +169,7 @@ Standard text input field.
 | messageKey | string (unique) | The AppMessage key matching the `messageKey` item defined in your `package.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByMessageKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default value of the input field. |
+| serializeValueAs | string | target type to serialize value as. `string` means as is via cstring. `integer` means converted with `Math.trunc(Number.parseInt(value, 10))` as int32 (0 if NaN) |
 | description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. Set `type` to values such as "email", "time", "date" etc to adjust the behavior of the component. |
 | capabilities | array | Array of features that the connected watch must have for this item to be present |
@@ -243,6 +244,7 @@ A dropdown menu containing multiple options.
 | defaultValue | string | The default value of the dropdown menu. Must match a value in the `options` array. |
 | description | string | Optional sub-text to include below the component |
 | options | array of objects | The options you want to appear in the dropdown menu. Each option is an object with a `label` and `value` property. |
+| serializeValueAs | string | target type to serialize value as. `string` means as is via cstring. `integer` means converted with `Math.trunc(Number.parseInt(value, 10))` as int32 (0 if NaN) |
 | capabilities | array | Array of features that the connected watch must have for this item to be present |
 | group | string | Set this to allow this item, along with other items sharing the same group to be looked up using `Clay.getItemsByGroup()` in your [custom function](#custom-function) |
 
@@ -417,6 +419,7 @@ A list of options allowing the user can only choose one option to submit.
 | defaultValue | string | The default selected item. Must match a value in the `options` array. |
 | description | string | Optional sub-text to include below the component |
 | options | array of objects | The options you want to appear in the radio group. Each option is an object with a `label` and `value` property. |
+| serializeValueAs | string | target type to serialize value as. `string` means as is via cstring. `integer` means converted with `Math.trunc(Number.parseInt(value, 10))` as int32. (0 if NaN) |
 | capabilities | array | Array of features that the connected watch must have for this item to be present |
 | group | string | Set this to allow this item, along with other items sharing the same group to be looked up using `Clay.getItemsByGroup()` in your [custom function](#custom-function) |
 
@@ -670,8 +673,11 @@ Below is the full list of capabilities
 | COLOR | Running on hardware that supports 64 colors. |
 | COMPASS | Running on hardware that includes a compass. |
 | MICROPHONE | Running on hardware that includes a microphone. |
+| RGB_BACKLIGHT | Running on hardware that includes a RGB backlight. |
 | SMARTSTRAP | Running on hardware that includes a smartstrap connector. |
 | SMARTSTRAP_POWER | Running on hardware that includes a powered smartstrap connector. |
+| SPEAKER | Running on hardware that includes a speaker. |
+| TOUCH | Running on hardware that includes a touch screen. |
 | HEALTH | Running on hardware that supports Pebble Health and the HealthService API. |
 | RECT | Running on hardware with a rectangular display. |
 | ROUND | Running on hardware with a round display. |

index.d.ts

@@ -26,6 +26,7 @@ interface ClayConfigItem {
   label?: string;
   attributes?: Record<string, unknown>;
   options?: unknown[];
+  serializeValueAs?: string,
   items?: ClayConfigItem[];
   capabilities?: string[];
   group?: string;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@rebble/clay",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@rebble/clay",
-      "version": "1.0.10",
+      "version": "1.1.0",
       "license": "MIT",
       "devDependencies": {
         "autoprefixer": "^10.4.23",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebble/clay",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "description": "Pebble Config Framework",
   "types": "index.d.ts",
   "scripts": {

src/scripts/components/input.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'val',
   defaults: {
     label: '',
+    serializeValueAs: 'string',
     description: '',
     attributes: {}
   }

src/scripts/components/radiogroup.js

@@ -8,6 +8,7 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
+    serializeValueAs: 'string',
     description: '',
     attributes: {}
   }

src/scripts/components/select.js

@@ -8,6 +8,7 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
+    serializeValueAs: 'string',
     description: '',
     attributes: {}
   },
@@ -17,7 +18,7 @@ module.exports = {
     var $value = self.$element.select('.value');
 
     /**
-     * Updates the HTML value of the component to match the slected option's label
+     * Updates the HTML value of the component to match the selected option's label
      * @return {void}
      */
     function setValueDisplay() {

src/scripts/lib/manipulators.js

@@ -73,10 +73,19 @@ module.exports = {
   },
   val: {
     get: function() {
-      return this.$manipulatorTarget.get('value');
+      let value = this.$manipulatorTarget.get('value');
+      switch (this.config.serializeValueAs) {
+        case 'integer':
+          let integerValue = Math.trunc(Number.parseInt(value, 10));
+          return Number.isNaN(integerValue) ? 0 : integerValue;
+        default:
+          return value;
+      }
     },
     set: function(value) {
-      if (this.get() === value.toString(10)) { return this; }
+      let currentValue = this.$manipulatorTarget.get('value');
+      if (typeof currentValue !== 'undefined' &&
+        currentValue === value.toString(10)) { return this; }
       this.$manipulatorTarget.set('value', value);
       return this.trigger('change');
     },
@@ -116,12 +125,21 @@ module.exports = {
   },
   radiogroup: {
     get: function() {
-      return this.$element.select('input:checked').get('value');
+      let value = this.$element.select('input:checked').get('value');
+      switch (this.config.serializeValueAs) {
+        case 'integer':
+          let integerValue = Math.trunc(Number.parseInt(value, 10));
+          return Number.isNaN(integerValue) ? 0 : integerValue;
+        default:
+          return value;
+      }
     },
     set: function(value) {
-      if (this.get() === value.toString(10)) { return this; }
+      let currentValue = this.$element.select('input:checked').get('value');
+      if (typeof currentValue !== 'undefined' &&
+        currentValue === value.toString(10)) { return this; }
       this.$element
-        .select('input[value="' + value.replace('"', '\\"') + '"]')
+        .select('input[value="' + value.toString(10).replace('"', '\\"') + '"]')
         .set('checked', true);
       return this.trigger('change');
     },

src/scripts/lib/utils.js

@@ -74,6 +74,11 @@ module.exports.capabilityMap = {
     minFwMajor: 0,
     minFwMinor: 0
   },
+  RGB_BACKLIGHT: {
+    platforms: ['emery'],
+    minFwMajor: 4,
+    minFwMinor: 9
+  },
   SMARTSTRAP: {
     platforms: ['basalt', 'chalk', 'diorite', 'emery'],
     minFwMajor: 3,
@@ -84,6 +89,16 @@ module.exports.capabilityMap = {
     minFwMajor: 3,
     minFwMinor: 4
   },
+  SPEAKER: {
+    platforms: ['emery', 'flint'],
+    minFwMajor: 4,
+    minFwMinor: 9
+  },
+  TOUCH: {
+    platforms: ['emery', 'gabbro'],
+    minFwMajor: 4,
+    minFwMinor: 9
+  },
   HEALTH: {
     platforms: ['basalt', 'chalk', 'diorite', 'emery', 'flint', 'gabbro'],
     minFwMajor: 3,

test/spec/lib/clay-config.js

@@ -80,8 +80,11 @@ describe('ClayConfig', function() {
     testCapabilities('aplite', 2, 9, ['COLOR'], 0);
     testCapabilities('aplite', 2, 9, ['COMPASS'], 1);
     testCapabilities('aplite', 2, 9, ['MICROPHONE'], 0);
+    testCapabilities('aplite', 2, 9, ['RGB_BACKLIGHT'], 0);
     testCapabilities('aplite', 2, 9, ['SMARTSTRAP'], 0);
     testCapabilities('aplite', 2, 9, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('aplite', 2, 9, ['SPEAKER'], 0);
+    testCapabilities('aplite', 2, 9, ['TOUCH'], 0);
     testCapabilities('aplite', 2, 9, ['HEALTH'], 0);
     testCapabilities('aplite', 2, 9, ['RECT'], 1);
     testCapabilities('aplite', 2, 9, ['ROUND'], 0);
@@ -101,10 +104,13 @@ describe('ClayConfig', function() {
     testCapabilities('aplite', 3, 10, ['COLOR'], 0);
     testCapabilities('aplite', 3, 10, ['COMPASS'], 1);
     testCapabilities('aplite', 3, 10, ['MICROPHONE'], 0);
+    testCapabilities('aplite', 3, 10, ['RGB_BACKLIGHT'], 0);
     testCapabilities('aplite', 3, 10, ['SMARTSTRAP'], 0);
     testCapabilities('aplite', 3, 4, ['SMARTSTRAP'], 0);
     testCapabilities('aplite', 3, 3, ['SMARTSTRAP'], 0);
     testCapabilities('aplite', 3, 10, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('aplite', 3, 10, ['SPEAKER'], 0);
+    testCapabilities('aplite', 3, 10, ['TOUCH'], 0);
     testCapabilities('aplite', 3, 10, ['HEALTH'], 0);
     testCapabilities('aplite', 3, 9, ['HEALTH'], 0);
     testCapabilities('aplite', 3, 10, ['RECT'], 1);
@@ -125,12 +131,15 @@ describe('ClayConfig', function() {
     testCapabilities('basalt', 3, 10, ['COLOR'], 1);
     testCapabilities('basalt', 3, 10, ['COMPASS'], 1);
     testCapabilities('basalt', 3, 10, ['MICROPHONE'], 1);
+    testCapabilities('basalt', 3, 3, ['RGB_BACKLIGHT'], 0);
     testCapabilities('basalt', 3, 10, ['SMARTSTRAP'], 1);
     testCapabilities('basalt', 3, 4, ['SMARTSTRAP'], 1);
     testCapabilities('basalt', 3, 3, ['SMARTSTRAP'], 0);
     testCapabilities('basalt', 3, 10, ['SMARTSTRAP_POWER'], 1);
     testCapabilities('basalt', 3, 4, ['SMARTSTRAP_POWER'], 1);
     testCapabilities('basalt', 3, 3, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('basalt', 3, 3, ['SPEAKER'], 0);
+    testCapabilities('basalt', 3, 3, ['TOUCH'], 0);
     testCapabilities('basalt', 3, 10, ['HEALTH'], 1);
     testCapabilities('basalt', 3, 9, ['HEALTH'], 0);
     testCapabilities('basalt', 3, 10, ['RECT'], 1);
@@ -151,12 +160,15 @@ describe('ClayConfig', function() {
     testCapabilities('chalk', 3, 10, ['COLOR'], 1);
     testCapabilities('chalk', 3, 10, ['COMPASS'], 1);
     testCapabilities('chalk', 3, 10, ['MICROPHONE'], 1);
+    testCapabilities('chalk', 3, 3, ['RGB_BACKLIGHT'], 0);
     testCapabilities('chalk', 3, 10, ['SMARTSTRAP'], 1);
     testCapabilities('chalk', 3, 4, ['SMARTSTRAP'], 1);
     testCapabilities('chalk', 3, 3, ['SMARTSTRAP'], 0);
     testCapabilities('chalk', 3, 10, ['SMARTSTRAP_POWER'], 1);
     testCapabilities('chalk', 3, 4, ['SMARTSTRAP_POWER'], 1);
     testCapabilities('chalk', 3, 3, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('chalk', 3, 3, ['SPEAKER'], 0);
+    testCapabilities('chalk', 3, 3, ['TOUCH'], 0);
     testCapabilities('chalk', 3, 10, ['HEALTH'], 1);
     testCapabilities('chalk', 3, 9, ['HEALTH'], 0);
     testCapabilities('chalk', 3, 10, ['RECT'], 0);
@@ -177,12 +189,15 @@ describe('ClayConfig', function() {
     testCapabilities('diorite', 3, 10, ['COLOR'], 0);
     testCapabilities('diorite', 3, 10, ['COMPASS'], 0);
     testCapabilities('diorite', 3, 10, ['MICROPHONE'], 1);
+    testCapabilities('diorite', 3, 3, ['RGB_BACKLIGHT'], 0);
     testCapabilities('diorite', 3, 10, ['SMARTSTRAP'], 1);
     testCapabilities('diorite', 3, 4, ['SMARTSTRAP'], 1);
     testCapabilities('diorite', 3, 3, ['SMARTSTRAP'], 0);
     testCapabilities('diorite', 3, 10, ['SMARTSTRAP_POWER'], 0);
     testCapabilities('diorite', 3, 4, ['SMARTSTRAP_POWER'], 0);
     testCapabilities('diorite', 3, 3, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('diorite', 3, 3, ['SPEAKER'], 0);
+    testCapabilities('diorite', 3, 3, ['TOUCH'], 0);
     testCapabilities('diorite', 3, 10, ['HEALTH'], 1);
     testCapabilities('diorite', 3, 9, ['HEALTH'], 0);
     testCapabilities('diorite', 3, 10, ['RECT'], 1);
@@ -203,12 +218,15 @@ describe('ClayConfig', function() {
     testCapabilities('emery', 3, 10, ['COLOR'], 1);
     testCapabilities('emery', 3, 10, ['COMPASS'], 1);
     testCapabilities('emery', 3, 10, ['MICROPHONE'], 1);
+    testCapabilities('emery', 4, 10, ['RGB_BACKLIGHT'], 1);
     testCapabilities('emery', 3, 10, ['SMARTSTRAP'], 1);
     testCapabilities('emery', 3, 4, ['SMARTSTRAP'], 1);
     testCapabilities('emery', 3, 3, ['SMARTSTRAP'], 0);
     testCapabilities('emery', 3, 10, ['SMARTSTRAP_POWER'], 1);
     testCapabilities('emery', 3, 4, ['SMARTSTRAP_POWER'], 1);
     testCapabilities('emery', 3, 3, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('emery', 4, 10, ['SPEAKER'], 1);
+    testCapabilities('emery', 4, 10, ['TOUCH'], 1);
     testCapabilities('emery', 3, 10, ['HEALTH'], 1);
     testCapabilities('emery', 3, 9, ['HEALTH'], 0);
     testCapabilities('emery', 3, 10, ['RECT'], 1);
@@ -229,12 +247,15 @@ describe('ClayConfig', function() {
     testCapabilities('flint', 3, 10, ['COLOR'], 0);
     testCapabilities('flint', 3, 10, ['COMPASS'], 1);
     testCapabilities('flint', 3, 10, ['MICROPHONE'], 1);
+    testCapabilities('flint', 3, 3, ['RGB_BACKLIGHT'], 0);
     testCapabilities('flint', 3, 10, ['SMARTSTRAP'], 0);
     testCapabilities('flint', 3, 4, ['SMARTSTRAP'], 0);
     testCapabilities('flint', 3, 3, ['SMARTSTRAP'], 0);
     testCapabilities('flint', 3, 10, ['SMARTSTRAP_POWER'], 0);
     testCapabilities('flint', 3, 4, ['SMARTSTRAP_POWER'], 0);
     testCapabilities('flint', 3, 3, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('flint', 4, 10, ['SPEAKER'], 1);
+    testCapabilities('flint', 4, 10, ['TOUCH'], 0);
     testCapabilities('flint', 3, 10, ['HEALTH'], 1);
     testCapabilities('flint', 3, 9, ['HEALTH'], 0);
     testCapabilities('flint', 3, 10, ['RECT'], 1);
@@ -255,8 +276,11 @@ describe('ClayConfig', function() {
     testCapabilities('gabbro', 3, 10, ['COLOR'], 1);
     testCapabilities('gabbro', 3, 10, ['COMPASS'], 1);
     testCapabilities('gabbro', 3, 10, ['MICROPHONE'], 1);
+    testCapabilities('gabbro', 3, 10, ['RGB_BACKLIGHT'], 0);
     testCapabilities('gabbro', 3, 10, ['SMARTSTRAP'], 0);
     testCapabilities('gabbro', 3, 10, ['SMARTSTRAP_POWER'], 0);
+    testCapabilities('gabbro', 3, 10, ['SPEAKER'], 0);
+    testCapabilities('gabbro', 4, 10, ['TOUCH'], 1);
     testCapabilities('gabbro', 3, 10, ['HEALTH'], 1);
     testCapabilities('gabbro', 3, 10, ['RECT'], 0);
     testCapabilities('gabbro', 3, 10, ['ROUND'], 1);

test/spec/lib/manipulators.js

@@ -161,13 +161,63 @@ describe('manipulators', function() {
   });
 
   describe('val', function() {
-    var type = 'input';
+    let stringInputType = {
-    testSetGet(type, 'test321');
+      type: 'input',
-    testSetGet(type, 1234, '1234');
+      serializeValueAs: 'string'
-    testDisable(type);
+    };
-    testEnable(type);
+
-    testShow(type);
+    let integerInputType = {
-    testHide(type);
+      type: 'input',
+      serializeValueAs: 'integer'
+    };
+
+    let stringSelectType = {
+      type: 'select',
+      defaultValue: 'value-1',
+      options: [
+        { label: 'label 1', value: '1' },
+        { label: 'label 2', value: '2' }],
+      serializeValueAs: 'string'
+    };
+
+    let integerSelectType = {
+      type: 'select',
+      defaultValue: 'value-1',
+      options: [
+        { label: 'label 1', value: '1' },
+        { label: 'label 2', value: '2' }],
+      serializeValueAs: 'integer'
+    };
+
+    testSetGet(stringInputType, 'test321');
+    testSetGet(stringInputType, 1234, '1234');
+    testSetGet(integerInputType, 'test321', 0);
+    testSetGet(integerInputType, 1234);
+
+    testSetGet(stringSelectType, '1');
+    testSetGet(stringSelectType, 2, '2');
+    testSetGet(integerSelectType, 1);
+    testSetGet(integerSelectType, '2', 2);
+
+    testDisable(stringInputType);
+    testDisable(integerInputType);
+    testDisable(stringSelectType);
+    testDisable(integerSelectType);
+
+    testEnable(stringInputType);
+    testEnable(integerInputType);
+    testEnable(stringSelectType);
+    testEnable(integerSelectType);
+
+    testHide(stringInputType);
+    testHide(integerInputType);
+    testHide(stringSelectType);
+    testHide(integerSelectType);
+
+    testShow(stringInputType);
+    testShow(integerInputType);
+    testShow(stringSelectType);
+    testShow(integerSelectType);
   });
 
   describe('slider', function() {
@@ -203,22 +253,54 @@ describe('manipulators', function() {
   });
 
   describe('radiogroup', function() {
-    var type = {
+    var stringType = {
       type: 'radiogroup',
       clayId: 1,
       options: [
         { label: '1', value: 'one' },
         { label: '2', value: 'two' },
-        { label: '3', value: 'three "quote' }
+        { label: '3', value: 'three "quote' },
-      ]
+        { label: '4', value: 4 },
+        { label: '5', value: '5 with text after' },
+        { label: '5', value: '6.5' }
+      ],
+      serializeValueAs: 'string'
     };
-    testSetGet(type, 'one');
+
-    testSetGet(type, 'two');
+    var integerType = {
-    testSetGet(type, 'three "quote');
+      type: 'radiogroup',
-    testDisable(type);
+      clayId: 1,
-    testEnable(type);
+      options: [
-    testShow(type);
+        { label: '1', value: 'one' },
-    testHide(type);
+        { label: '2', value: 'two' },
+        { label: '3', value: 'three "quote' },
+        { label: '4', value: 4 },
+        { label: '5', value: '5 with text after' },
+        { label: '5', value: '6.5' }
+      ],
+      serializeValueAs: 'integer'
+    };
+
+    testSetGet(stringType, 'one');
+    testSetGet(stringType, 'two');
+    testSetGet(stringType, 'three "quote');
+    testSetGet(stringType, '4');
+    testSetGet(stringType, '5 with text after');
+    testSetGet(stringType, '6.5');
+    testSetGet(integerType, 'one', 0);
+    testSetGet(integerType, 'two', 0);
+    testSetGet(integerType, 'three "quote', 0);
+    testSetGet(integerType, 4, 4);
+    testSetGet(integerType, '5 with text after', 5);
+    testSetGet(integerType, '6.5', 6);
+    testDisable(stringType);
+    testDisable(integerType);
+    testEnable(stringType);
+    testEnable(integerType);
+    testShow(stringType);
+    testShow(integerType);
+    testHide(stringType);
+    testHide(integerType);
   });
 
   describe('checkboxgroup', function() {