"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/react-devtools-inline/README.md" between
react-16.10.2.tar.gz and react-16.11.0.tar.gz

About: React is a JavaScript library for building user interfaces. Source code.

README.md  (react-16.10.2):README.md  (react-16.11.0)
skipping to change at line 63 skipping to change at line 63
// This should be the iframe the backend hook has been installed in. // This should be the iframe the backend hook has been installed in.
const iframe = document.getElementById(frameID); const iframe = document.getElementById(frameID);
const contentWindow = iframe.contentWindow; const contentWindow = iframe.contentWindow;
// This returns a React component that can be rendered into your app. // This returns a React component that can be rendered into your app.
// <DevTools {...props} /> // <DevTools {...props} />
const DevTools = initialize(contentWindow); const DevTools = initialize(contentWindow);
``` ```
<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.un stable_createRoot` or `ReactDOM.unstable_createSyncRoot`. **It should not be ren dered 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.cr eateRoot` or `ReactDOM.createSyncRoot`. **It should not be rendered with `ReactD OM.render`.**
## Examples ## Examples
### Configuring a same-origin `iframe` ### Configuring a same-origin `iframe`
The simplest way to use this package is to install the hook from the parent `win dow`. This is possible if the `iframe` is not sandboxed and there are no cross-o rigin restrictions. The simplest way to use this package is to install the hook from the parent `win dow`. This is possible if the `iframe` is not sandboxed and there are no cross-o rigin restrictions.
```js ```js
import { import {
activate as activateBackend, activate as activateBackend,
skipping to change at line 95 skipping to change at line 95
// React application can be injected into <iframe> at any time now... // React application can be injected into <iframe> at any time now...
// Note that this would need to be done via <script> tag injection, // Note that this would need to be done via <script> tag injection,
// as setting the src of the <iframe> would load a new page (withou the injected backend). // as setting the src of the <iframe> would load a new page (withou the injected backend).
// Initialize DevTools UI to listen to the hook we just installed. // Initialize DevTools UI to listen to the hook we just installed.
// This returns a React component we can render anywhere in the parent window. // This returns a React component we can render anywhere in the parent window.
const DevTools = initializeFrontend(contentWindow); const DevTools = initializeFrontend(contentWindow);
// <DevTools /> interface can be rendered in the parent window at any time now.. . // <DevTools /> interface can be rendered in the parent window at any time now.. .
// Be sure to use either ReactDOM.unstable_createRoot() // Be sure to use either ReactDOM.createRoot()
// or ReactDOM.unstable_createSyncRoot() to render this component. // or ReactDOM.createSyncRoot() to render this component.
// Let the backend know the frontend is ready and listening. // Let the backend know the frontend is ready and listening.
activateBackend(contentWindow); activateBackend(contentWindow);
``` ```
### Configuring a sandboxed `iframe` ### Configuring a sandboxed `iframe`
Sandboxed `iframe`s are also supported but require more complex initialization. Sandboxed `iframe`s are also supported but require more complex initialization.
**`iframe.html`** **`iframe.html`**
skipping to change at line 139 skipping to change at line 139
**`main-window.html`** **`main-window.html`**
```js ```js
import { initialize } from "react-devtools-inline/frontend"; import { initialize } from "react-devtools-inline/frontend";
const iframe = document.getElementById("target"); const iframe = document.getElementById("target");
const { contentWindow } = iframe; const { contentWindow } = iframe;
// Initialize DevTools UI to listen to the iframe. // Initialize DevTools UI to listen to the iframe.
// This returns a React component we can render anywhere in the main window. // This returns a React component we can render anywhere in the main window.
// Be sure to use either ReactDOM.unstable_createRoot() // Be sure to use either ReactDOM.createRoot()
// or ReactDOM.unstable_createSyncRoot() to render this component. // or ReactDOM.createSyncRoot() to render this component.
const DevTools = initialize(contentWindow); const DevTools = initialize(contentWindow);
// Let the backend know to initialize itself. // Let the backend know to initialize itself.
// We can't do this directly because the iframe is sandboxed. // We can't do this directly because the iframe is sandboxed.
// Only initialize the backend once the DevTools frontend has been initialized. // Only initialize the backend once the DevTools frontend has been initialized.
iframe.onload = () => { iframe.onload = () => {
contentWindow.postMessage( contentWindow.postMessage(
{ {
type: "activate-backend" type: "activate-backend"
}, },
 End of changes. 3 change blocks. 
5 lines changed or deleted 5 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)