react-shadow-root - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

lib/IllegalNodeError.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -15,6 +15,6 @@ 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
@@ -45,3 +45,3 @@
     if (Error.captureStackTrace) {
-      Error.captureStackTrace(_assertThisInitialized(_assertThisInitialized(_this)), IllegalNodeError);
+      Error.captureStackTrace(_assertThisInitialized(_this), IllegalNodeError);
     }
@@ -58,2 +58,2 @@
 
-exports.default = IllegalNodeError;
+exports["default"] = IllegalNodeError;

lib/index.js

@@ -9,6 +9,6 @@ "use strict";
   get: function get() {
-    return _StyleSlot.default;
+    return _StyleSlot["default"];
   }
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -19,6 +19,6 @@ var _ShadowRoot = _interopRequireDefault(require("./ShadowRoot.js"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-_ShadowRoot.default.StyleSlot = _StyleSlot.default;
-var _default = _ShadowRoot.default;
-exports.default = _default;
+_ShadowRoot["default"].StyleSlot = _StyleSlot["default"];
+var _default = _ShadowRoot["default"];
+exports["default"] = _default;

lib/ShadowRoot.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -15,3 +15,3 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -30,2 +30,4 @@ 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 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); }
@@ -35,38 +37,43 @@
 
-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 =
+var constructableStylesheetsSupported = window && window.ShadowRoot && window.ShadowRoot.prototype.hasOwnProperty('adoptedStyleSheets') && window.CSSStyleSheet && window.CSSStyleSheet.prototype.hasOwnProperty('replace');
+var shadowRootSupported = window && window.Element && window.Element.prototype.hasOwnProperty('attachShadow');
+
+var _default =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  _inherits(ShadowRoot, _React$PureComponent);
+  _inherits(_default, _React$PureComponent);
 
-  function ShadowRoot() {
-    var _getPrototypeOf2;
-
+  function _default() {
     var _this;
 
-    _classCallCheck(this, ShadowRoot);
+    _classCallCheck(this, _default);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(_default).call(this));
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ShadowRoot)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       initialized: false
     });
 
+    _this.placeholder = _react["default"].createRef();
     return _this;
   }
 
-  _createClass(ShadowRoot, [{
+  _createClass(_default, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.shadowRoot = _reactDom.default.findDOMNode(this).parentNode.attachShadow({
-        delegatesFocus: this.props.delegatesFocus,
-        mode: this.props.mode
+      var _this$props = this.props,
+          delegatesFocus = _this$props.delegatesFocus,
+          mode = _this$props.mode,
+          stylesheets = _this$props.stylesheets;
+      this.shadowRoot = this.placeholder.current.parentNode.attachShadow({
+        delegatesFocus: delegatesFocus,
+        mode: mode
       });
+
+      if (stylesheets) {
+        this.shadowRoot.adoptedStyleSheets = stylesheets;
+      }
+
       this.setState({
@@ -80,22 +87,37 @@ initialized: true
       if (!this.state.initialized) {
-        return _react.default.createElement("span", null);
+        return _react["default"].createElement("span", {
+          ref: this.placeholder
+        });
       }
 
-      return _reactDom.default.createPortal(this.props.children, this.shadowRoot);
+      return _reactDom["default"].createPortal(this.props.children, this.shadowRoot);
     }
   }]);
 
-  return ShadowRoot;
-}(_react.default.PureComponent);
+  return _default;
+}(_react["default"].PureComponent);
 
-exports.default = ShadowRoot;
+exports["default"] = _default;
 
-_defineProperty(ShadowRoot, "propTypes", {
-  delegatesFocus: _propTypes.default.bool,
-  mode: _propTypes.default.oneOf(['open', 'closed'])
-});
+_defineProperty(_default, "constructableStylesheetsSupported", constructableStylesheetsSupported);
 
-_defineProperty(ShadowRoot, "defaultProps", {
+_defineProperty(_default, "constructibleStylesheetsSupported", constructableStylesheetsSupported);
+
+_defineProperty(_default, "defaultProps", {
   delegatesFocus: false,
   mode: 'closed'
-});
+});
+
+_defineProperty(_default, "displayName", 'ShadowRoot');
+
+_defineProperty(_default, "propTypes", {
+  delegatesFocus: _propTypes["default"].bool,
+  mode: _propTypes["default"].oneOf(['open', 'closed']),
+  stylesheets: _propTypes["default"].arrayOf(function (propValue, idx, componentName, location, propFullName) {
+    if (!(propValue[idx] instanceof window.CSSStyleSheet)) {
+      return new Error("Invalid prop `".concat(propFullName, "` supplied to `").concat(componentName, "`. Expected an instance of `CSSStyleSheet`."));
+    }
+  })
+});
+
+_defineProperty(_default, "shadowRootSupported", shadowRootSupported);

lib/StyleSlot.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -17,3 +17,3 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -40,2 +40,4 @@ 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 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); }
@@ -45,12 +47,10 @@
 
