Pr add observed attributes

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;

src/camelCasedAttribute.js

@@ -0,0 +1 @@
+"use strict";module.exports=function(a){return a.replace(/-([a-z])/g,function(a){return a[1].toUpperCase()})};

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 attribute.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+};

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];
  }
 

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');
@@ -12,8 +13,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 +42,9 @@ module.exports = {
  }
 
  const proto = class extends HTMLElement {
+ static get observedAttributes() {
+ return observedAttributes;
+ }
  connectedCallback() {
  const webComponentInstance = this;
  let mountPoint = webComponentInstance;
@@ -73,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]);