expo / dev-plugins Goto Github PK

View Code? Open in Web Editor NEW

137.0 17.0 22.0 1.3 MB

Out-of-tree Expo devtools plugins for packages that haven't adopted the Expo devtools plugin system yet.

License: MIT License

TypeScript 88.46% JavaScript 10.72% HTML 0.28% CSS 0.54%

devtools expo

dev-plugins's Introduction

Expo DevTools Plugins

A collection of Expo DevTools Plugins.
The repository here is a Proof-Of-Concept for Expo DevTools Plugins and showing the migration effort for moving Flipper Plugins to Expo DevTools Plugins.

Awesome Plugins

@dev-plugins/apollo-client: Plugin for Apollo Client
- Credit: Most code is forked from react-query-apollo-devtools
@dev-plugins/react-query: Plugin for TanStack Query
- Credit: Most code is forked from react-query-native-devtools
@dev-plugins/react-navigation: Plugin for React Navigation
- Credit: Most code is forked from @react-navigation/devtools and the Flipper plugin frontend
@dev-plugins/async-storage: Plugin for @react-native-async-storage/async-storage
- Credit: Originally contributed by jthoward64
@dev-plugins/react-native-mmkv: Plugin for react-native-mmkv
- Credit: Originally contributed by cyrilbo
@dev-plugins/redux: Plugin for redux
- Credit: Originally contributed by dannyBies
redux-devtools-expo-dev-plugin: A plugin for redux with the full Redux DevTools (from the Chrome extension)
- Credit: Matt Oakes and based Redux DevTools

Contributions

Due to the current bandwidth limitations of our team, we are unable to accept new plugin pull requests in this repository. We recommend developers to create and maintain their plugins in their own npm accounts.

However, we understand the value of community contributions and would love to showcase your work. This repository serves as a gallery for awesome plugins. If you have created a plugin and would like to share it with the community, you are welcome to submit a pull request to introduce your plugin in this README.

When submitting a pull request, please include the following:

Name of the plugin
Brief description of what the plugin does
Link to the plugin's repository

We appreciate your understanding and look forward to your contributions!

Example App

The example app is an Expo Router app that provides test cases for plugins

Expo Router is based on React Navigation, so you can just test @dev-plugins/react-navigation from visiting different screens from the app.
Apollo Client: Apollo Client example forked from https://www.apollographql.com/docs/react/get-started/
React Query: React Query example forked from https://github.com/TanStack/query/tree/5b9be1e299257e32c4c294796711f5d82f968530/examples/react/react-native
React Query Time: React Query example forked from https://github.com/bgaleotti/react-query-native-devtools/tree/799efff17b08e9793ab27d5a93457c5d5510233c/apps/Time

dev-plugins's People

Contributors

Stargazers

Watchers

dev-plugins's Issues

is these packages are available to used ?

@dev-plugin/async-storage inline editing cursor jump

Async storage devtools have an option to inline edit the value, but it updates the value after each keystroke, which sets the cursor at the beginning of the text input. The result is typing backwards!

For example, trying to type testing results into:

React probably re-renders after the value change and resets the cursor.

Inlined process typings causing conflicts

Hi, appreciate the teams work setting up these dev plugins - it has helped our transition away from Flipper.

One issue however, is that since the process env definitions were inlined, we are getting failures in CI such as these:

Here is the offending type definition:
https://github.com/expo/dev-plugins/blame/917d64066815e8cdc0b59641bae44b4abc07c0ca/packages/apollo-client/src/index.ts#L1

With the changes to how environment variables are loaded out of the box in SDK 49, this may cause issues for other users and I wanted to help them avoid spending hours trying to find the source of the error.

I currently patch the library by including @types/node and including it in the tsconfig.

store.addDidFinishTransactionListener is not a function error when using TinyBase with Zustand.

Hey all,

I am trying to use tinybase dev-plugin to visualize state change in a Zustand store I have. After following instructions in README I am getting following error:

In console:

 ERROR  TypeError: store.addDidFinishTransactionListener is not a function (it is undefined)

This error is located at:
    in App (at withDevTools.ios.js:25)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
 ERROR  TypeError: store.addDidFinishTransactionListener is not a function (it is undefined)

This error is located at:
    in App (at withDevTools.ios.js:25)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

In Expo Go app:

I created a sample git repository with minimal code to reproduce the issue. Any help on how to make this work would be really appreciated :).

https://github.com/c2tarun/TinyBaseDemo

Thanks

Error : Unable to send message in a disconnected state.

Hello,
Thanks for the awesome work.

I use the react-query plugin in my root _layout.tsx :

export default function RootLayout() {
  useReactQueryDevTools(queryClient);
  ...
}

I randomly get this error :

 ERROR  Error: Unable to send message in a disconnected state.

This error is located at:
    in RootLayout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.ios.js:29)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

It seems to occur after a Fast Refresh full reload.

Feature Request: Support for Redux Debugging

Hello!

I'm reaching out to request an enhancement for debugging redux within expo.

Previously, with the JSI engine & the remote debugging capability, it was incredibly efficient debugging the redux store when using tools like react native redux-devtools.

Currently, with the shift to the hermes engine, debugging the redux store is limited to console logging, which is far from ideal due to the lack of support for more advanced debugging tools.

Having something similar to react-query-native-devtools that's compatible with hermes would be incredibly valuable and improve the debugging process for many of us.

Thank you for considering this enhancement.

useApolloClientDevTools should not throw when given `undefined` as client

our usecase requires loading client in a useEffect after some data has loaded. e.g.

  useEffect(() => {
    (async () => {
      const _persistor = cachePersistorFactory(cache);
      await _persistor.restore();
      const _client = clientFactory(cache, loginProviderRef);
      setCachePersistor(_persistor);
      setClient(_client);
    })();
  }, [loginProviderRef]);

This means we can't use this hook because it throws an error when client is undefined (on the first render) and it's not possible to render hooks conditionally.

Expected Behaviour:
useApolloClientDevTools does nothing if client is undefined.

Cannot read property 'useState' of null - @dev-plugins/react-navigation, useReactNavigationDevTools

What I did

After installing @dev-plugins/react-navigation in expo project, I added these 2 lines according to documentation:

Result

The app crashes when calling useReactNavigationDevTools

Error stack

Notes

app was rebuild
metro has been reset and cache has been clean
followed this doc https://docs.expo.dev/debugging/devtools-plugins/
it's mono repo

package.json

{
	"name": "XXX",
	"main": "index.js",
	"version": "1.0.0",
	"dependencies": {
		"@dev-plugins/react-navigation": "^0.0.6",
		"@expo/vector-icons": "^14.0.0",
		"@gluestack-style/animation-resolver": "^1.0.4",
		"@gluestack-style/react": "^1.0.56",
		"@gluestack-ui/config": "^1.1.18",
		"@gluestack-ui/themed": "^1.1.26",
		"@gorhom/portal": "^1.0.14",
		"@react-native-community/hooks": "^3.0.0",
		"@react-native-community/netinfo": "11.1.0",
		"@react-native-segmented-control/segmented-control": "^2.5.0",
		"@react-navigation/native": "^6.0.2",
		"@shopify/flash-list": "^1.6.3",
		"@tanstack/react-query": "^4.36.1",
		"@trpc/client": "^10.45.1",
		"@trpc/react-query": "^10.45.1",
		"dayjs": "^1.11.10",
		"expo": "~50.0.14",
		"expo-application": "~5.8.3",
		"expo-av": "~13.10.5",
		"expo-constants": "~15.4.5",
		"expo-dev-client": "~3.3.9",
		"expo-device": "~5.9.3",
		"expo-font": "~11.10.3",
		"expo-linear-gradient": "~12.7.2",
		"expo-linking": "~6.2.2",
		"expo-local-authentication": "~13.8.0",
		"expo-localization": "~14.8.3",
		"expo-navigation-bar": "~2.8.1",
		"expo-notifications": "~0.27.6",
		"expo-router": "~3.4.7",
		"expo-secure-store": "~12.8.1",
		"expo-sharing": "~11.10.0",
		"expo-splash-screen": "~0.26.4",
		"expo-status-bar": "~1.11.1",
		"expo-system-ui": "~2.9.3",
		"expo-updates": "~0.24.11",
		"expo-web-browser": "~12.8.2",
		"i18next": "^23.10.0",
		"lucide-react-native": "^0.379.0",
		"react": "18.2.0",
		"react-dom": "18.2.0",
		"react-hook-form": "^7.50.1",
		"react-i18next": "^14.0.5",
		"react-native": "0.73.4",
		"react-native-gesture-handler": "~2.14.0",
		"react-native-mmkv": "^2.12.1",
		"react-native-pager-view": "^6.2.3",
		"react-native-reanimated": "~3.6.2",
		"react-native-safe-area-context": "4.8.2",
		"react-native-screens": "~3.29.0",
		"react-native-svg": "14.1.0",
		"react-native-toast-message": "^2.2.0",
		"react-native-web": "~0.19.6",
		"react-native-webview": "13.6.4",
		"zustand": "4.4.0"
	},
	"devDependencies": {
		"@babel/core": "^7.20.0",
		"@babel/runtime": "^7.24.0",
		"@react-native/assets-registry": "0.74.0",
		"@types/react": "~18.2.45",
		"babel-preset-expo": "^10.0.1",
		"expo-asset": "~9.0.2",
		"jest": "^29.2.1",
		"jest-expo": "~50.0.2",
		"typescript": "^5.1.3"
	},
	"private": true
}

App crashes as soon as plugin hook runs

I created a new plugin following the documentation, imported the hook inside my root component, and immediately got the following error when trying to start my app.

` ERROR TypeError: Cannot read property 'useState' of null

This error is located at:
in App (at withDevTools.ios.js:29)
in withDevTools(Anonymous) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes
ERROR TypeError: Cannot read property 'useState' of null

The error resolves if i comment out the call to useDevToolsPluginClient('my-plugin')

React query dev tools not showing data

I've had great luck with most of the dev-plugins, but can't seem to get the react-query one to work. Is the plugin currently working?

I've created a minimal test repo, demonstrating how queries are not showing in the Chrome browser.

https://github.com/alxhghs/react-query-dev-tools-test/tree/main

App crashes on splash screen

Thanks for the great work for Expo 50.

I enabled the DevTools plugin for react-navigation in my index.tsx file:

The app works fine with the dev server locally. But When I build it and try the development build (apk file on my device or emulator), the app hangs at the Splash screen. And this is the adb log from the console:

01-20 14:00:03.693  4767  4812 I cr_LibraryLoader: Successfully loaded native library
01-20 14:00:03.693  4767  4812 I cr_CachingUmaRecorder: Flushed 8 samples from 8 histograms.
01-20 14:00:03.699  4767  4811 E ReactNativeJS: Error: Failed to setup client from useDevToolsPluginClient: [object Object]
01-20 14:00:03.699  4767  4811 E ReactNativeJS:
01-20 14:00:03.699  4767  4811 E ReactNativeJS: This error is located at:
01-20 14:00:03.699  4767  4811 E ReactNativeJS:     in Index
01-20 14:00:03.699  4767  4811 E ReactNativeJS:     in RCTView
01-20 14:00:03.699  4767  4811 E ReactNativeJS:     in Unknown
01-20 14:00:03.699  4767  4811 E ReactNativeJS:     in RCTView
01-20 14:00:03.699  4767  4811 E ReactNativeJS:     in Unknown
01-20 14:00:03.699  4767  4811 E ReactNativeJS:     in AppContainer, js engine: hermes
01-20 14:00:03.701   402   402 I RanchuHwc: validateDisplay: layer 66 CompositionType 1, fallback to client
01-20 14:00:03.701   402   402 I RanchuHwc: validateDisplay: layer 65 CompositionType 1, fallback to client
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: Error: Failed to setup client from useDevToolsPluginClient: [object Object]
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: This error is located at:
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:     in Index
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:     in RCTView
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:     in Unknown
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:     in RCTView
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:     in Unknown
01-20 14:00:03.702  4767  4812 E unknown:ReactNative:     in AppContainer, js engine: hermes, stack:
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: ?anon_0_@1:3334106
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: asyncGeneratorStep@1:148149
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: _throw@1:148451
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: tryCallOne@53:15
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: anonymous@139:26
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: anonymous@1:321582
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: _callTimer@1:320581
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: _callReactNativeMicrotasksPass@1:320725
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: callReactNativeMicrotasks@1:322659
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: __callReactNativeMicrotasks@1:163417
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: anonymous@1:162552
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: __guard@1:163291
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: flushedQueue@1:162463
01-20 14:00:03.702  4767  4812 E unknown:ReactNative: callFunctionReturnFlushedQueue@1:162319

Versions

expo: 50.0.2
react-navigation/native: 6.1.9
react-navigation/stack: 6.3.20
react-navigation/drawer: 6.6.6

Not sure if this is related to this plugin or react-router. Thanks.

throws return require('open')(url, options) - when selecting a dev tool plugin

I have just updated to expo 50 and want to try out the dev-plugins.
My app is running in expo go

I am using windows and have the added the following. Have also checked npm expo --fix

"@dev-plugins/react-navigation": "^0.0.5",
"expo": "~50.0.6",

This error is thrown as soon as i select Open devtools plugin - @dev-plugins/react-navigation
I have also tried using @dev-plugins/react-query it gives the same error

return require('open')(url, options);
^
TypeError: require(...) is not a function
at startBrowserProcess (C:\.......\node_modules\better-opn\dist\index.js:106:25)
at Object.module.exports [as default] (C:\Users\...\node_modules\better-opn\dist\index.js:122:14)
at Object.openBrowserAsync (C:\Users\.......\node_modules\@expo\cli\src\utils\open.ts:20:40)
at Object.action (C:\Users\.......\node_modules\@expo\cli\src\start\interface\interactiveActions.ts:170:49)
at DevServerManagerActions.openMoreToolsAsync                 (C:\Users\.......\node_modules\@expo\cli\src\start\interface\interactiveActions.ts:177:18)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at ReadStream.KeyPressHandler.handleKeypress (C:\Users\.......\node_modules\@expo\cli\src\start\interface\KeyPressHandler.ts:43:7)

Any help would much appreciated

How to run examples

Sorry for being stupid. I can't get the examples to run.

I assume i can go to apps/example and do npm install - but this fails
If i go to packages/react-navigation and do npm install it also fails

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @dev-plugins/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! dev react@"18.2.0" from @dev-plugins/[email protected]
npm ERR! packages/apollo-client/webui
npm ERR! @dev-plugins/[email protected]
npm ERR! node_modules/@dev-plugins/apollo-client-webui
npm ERR! workspace packages\apollo-client\webui from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^16.3.0 || ^15.5.4" from [email protected]
npm ERR! node_modules/react-json-view
npm ERR! dev react-json-view@"^1.21.3" from @dev-plugins/[email protected]
npm ERR! packages/apollo-client/webui
npm ERR! @dev-plugins/[email protected]
npm ERR! node_modules/@dev-plugins/apollo-client-webui
npm ERR! workspace packages\apollo-client\webui 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.
npm ERR!
npm ERR!
npm ERR! For a full report see: