react-devtools-inline - npm Package Compare versions

Comparing version 4.0.6 to 4.1.0

package.json

 {
   "name": "react-devtools-inline",
-  "version": "4.0.6",
+  "version": "4.1.0",
   "description": "Embed react-devtools within a website",
@@ -15,2 +15,3 @@ "license": "MIT",
     "backend.js",
+    "build-info.json",
     "frontend.js"
@@ -27,4 +28,21 @@ ],
   "devDependencies": {
-    "cross-env": "^3.1.4"
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^24.7.1",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^3.1.4",
+    "css-loader": "^1.0.1",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.3.1"
   }
 }

README.md

@@ -24,3 +24,3 @@ # `react-devtools-inline`
 * **`initialize(contentWindow)`** -
-Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.** (This means before any `import` or `require` statements!)
+Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**<sup>2</sup>
 * **`activate(contentWindow)`** -
@@ -32,13 +32,21 @@ Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
 
+// This should be the iframe the React application is running in.
+const iframe = document.getElementById(frameID);
+const contentWindow = iframe.contentWindow;
+
 // Call this before importing React (or any other packages that might import React).
-initialize();
+initialize(contentWindow);
 
+// Initialize the frontend...
+
 // Call this only once the frontend has been initialized.
-activate();
+activate(contentWindow);
 ```
 
+<sup>2</sup> The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `<script>` tags that include React.)
+
 ### `react-devtools-inline/frontend`
 
 * **`initialize(contentWindow)`** -
-Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>2</sup>.
+Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>3</sup>.
 
@@ -57,3 +65,3 @@ ```js
 
-<sup>2</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. It should not be rendered with `ReactDOM.render`.
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
 
@@ -149,2 +157,9 @@ ## Examples
 };
+```
+
+## Development
+
+Watch for changes made to the source code and rebuild:
+```sh
+yarn start
 ```

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

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

Found 6 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1717866

increased by0.79%

Lines of code

32974

increased by2.67%

Number of lines in readme file

161

increased by10.27%

Worsened metrics

Dev dependency count

18

increased by1700%

Number of low supply chain risk alerts

11

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes