Attempt another bind when registering a binding outside a renderHtml() context

srcts/src/bindings/registry.ts

@@ -1,4 +1,5 @@
 import { mergeSort } from "../utils";
+import { Callbacks } from "../utils/callbacks";
 
 interface BindingBase {
  name: string;
@@ -14,6 +15,7 @@ class BindingRegistry<Binding extends BindingBase> {
  name!: string;
  bindings: Array<BindingObj<Binding>> = [];
  bindingNames: { [key: string]: BindingObj<Binding> } = {};
+ registerCallbacks: Callbacks = new Callbacks();
 
  register(binding: Binding, bindingName: string, priority = 0): void {
  const bindingObj = { binding, priority };
@@ -23,6 +25,12 @@ class BindingRegistry<Binding extends BindingBase> {
  this.bindingNames[bindingName] = bindingObj;
  binding.name = bindingName;
  }
+
+ this.registerCallbacks.invoke();
+ }
+
+ onRegister(fn: () => void, once = true): void {
+ this.registerCallbacks.register(fn, once);
  }
 
  setPriority(bindingName: string, priority: number): void {

srcts/src/shiny/init.ts

@@ -21,7 +21,7 @@ import {
 import { bindAll, unbindAll, _bindAll } from "./bind";
 import type { BindInputsCtx, BindScope } from "./bind";
 import { setShinyObj } from "./initedMethods";
-import { registerDependency } from "./render";
+import { registerDependency, renderHtml } from "./render";
 import { sendImageSizeFns } from "./sendImageSize";
 import { ShinyApp } from "./shinyapp";
 import { registerNames as singletonsRegisterNames } from "./singletons";
@@ -150,6 +150,19 @@ function initShiny(windowShiny: Shiny): void {
  (x) => x.value
  );
 
+ // When future bindings are registered via dynamic UI, check to see if renderHtml()
+ // is currently executing. If it's not, it's likely that the binding registration
+ // is occurring a tick after renderHtml()/renderContent(), in which case we need
+ // to make sure the new bindings get a chance to bind to the DOM. (#3635)
+ const debouncedBindAll = debounce(0, () => windowShiny.bindAll!(document.documentElement))
+
+ const maybeBindOnRegister = () => {
+ if (!renderHtml.isExecuting()) debouncedBindAll();
+ };
+
+ inputBindings.onRegister(maybeBindOnRegister, false);
+ outputBindings.onRegister(maybeBindOnRegister, false);
+
  // The server needs to know the size of each image and plot output element,
  // in case it is auto-sizing
  $(".shiny-image-output, .shiny-plot-output, .shiny-report-size").each(

srcts/src/shiny/render.ts

@@ -133,8 +133,13 @@ async function renderHtmlAsync(
  dependencies: HtmlDep[],
  where: WherePosition = "replace"
 ): Promise<ReturnType<typeof singletonsRenderHtml>> {
- await renderDependenciesAsync(dependencies);
- return singletonsRenderHtml(html, el, where);
+ renderHtml._renderCount++;
+ try {
+ await renderDependenciesAsync(dependencies);
+ return singletonsRenderHtml(html, el, where);
+ } finally {
+ renderHtml._renderCount--;
+ }
 }
 
 // Render HTML in a DOM element, inserting singletons into head as needed
@@ -144,10 +149,20 @@ function renderHtml(
  dependencies: HtmlDep[],
  where: WherePosition = "replace"
 ): ReturnType<typeof singletonsRenderHtml> {
- renderDependencies(dependencies);
- return singletonsRenderHtml(html, el, where);
+ renderHtml._renderCount++;
+ try {
+ renderDependencies(dependencies);
+ return singletonsRenderHtml(html, el, where);
+ } finally {
+ renderHtml._renderCount--;
+ }
 }
 
+renderHtml._renderCount = 0;
+renderHtml.isExecuting = function () {
+ return renderHtml._renderCount > 0;
+};
+
 // =============================================================================
 // renderDependencies
 // =============================================================================

srcts/src/utils/callbacks.ts

@@ -0,0 +1,45 @@
+type Cb = {
+ once: boolean;
+ fn: () => void;
+};
+
+type Cbs = {
+ [key: string]: Cb;
+};
+
+class Callbacks {
+ callbacks: Cbs = {};
+ id = 0;
+
+ register(fn: () => void, once = true): () => void {
+ this.id += 1;
+ const id = this.id;
+
+ this.callbacks[id] = { fn, once };
+ return () => {
+ delete this.callbacks[id];
+ };
+ }
+
+ invoke(): void {
+ for (const id in this.callbacks) {
+ const cb = this.callbacks[id];
+
+ try {
+ cb.fn();
+ } finally {
+ if (cb.once) delete this.callbacks[id];
+ }
+ }
+ }
+
+ clear(): void {
+ this.callbacks = {};
+ }
+
+ count(): number {
+ return Object.keys(this.callbacks).length;
+ }
+}
+
+export { Callbacks };

srcts/types/src/bindings/registry.d.ts

@@ -1,3 +1,4 @@
+import { Callbacks } from "../utils/callbacks";
 interface BindingBase {
  name: string;
 }
@@ -12,7 +13,9 @@ declare class BindingRegistry<Binding extends BindingBase> {
  bindingNames: {
  [key: string]: BindingObj<Binding>;
  };
+ registerCallbacks: Callbacks;
  register(binding: Binding, bindingName: string, priority?: number): void;
+ onRegister(fn: () => void, once?: boolean): void;
  setPriority(bindingName: string, priority: number): void;
  getPriority(bindingName: string): number | false;
  getBindings(): Array<BindingObj<Binding>>;

srcts/types/src/shiny/render.d.ts

@@ -11,6 +11,10 @@ declare function renderContent(el: BindScope, content: string | {
 } | null, where?: WherePosition): void;
 declare function renderHtmlAsync(html: string, el: BindScope, dependencies: HtmlDep[], where?: WherePosition): Promise<ReturnType<typeof singletonsRenderHtml>>;
 declare function renderHtml(html: string, el: BindScope, dependencies: HtmlDep[], where?: WherePosition): ReturnType<typeof singletonsRenderHtml>;
+declare namespace renderHtml {
+ var _renderCount: number;
+ var isExecuting: () => boolean;
+}
 declare function renderDependenciesAsync(dependencies: HtmlDep[] | null): Promise<void>;
 declare function renderDependencies(dependencies: HtmlDep[] | null): void;
 declare type HtmlDepVersion = string;

srcts/types/src/utils/callbacks.d.ts

@@ -0,0 +1,16 @@
+declare type Cb = {
+ once: boolean;
+ fn: () => void;
+};
+declare type Cbs = {
+ [key: string]: Cb;
+};
+declare class Callbacks {
+ callbacks: Cbs;
+ id: number;
+ register(fn: () => void, once?: boolean): () => void;
+ invoke(): void;
+ clear(): void;
+ count(): number;
+}
+export { Callbacks };