Skip to content
This repository was archived by the owner on Sep 7, 2022. It is now read-only.

Allows to pass to reactify the tagName instead of the CustomElement #38

Closed
wants to merge 1 commit into from
Closed

Allows to pass to reactify the tagName instead of the CustomElement #38

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';

const defaults = {
React,
ReactDOM,
ReactDOM
};

function syncEvent(node, eventName, newEventHandler) {
Expand All @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm probably missing something, but how does this work? Where is customElements.get defined?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's on window - but do we fill that cross-browser @treshugart ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's on window

Yeah, because window. It's still probably good to do a const { customElements } = window; at the top.

but do we fill that cross-browser

We don't, no. This was part of the reason that we opted to just use the constructor in the beginning.

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;

Expand Down Expand Up @@ -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);
Expand Down