feat: convert schema data to camelCase before calling validate

Author: Daniel Morse

packages/core/package.json

@@ -14,6 +14,7 @@
     "@webcomponents/template": "^1.4.0",
     "@webcomponents/webcomponentsjs": "^2.2.4",
     "ajv": "^6.7.0",
+    "change-case": "^3.1.0",
     "classnames": "^2.2.6",
     "color": "^3.1.0",
     "core-js": "^2.6.3",

packages/core/renderers/bolt-base.js

@@ -1,6 +1,7 @@
 import Ajv from 'ajv';
 import { withComponent, shadow, props } from 'skatejs';
-import { findParentTag, hasNativeShadowDomSupport } from '../utils';
+import changeCase from 'change-case';
+import { findParentTag, hasNativeShadowDomSupport, renameKey } from '../utils';
 
 export function BoltBase(Base = HTMLElement) {
   return class extends Base {
@@ -74,8 +75,21 @@ export function BoltBase(Base = HTMLElement) {
         }
       }
 
-      if (this.schema) {
-        let isValid = ajv.validate(this.schema, validatedData);
+      // Skip this if formatted schema data is already stored
+      if (this.schema && !this.formattedSchema) {
+        this.formattedSchema = {};
+        Object.assign(this.formattedSchema, this.schema);
+        Object.keys(this.formattedSchema.properties).map(key => {
+          this.formattedSchema.properties = renameKey(
+            key,
+            changeCase.camelCase(key),
+            this.formattedSchema.properties,
+          );
+        });
+      }
+
+      if (this.formattedSchema) {
+        let isValid = ajv.validate(this.formattedSchema, validatedData);
 
         // bark at any schema validation errors
         if (!isValid) {

packages/core/utils/index.js

@@ -8,6 +8,7 @@ export * from './find-parent-tag';
 export * from './get-component-root-element';
 export * from './is-valid-selector';
 export * from './rgb2hex';
+export * from './rename-key';
 export * from './sanitize-classes';
 export * from './supports-css-vars';
 export * from './supports-passive-event-listener';

packages/core/utils/rename-key.js

@@ -0,0 +1,14 @@
+/**
+ * Immutably renames object keys
+ * https://medium.com/front-end-weekly/immutably-rename-object-keys-in-javascript-5f6353c7b6dd
+ *
+ * @param {String} oldKey - The name of the key to be renamed
+ * @param {String} newKey - The name it will be renamed it to
+ * @param {Object} object - The object that contains the old key name
+ * @returns {Object} - A new object with one renamed key
+ */
+
+export const renameKey = (oldKey, newKey, { [oldKey]: value, ...object }) => ({
+  [newKey]: value,
+  ...object,
+});