Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-shadow
Advanced tools
react-shadow - npm Package Compare versions
Comparing version 0.1.7 to 0.1.9
| { | ||
| "name": "react-shadow", | ||
| "version": "0.1.7", | ||
| "version": "0.1.9", | ||
| "homepage": "https://github.com/Wildhoney/ReactShadow", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -1,5 +0,3 @@ | ||
| (function main($window, $document) { | ||
| (function main($window, $document, $react) { | ||
| "use strict"; | ||
| /** | ||
@@ -25,21 +23,14 @@ * @module ReactShadow | ||
| // Prevent the constant invocation of `getDOMNode()`. | ||
| var componentElement = this.getDOMNode(); | ||
| var shadowRoot = this._shadowRoot = this.getDOMNode().parentNode.createShadowRoot(), | ||
| templateElement = $document.createElement('template'), | ||
| mainElement = $document.createElement('main'); | ||
| // Wrap the current DOM node in a script element. | ||
| var scriptElement = $document.createElement('script'); | ||
| componentElement.parentNode.appendChild(scriptElement); | ||
| scriptElement.appendChild(componentElement); | ||
| // Create shadow root for the visible component. | ||
| var shadowRoot = this._shadowRoot = componentElement.parentNode.parentNode.createShadowRoot(), | ||
| templateElement = $document.createElement('template'); | ||
| // Obtain the HTML from the component's rendered elements. | ||
| templateElement.content.appendChild(componentElement.cloneNode(true)); | ||
| // Append the template node's content to our component. | ||
| this._attachCSSDocuments(templateElement); | ||
| // Append the template node's content to our component. | ||
| var clone = $document.importNode(templateElement.content, true); | ||
| shadowRoot.appendChild(clone); | ||
| shadowRoot.appendChild(mainElement); | ||
| $react.render(this.render(), mainElement); | ||
| this._interceptEvents(); | ||
@@ -54,14 +45,4 @@ | ||
| componentDidUpdate: function componentDidUpdate() { | ||
| var containerElement = this._shadowRoot.querySelector(':not(style)'); | ||
| containerElement.innerHTML = ''; | ||
| var domNode = this.getDOMNode(), | ||
| children = domNode.children, | ||
| childCount = children.length; | ||
| for (var index = 0; index < childCount; index++) { | ||
| containerElement.appendChild(domNode.children[index].cloneNode(true)); | ||
| } | ||
| var containerElement = this._shadowRoot.querySelector('main'); | ||
| $react.render(this.render(), containerElement); | ||
| }, | ||
@@ -75,2 +56,5 @@ | ||
| // Memorise the React ID's root ID for intercepting events. | ||
| var rootReactId = this.getDOMNode().getAttribute('data-reactid'); | ||
| /** | ||
@@ -84,16 +68,23 @@ * @method redirectEvent | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| var targetId = event.target.getAttribute('data-reactid'), | ||
| element = $document.querySelector('*[data-reactid="' + targetId + '"]'); | ||
| var targetId = event.target.getAttribute('data-reactid'); | ||
| var customEvent = $document.createEvent('Events'); | ||
| customEvent.initEvent(event.type, true, false ); | ||
| element.dispatchEvent(customEvent); | ||
| if (targetId) { | ||
| }; | ||
| // Translate current target ID into the React.js element we're shadowing. | ||
| var translatedId = targetId.replace(/\.[0-9]+/, rootReactId), | ||
| element = $document.querySelector('*[data-reactid="' + translatedId + '"]'); | ||
| // Dispatch the event on the original component's element. | ||
| var customEvent = $document.createEvent('Events'); | ||
| customEvent.initEvent(event.type, true, false); | ||
| element.dispatchEvent(customEvent); | ||
| } | ||
| }.bind(this); | ||
| // List of all events that should be intercepted and re-routed. | ||
| var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter', | ||
| 'mouseleave', 'contextmenu']; | ||
| 'mouseleave', 'contextmenu']; | ||
@@ -136,2 +127,2 @@ eventsList.forEach(function forEach(eventName) { | ||
| })(window, window.document); | ||
| })(window, window.document, window.React); |
@@ -1,5 +0,3 @@ | ||
| (function main($window, $document) { | ||
| (function main($window, $document, $react) { | ||
| "use strict"; | ||
| /** | ||
@@ -25,21 +23,14 @@ * @module ReactShadow | ||
| // Prevent the constant invocation of `getDOMNode()`. | ||
| var componentElement = this.getDOMNode(); | ||
| var shadowRoot = this._shadowRoot = this.getDOMNode().parentNode.createShadowRoot(), | ||
| templateElement = $document.createElement('template'), | ||
| mainElement = $document.createElement('main'); | ||
| // Wrap the current DOM node in a script element. | ||
| var scriptElement = $document.createElement('script'); | ||
| componentElement.parentNode.appendChild(scriptElement); | ||
| scriptElement.appendChild(componentElement); | ||
| // Create shadow root for the visible component. | ||
| var shadowRoot = this._shadowRoot = componentElement.parentNode.parentNode.createShadowRoot(), | ||
| templateElement = $document.createElement('template'); | ||
| // Obtain the HTML from the component's rendered elements. | ||
| templateElement.content.appendChild(componentElement.cloneNode(true)); | ||
| // Append the template node's content to our component. | ||
| this._attachCSSDocuments(templateElement); | ||
| // Append the template node's content to our component. | ||
| var clone = $document.importNode(templateElement.content, true); | ||
| shadowRoot.appendChild(clone); | ||
| shadowRoot.appendChild(mainElement); | ||
| $react.render(this.render(), mainElement); | ||
| this._interceptEvents(); | ||
@@ -54,14 +45,4 @@ | ||
| componentDidUpdate: function componentDidUpdate() { | ||
| var containerElement = this._shadowRoot.querySelector(':not(style)'); | ||
| containerElement.innerHTML = ''; | ||
| var domNode = this.getDOMNode(), | ||
| children = domNode.children, | ||
| childCount = children.length; | ||
| for (var index = 0; index < childCount; index++) { | ||
| containerElement.appendChild(domNode.children[index].cloneNode(true)); | ||
| } | ||
| var containerElement = this._shadowRoot.querySelector('main'); | ||
| $react.render(this.render(), containerElement); | ||
| }, | ||
@@ -75,2 +56,5 @@ | ||
| // Memorise the React ID's root ID for intercepting events. | ||
| var rootReactId = this.getDOMNode().getAttribute('data-reactid'); | ||
| /** | ||
@@ -84,16 +68,23 @@ * @method redirectEvent | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| var targetId = event.target.getAttribute('data-reactid'), | ||
| element = $document.querySelector('*[data-reactid="' + targetId + '"]'); | ||
| var targetId = event.target.getAttribute('data-reactid'); | ||
| var customEvent = $document.createEvent('Events'); | ||
| customEvent.initEvent(event.type, true, false ); | ||
| element.dispatchEvent(customEvent); | ||
| if (targetId) { | ||
| }; | ||
| // Translate current target ID into the React.js element we're shadowing. | ||
| var translatedId = targetId.replace(/\.[0-9]+/, rootReactId), | ||
| element = $document.querySelector('*[data-reactid="' + translatedId + '"]'); | ||
| // Dispatch the event on the original component's element. | ||
| var customEvent = $document.createEvent('Events'); | ||
| customEvent.initEvent(event.type, true, false); | ||
| element.dispatchEvent(customEvent); | ||
| } | ||
| }.bind(this); | ||
| // List of all events that should be intercepted and re-routed. | ||
| var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter', | ||
| 'mouseleave', 'contextmenu']; | ||
| 'mouseleave', 'contextmenu']; | ||
@@ -136,2 +127,2 @@ eventsList.forEach(function forEach(eventName) { | ||
| })(window, window.document); | ||
| })(window, window.document, window.React); |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"use strict";t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this.getDOMNode(),n=e.createElement("script");t.parentNode.appendChild(n),n.appendChild(t);var o=this._shadowRoot=t.parentNode.parentNode.createShadowRoot(),c=e.createElement("template");c.content.appendChild(t.cloneNode(!0)),this._attachCSSDocuments(c);var i=e.importNode(c.content,!0);o.appendChild(i),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector(":not(style)");t.innerHTML="";for(var e=this.getDOMNode(),n=e.children,o=n.length,c=0;o>c;c++)t.appendChild(e.children[c].cloneNode(!0))},_interceptEvents:function(){var t=function(t){t.stopPropagation(),t.preventDefault();var n=t.target.getAttribute("data-reactid"),o=e.querySelector('*[data-reactid="'+n+'"]'),c=e.createEvent("Events");c.initEvent(t.type,!0,!1),o.dispatchEvent(c)},n=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu"];n.forEach(function(e){this._shadowRoot.addEventListener(e,t)}.bind(this))},_attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.content.appendChild(o)})}return t}}}(window,window.document); | ||
| !function(t,e,n){t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this._shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),o=e.createElement("template"),i=e.createElement("main");this._attachCSSDocuments(o);var a=e.importNode(o.content,!0);t.appendChild(a),t.appendChild(i),n.render(this.render(),i),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector("main");n.render(this.render(),t)},_interceptEvents:function(){var t=this.getDOMNode().getAttribute("data-reactid"),n=function(n){n.stopPropagation();var o=n.target.getAttribute("data-reactid");if(o){var i=o.replace(/\.[0-9]+/,t),a=e.querySelector('*[data-reactid="'+i+'"]'),c=e.createEvent("Events");c.initEvent(n.type,!0,!1),a.dispatchEvent(c)}}.bind(this),o=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu"];o.forEach(function(t){this._shadowRoot.addEventListener(t,n)}.bind(this))},_attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.content.appendChild(o)})}return t}}}(window,window.document,window.React); |
| { | ||
| "name": "react-shadow", | ||
| "version": "0.1.7", | ||
| "version": "0.1.9", | ||
| "description": "Use Shadow DOM with React.js and CSS imports; write your component styles in CSS!", | ||
@@ -5,0 +5,0 @@ "main": "dist/react-shadow.min.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-2.65%
22158
- Lines of code
- decreased by-3.54%
381
No dependency changes