John/examples

.gitignore

@@ -1,3 +1,199 @@
 node_modules/
 dist
-coverage/
+coverage/
+.next/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Meteor
+.meteor/local
+
+# Gyp specific files
+gyp-mac-tool
+.gyp
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Sass
+.sass-cache/
+
+# FuseBox cache
+.fusebox/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.test
+.env.production
+
+# Next.js
+.next/
+out/
+
+# Next.js build output
+.next/static/*
+!.next/static/images
+*.next/static/favicon.ico
+.next/static/media/*
+
+# Next.js cache
+.next/cache/
+
+# Nuxt.js build output
+.nuxt/
+dist/
+
+# Gatsby files
+.cache/
+public/
+
+# Expo
+.expo/
+.expo-shared/
+
+# VS Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# IntelliJ IDEA
+.idea/
+
+# JetBrains Rider
+.idea/
+
+# WebStorm
+.idea/
+
+# PHPStorm
+.idea/
+
+# Android Studio
+.idea/
+
+# macOS
+*.DS_Store
+*.AppleDouble
+*.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear on external disks
+.Spotlight-V100
+.Trashes
+
+# Compiled Java classes
+*.class
+
+# Java JAR files
+*.jar
+
+# Java WAR files
+*.war
+
+# Java EAR files
+*.ear
+
+# NetBeans
+nbproject/private/
+build/
+nbbuild/
+dist/
+nbdist/
+nbactions.xml
+nb-configuration.xml
+
+# Maven
+target/
+
+# Gradle
+.gradle/
+build/
+
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+
+# Package Files
+*.swp
+*.swo
+
+# Windows image file caches
+Thumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk

extension/manifest.json

@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "React Query Rewind",
  "description": "State Management DevTool for React Query",
- "version": "1.0",
+ "version": "2.1.0",
  "permissions": ["activeTab", "storage", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {

extension/src/App.tsx

@@ -36,11 +36,20 @@ function App() {
  port.onMessage.addListener(message => {
  // console.log('DEVTOOL: Recieved message from background.ts', message);
 
- if (message.type === 'event') {
+ // By checking data more thoroughly, we can avoid adding data that we don't expect in child components. This is the data we have the least control over.
+ // Future iteration could use Zod or something a little less manual and be a more prcise
+ console.log('Recieved event message', message)
+ if (
+ message.type === 'event' &&
+ message.payload &&
+ typeof message.payload.eventType === 'string' &&
+ Array.isArray(message.payload.queryKey) &&
+ typeof message.payload.queryHash === 'string'
+ ) {
  setQueryEvents(queryEvents => [...queryEvents, message.payload]);
  }
 
- if (message.type === 'tree') {
+ if (message.type === 'tree' && message?.data) {
  // console.log('APP.tsx: Recieved tree data', message);
  setTreeData(message.data);
  }

extension/src/components/MultiSelect.tsx

@@ -21,7 +21,7 @@ export default function MultiSelect({
  const [queryOptions, setQueryOptions] = useState<string[]>([]);
 
  useEffect(() => {
- const newQueryOptions = queryEvents.map((event) => event.queryHash);
+ const newQueryOptions = queryEvents.map((event) => event?.queryHash);
  const uniqueQueryOptions = Array.from(new Set(newQueryOptions));
  setQueryOptions(uniqueQueryOptions);
  // when there are new query options, we need to check with local storage and see if any of them are set

extension/src/functions/createDisplayArray.ts

@@ -21,14 +21,14 @@ const createDisplayArray = (
 
  // filter for events of selected queries
  const selectedQueryEvents = queryEvents.filter((queryEvent) =>
- selectedQueries.includes(queryEvent.queryHash)
+ selectedQueries.includes(queryEvent?.queryHash)
  );
 
  // traverse queries and update the relevant query data for that event
  selectedQueryEvents.forEach((queryEvent) => {
  const prevDisplay = [...allDisplays[allDisplays.length - 1]];
  const newDisplay = prevDisplay.map((display) => {
- if (display.queryKey === queryEvent.queryHash) {
+ if (display.queryKey === queryEvent?.queryHash) {
  return { ...display, queryData: queryEvent.queryData };
  }
  return display;

extension/src/types.d.ts

@@ -61,7 +61,7 @@ export type JsonDiffType = {
 // variable types
 export type QueryEvent = {
  eventType: string;
- queryKey: string[];
+ queryKey: (string | number) [];
  queryHash: string;
  timestamp: Date;
  queryData?: any;