ulises-jeremias / recoil-devtools Goto Github PK
View Code? Open in Web Editor NEWDevTools for Recoil with hot reloading, action replay, and customizable UI
Home Page: https://ulises-jeremias.github.io/recoil-devtools/
License: MIT License
DevTools for Recoil with hot reloading, action replay, and customizable UI
Home Page: https://ulises-jeremias.github.io/recoil-devtools/
License: MIT License
โโ [email protected]
Works great with Recoil 0.1.3, but upon upgrading to Recoil 0.2.0, my app throws fatal error:
recoil.js:1511 Uncaught Error: This component must be used inside a <RecoilRoot> component.
at Object.notInAContext (recoil.js:1511)
at recoil.js:2624
index.js:1 The above error occurred in the <RecoilLogger> component:
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import { RecoilRoot } from 'recoil'
import { RecoilLogger } from 'recoil-devtools-logger'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<RecoilRoot>
<RecoilLogger />
<App />
</RecoilRoot>
</React.StrictMode>,
document.getElementById('root')
)
App works if I remove RecoilLogger.
The recoil version has been released recently and now, if you have npm@^7.0.0
and recoil@^0.4.0
, npm install
will throw the error:
Found: [email protected]
npm ERR! node_modules/recoil
npm ERR! recoil@"^0.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer recoil@"^0.2.0" from [email protected]
npm ERR! node_modules/recoil-devtools-logger
npm ERR! dev recoil-devtools-logger@"^0.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution
I ask to update the recoil peerDependency for the recoil-devtools-logger
package and release a new version of it. I guess there shouldn't be breaking changes.
As a workaround, I can use npm install
with --force
, or --legacy-peer-deps
flags.
Enviroment
npm -v
- 7.20.6
node -v
- v12.22.2
cat /etc/os-release
-
NAME="Ubuntu"
VERSION="20.04.2 LTS (Focal Fossa)"
The library which you've created is beautiful and works as expected ๐ฅ
Firstly thanks for making these devtools!
However, I've run into an issue where atom updates are missing in the logs and I've narrowed the issue down to a particular scenario. I have an atom which contains a list of ids and whenever it gets a new id added, it renders a component that updates another atom on initial render. This is done in an effect hook and when I look at the devtools, they only show atom state from the effect hook and not the ids list.
I tried reproducing the issue in a codesandbox but it's not 100% the same behaviour. If you keep clicking the button, it seems to arbitrarily switch between showing the ids and the effect hook atom. But in my own code, it only shows the effect hook atom.
https://codesandbox.io/s/recoil-devtools-useeffect-bug-k272i?file=/src/Item.js:194-294
The package recoil-devtools-log-monitor
fails when loaded.
It seems it's using the cjs
version, which doesn't seem to be compatible with my Next.js app.
/Users/vadorequest/dev/poc-nextjs-reaflow/node_modules/recoil-devtools-themes/lib/index.js:1
export * from 'base16';
^^^^^^
SyntaxError: Unexpected token 'export'
at wrapSafe (node:internal/modules/cjs/loader:1024:16)
at Module._compile (node:internal/modules/cjs/loader:1072:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/Users/vadorequest/dev/poc-nextjs-reaflow/node_modules/recoil-devtools-log-monitor/dist/recoil-devtools-log-monitor.cjs.development.js:9:14)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/Users/vadorequest/dev/poc-nextjs-reaflow/node_modules/recoil-devtools-log-monitor/dist/index.js:7:20)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
event - build page: /next/dist/pages/_error
git clone https://github.com/Vadorequest/poc-nextjs-reaflow.git
cd poc-nextjs-reaflow && git checkout use-recoil-devtools-log-monitor
yarn
yarn start
I always end up forgetting the shortcuts ๐ฌ
Having an option to display them somewhere in the dock monitor would be useful. (currently, I go back to the code to remind myself of them ๐ )
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.