Rollup setup and images fix

Author: josydeleon

package.json

@@ -11,7 +11,7 @@
     "dev-electron": "cd ./packages/react-native-query-devtool-app && electron-forge start",
     "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",
+    "build-client": "cd ./packages/react-native-query-devtool && rm -rf dist && rollup -c",
     "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",
@@ -50,7 +50,6 @@
     "prettier": "^3.1.1",
     "react-native": "^0.72.9",
     "ts-node": "^10.9.2",
-    "tsup": "^8.0.1",
     "typescript": "^5.3.3"
   }
 }

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

@@ -11,7 +11,8 @@
   "types": "./dist/index.d.ts",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "assets"
   ],
   "license": "MIT",
   "keywords": [
@@ -28,6 +29,10 @@
     "react-native-json-tree":"^1.3.0"
   },
   "devDependencies": {
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
     "@types/react-native": "^0.72.8",
@@ -36,8 +41,11 @@
     "babel-runtime": "^6.26.0",
     "react-native": "^0.72.9",
     "ts-node": "^10.9.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "react-native-svg": "15.1.0",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
   },
   "peerDependencies": {
     "react": "*",

packages/react-native-query-devtool/rollup.config.js

@@ -0,0 +1,33 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import image from '@rollup/plugin-image';
+import dts from 'rollup-plugin-dts';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+export default [
+  {
+    input: 'src/index.tsx',
+    output: {
+      file: 'dist/index.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+      }),
+      image(),
+    ],
+  },
+  {
+    input: 'src/index.tsx',
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [dts()],
+    external: ['react', 'react-native'],
+  },
+];

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { Image, Pressable, StyleSheet } from 'react-native';
-import Icons from '../../utils/images';
+
+import copyIcon from '../../../assets/copy.png';
 
 interface Props {
   onPress?: () => void;
@@ -10,12 +11,7 @@ interface Props {
 const CopyButton: React.FC<Props> = ({ onPress }) => {
   return (
     <Pressable onPress={onPress}>
-      <Image
-        source={{
-          uri: Icons.CopyIcon,
-        }}
-        style={styles.container}
-      />
+      <Image source={copyIcon} style={styles.container} />
     </Pressable>
   );
 };

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

@@ -3,7 +3,8 @@ import React from 'react';
 import { Image, TouchableOpacity } from 'react-native';
 
 import { styles } from './styles';
-import Icons from '../../utils/images';
+
+import rqLogo from '../../../assets/rqlogo.png';
 
 interface Props {
   onPress: () => void;
@@ -16,12 +17,7 @@ const FloatingButton: React.FC<Props> = ({ onPress }) => {
       onPress={onPress}
       style={styles.container}
     >
-      <Image
-        style={styles.image}
-        source={{
-          uri: Icons.RQLogo,
-        }}
-      />
+      <Image style={styles.image} source={rqLogo} />
     </TouchableOpacity>
   );
 };

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { Image, Pressable, StyleSheet } from 'react-native';
-import Icons from '../../utils/images';
+
+import searchIcon from '../../../assets/search.png';
 
 interface Props {
   onPress?: () => void;
@@ -10,12 +11,7 @@ interface Props {
 const SearchButton: React.FC<Props> = ({ onPress }) => {
   return (
     <Pressable onPress={onPress}>
-      <Image
-        source={{
-          uri: Icons.SearchIcon,
-        }}
-        style={styles.container}
-      />
+      <Image source={searchIcon} style={styles.container} />
     </Pressable>
   );
 };

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

@@ -4,7 +4,8 @@ import { Image, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { styles } from './style';
 import SearchbarProps from './types';
-import Icons from '../../utils/images';
+
+import clearIcon from '../../../assets/clear.png';
 
 const Searchbar: React.ForwardRefRenderFunction<TextInput, SearchbarProps> = (
   { filter, placeholder = 'Filter', setFilter },
@@ -28,11 +29,7 @@ const Searchbar: React.ForwardRefRenderFunction<TextInput, SearchbarProps> = (
           activeOpacity={0.8}
           onPress={() => setFilter('')}
         >
-          <Image
-            source={{
-              uri: Icons.SearchIcon,
-            }}
-          />
+          <Image source={clearIcon} />
         </TouchableOpacity>
       )}
     </View>

packages/react-native-query-devtool/src/index.tsx

@@ -4,10 +4,10 @@ import { StyleSheet } from 'react-native';
 
 import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';
 
-import Devtool from './components/Devtool';
-import FloatingButton from './components/FloatingButton';
-import RemoteDebugger from './components/RemoteDevtool';
-import { QueryDevtoolProps } from './types';
+import Devtool from '../src/components/Devtool';
+import FloatingButton from '../src/components/FloatingButton';
+import RemoteDebugger from '../src/components/RemoteDevtool';
+import { QueryDevtoolProps } from '../src/types';
 
 const QueryNativeDevtool: React.FC<QueryDevtoolProps> = ({
   queryClient,

packages/react-native-query-devtool/src/utils/images.ts

@@ -1,17 +1,18 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "target": "ESNext",
+    "module": "CommonJS",
     "allowJs": true,
-    "module": "commonjs",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "noImplicitAny": true,
     "sourceMap": true,
-    "baseUrl": ".",
-    "outDir": "packages/react-native-query-devtool/dist",
+    "baseUrl": "./src",
+    "outDir": "./dist",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "jsx": "react-jsx"
   },
-  "include": ["packages/react-native-query-devtool/src/**/*"]
+  "include": ["./src/**/*", "./assets/**/*"],
+  "exclude": ["node_modules"]
 }