From 39213527fc384c8a79e2e2b96f15989fbe317848 Mon Sep 17 00:00:00 2001 From: John Dunn Date: Tue, 4 Jun 2024 13:10:24 -0700 Subject: [PATCH 1/2] updated readmes --- package-svelte/README.md | 2 +- package-svelte/package.json | 2 +- package-vue/README.md | 107 +++++++++++++++++++++++++++++++++++- package-vue/package.json | 1 + 4 files changed, 109 insertions(+), 3 deletions(-) diff --git a/package-svelte/README.md b/package-svelte/README.md index 5154a52..f86be26 100644 --- a/package-svelte/README.md +++ b/package-svelte/README.md @@ -19,7 +19,7 @@ # Overview -React Query Rewind introduces a powerful DevTool extension designed to work in conjunction with React Query's built-in DevTools in order to optimize time-traveling through state changes in an application. This open-source extension is tailored to enhance the debugging experience for React Query users, allowing them to explore state changes and component relationships with ease. +Svelte Query Rewind introduces a powerful DevTool extension designed to work in conjunction with React Query's built-in DevTools in order to optimize time-traveling through state changes in an application. This open-source extension is tailored to enhance the debugging experience for React Query users, allowing them to explore state changes and component relationships with ease. # Getting Started diff --git a/package-svelte/package.json b/package-svelte/package.json index 6cbc6e2..770b32b 100644 --- a/package-svelte/package.json +++ b/package-svelte/package.json @@ -19,7 +19,7 @@ "url": "git+https://github.com/oslabs-beta/react-query-rewind" }, "version": "1.1.3", - "description": "React Query Rewind is a library that helps developers debug applications that use React Query (ie TanStack Query) by letting them time travel through state changes directly in their chrome dev tools", + "description": "Svelte Query Rewind is a library that helps developers debug applications that use React Query (ie TanStack Query) by letting them time travel through state changes directly in their chrome dev tools", "keywords": [ "react", "react query", diff --git a/package-vue/README.md b/package-vue/README.md index c4ef9fa..f58dd56 100644 --- a/package-vue/README.md +++ b/package-vue/README.md @@ -1 +1,106 @@ -# VueQueryRewind + + +

+ Logo +

+ +# Technologies + +[![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://www.javascript.com/) +[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) +[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://reactjs.org/) +[![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)](https://html.com/html5/) +[![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge&logo=webpack&logoColor=black)](https://webpack.js.org/) +[![D3](https://img.shields.io/badge/d3%20js-F9A03C?style=for-the-badge&logo=d3.js&logoColor=white)](https://d3js.org/) +[![ESLint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/) +[![Material UI](https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white)](https://mui.com/) +[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/) +[![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white)](https://babeljs.io/) + +# Overview + +Vue Query Rewind introduces a powerful DevTool extension designed to work in conjunction with React Query's built-in DevTools in order to optimize time-traveling through state changes in an application. This open-source extension is tailored to enhance the debugging experience for React Query users, allowing them to explore state changes and component relationships with ease. + +# Getting Started + +## Prerequisites + +1. React Query installed and in use in your application. + +2. Install RQRewind Chrome Extension. + + + +## Installation + +1. Download npm package into your application as a dev dependency. + + ```sh + npm i --save-dev react-query-rewind + ``` + +2. Import the ReactQueryRewind component into the root of your applicaiton. + + _picture of importing the component_ + + ```javascript + import ReactQueryRewind from 'react-query-rewind'; + ``` + +3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component. + + ```javascript + ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + ); + ``` + +4. Open the Chrome DevTool Extension and start coding! + +

+ Component Placement +

+ +# Features + +- Query States: Upon opening RQRewind in Chrome Dev Tools, you will see the Queries tab open with a drop down menu listing the query keys of all the incoming queries. Select the queries that you want to monitor, make changes on the web app, and the changes of query states will be logged as reflected by the growing number above the play bar. Use the play bar to navigate to a particular state snapshot that you would like to inspect. + +

+ +- State Diff: Toggle on the Diff button to see state changes between each snapshot highlighted. Turn on the switch on top of the page to show only parts of the state that are changed. + +

+ +- Live UI Change: As you review the state change history, there is also the option to turn on the time travel mode by clicking on the clock icon button. Under time travel mode, when visiting a logged state snapshot on RQRewindl, the UI of the app will change accordingly. Turn off time travel mode for RQRewind to continue logging future state changes. + +

+ +- Component Tree: Click on the Component Tree tab and turn on the Start Profiling switch. Click on any component on the app, and view the component tree that is rendered on the dev tools panel. + +

+ +# Contact Information + +Austin Cavanagh - [GitHub](https://github.com/austin-cavanagh) - [LinkedIn](https://www.linkedin.com/in/austincavanagh/) - austin.cavanagh.cs@gmail.com + +Emma Teering - [GitHub](https://github.com/eteering) - [LinkedIn](https://www.linkedin.com/in/emma-teering/) - teeringe@gmail.com + +John Dunn - [GitHub](https://github.com/johnwdunn20) - [LinkedIn](https://www.linkedin.com/in/johnwdunn/) - johnwdunn20@gmail.com + +Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linkedin.com/in/rui-fan-868231299/) - rfan1986@gmail.com + +# Links + +[![Medium](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@teeringe/react-query-rewind-time-travel-debugging-made-simple-46aaeeafd497) +[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/react-query-rewind/) + +Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome) + +# License + +_MIT Link_ + +

(back to top)

diff --git a/package-vue/package.json b/package-vue/package.json index 2f0f61f..f02a608 100644 --- a/package-vue/package.json +++ b/package-vue/package.json @@ -1,6 +1,7 @@ { "name": "@react-query-rewind/vue-query-rewind", "version": "1.1.3", + "description": "Vue Query Rewind is a library that helps developers debug applications that use React Query (ie TanStack Query) by letting them time travel through state changes directly in their chrome dev tools", "type": "module", "files": [ "dist" From 84ad7dbc7314cc5ff0cbe3a7c4e14b8b64b448c1 Mon Sep 17 00:00:00 2001 From: John Dunn Date: Tue, 4 Jun 2024 13:10:53 -0700 Subject: [PATCH 2/2] updated versions --- package-react/package.json | 2 +- package-svelte/package.json | 2 +- package-vue/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-react/package.json b/package-react/package.json index 85269cb..8f0f45e 100644 --- a/package-react/package.json +++ b/package-react/package.json @@ -18,7 +18,7 @@ "type": "git", "url": "git+https://github.com/oslabs-beta/react-query-rewind.git" }, - "version": "2.1.4", + "version": "2.1.5", "description": "React Query Rewind is a library that helps developers debug applications that use React Query (ie TanStack Query) by letting them time travel through state changes directly in their chrome dev tools", "keywords": [ "react", diff --git a/package-svelte/package.json b/package-svelte/package.json index 770b32b..499670b 100644 --- a/package-svelte/package.json +++ b/package-svelte/package.json @@ -18,7 +18,7 @@ "type": "git", "url": "git+https://github.com/oslabs-beta/react-query-rewind" }, - "version": "1.1.3", + "version": "1.1.4", "description": "Svelte Query Rewind is a library that helps developers debug applications that use React Query (ie TanStack Query) by letting them time travel through state changes directly in their chrome dev tools", "keywords": [ "react", diff --git a/package-vue/package.json b/package-vue/package.json index f02a608..faa74db 100644 --- a/package-vue/package.json +++ b/package-vue/package.json @@ -1,6 +1,6 @@ { "name": "@react-query-rewind/vue-query-rewind", - "version": "1.1.3", + "version": "1.1.4", "description": "Vue Query Rewind is a library that helps developers debug applications that use React Query (ie TanStack Query) by letting them time travel through state changes directly in their chrome dev tools", "type": "module", "files": [