Use a channel to make other tabs automatically reload their queries

Author: azimux

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.3.1] - 2026-02-28
+
+- Use a channel to make other tabs automatically reload their queries
+
 ## [1.3.0] - 2026-02-26
 
 - Add auto-dirty queries feature

Gemfile.lock

@@ -1,14 +1,14 @@
 PATH
   remote: .
   specs:
-    foobara-typescript-remote-command-generator (1.3.0)
+    foobara-typescript-remote-command-generator (1.3.1)
       foobara (>= 0.1.16, < 2.0.0)
       foobara-files-generator (< 2.0.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.8)
+    addressable (2.8.9)
       public_suffix (>= 2.0.2, < 8.0)
     ast (2.4.3)
     base64 (0.3.0)
@@ -106,7 +106,7 @@ GEM
     rspec-its (2.0.0)
       rspec-core (>= 3.13.0)
       rspec-expectations (>= 3.13.0)
-    rspec-mocks (3.13.7)
+    rspec-mocks (3.13.8)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
     rspec-support (3.13.7)
@@ -131,7 +131,7 @@ GEM
     rubocop-rspec (3.9.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.81)
-    ruby-prof (2.0.2)
+    ruby-prof (2.0.3)
       base64
       ostruct
     ruby-progressbar (1.13.0)

templates/base/QueryCache.ts

@@ -38,6 +38,54 @@ export function forEachQuery (callback: (query: Query<RemoteCommand<any, any, an
   queryCache.forEach(callback)
 }
 
+interface DirtyQueryEvent {
+  commandName: string
+  propertyName: string | undefined
+  value: string | number | undefined
+}
+
+let dirtyQueryChannel: BroadcastChannel | null = null
+
+if (typeof BroadcastChannel !== 'undefined') {
+  dirtyQueryChannel = new BroadcastChannel('dirty-query')
+
+  dirtyQueryChannel.addEventListener('message', (event: MessageEvent<DirtyQueryEvent>) => {
+    const { commandName, propertyName, value } = event.data
+
+    dirtyQuery(commandName, propertyName, value, { skipBroadcast: true })
+  })
+}
+
+export function dirtyQuery<CommandT extends RemoteCommand<any, any, any>> (
+  commandClass: RemoteCommandConstructor<CommandT> | string,
+  propertyName: string | undefined = undefined,
+  propertyValue: string | number | undefined = undefined,
+  options: { skipBroadcast: boolean } = { skipBroadcast: false }) {
+  if (typeof commandClass !== 'string') {
+    commandClass = commandClass.fullCommandName
+  }
+
+  forEachQuery((query) => {
+    if (query.CommandClass.fullCommandName === commandClass) {
+      if (query.inputs == null || Object.keys(query.inputs).length === 0) {
+        query.setDirty()
+      } else {
+        if (propertyName != null) {
+          if (query.inputs[propertyName] !== propertyValue) {
+            return
+          }
+        }
+
+        query.setDirty()
+      }
+    }
+  })
+
+  if (dirtyQueryChannel != null && !options.skipBroadcast) {
+    dirtyQueryChannel.postMessage({ commandName: commandClass, propertyName, value: propertyValue })
+  }
+}
+
 function toKey<CommandT extends RemoteCommand<any, any, any>> (
   CommandClass: RemoteCommandConstructor<CommandT>,
   inputs: InputsOf<CommandT> | undefined

templates/base/RemoteCommand.ts.erb

@@ -1,7 +1,7 @@
 import { type Outcome, SuccessfulOutcome, ErrorOutcome } from './Outcome'
 import { type FoobaraError } from './Error'
 <% if auto_dirty_queries? %>
-import * as QueryCache from './QueryCache'
+import { dirtyQuery } from './QueryCache'
 <% end %>
 
 export default abstract class RemoteCommand<Inputs, Result, CommandError extends FoobaraError> {
@@ -136,19 +136,13 @@ export default abstract class RemoteCommand<Inputs, Result, CommandError extends
   <% if auto_dirty_queries? %>
   dirtyQueries () {
     for (const [commandClass, inputs] of this.dirties()) {
-      QueryCache.forEachQuery((query) => {
-        // debugger
-        if (query.CommandClass === commandClass) {
-          if (inputs == null || Object.keys(inputs).length === 0) {
-            query.setDirty()
-          } else {
-            for (const [property, value] of Object.entries(inputs)) {
-              if (query.inputs[property] !== value) { return }
-            }
-            query.setDirty()
-          }
+      if (inputs != null) {
+        for (const [propertyName, value] of Object.entries(inputs)) {
+          dirtyQuery(commandClass, propertyName, value)
         }
-      })
+      } else {
+        dirtyQuery(commandClass)
+      }
     }
   }
   <% end %>

version.rb

@@ -1,7 +1,7 @@
 module Foobara
   module TypescriptRemoteCommandGenerator
     module Version
-      VERSION = "1.3.0".freeze
+      VERSION = "1.3.1".freeze
       MINIMUM_RUBY_VERSION = ">= 3.4.0".freeze
     end
   end