-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 StyleSlot =
+var _default =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  _inherits(StyleSlot, _React$PureComponent);
+  _inherits(_default, _React$PureComponent);
 
-  function StyleSlot() {
+  function _default() {
     var _getPrototypeOf2;
@@ -60,3 +60,3 @@
 
-    _classCallCheck(this, StyleSlot);
+    _classCallCheck(this, _default);
 
@@ -67,9 +67,9 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StyleSlot)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(_default)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       assignedNodes: []
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onSlotChange", function () {
+    _defineProperty(_assertThisInitialized(_this), "onSlotChange", function () {
       _this.manageAssignedNodes();
@@ -81,3 +81,3 @@ });
 
-  _createClass(StyleSlot, [{
+  _createClass(_default, [{
     key: "manageAssignedNodes",
@@ -88,7 +88,7 @@ value: function manageAssignedNodes() {
         if (n.tagName.toLowerCase() === 'style') {
-          assignedNodes.push(_react.default.createElement("style", {
+          assignedNodes.push(_react["default"].createElement("style", {
             key: i
           }, n.textContent));
         } else {
-          throw new _IllegalNodeError.default(n);
+          throw new _IllegalNodeError["default"](n);
         }
@@ -106,3 +106,3 @@ });
       // Only the slot has been rendered when componentDidMount is called
-      this.slot = _reactDom.default.findDOMNode(this); // Have to do the setTimeout otherwise the slotchange event fires
+      this.slot = _reactDom["default"].findDOMNode(this); // Have to do the setTimeout otherwise the slotchange event fires
       // immediately in Chrome and Firefox but not Safari for some reason
@@ -123,3 +123,3 @@
     value: function render() {
-      return _toConsumableArray(this.state.assignedNodes).concat([_react.default.createElement("slot", {
+      return [].concat(_toConsumableArray(this.state.assignedNodes), [_react["default"].createElement("slot", {
         key: "slot",
@@ -131,13 +131,15 @@ name: this.props.name
 
-  return StyleSlot;
-}(_react.default.PureComponent);
+  return _default;
+}(_react["default"].PureComponent);
 
-exports.default = StyleSlot;
+exports["default"] = _default;
 
-_defineProperty(StyleSlot, "propTypes", {
-  name: _propTypes.default.string
+_defineProperty(_default, "defaultProps", {
+  name: 'styles'
 });
 
-_defineProperty(StyleSlot, "defaultProps", {
-  name: 'styles'
+_defineProperty(_default, "displayName", 'StyleSlot');
+
+_defineProperty(_default, "propTypes", {
+  name: _propTypes["default"].string
 });

package.json

 {
     "name": "react-shadow-root",
-    "version": "2.0.0",
+    "version": "3.0.0",
     "description": "Adds a shadow root to React components",
@@ -21,10 +21,10 @@ "main": "./lib/index.js",
         "@babel/cli": "^7.0.0-beta.46",
-        "@babel/core": "^7.0.0-beta.46",
-        "@babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
+        "@babel/core": "^7.3.3",
+        "@babel/plugin-proposal-class-properties": "^7.3.3",
         "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
-        "@babel/preset-env": "^7.0.0-beta.46",
+        "@babel/preset-env": "^7.3.1",
         "@babel/preset-react": "^7.0.0-beta.46",
         "babel-loader": "^8.0.0-beta.0",
         "concurrently": "^3.5.1",
-        "css-loader": "^0.28.11",
+        "css-loader": "^3.1.0",
         "html-webpack-plugin": "^3.2.0",
@@ -35,6 +35,6 @@ "path": "^0.12.7",
         "react-dom": "^16.3.2",
-        "style-loader": "^0.21.0",
+        "style-loader": "^0.23.0",
         "webpack": "^4.6.0",
-        "webpack-cli": "^2.0.15",
-        "webpack-dev-server": "^3.1.3"
+        "webpack-cli": "^3.2.3",
+        "webpack-dev-server": "^3.1.14"
     },
@@ -54,3 +54,6 @@ "repository": {
     },
-    "homepage": "https://github.com/apearce/react-shadow-root#readme"
+    "homepage": "https://github.com/apearce/react-shadow-root#readme",
+    "dependencies": {
+        "react-syntax-highlighter": "^11.0.2"
+    }
 }

README.md

 # react-shadow-root
-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.
+Lets you add a shadow root to React components allowing you to use the shadow DOM. This provides scoped CSS and includes support for [constructable](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) [stylesheets](https://wicg.github.io/construct-stylesheets).
 
@@ -58,9 +58,17 @@ ## Installation
 
+### Static properties
+| Name | Description |
+|------|-------------|
+| `constructableStylesheetsSupported` | A boolean telling you if constructable stylesheets are supported by the browser. |
+| `constructibleStylesheetsSupported` | An alias of `constructableStylesheetsSupported` using the ['correct' spelling](https://github.com/WICG/construct-stylesheets/issues/90). |
+| `shadowRootSupported` | A boolean telling you if attaching a shadow root is supported by the _browser_, not the element. |
+
 ### Props
 | Prop | Type | Values | Default | Description |
-|------|------|------|---------|-------------|
+|------|------|--------|---------|-------------|
 | `delegatesFocus` | `Boolean` | `true` or `false` | `false` | Expands the focus behavior of elements within the shadow DOM. Click [here](https://apearce.github.io/react-shadow-root/#delegates-focus) for more information. |
 | `mode` | `String` | `open` or `closed` | `closed` | Sets the mode of the shadow root. |
+| `stylesheets` | `Array` | `arrayOf(CSSStyleSheet)` | optional | Takes an array of CSSStyleSheet objects for constructable stylesheets. |
 
-## StyleSlot
+## StyleSlot (deprecated)
 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.
@@ -73,5 +81,5 @@ ### Props
 ## Notes
-- A minimum of React 16 is required
+- A minimum of React 16 is required.
 - Not all browsers support the shadow DOM. Click [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Browser_compatibility) for current browser support.
 - Not all HTML elements support the shadow DOM. Click [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Elements_you_can_attach_a_shadow_to) for more information.
-- It has been tested with the 'new' Context API and it worked fine. It has not been tested with the legacy API.
+- It has been tested with the Context API introduced in React 16.3.0 and it worked fine. It has not been tested with the previous API.

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

Fixed 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

188497

increased by20.14%

Number of package files

12

increased by33.33%

Lines of code

882

increased by220.73%

Number of lines in readme file

84

increased by10.53%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedreact-syntax-highlighter@^11.0.2

• + Added@babel/runtime@7.26.0(transitive)

• + Addedcharacter-entities@1.2.4(transitive)

• + Addedcharacter-entities-legacy@1.1.4(transitive)

• + Addedcharacter-reference-invalid@1.1.4(transitive)

• + Addedclipboard@2.0.11(transitive)

• + Addedcomma-separated-tokens@1.0.8(transitive)

• + Addeddelegate@3.2.0(transitive)

• + Addedfault@1.0.4(transitive)

• + Addedformat@0.2.2(transitive)

• + Addedgood-listener@1.2.2(transitive)

• + Addedhast-util-parse-selector@2.2.5(transitive)

• + Addedhastscript@5.1.2(transitive)

• + Addedhighlight.js@9.13.19.18.5(transitive)

• + Addedis-alphabetical@1.0.4(transitive)

• + Addedis-alphanumerical@1.0.4(transitive)

• + Addedis-decimal@1.0.4(transitive)

• + Addedis-hexadecimal@1.0.4(transitive)

• + Addedlowlight@1.11.0(transitive)

• + Addedparse-entities@1.2.2(transitive)

• + Addedprismjs@1.17.11.29.0(transitive)

• + Addedproperty-information@5.6.0(transitive)

• + Addedreact-syntax-highlighter@11.0.3(transitive)

• + Addedrefractor@2.10.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedselect@1.1.2(transitive)

• + Addedspace-separated-tokens@1.1.5(transitive)

• + Addedtiny-emitter@2.1.0(transitive)

• + Addedxtend@4.0.2(transitive)