component-playground-responsive-iframe - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

dist/index.js

@@ -33,2 +33,4 @@ 'use strict';
 
+var shouldObserveHead = process.env.NODE_ENV === 'development' && typeof MutationObserver !== 'undefined';
+
 var devices = [{ name: 'iPhone 4', value: '320x480' }, { name: 'iPhone 5', value: '320x568' }, { name: 'iPhone 6', value: '375x627' }, { name: 'iPhone 6 Plus', value: '414x736' }, { name: 'iPad', value: '768x1024' }, { name: 'Nexus 4', value: '384x567' }, { name: 'Nexus 5', value: '360x567' }, { name: 'Nexus 6', value: '412x659' }, { name: 'Nexus 7', value: '600x960' }, { name: 'Nexus 10', value: '800x1280' }];
@@ -166,5 +168,36 @@
     };
+
+    if (shouldObserveHead) {
+      this.observer = true;
+    }
   }
 
   _createClass(ResponsiveIframe, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var _this2 = this;
+
+      if (typeof document === 'undefined') return;
+
+      if (shouldObserveHead) {
+        var target = document.head;
+        // this is a bit of hack to keep the iframe synced with local dev
+        // stylesheets
+        this.observer = new MutationObserver(function (mutations) {
+          _this2.forceUpdate();
+        });
+
+        var config = { childList: true, characterData: true };
+        this.observer.observe(target, config);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (shouldObserveHead) {
+        this.observer.disconnect();
+        this.observer = null;
+      }
+    }
+  }, {
     key: 'render',
@@ -171,0 +204,0 @@ value: function render() {

package.json

 {
   "name": "component-playground-responsive-iframe",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A responsive iframe renderer with a similar goal to Firefox devtools responsive view for the React component playground",
   "main": "dist/index.js",
   "scripts": {
-    "demo": "webpack -c example/webpack.config.js",
-    "watch": "webpack -w -c example/webpack.config.js",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -36,10 +34,3 @@ "build": "babel index.js -o dist/index.js && babel icon-full-screen.js -o dist/icon-full-screen.js",
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.24",
-    "babel-loader": "^5.3.2",
-    "css-loader": "^0.18.0",
-    "stats-webpack-plugin": "^0.2.1",
-    "style-loader": "^0.12.4",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.11.0"
+    "babel": "^5.8.23"
   },
@@ -46,0 +37,0 @@ "dependencies": {

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

1

decreased by-87.5%

Lines of code

288

increased by2.13%

Worsened metrics

Total package byte prevSize

15963

decreased by-3.44%

Number of package files

4

decreased by-20%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes