Bug: Fix object/array size in query details (#4)

* Fix object/array size in query details

Author: josydeleon

.github/workflows/publish.yml

@@ -13,6 +13,6 @@ jobs:
           registry-url: "https://registry.npmjs.org"
       - run: yarn install --frozen-lockfile
       - run: yarn build-client
-      - run: yarn publish
+      - run: yarn publish-client
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-electron.yml

@@ -8,11 +8,10 @@ jobs:
   build:
     strategy:
       matrix:
-        os:
-          [
-            { name: "macos", image: "macos-latest" },
-            { name: "linux", image: "ubuntu-latest" },
+        os: [
             { name: "windows", image: "windows-latest" },
+            { name: "macos", image: "macos-latest" },
+            # { name: "linux", image: "ubuntu-latest" },
           ]
 
     runs-on: ${{ matrix.os.image }}

README.md

@@ -11,15 +11,15 @@ React Native Query Devtool is a monorepo containing a React Native component and
 
 ## Standalone App
 
-The standalone app allows you to visualize and debug query data from your React Native application using the `@jdl/react-native-query-devtool` package.
+The standalone app allows you to visualize and debug query data from your React Native application using the `@jsmdeleon/react-native-query-devtool` package.
 
 ## Installation
 
-You can download the standalone app from the following link. Currently, it's available only for **macOS M1**:
+You can download the standalone app from the following link. Currently, it's available only for **macOS M1** and **Windows x64**:
 
 [Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
 
-**Windows and Linux users:** You need to build the app from source as it's currently only available for **macOS M1**. Ensure to set up your environment accordingly before building the app.
+**Linux users:** You need to build the app from source as it's currently only available for **macOS M1** and **Windows x64**. Ensure to set up your environment accordingly before building the app.
 
 ```bash
 # Go to app folder
@@ -39,17 +39,17 @@ After running the build command, you'll find the freshly built app in a new fold
 To use the devtool component in your React Native project, install the package:
 
 ```bash
-npm install @jdl/react-native-query-devtool
+npm install @jsmdeleon/react-native-query-devtool
 # or
-yarn add @jdl/react-native-query-devtool
+yarn add @jsmdeleon/react-native-query-devtool
 ```
 
 ## Usage
 
 In your React Native application, import `QueryNativeDevtool` to send query data to the server app for debugging:
 
 ```javascript
-import { QueryNativeDevtool } from "@jdl/react-native-query-devtool";
+import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
 
 export default function App() {
   return (
@@ -68,7 +68,7 @@ export default function App() {
 If your app runs `react-query v3` pass `version="v3"` prop to `QueryNativeDevtool`
 
 ```javascript
-import { QueryNativeDevtool } from "@jdl/react-native-query-devtool";
+import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
 
 export default function App() {
   return (
@@ -86,7 +86,7 @@ This will enable your React Native application to send query data to the Electro
 
 ## Examples
 
-In the example folder, you can find example projects demonstrating the usage of `@jdl/react-native-query-devtool` with different versions of React Query (v3, v4, and v5). To test the examples, navigate to the example folder, select the desired example, and run yarn ios or yarn android.
+In the example folder, you can find example projects demonstrating the usage of `@jsmdeleon/react-native-query-devtool` with different versions of React Query (v3, v4, and v5). To test the examples, navigate to the example folder, select the desired example, and run yarn ios or yarn android.
 
 ```bash
 cd example

example/react-query-v3/src/App.js

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View, Text, SafeAreaView } from "react-native";
 import { Users } from "./components/Users";
-import { QueryNativeDevtool } from "@jdl/react-native-query-devtool/src";
+import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool/src";
 
 const queryClient = new QueryClient();
 

example/react-query-v4/src/App.js

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View, Text, SafeAreaView } from "react-native";
 import { Users } from "./components/Users";
-import { QueryNativeDevtool } from "@jdl/react-native-query-devtool/src";
+import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool/src";
 
 const queryClient = new QueryClient();
 

example/react-query-v5/src/App.js

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View, Text, SafeAreaView } from "react-native";
 import { Users } from "./components/Users";
-import { QueryNativeDevtool } from "@jdl/react-native-query-devtool/src";
+import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool/src";
 
 const queryClient = new QueryClient();
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@jdl/react-native-query-devtool-monorepo",
+  "name": "@jsmdeleon/react-native-query-devtool-monorepo",
   "description": "React Native Query Devtool is a monorepo containing a React Native component and a standalone app to visualize query data in a similar way to react-query-devtools for the web.",
   "author": {
     "name": "Josymar",
@@ -12,6 +12,7 @@
     "build-server": "cd ./packages/react-native-query-devtool-app && electron-forge make",
     "publish-server":"cd ./packages/react-native-query-devtool-app && electron-forge publish",
     "build-client": "cd ./packages/react-native-query-devtool && tsup",
+    "publish-client": "cd ./packages/react-native-query-devtool && yarn publish --access public",
     "v3-example-ios": "cd ./example/react-query-v3 && expo start --ios",
     "v3-example-android": "cd ./example/react-query-v3 && expo start --android"
   },

packages/react-native-query-devtool-app/forge.config.ts

@@ -15,10 +15,10 @@ const config: ForgeConfig = {
   },
   rebuildConfig: {},
   makers: [
-    new MakerSquirrel({}),
+    new MakerSquirrel({ name: "rnqdt" }),
     new MakerZIP({}, ["darwin"]),
-    new MakerRpm({}),
-    new MakerDeb({}),
+    new MakerRpm({ options: { name: "rnqdt" } }),
+    new MakerDeb({ options: { name: "rnqdt" } }),
   ],
   publishers: [
     {

packages/react-native-query-devtool-app/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@jdl/react-native-query-devtool-app",
+  "name": "@jsmdeleon/react-native-query-devtool-app",
   "productName": "react-native-query-devtool-app",
   "version": "1.0.0",
-  "description": "The standalone app allows you to visualize and debug query data from your React Native application using the @jdl/react-native-query-devtool package.",
+  "description": "The standalone app allows you to visualize and debug query data from your React Native application using the @jsmdeleon/react-native-query-devtool package.",
   "main": ".webpack/main",
   "scripts": {
     "start": "electron-forge start",

packages/react-native-query-devtool-app/src/components/JSONTreeSearcheable/index.tsx

@@ -23,9 +23,10 @@ const JSONTreeSearcheable: React.FC<JSONTreeSearcheableProps> = ({ data }) => {
         <JSONTree
           data={data}
           theme={theme}
-          shouldExpandNodeInitially={() => true}
-          getItemString={() => (
-            <span dangerouslySetInnerHTML={{ __html: getItemString(data) }} />
+          getItemString={(_, currentData) => (
+            <span
+              dangerouslySetInnerHTML={{ __html: getItemString(currentData) }}
+            />
           )}
           labelRenderer={([key]) => (
             <span dangerouslySetInnerHTML={{ __html: highlightLabel(key) }} />