glamor-shadow-dom - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/index.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(['exports', 'react', 'react-shadow'], factory);
+    define(['exports', 'react', 'react-dom', 'react-shadow'], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require('react'), require('react-shadow'));
+    factory(exports, require('react'), require('react-dom'), require('react-shadow'));
   } else {
@@ -10,6 +10,6 @@ var mod = {
     };
-    factory(mod.exports, global.react, global.reactShadow);
+    factory(mod.exports, global.react, global.reactDom, global.reactShadow);
     global.index = mod.exports;
   }
-})(this, function (exports, _react, _reactShadow) {
+})(this, function (exports, _react, _reactDom, _reactShadow) {
   'use strict';
@@ -23,2 +23,4 @@
 
+  var _reactDom2 = _interopRequireDefault(_reactDom);
+
   var _reactShadow2 = _interopRequireDefault(_reactShadow);
@@ -95,6 +97,6 @@
   exports.default = function (element) {
-    return function (_React$PureComponent) {
-      _inherits(ShadowDOMHelper, _React$PureComponent);
+    var GlamorShadowDOMWrapper = function (_React$Component) {
+      _inherits(GlamorShadowDOMWrapper, _React$Component);
 
-      function ShadowDOMHelper() {
+      function GlamorShadowDOMWrapper() {
         var _ref;
@@ -104,3 +106,3 @@
 
-        _classCallCheck(this, ShadowDOMHelper);
+        _classCallCheck(this, GlamorShadowDOMWrapper);
 
@@ -111,18 +113,18 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ShadowDOMHelper.__proto__ || Object.getPrototypeOf(ShadowDOMHelper)).call.apply(_ref, [this].concat(args))), _this), _this.applyStylesheet = function (node) {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = GlamorShadowDOMWrapper.__proto__ || Object.getPrototypeOf(GlamorShadowDOMWrapper)).call.apply(_ref, [this].concat(args))), _this), _this.glamorInject = function () {
+          var injectStyle = _this.props.injectStyle;
+
+          var node = _reactDom2.default.findDOMNode(_this);
+          var attributes = Array.prototype.slice.call(node.attributes);
+          var prefixId = attributes.find(function (a) {
+            return (/^data-css-/.test(a.nodeName)
+            );
+          });
+          prefixId && injectStyle(prefixId.nodeName);
+        }, _this.glamorousInject = function (node) {
+          var injectStyle = _this.props.injectStyle;
+
           var didUpdate = element.prototype.componentDidUpdate || function () {};
           element.prototype.componentDidUpdate = function () {
-            var cssStyleSheet = Array.from(document.querySelectorAll('[data-glamor]')).slice(-1)[0];
-            if (cssStyleSheet) {
-              Array.from(cssStyleSheet.sheet.cssRules).forEach(function (cssRule) {
-                if (new RegExp(node.className).test(cssRule.selectorText)) {
-                  _this.styleTag.type = 'text/css';
-                  if (_this.styleTag.styleSheet) {
-                    _this.styleTag.styleSheet.cssText = cssRule.cssText;
-                  } else {
-                    _this.styleTag.appendChild(document.createTextNode(cssRule.cssText));
-                  }
-                }
-              });
-            }
+            node.className && injectStyle(node.className);
             didUpdate();
@@ -133,6 +135,52 @@ };
 
+      _createClass(GlamorShadowDOMWrapper, [{
+        key: 'render',
+        value: function render() {
+          return _react2.default.createElement(element, _extends({}, this.props, { ref: this.glamorousInject }));
+        }
+      }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+          this.glamorInject();
+        }
+      }]);
+
+      return GlamorShadowDOMWrapper;
+    }(_react2.default.Component);
+
+    return function (_React$PureComponent) {
+      _inherits(ShadowDOMHelper, _React$PureComponent);
+
+      function ShadowDOMHelper() {
+        var _ref2;
+
+        var _temp2, _this2, _ret2;
+
+        _classCallCheck(this, ShadowDOMHelper);
+
+        for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+
+        return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = ShadowDOMHelper.__proto__ || Object.getPrototypeOf(ShadowDOMHelper)).call.apply(_ref2, [this].concat(args))), _this2), _this2.injectStyle = function (prefixId) {
+          var cssStyleSheet = Array.from(document.querySelectorAll('[data-glamor]')).slice(-1)[0];
+          if (cssStyleSheet) {
+            Array.from(cssStyleSheet.sheet.cssRules).forEach(function (cssRule) {
+              if (new RegExp(prefixId).test(cssRule.selectorText)) {
+                _this2.styleTag.type = 'text/css';
+                if (_this2.styleTag.styleSheet) {
+                  _this2.styleTag.styleSheet.cssText = cssRule.cssText;
+                } else {
+                  _this2.styleTag.appendChild(document.createTextNode(cssRule.cssText));
+                }
+              }
+            });
+          }
+        }, _temp2), _possibleConstructorReturn(_this2, _ret2);
+      }
+
       _createClass(ShadowDOMHelper, [{
         key: 'render',
         value: function render() {
-          var _this2 = this;
+          var _this3 = this;
 
@@ -146,5 +194,5 @@ return _react2.default.createElement(
               _react2.default.createElement('style', { ref: function ref(n) {
-                  return _this2.styleTag = n;
+                  return _this3.styleTag = n;
                 } }),
-              _react2.default.createElement(element, _extends({}, this.props, { ref: this.applyStylesheet }))
+              _react2.default.createElement(GlamorShadowDOMWrapper, _extends({}, this.props, { injectStyle: this.injectStyle }))
             )
@@ -151,0 +199,0 @@ );

package.json

 {
   "name": "glamor-shadow-dom",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "glamor and Shadow DOM together in React with all the benefits of style encapsulation.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14337

increased by59.41%

Lines of code

165

increased by28.91%

Number of lines in readme file

62

increased by6100%

No dependency changes