diff --git a/package-vue/.eslintrc.cjs b/package-vue/.eslintrc.cjs
deleted file mode 100644
index d6c9537..0000000
--- a/package-vue/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
- root: true,
- env: { browser: true, es2020: true },
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:react-hooks/recommended',
- ],
- ignorePatterns: ['dist', '.eslintrc.cjs'],
- parser: '@typescript-eslint/parser',
- plugins: ['react-refresh'],
- rules: {
- 'react-refresh/only-export-components': [
- 'warn',
- { allowConstantExport: true },
- ],
- },
-}
diff --git a/package-vue/example/client/.gitignore b/package-vue/.gitignore
similarity index 100%
rename from package-vue/example/client/.gitignore
rename to package-vue/.gitignore
diff --git a/package-vue/.vscode/extensions.json b/package-vue/.vscode/extensions.json
new file mode 100644
index 0000000..a7cea0b
--- /dev/null
+++ b/package-vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar"]
+}
diff --git a/package-vue/DevelopmentSteps.md b/package-vue/DevelopmentSteps.md
deleted file mode 100644
index ffa1c62..0000000
--- a/package-vue/DevelopmentSteps.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# React Query Rewind
-See https://github.com/oslabs-beta/react-query-rewind/blob/main/README.md for a complete overview.
-
-This document details setting up the package and examples for a testing environment.
-
-## Production Installation and Set-Up
-Install the pacakage with:
- `npm i -D react-query-rewind`
-
-Import the ReactQueryRewind component and place it as close as possible to the root of your app.
-
-Download the chrome extension from ***insert url here*** in order to time travel state in a developer toosl panel within your chrome browser.
-
-## Example
-
-```javascript
- import React from 'react';
- import ReactDOM from 'react-dom/client';
- import App from './App';
- import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
- import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
- const queryClient = new QueryClient();
-
- ReactDOM.createRoot(document.getElementById('root')!).render(
-
-
-
-
-
- );
-```
-
-## Set-Up Examples
-**From the package directory:**
-Run with "1" or "2" depending on which example you'd like to set up
-1. `npm run install-all`
- 1. Installs all dependencies for the package and both example apps
-2. `npm run link-dependencies-1` or `npm run link-dependencies-2`
- 1. Installs all peer dependencies in our package to ensure there are no duplicates
- 2. Can see all packages currently linked with *`npm ls -g --depth=0 --link=tr`*
-3. `npm run watch`
- 1. Starts rollup in watch mode and creates dist folder
-4. `npm run link-package-1` *or* `npm run link-package-2`
- 1. Links React Query Rewind
-5. `npm run example-1` *or* `npm run example-2`
- 1. Starts the example server with webpack. Note: this is a hot reload, but it does not always pick up changes to the npm package
-
-# Publishing
-1. `npm login` to login to the npm site. Follow the instructions to publish your npm package
-2. `npm publish`
-
-# Development
-Contributions are always welcome. Please create a fork from https://github.com/oslabs-beta/react-query-rewind.
-
-
-### Future Development Needs
-- Rollup currently does not build on older macs or on Linux (we have not confirmed the issue on Windows yet)
-- Some developers on older macs need to install @rollup/rollup-darwin-x64 to get the build working
-- Github actions uses linux and as a result, our test.yml script installs @rollup/rollup-darwin-x64 to ensure the build works properly
-- Future development should ensure that builds work correclty regardless of the developer's machine and remove the installation of @rollup/rollup-darwin-x64 from the tests.yml file
\ No newline at end of file
diff --git a/package-vue/README.md b/package-vue/README.md
index 5154a52..c4ef9fa 100644
--- a/package-vue/README.md
+++ b/package-vue/README.md
@@ -1,106 +1 @@
-
-
-
-
-
-
-# Technologies
-
-[](https://www.javascript.com/)
-[](https://www.typescriptlang.org/)
-[](https://reactjs.org/)
-[](https://html.com/html5/)
-[](https://webpack.js.org/)
-[](https://d3js.org/)
-[](https://eslint.org/)
-[](https://mui.com/)
-[](https://jestjs.io/)
-[](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.
-
-
-
-## 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!
-
-
-
-
-
-# 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
-
-[](https://medium.com/@teeringe/react-query-rewind-time-travel-debugging-made-simple-46aaeeafd497)
-[](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)
+# VueQueryRewind
diff --git a/package-vue/__tests__/index.tsx b/package-vue/__tests__/index.tsx
deleted file mode 100644
index 545eca0..0000000
--- a/package-vue/__tests__/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import ReactQueryRewind from '../src/index'
-import { render } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import {describe, it} from '@jest/globals'
-
-describe('Renders when a query client is provided', () => {
- // mock query client
- const queryClient = new QueryClient();
-
- // we **might** want to add clean error handling for developers to ensure the component fails gracefully
- // This fails if I don't create a query client and wrap ReactQueryRewind around a QueryClientProvider component and the same thing would happen in production
-
- it('renders without crashing when wrapped around a query client', () => {
- render(
-
-
-
- );
- });
-});
\ No newline at end of file
diff --git a/package-vue/assets/UI-change.gif b/package-vue/assets/UI-change.gif
deleted file mode 100644
index a05df5a..0000000
Binary files a/package-vue/assets/UI-change.gif and /dev/null differ
diff --git a/package-vue/assets/chrome-devtool.png b/package-vue/assets/chrome-devtool.png
deleted file mode 100644
index b3fa8ef..0000000
Binary files a/package-vue/assets/chrome-devtool.png and /dev/null differ
diff --git a/package-vue/assets/component-placement.png b/package-vue/assets/component-placement.png
deleted file mode 100644
index bb71c04..0000000
Binary files a/package-vue/assets/component-placement.png and /dev/null differ
diff --git a/package-vue/assets/component-tree.gif b/package-vue/assets/component-tree.gif
deleted file mode 100644
index ed7eb55..0000000
Binary files a/package-vue/assets/component-tree.gif and /dev/null differ
diff --git a/package-vue/assets/icon.png b/package-vue/assets/icon.png
deleted file mode 100644
index eecc431..0000000
Binary files a/package-vue/assets/icon.png and /dev/null differ
diff --git a/package-vue/assets/query-states.gif b/package-vue/assets/query-states.gif
deleted file mode 100644
index a479a94..0000000
Binary files a/package-vue/assets/query-states.gif and /dev/null differ
diff --git a/package-vue/assets/state-diff.gif b/package-vue/assets/state-diff.gif
deleted file mode 100644
index 5cfc26b..0000000
Binary files a/package-vue/assets/state-diff.gif and /dev/null differ
diff --git a/package-vue/babel.config.cjs b/package-vue/babel.config.cjs
deleted file mode 100644
index 3bba603..0000000
--- a/package-vue/babel.config.cjs
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
- presets:[
- '@babel/preset-env',
- '@babel/preset-react',
- '@babel/preset-typescript'
- ]
-}
-
diff --git a/package-vue/example/client/src/link/types.d.ts b/package-vue/example/client/src/link/types.d.ts
deleted file mode 100644
index f3c8343..0000000
--- a/package-vue/example/client/src/link/types.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-declare global {
- interface WindowEventMap {
- UpdateUI: CustomEvent;
- TimeTravel: CustomEvent;
- }
-}
-
-export type QueryDisplay = {
- queryKey: string;
- queryData: any;
-};
diff --git a/package-vue/examples/our-example/client/.gitignore b/package-vue/examples/our-example/client/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/package-vue/examples/our-example/client/.gitignore
@@ -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?
diff --git a/package-vue/example/client/.vscode/extensions.json b/package-vue/examples/our-example/client/.vscode/extensions.json
similarity index 100%
rename from package-vue/example/client/.vscode/extensions.json
rename to package-vue/examples/our-example/client/.vscode/extensions.json
diff --git a/package-vue/example/client/README.md b/package-vue/examples/our-example/client/README.md
similarity index 100%
rename from package-vue/example/client/README.md
rename to package-vue/examples/our-example/client/README.md
diff --git a/package-vue/example/client/index.html b/package-vue/examples/our-example/client/index.html
similarity index 100%
rename from package-vue/example/client/index.html
rename to package-vue/examples/our-example/client/index.html
diff --git a/package-vue/example/client/package-lock.json b/package-vue/examples/our-example/client/package-lock.json
similarity index 94%
rename from package-vue/example/client/package-lock.json
rename to package-vue/examples/our-example/client/package-lock.json
index 4ae730d..da675d2 100644
--- a/package-vue/example/client/package-lock.json
+++ b/package-vue/examples/our-example/client/package-lock.json
@@ -8,6 +8,7 @@
"name": "client",
"version": "0.0.0",
"dependencies": {
+ "@react-query-rewind/vue-query-rewind": "^1.0.1",
"@tanstack/vue-query": "^5.15.0",
"vue": "^3.3.11"
},
@@ -18,6 +19,25 @@
"vue-tsc": "^1.8.25"
}
},
+ "../..": {
+ "name": "@react-query-rewind/vue-query-rewind",
+ "version": "1.0.0",
+ "extraneous": true,
+ "license": "MIT",
+ "dependencies": {
+ "@tanstack/vue-query": "^5.37.1",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-typescript": "^5.0.8",
+ "@vue/cli-service": "^5.0.8",
+ "ts-loader": "^9.5.1",
+ "typescript": "^5.4.5"
+ },
+ "peerDependencies": {
+ "vue": "^3.0.0"
+ }
+ },
"node_modules/@babel/parser": {
"version": "7.23.6",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
@@ -402,6 +422,18 @@
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
+ "node_modules/@react-query-rewind/vue-query-rewind": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@react-query-rewind/vue-query-rewind/-/vue-query-rewind-1.0.1.tgz",
+ "integrity": "sha512-JbEG3SAk43Xrs/UxoWdt+4JfmL42/9Rdz9yJT89kqz8C1p0gCj97qm7vzzIWsevBZCFhznI3UM2xTQbiKFw5jA==",
+ "dependencies": {
+ "@tanstack/vue-query": "^5.37.1",
+ "vue": "^3.0.0"
+ },
+ "peerDependencies": {
+ "vue": "^3.0.0"
+ }
+ },
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz",
@@ -572,38 +604,38 @@
]
},
"node_modules/@tanstack/match-sorter-utils": {
- "version": "8.8.4",
- "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
- "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
+ "version": "8.15.1",
+ "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.15.1.tgz",
+ "integrity": "sha512-PnVV3d2poenUM31ZbZi/yXkBu3J7kd5k2u51CGwwNojag451AjTH9N6n41yjXz2fpLeewleyLBmNS6+HcGDlXw==",
"dependencies": {
- "remove-accents": "0.4.2"
+ "remove-accents": "0.5.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
- "url": "https://github.com/sponsors/kentcdodds"
+ "url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/query-core": {
- "version": "5.14.2",
- "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.14.2.tgz",
- "integrity": "sha512-QmoJvC72sSWs3hgGis8JdmlDvqLfYGWUK4UG6OR9Q6t28JMN9m2FDwKPqoSJ9YVocELCSjMt/FGjEiLfk8000Q==",
+ "version": "5.36.1",
+ "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.1.tgz",
+ "integrity": "sha512-BteWYEPUcucEu3NBcDAgKuI4U25R9aPrHSP6YSf2NvaD2pSlIQTdqOfLRsxH9WdRYg7k0Uom35Uacb6nvbIMJg==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/vue-query": {
- "version": "5.15.0",
- "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.15.0.tgz",
- "integrity": "sha512-gcsWmuY9Ogqk+8EzM+ktQgcb7aYDWbBF2Da01yteGUQ5yUYmuNuHfe/hzfdtgLb2RDzyL4tZBFOPNuWnqT2Wqg==",
+ "version": "5.37.1",
+ "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.37.1.tgz",
+ "integrity": "sha512-KlE1BlvoPw3cjxf/Hpk/m46ClIXAAdii7lqyMnO0sr0Yka2SPReHOIivy30Z0n3N1eSGaO98CEQ9uHLwI/CDcg==",
"dependencies": {
- "@tanstack/match-sorter-utils": "^8.8.4",
- "@tanstack/query-core": "5.14.2",
+ "@tanstack/match-sorter-utils": "^8.15.1",
+ "@tanstack/query-core": "5.36.1",
"@vue/devtools-api": "^6.5.1",
- "vue-demi": "^0.14.6"
+ "vue-demi": "^0.14.7"
},
"funding": {
"type": "github",
@@ -620,9 +652,9 @@
}
},
"node_modules/@tanstack/vue-query/node_modules/vue-demi": {
- "version": "0.14.6",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
- "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "version": "0.14.7",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+ "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
@@ -1015,9 +1047,9 @@
}
},
"node_modules/remove-accents": {
- "version": "0.4.2",
- "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
- "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+ "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
},
"node_modules/rollup": {
"version": "4.9.1",
diff --git a/package-vue/example/client/package.json b/package-vue/examples/our-example/client/package.json
similarity index 88%
rename from package-vue/example/client/package.json
rename to package-vue/examples/our-example/client/package.json
index 9074296..3a35d08 100644
--- a/package-vue/example/client/package.json
+++ b/package-vue/examples/our-example/client/package.json
@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "@react-query-rewind/vue-query-rewind": "^1.0.1",
"@tanstack/vue-query": "^5.15.0",
"vue": "^3.3.11"
},
diff --git a/package-vue/example/client/src/App.vue b/package-vue/examples/our-example/client/src/App.vue
similarity index 96%
rename from package-vue/example/client/src/App.vue
rename to package-vue/examples/our-example/client/src/App.vue
index e123553..71ee4a0 100644
--- a/package-vue/example/client/src/App.vue
+++ b/package-vue/examples/our-example/client/src/App.vue
@@ -31,8 +31,6 @@
+