From befe8b36becd3a3fd9c745b09251588d9a5fdc28 Mon Sep 17 00:00:00 2001 From: Andrea Wyss Date: Fri, 9 Sep 2016 17:46:35 -0700 Subject: [PATCH] Allows to pass to reactify the tagName instead of the CustomElement Class Avoids creating an instance of the component just to get the tagName. Makes it possible to use this with Web.Components written in TypeScript. --- src/index.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 86a4762..926b268 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'; const defaults = { React, - ReactDOM, + ReactDOM }; function syncEvent(node, eventName, newEventHandler) { @@ -27,8 +27,22 @@ function syncEvent(node, eventName, newEventHandler) { } export default function (CustomElement, opts) { + // Allows to pass the tagName instead of the CustomElement Class + // Avoids creating an instance of the component just to get the tagName. + // Makes it possible to use this with Web.Components written in TypeScript. + var tagName; + if (typeof CustomElement === 'string') { + tagName = CustomElement; + CustomElement = customElements.get(tagName); + if (!CustomElement) { + throw new Error('CustomElement ' + tagName + ' not defined.'); + } + } + else { + tagName = new CustomElement().tagName; + } + opts = assign(defaults, opts); - const tagName = (new CustomElement()).tagName; const displayName = pascalCase(tagName); const { React, ReactDOM } = opts; @@ -66,9 +80,9 @@ export default function (CustomElement, opts) { render() { return React.createElement(tagName, { style: this.props.style }, this.props.children); } - }; + } - const proto = CustomElement.prototype + const proto = CustomElement.prototype; Object.keys(proto).forEach(prop => { if (typeof proto[prop] === 'function') { ReactComponent.prototype[prop] = proto[prop].bind(proto);