Fix promise issues

Author: alexeyr

eslint.config.ts

@@ -80,6 +80,12 @@ const config = tsEslint.config([
       'function-paren-newline': 'off',
       'object-curly-newline': 'off',
       'no-restricted-syntax': ['error', 'SequenceExpression'],
+      'no-void': [
+        'error',
+        {
+          allowAsStatement: true,
+        },
+      ],
 
       'import/extensions': [
         'error',

node_package/src/CallbackRegistry.ts

@@ -29,7 +29,7 @@ export default class CallbackRegistry<T> {
     this.registryType = registryType;
   }
 
-  private initializeTimeoutEvents() {
+  private async initializeTimeoutEvents() {
     if (this.timeoutEventsInitialized) return;
     this.timeoutEventsInitialized = true;
 
@@ -46,14 +46,14 @@ export default class CallbackRegistry<T> {
       });
     };
 
-    onPageLoaded(() => {
+    await onPageLoaded(() => {
       const registryTimeout = getContextAndRailsContext().railsContext?.componentRegistryTimeout;
       if (!registryTimeout) return;
 
       timeoutId = setTimeout(triggerTimeout, registryTimeout);
     });
 
-    onPageUnloaded(() => {
+    await onPageUnloaded(() => {
       this.waitingPromises.clear();
       this.timedout = false;
       clearTimeout(timeoutId);
@@ -97,7 +97,7 @@ export default class CallbackRegistry<T> {
   }
 
   async getOrWaitForItem(name: string): Promise<T> {
-    this.initializeTimeoutEvents();
+    await this.initializeTimeoutEvents();
     try {
       return this.get(name);
     } catch (error) {

node_package/src/ClientSideRenderer.ts

@@ -14,13 +14,13 @@ import { debugTurbolinks } from './turbolinksUtils';
 
 const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
 
-function delegateToRenderer(
+async function delegateToRenderer(
   componentObj: RegisteredComponent,
   props: Record<string, unknown>,
   railsContext: RailsContext,
   domNodeId: string,
   trace: boolean,
-): boolean {
+): Promise<boolean> {
   const { name, component, isRenderer } = componentObj;
 
   if (isRenderer) {
@@ -32,7 +32,7 @@ function delegateToRenderer(
       );
     }
 
-    (component as RenderFunction)(props, railsContext, domNodeId);
+    await (component as RenderFunction)(props, railsContext, domNodeId);
     return true;
   }
 
@@ -92,7 +92,7 @@ class ComponentRenderer {
           return;
         }
 
-        if (delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) {
+        if (await delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) {
           return;
         }
 

node_package/src/ReactOnRails.client.ts

@@ -155,8 +155,8 @@ ctx.ReactOnRails = {
     renderOrHydrateComponent(domId);
   },
 
-  reactOnRailsStoreLoaded(storeName: string): void {
-    hydrateStore(storeName);
+  async reactOnRailsStoreLoaded(storeName: string): Promise<void> {
+    await hydrateStore(storeName);
   },
 
   /**
@@ -347,7 +347,7 @@ ctx.ReactOnRails = {
 
 ctx.ReactOnRails.resetOptions();
 
-ClientStartup.clientStartup(ctx);
+void ClientStartup.clientStartup(ctx);
 
 export * from './types';
 export default ctx.ReactOnRails;

node_package/src/clientStartup.ts

@@ -36,9 +36,9 @@ export async function clientStartup(context: Context): Promise<void> {
 
   // force loaded components and stores are rendered and hydrated immediately
   renderOrHydrateForceLoadedComponents();
-  hydrateForceLoadedStores();
+  await hydrateForceLoadedStores();
 
   // Other components and stores are rendered and hydrated when the page is fully loaded
-  onPageLoaded(reactOnRailsPageLoaded);
-  onPageUnloaded(reactOnRailsPageUnloaded);
+  await onPageLoaded(reactOnRailsPageLoaded);
+  await onPageUnloaded(reactOnRailsPageUnloaded);
 }

node_package/src/pageLifecycle.ts

@@ -6,7 +6,7 @@ import {
   turbolinksVersion5,
 } from './turbolinksUtils';
 
-type PageLifecycleCallback = () => void;
+type PageLifecycleCallback = () => void | Promise<void>;
 type PageState = 'load' | 'unload' | 'initial';
 
 const pageLoadedCallbacks = new Set<PageLifecycleCallback>();
@@ -16,12 +16,16 @@ let currentPageState: PageState = 'initial';
 
 function runPageLoadedCallbacks(): void {
   currentPageState = 'load';
-  pageLoadedCallbacks.forEach((callback) => callback());
+  pageLoadedCallbacks.forEach((callback) => {
+    void callback();
+  });
 }
 
 function runPageUnloadedCallbacks(): void {
   currentPageState = 'unload';
-  pageUnloadedCallbacks.forEach((callback) => callback());
+  pageUnloadedCallbacks.forEach((callback) => {
+    void callback();
+  });
 }
 
 function setupTurbolinksEventListeners(): void {
@@ -69,17 +73,17 @@ function initializePageEventListeners(): void {
   }
 }
 
-export function onPageLoaded(callback: PageLifecycleCallback): void {
+export async function onPageLoaded(callback: PageLifecycleCallback): Promise<void> {
   if (currentPageState === 'load') {
-    callback();
+    await callback();
   }
   pageLoadedCallbacks.add(callback);
   initializePageEventListeners();
 }
 
-export function onPageUnloaded(callback: PageLifecycleCallback): void {
+export async function onPageUnloaded(callback: PageLifecycleCallback): Promise<void> {
   if (currentPageState === 'unload') {
-    callback();
+    await callback();
   }
   pageUnloadedCallbacks.add(callback);
   initializePageEventListeners();

node_package/src/types/index.ts

@@ -180,7 +180,7 @@ export interface ReactOnRails {
   reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType;
   reactOnRailsPageLoaded(): Promise<void>;
   reactOnRailsComponentLoaded(domId: string): void;
-  reactOnRailsStoreLoaded(storeName: string): void;
+  reactOnRailsStoreLoaded(storeName: string): Promise<void>;
   authenticityToken(): string | null;
   authenticityHeaders(otherHeaders: Record<string, string>): AuthenticityHeaders;
   option(key: string): string | number | boolean | undefined;