From 780950800e2962f45f0f029be618bb8b84610c89 Mon Sep 17 00:00:00 2001 From: Anthony May Date: Thu, 13 Aug 2020 19:24:01 +1000 Subject: [PATCH 1/3] Extend interface to provide observed attributes --- src/dev/index.js | 6 +++++- src/index.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/dev/index.js b/src/dev/index.js index b4ba315..ee8f5cc 100644 --- a/src/dev/index.js +++ b/src/dev/index.js @@ -12,8 +12,9 @@ module.exports = { * @param {JSX.Element} app * @param {string} tagName - The name of the web component. Has to be minus "-" delimited. * @param {boolean} useShadowDom - If the value is set to "true" the web component will use the `shadowDom`. The default value is true. + * @param {string[]} observedAttributes - The observed attributes of the web component */ - create: (app, tagName, useShadowDom = true) => { + create: (app, tagName, useShadowDom = true, observedAttributes = []) => { let appInstance; const lifeCycleHooks = { @@ -40,6 +41,9 @@ module.exports = { } const proto = class extends HTMLElement { + static get observedAttributes() { + return observedAttributes; + } connectedCallback() { const webComponentInstance = this; let mountPoint = webComponentInstance; diff --git a/src/index.js b/src/index.js index f7f0654..af13820 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1 @@ -'use strict';var _createClass=function(){function a(a,b){for(var c,d=0;d Date: Thu, 13 Aug 2020 20:03:33 +1000 Subject: [PATCH 2/3] Match webComponentAttributeChanged name casing to props casing --- index.d.ts | 2 +- src/camelCasedAttribute.js | 1 + src/dev/camelCasedAttribute.js | 8 ++++++++ src/dev/extractAttributes.js | 4 +++- src/dev/index.js | 3 ++- src/extractAttributes.js | 2 +- src/index.js | 2 +- 7 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 src/camelCasedAttribute.js create mode 100644 src/dev/camelCasedAttribute.js diff --git a/index.d.ts b/index.d.ts index 5414c29..e7e80fc 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,5 @@ declare namespace ReactWebComponent { - export const create: (app: JSX.Element, tagName: string, optOutFromShadowRoot?: boolean) => void; + export const create: (app: JSX.Element, tagName: string, optOutFromShadowRoot?: boolean, observedAttributes?: string[]) => void; } export default ReactWebComponent; diff --git a/src/camelCasedAttribute.js b/src/camelCasedAttribute.js new file mode 100644 index 0000000..b1e7c80 --- /dev/null +++ b/src/camelCasedAttribute.js @@ -0,0 +1 @@ +"use strict";module.exports=function(a){return a.replace(/-([a-z])/g,function(a){return a[1].toUpperCase()})}; \ No newline at end of file diff --git a/src/dev/camelCasedAttribute.js b/src/dev/camelCasedAttribute.js new file mode 100644 index 0000000..5fcc8f6 --- /dev/null +++ b/src/dev/camelCasedAttribute.js @@ -0,0 +1,8 @@ +/** + * Takes in a node attributes map and returns an object with camelCased properties and values + * @param attribute + * @returns {{}} + */ +module.exports = function camelCasedAttribute(attribute) { + return key.replace(/-([a-z])/g, (g) => g[1].toUpperCase()) +}; diff --git a/src/dev/extractAttributes.js b/src/dev/extractAttributes.js index 4205642..f6bfa5c 100644 --- a/src/dev/extractAttributes.js +++ b/src/dev/extractAttributes.js @@ -1,3 +1,5 @@ +const camelCasedAttribute = require('./camelCasedAttribute'); + /** * Takes in a node attributes map and returns an object with camelCased properties and values * @param nodeMap @@ -15,7 +17,7 @@ module.exports = function extractAttributes(nodeMap) { for (attribute of attributes) { const key = Object.keys(attribute)[0]; - const camelCasedKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); + const camelCasedKey = camelCasedAttribute(key); obj[camelCasedKey] = attribute[key]; } diff --git a/src/dev/index.js b/src/dev/index.js index ee8f5cc..37405b8 100644 --- a/src/dev/index.js +++ b/src/dev/index.js @@ -2,6 +2,7 @@ const React = require('react'); const ReactDOM = require('react-dom'); const retargetEvents = require('react-shadow-dom-retarget-events'); const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader'); +const camelCasedAttribute = require('./camelCasedAttribute'); const extractAttributes = require('./extractAttributes'); require('@webcomponents/shadydom'); @@ -77,7 +78,7 @@ module.exports = { callLifeCycleHook('disconnectedCallback'); } attributeChangedCallback (attributeName, oldValue, newValue, namespace) { - callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]); + callLifeCycleHook('attributeChangedCallback', [camelCasedAttribute(attributeName), oldValue, newValue, namespace]); } adoptedCallback (oldDocument, newDocument) { callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]); diff --git a/src/extractAttributes.js b/src/extractAttributes.js index 89af623..d756663 100644 --- a/src/extractAttributes.js +++ b/src/extractAttributes.js @@ -1 +1 @@ -"use strict";function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b Date: Thu, 13 Aug 2020 23:50:20 +1000 Subject: [PATCH 3/3] Add key + build --- src/dev/camelCasedAttribute.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dev/camelCasedAttribute.js b/src/dev/camelCasedAttribute.js index 5fcc8f6..6f39280 100644 --- a/src/dev/camelCasedAttribute.js +++ b/src/dev/camelCasedAttribute.js @@ -4,5 +4,5 @@ * @returns {{}} */ module.exports = function camelCasedAttribute(attribute) { - return key.replace(/-([a-z])/g, (g) => g[1].toUpperCase()) + return attribute.replace(/-([a-z])/g, (g) => g[1].toUpperCase()) };