Skip to content

Austin/new vue directory #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
May 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cf2bba9
Rebuilt the package-vue directory as the past implementation had type…
austin-cavanagh May 19, 2024
ad0358d
Added the vue example into the new directory and deleted the link folder
austin-cavanagh May 19, 2024
87ced33
Connected the example to the exported VueQueryRewind component
austin-cavanagh May 19, 2024
a2a5d57
Successfully implemented VueQueryRewind in the example by importing t…
austin-cavanagh May 19, 2024
d878520
Successfully built the vue package in preperation to push to npm
austin-cavanagh May 19, 2024
87aa4d1
Successfully linked a test export to a vue example in the package-vue…
austin-cavanagh May 19, 2024
5db77a3
Imported the vue query rewind solution into the src directory and suc…
austin-cavanagh May 19, 2024
caceaf0
Added the vue examples from the docs into a directory inside of packa…
austin-cavanagh May 19, 2024
336d2d6
Added examples directory into package-vue-vite and included the examp…
austin-cavanagh May 19, 2024
cae4596
Deleted the 2 old directories of old vue implementations used during …
austin-cavanagh May 19, 2024
08e572d
Committing the deleted files - does not seem as though they were push…
austin-cavanagh May 19, 2024
b38b3d5
Deleted and added the tanstack docs examples again to test an impleme…
austin-cavanagh May 19, 2024
737db73
Updated package-vue to use a named export for the VueQueryRewind comp…
austin-cavanagh May 20, 2024
2f83190
Created a directory to test another implementation of bundling with v…
austin-cavanagh May 20, 2024
d0dea29
Tested VueQueryRewind on each example from the tanstack documentation…
austin-cavanagh May 20, 2024
1209594
Deleted the old directory holding the VueQueryRewind component and re…
austin-cavanagh May 20, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions package-vue/.eslintrc.cjs

This file was deleted.

File renamed without changes.
3 changes: 3 additions & 0 deletions package-vue/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}
61 changes: 0 additions & 61 deletions package-vue/DevelopmentSteps.md

This file was deleted.

107 changes: 1 addition & 106 deletions package-vue/README.md
Original file line number Diff line number Diff line change
@@ -1,106 +1 @@
<a id="readme-top"></a>

<p align="center">
<img src="./assets/icon.png" alt="Logo" width="250"/>
</p>

# 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

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.

# Getting Started

## Prerequisites

1. React Query installed and in use in your application.

2. Install RQRewind Chrome Extension.

<!-- _link / picture of Extension in Chrome Store_ -->

## 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(
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryRewind />
</QueryClientProvider>
);
```

4. Open the Chrome DevTool Extension and start coding!

<p align="left">
<img src="./assets/chrome-devtool.png" alt="Component Placement" width="600"/>
</p>

# Features

- <b>Query States: </b>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.

<p align="center"><img src="./assets/query-states.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

- <b>State Diff: </b>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.

<p align="center"><img src="./assets/state-diff.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

- <b>Live UI Change: </b>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.

<p align="center"><img src="./assets/UI-change.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

- <b>Component Tree: </b> 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.

<p align="center"><img src="./assets/component-tree.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

# Contact Information

Austin Cavanagh - [GitHub](https://github.com/austin-cavanagh) - [LinkedIn](https://www.linkedin.com/in/austincavanagh/) - [email protected]

Emma Teering - [GitHub](https://github.com/eteering) - [LinkedIn](https://www.linkedin.com/in/emma-teering/) - [email protected]

John Dunn - [GitHub](https://github.com/johnwdunn20) - [LinkedIn](https://www.linkedin.com/in/johnwdunn/) - [email protected]

Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linkedin.com/in/rui-fan-868231299/) - [email protected]

# 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_

<p align="right">(<a href="#readme-top">back to top</a>)</p>
# VueQueryRewind
21 changes: 0 additions & 21 deletions package-vue/__tests__/index.tsx

This file was deleted.

Binary file removed package-vue/assets/UI-change.gif
Binary file not shown.
Binary file removed package-vue/assets/chrome-devtool.png
Binary file not shown.
Binary file removed package-vue/assets/component-placement.png
Binary file not shown.
Binary file removed package-vue/assets/component-tree.gif
Binary file not shown.
Binary file removed package-vue/assets/icon.png
Binary file not shown.
Binary file removed package-vue/assets/query-states.gif
Binary file not shown.
Binary file removed package-vue/assets/state-diff.gif
Binary file not shown.
8 changes: 0 additions & 8 deletions package-vue/babel.config.cjs

This file was deleted.

11 changes: 0 additions & 11 deletions package-vue/example/client/src/link/types.d.ts

This file was deleted.

24 changes: 24 additions & 0 deletions package-vue/examples/our-example/client/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading