ulises-jeremias / recoil-devtools Goto Github PK

View Code? Open in Web Editor NEW

52.0 2.0 2.0 3.76 MB

DevTools for Recoil with hot reloading, action replay, and customizable UI

Home Page: https://ulises-jeremias.github.io/recoil-devtools/

License: MIT License

JavaScript 20.27% TypeScript 76.39% HTML 2.64% CSS 0.14% Dockerfile 0.56%

recoil devtools recoil-devtools react logger recoil-logger hacktoberfest

recoil-devtools's Introduction

Recoil DevTools

Developer Tools to power-up Recoil development workflow or any other architecture which handles the state change (see integrations).

Integrations

Recoil Logger is a recoil logging tool that lets you replay problems as if they happened in your own browser. This devtool is based on redux-logger, but implemented for recoil in the react way.
Recoil Log Monitor is a recoil logging tool that shows a log of states and actions, and lets you change their history. This devtool is based on redux-devtools-log-monitor, but implemented for recoil in the react way.
Recoil Dock Monitor is a resizable and movable dock for Recoil DevTools. Powered by React Dock.

License

MIT

recoil-devtools's People

Contributors

Stargazers

Watchers

Forkers

testfailed anhgeeky

recoil-devtools's Issues

Feature request - Option to display shortcuts in the Dock monitor

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 😆 )

Update version of recoil

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 🥇

logs missing before useEffect hook

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

Uncaught Error: Must be used inside <RecoilRoot> with recoil 0.2.0

└─ [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.

SyntaxError: Unexpected token 'export' in recoil-devtools-themes - export * from 'base16';

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

Reproduction

git clone https://github.com/Vadorequest/poc-nextjs-reaflow.git
cd poc-nextjs-reaflow && git checkout use-recoil-devtools-log-monitor
yarn
yarn start

PR: Vadorequest/rwa-faunadb-reaflow-nextjs-magic#6

ulises-jeremias / recoil-devtools Goto Github PK

recoil-devtools's Introduction

Recoil DevTools

Integrations

License

recoil-devtools's People

Contributors

Stargazers

Watchers

Forkers

recoil-devtools's Issues

Feature request - Option to display shortcuts in the Dock monitor

Update version of recoil

logs missing before useEffect hook

Uncaught Error: Must be used inside <RecoilRoot> with recoil 0.2.0

SyntaxError: Unexpected token 'export' in recoil-devtools-themes - export * from 'base16';

Reproduction

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent