Skip to content

Commit a7c4911

Browse files
johnwdunn20johnwdunn20
authored
Merge pull request #79 from oslabs-beta/john/readme
John/readme
2 parents ee50ec1 + 8c49c25 commit a7c4911

File tree

11 files changed

+65
-32
lines changed

11 files changed

+65
-32
lines changed

‎.DS_Store‎

-6 KB
Binary file not shown.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ public/
135135

136136
# macOS
137137
*.DS_Store
138+
.DS_Store
138139
*.AppleDouble
139140
*.LSOverride
140141

‎License.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Released under MIT License
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,37 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
3535

3636
1. Download npm package into your application.
3737

38+
**React**
39+
3840
```sh
3941
npm i -D react-query-rewind
4042
```
4143

42-
2. Import the ReactQueryRewind component into the root of your applicaiton.
44+
**Svelte**
45+
46+
```sh
47+
npm i --save-dev @react-query-rewind/svelte-query-rewind
48+
```
49+
50+
**Vue**
51+
52+
```sh
53+
npm i --save-dev @react-query-rewind/vue-query-rewind
54+
```
4355

44-
_picture of importing the component_
56+
2. Import the ReactQueryRewind component into the root of your applicaiton.
4557

4658
```javascript
4759
import ReactQueryRewind from "react-query-rewind";
4860
```
4961

62+
_Note: Some older versions of NextJS default to the commonJS version of the package, causing apps to error_
63+
_If you encounter this error, import the component with:_
64+
65+
```javascript
66+
import ReactQueryRewind from "../../node_modules/react-query-rewind/dist/esm/index.js";
67+
```
68+
5069
3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
5170

5271
```javascript
@@ -108,7 +127,9 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
108127
[![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)
109128
[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/react-query-rewind/)
110129

111-
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
130+
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind)
131+
132+
Website: [reactqueryrewind.com](https://reactqueryrewind.com/)
112133

113134
# License
114135
[MIT](https://www.mit.edu/~amini/LICENSE.md)

‎package-react/README.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,17 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
4141

4242
2. Import the ReactQueryRewind component into the root of your applicaiton.
4343

44-
_picture of importing the component_
45-
4644
```javascript
4745
import ReactQueryRewind from "react-query-rewind";
4846
```
4947

48+
_Note: Some older versions of NextJS default to the commonJS version of the package, causing apps to error_
49+
_If you encounter this error, import the component with:_
50+
51+
```javascript
52+
import ReactQueryRewind from "../../node_modules/react-query-rewind/dist/esm/index.js";
53+
```
54+
5055
3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
5156

5257
```javascript
@@ -108,7 +113,9 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
108113
[![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)
109114
[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/react-query-rewind/)
110115
111-
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
116+
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind)
117+
118+
Website: [reactqueryrewind.com](https://reactqueryrewind.com/)
112119
113120
# License
114121
[MIT](https://www.mit.edu/~amini/LICENSE.md)

‎package-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"type": "git",
1919
"url": "git+https://github.com/oslabs-beta/react-query-rewind.git"
2020
},
21-
"version": "2.1.9",
21+
"version": "2.1.11",
2222
"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",
2323
"keywords": [
2424
"react",

‎package-svelte/README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,13 @@ Svelte Query Rewind introduces a powerful DevTool extension designed to work in
3636
1. Download npm package into your application as a dev dependency.
3737

3838
```sh
39-
npm i --save-dev react-query-rewind
39+
npm i --save-dev @react-query-rewind/svelte-query-rewind
4040
```
4141

4242
2. Import the ReactQueryRewind component into the root of your applicaiton.
4343

44-
_picture of importing the component_
45-
4644
```javascript
47-
import ReactQueryRewind from 'react-query-rewind';
45+
import ReactQueryRewind from '@react-query-rewind/svelte-query-rewind;`
4846
```
4947
5048
3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
@@ -97,7 +95,9 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
9795
[![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)
9896
[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/react-query-rewind/)
9997
100-
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
98+
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind)
99+
100+
Website: [reactqueryrewind.com](https://reactqueryrewind.com/)
101101
102102
# License
103103

‎package-svelte/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-svelte/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-query-rewind",
2+
"name": "@react-query-rewind/svelte-query-rewind",
33
"contributors": [
44
{
55
"name": "John Dunn"
@@ -16,12 +16,12 @@
1616
],
1717
"repository": {
1818
"type": "git",
19-
"url": "git+https://github.com/oslabs-beta/react-query-rewind"
19+
"url": "git+https://github.com/oslabs-beta/react-query-rewind.git"
2020
},
21-
"version": "1.1.6",
21+
"version": "1.1.8",
2222
"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",
2323
"keywords": [
24-
"react",
24+
"svelte",
2525
"react query",
2626
"tanstack query",
2727
"@tanstack",

‎package-vue/README.md‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,26 +36,20 @@ Vue Query Rewind introduces a powerful DevTool extension designed to work in con
3636
1. Download npm package into your application as a dev dependency.
3737

3838
```sh
39-
npm i --save-dev react-query-rewind
39+
npm i --save-dev @react-query-rewind/vue-query-rewind
4040
```
4141

4242
2. Import the ReactQueryRewind component into the root of your applicaiton.
4343

44-
_picture of importing the component_
45-
4644
```javascript
47-
import ReactQueryRewind from 'react-query-rewind';
45+
import VueQueryRewind from '@react-query-rewind/vue-query-rewind';
4846
```
4947

50-
3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
48+
3. Use the VueQuery plugins
5149

5250
```javascript
53-
ReactDOM.createRoot(document.getElementById('root')!).render(
54-
<QueryClientProvider client={queryClient}>
55-
<App />
56-
<ReactQueryRewind />
57-
</QueryClientProvider>
58-
);
51+
app.use(VueQueryPlugin, { queryClient }); // from Tanstack
52+
app.use(VueQueryRewind);
5953
```
6054
6155
4. Open the Chrome DevTool Extension and start coding!
@@ -97,7 +91,9 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
9791
[![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)
9892
[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/react-query-rewind/)
9993
100-
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
94+
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind)
95+
96+
Website: [reactqueryrewind.com](https://reactqueryrewind.com/)
10197
10298
# License
10399

0 commit comments

Comments
 (0)