Merge pull request #11 from jossydeleon/rollup-bundler

Rollup bundler

Author: jossydeleon

example/react-query-v3/package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@faker-js/faker": "^8.4.1",
-    "react-query": "^3.34.14",
     "expo": "~50.0.6",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-native": "0.73.4",
-    "react-native-gesture-handler": "^2.0.0"
+    "react-native-gesture-handler": "^2.0.0",
+    "react-query": "^3.34.14"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

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

@@ -1,9 +1,10 @@
-import { registerRootComponent } from "expo";
-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 "@jsmdeleon/react-native-query-devtool/src";
+import React from 'react';
+import { registerRootComponent } from 'expo';
+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 '@jsmdeleon/react-native-query-devtool';
 
 const queryClient = new QueryClient();
 
@@ -30,14 +31,14 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#000",
-    justifyContent: "center",
+    backgroundColor: '#000',
+    justifyContent: 'center',
   },
   title: {
-    color: "white",
+    color: 'white',
     fontSize: 17,
-    fontWeight: "bold",
-    textAlign: "center",
+    fontWeight: 'bold',
+    textAlign: 'center',
   },
 });
 

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,