react-shadow-root - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

lib/index.js

@@ -6,92 +6,18 @@ "use strict";
 });
+Object.defineProperty(exports, "StyleSlot", {
+  enumerable: true,
+  get: function get() {
+    return _StyleSlot.default;
+  }
+});
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _ShadowRoot = _interopRequireDefault(require("./ShadowRoot.js"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _StyleSlot = _interopRequireDefault(require("./StyleSlot.js"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var ShadowRoot =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  _inherits(ShadowRoot, _React$PureComponent);
-
-  function ShadowRoot() {
-    var _getPrototypeOf2;
-
-    var _this;
-
-    _classCallCheck(this, ShadowRoot);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ShadowRoot)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
-      initialized: false
-    });
-
-    return _this;
-  }
-
-  _createClass(ShadowRoot, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.shadowRoot = _reactDom.default.findDOMNode(this).parentNode.attachShadow({
-        delegatesFocus: this.props.delegatesFocus,
-        mode: this.props.mode
-      });
-      this.setState({
-        initialized: true
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.state.initialized) {
-        return _react.default.createElement("span", null);
-      }
-
-      return _reactDom.default.createPortal(this.props.children, this.shadowRoot);
-    }
-  }]);
-
-  return ShadowRoot;
-}(_react.default.PureComponent);
-
-exports.default = ShadowRoot;
-
-_defineProperty(ShadowRoot, "propTypes", {
-  delegatesFocus: _propTypes.default.bool,
-  mode: _propTypes.default.oneOf(['open', 'closed'])
-});
-
-_defineProperty(ShadowRoot, "defaultProps", {
-  delegatesFocus: false,
-  mode: 'closed'
-});
+_ShadowRoot.default.StyleSlot = _StyleSlot.default;
+var _default = _ShadowRoot.default;
+exports.default = _default;

package.json

 {
     "name": "react-shadow-root",
-    "version": "1.1.0",
+    "version": "2.0.0",
     "description": "Adds a shadow root to React components",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

 # react-shadow-root
-Lets you add a shadow root to React components allowing you to use the shadow DOM.
+Lets you add a shadow root to React components allowing you to use the shadow DOM. It also includes a `StyleSlot` component which allows users to easily, but not accidentally, override the styles in the shadow DOM of the component.
 
@@ -10,3 +10,4 @@ ## Installation
 
-## Usage
+## ShadowRoot
+### Usage
 ```jsx
@@ -58,3 +59,3 @@ import React form 'react';
 
-## Props
+### Props
 | Prop | Type | Values | Default | Description |
@@ -65,2 +66,9 @@ |------|------|------|---------|-------------|
 
+## StyleSlot
+Add a `StyleSlot` after the styles for your component. If a user passes a child `style` tag with the `slot` attribute set to the same name as the `StyleSlot` components `name` attribute, the styles will be merged in to the shadow DOM. Click [here](https://apearce.github.io/react-shadow-root/#style-slot) for more information.
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `String` | `styles` | Sets the name of the slot. |
+
 ## Notes
@@ -67,0 +75,0 @@ - A minimum of React 16 is required

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156900

16.22%

Number of package files

9

50%

Lines of code

275

111.54%

Number of lines in readme file

76

11.76%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes