{"_id":"@aliucord/react-devtools-core","_rev":"5-209a0a20fc9d59f7228622b7b462bcc3","name":"@aliucord/react-devtools-core","dist-tags":{"latest":"4.24.4-aliucord.1"},"versions":{"4.24.4":{"name":"@aliucord/react-devtools-core","version":"4.24.4","license":"MIT","_id":"@aliucord/react-devtools-core@4.24.4","maintainers":[{"name":"6pak","email":"kubastaron@hotmail.com"},{"name":"juby210","email":"juby210@vp.pl"}],"dist":{"shasum":"687502cc6a9437eedebdca8a750a9eefd3f36251","tarball":"https://registry.npmjs.org/@aliucord/react-devtools-core/-/react-devtools-core-4.24.4.tgz","fileCount":16,"integrity":"sha512-hl78YMIqfaHmrQnzpA7KzmEVnjU5AxUM9FVx8lYhkY0Hm+mT+zCPGaiz8CfFIK40BY+qvAqyq9585dRlVMyI0A==","signatures":[{"sig":"MEUCIGjCNyD9Q8qpBuwDanQ6JM0ISvNVhnPG3MyR386rI5tcAiEA5Lu++KbRkoivExCwf6SciiSbTP6bYAGZvHtMH7ghkGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14769893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicYeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOdA/+KGsBNAYfxqtQiPHyaROgWb+6elx0kAMghFyAu6GZHtbzbagX\r\nSv1Xp2Sq7OcUn3LrfEHaoGVguQ7z/khzdD6zKvacIPJl196Mietz6k7tv2v+\r\n8EeOFBO/KiIxMXPScU7I+mi0PfylmSmqMkf8eOwCmxsu0R+xU3nHps2Y5CKP\r\nnTa8dkdcg5TW0DtwSoBGOo2hNZPydh1VWCh1AXGwduPjzAgVHYHO72B8QLFx\r\nB0gXVCoLGhRuO5GIv1hNCk6Ti3oqviIPiF883jdnnizh7MxLYGMrcyS28YuW\r\nQ6leqgNME+UWt9M39IT4Bl4FuVt05bI8ugkam+cdEMzzw+2xlB/W8RYqHqEv\r\n2eV5bzTqymPO75VViDOk7hAMblUh0RBMUOWhE2+Nt4Za5PK2Ij/M/C2TkZ4P\r\neRok5ZwJOSvLyG7r3c+WT8PU6s/pqCDaDHBfPFGbUYfgE6opAGL79lmmpcjf\r\nvkm7L4IEv4jRB5/8oklDWJd/LosZbD0sIQs1O4s5uslP+lrfvAIUK9A+nQnO\r\nyno1/N0Ux4kuvRpFoRcTtQg/vK2TocEPNhLSXoHFiWDw7PK9z0CK99pZqRBU\r\nQdT+fl62WnA8qOiVRdy7pHg48yJAc/ykpWxrO6OiEb9zunNw455mh5YSp3wx\r\n3GcwSz0Lz97BYkm/k/jnbhq4YedsPX3pu1M=\r\n=xoom\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/backend.js","scripts":{"build":"yarn build:backend && yarn build:standalone","prepublish":"yarn run build","build:backend":"cross-env NODE_ENV=production webpack --config webpack.backend.js","start:backend":"cross-env NODE_ENV=development webpack --config webpack.backend.js --watch","build:backend:fb":"cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/backend-fb webpack --config webpack.backend.js","build:standalone":"cross-env NODE_ENV=production webpack --config webpack.standalone.js","start:standalone":"cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch","build:standalone:fb":"cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/standalone-fb webpack --config webpack.standalone.js"},"_npmUser":{"name":"6pak","email":"kubastaron@hotmail.com"},"repository":{"url":"https://github.com/Aliucord/react.git","type":"git","directory":"packages/react-devtools-core"},"description":"Use react-devtools outside of the browser","directories":{},"dependencies":{"ws":"^7","shell-quote":"^1.6.1"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^3.1.4"},"_npmOperationalInternal":{"tmp":"tmp/react-devtools-core_4.24.4_1651607450322_0.49200661864205664","host":"s3://npm-registry-packages"}},"4.24.4-aliucord.1":{"name":"@aliucord/react-devtools-core","version":"4.24.4-aliucord.1","license":"MIT","_id":"@aliucord/react-devtools-core@4.24.4-aliucord.1","maintainers":[{"name":"6pak","email":"kubastaron@hotmail.com"},{"name":"juby210","email":"juby210@vp.pl"}],"dist":{"shasum":"a842dae2b1b8c39ff3c6007f77a50f48daaf955c","tarball":"https://registry.npmjs.org/@aliucord/react-devtools-core/-/react-devtools-core-4.24.4-aliucord.1.tgz","fileCount":16,"integrity":"sha512-TtGzq5FP55BrPnJMqbG7iWNrjhtqvUgMsYVtuwslmONQEkFvxwEJSrsI+EXJMBEinOwyf3AP3HUYQhItjduxuw==","signatures":[{"sig":"MEUCICrMevAQHfzADFo8rlytp/7UPfjC7xBXGqxEX3zJonUmAiEAr4mkd7TbkUYrsQjPEm6bA5DEzmLRA/BfavsgzUJbV/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14769893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicYhiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonjA//c//ECTUCkDCBA8Sd4jC27IpxUm88ykpR8+dShHgWuAogmy1T\r\nbj4YRy3UICTcRKGizW2w6P2kxvvHXqGc+ZEASDIh+LRaSnLYMoHy31wB9Y5T\r\nv5AKaKOedPyy/HGwLo/3nmsXI4maH+tK3XBlKxBOx+xjF/Vs0/ZnKLl7Hr2G\r\njU2p4EF8+gbOWCt76vSvT2ui0QP0t4MJnu86xG1pEYF9/T8z0YJpNBjbdYjD\r\ne5yLlzHGb+GVeDYeWR9m3ma8bD01RucUzxyczG/NadjNbtvKAwKExUaSn3+M\r\n5ET51NpEi6MXcEQAryjqcSv3ZWVevDZ7KnPDtGLZ9J/4bZjOEZgPOjdHNkI5\r\nLDZ7t/sNjjmdq8yBQGCcccXDAOFNwm/W6/9l/e5bvXg1hBo6BaUbYzF1krT7\r\nagZZk5SZynnQ5b/Qu4WroM8GixgPsK85wRdvEiGNCHzch1Q7TG2PUNjkymIn\r\nxIv2wEppzKzYvUGhzeCdeET8MRsBCFEjHdKrYJzlxoRHkgBJBwPiSyYtHB35\r\nxKK7r/QmMQtx8CHJwLq9n5a7uqtA51dPX6ktq/NJjfLQ2es33Ty79uBWcYg7\r\nk5zYGx3mV3OLP83szMeqmHBfkNtRnXbcV39j0aZv6ICBg8NNIzsm3fXjB9f0\r\n+NSVaLZMVVkU6tt+WXEWGP6Eh2NJtlXnRr8=\r\n=lXyT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/backend.js","scripts":{"build":"yarn build:backend && yarn build:standalone","prepublish":"yarn run build","build:backend":"cross-env NODE_ENV=production webpack --config webpack.backend.js","start:backend":"cross-env NODE_ENV=development webpack --config webpack.backend.js --watch","build:backend:fb":"cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/backend-fb webpack --config webpack.backend.js","build:standalone":"cross-env NODE_ENV=production webpack --config webpack.standalone.js","start:standalone":"cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch","build:standalone:fb":"cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/standalone-fb webpack --config webpack.standalone.js"},"_npmUser":{"name":"6pak","email":"kubastaron@hotmail.com"},"repository":{"url":"https://github.com/Aliucord/react.git","type":"git","directory":"packages/react-devtools-core"},"description":"Use react-devtools outside of the browser","directories":{},"dependencies":{"ws":"^7","shell-quote":"^1.6.1"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^3.1.4"},"_npmOperationalInternal":{"tmp":"tmp/react-devtools-core_4.24.4-aliucord.1_1651607650497_0.9439517389775633","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-05-03T19:50:50.249Z","modified":"2026-07-22T15:11:03.656Z","4.24.4":"2022-05-03T19:50:50.661Z","4.24.4-aliucord.1":"2022-05-03T19:54:10.714Z"},"license":"MIT","repository":{"url":"https://github.com/Aliucord/react.git","type":"git","directory":"packages/react-devtools-core"},"description":"Use react-devtools outside of the browser","maintainers":[{"email":"juby210@vp.pl","name":"juby210"},{"email":"kubastaron@hotmail.com","name":"6pak"},{"email":"vDiamond_@outlook.com","name":"diamond_"}],"readme":"# `react-devtools-core`\n\nThis package provides low-level APIs to support renderers like [React Native](https://github.com/facebook/react-native). If you're looking for the standalone React DevTools UI, **we suggest using [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools) instead of using this package directly**.\n\nThis package provides two entrypoints: labeled \"backend\" and \"standalone\" (frontend). Both APIs are described below.\n\n# Backend API\n\nBackend APIs are embedded in _development_ builds of renderers like [React Native](https://github.com/facebook/react-native) in order to connect to the React DevTools UI.\n\n### Example\n\nIf you are building a non-browser-based React renderer, you can use the backend API like so:\n\n```js\nif (process.env.NODE_ENV !== 'production') {\n  const { connectToDevTools } = require(\"react-devtools-core\");\n\n  // Must be called before packages like react or react-native are imported\n  connectToDevTools({\n    ...config\n  });\n}\n```\n\n> **NOTE** that this API (`connectToDevTools`) must be (1) run in the same context as React and (2) must be called before React packages are imported (e.g. `react`, `react-dom`, `react-native`).\n\n### `connectToDevTools` options\n| Prop | Default | Description |\n|---|---|---|\n| `host` | `\"localhost\"` | Socket connection to frontend should use this host. |\n| `isAppActive` |  | (Optional) function that returns true/false, telling DevTools when it's ready to connect to React. |\n| `port` | `8097` | Socket connection to frontend should use this port. |\n| `resolveRNStyle` |  | (Optional) function that accepts a key (number) and returns a style (object); used by React Native. |\n| `retryConnectionDelay` | `200` | Delay (ms) to wait between retrying a failed Websocket connection |\n| `useHttps` | `false` | Socket connection to frontend should use secure protocol (wss). |\n| `websocket` |  | Custom `WebSocket` connection to frontend; overrides `host` and `port` settings. |\n\n# Frontend API\n\nFrontend APIs can be used to render the DevTools UI into a DOM node. One example of this is [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools) which wraps DevTools in an Electron app.\n\n### Example\n```js\nimport DevtoolsUI from \"react-devtools-core/standalone\";\n\n// See the full list of API methods in documentation below.\nconst { setContentDOMNode, startServer } = DevtoolsUI;\n\n// Render DevTools UI into a DOM element.\nsetContentDOMNode(document.getElementById(\"container\"));\n\n// Start socket server used to communicate between backend and frontend.\nstartServer(\n  // Port defaults to 8097\n  1234,\n\n  // Host defaults to \"localhost\"\n  \"example.devserver.com\",\n\n  // Optional config for secure socket (WSS).\n  {\n    key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),\n    cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')\n  }\n);\n```\n\n### Exported methods\nThe `default` export is an object defining the methods described below.\n\nThese methods support chaining for convenience. For example:\n```js\nconst DevtoolsUI = require(\"react-devtools-core/standalone\");\nDevtoolsUI.setContentDOMNode(element).startServer();\n```\n\n#### `connectToSocket(socket: WebSocket)`\n> This is an advanced config function that is typically not used.\n\nCustom `WebSocket` connection to use for communication between DevTools frontend and backend. Calling this method automatically initializes the DevTools UI (similar to calling `startServer()`).\n\n#### `openProfiler()`\nAutomatically select the \"Profiler\" tab in the DevTools UI.\n\n#### `setContentDOMNode(element: HTMLElement)`\nSet the DOM element DevTools UI should be rendered into on initialization.\n\n#### `setDisconnectedCallback(callback: Function)`\n_Optional_ callback to be notified when DevTools `WebSocket` closes (or errors).\n\n#### `setProjectRoots(roots: Array<string>)`\n_Optional_ set of root directores for source files. These roots can be used to open an inspected component's source code using an IDE.\n\n#### `setStatusListener(callback: Function)`\n_Optional_ callback to be notified of socket server events (e.g. initialized, errored, connected).\n\nThis callback receives two parameters:\n```js\nfunction onStatus(\n  message: string,\n  status: 'server-connected' | 'devtools-connected' | 'error'\n): void {\n  // ...\n}\n```\n\n#### `startServer(port?: number, host?: string, httpsOptions?: Object, loggerOptions?: Object)`\nStart a socket server (used to communicate between backend and frontend) and renders the DevTools UI.\n\nThis method accepts the following parameters:\n| Name | Default | Description |\n|---|---|---|\n| `port` | `8097` | Socket connection to backend should use this port. |\n| `host` | `\"localhost\"` | Socket connection to backend should use this host. |\n| `httpsOptions` | | _Optional_ object defining `key` and `cert` strings. |\n| `loggerOptions` | | _Optional_ object defining a `surface` string (to be included with DevTools logging events). |\n\n# Development\n\nWatch for changes made to the backend entry point and rebuild:\n```sh\nyarn start:backend\n```\n\nWatch for changes made to the standalone UI entry point and rebuild:\n```sh\nyarn start:standalone\n```\n\nRun the standalone UI using `yarn start` in the [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools).","readmeFilename":"README.md"}