Make renderOrHydrateComponent async

Author: alexeyr

node_package/src/ClientSideRenderer.ts

@@ -220,26 +220,30 @@ class StoreRenderer {
 
 const renderedRoots = new Map<string, ComponentRenderer>();
 
-export function renderOrHydrateComponent(domIdOrElement: string | Element): ComponentRenderer | undefined {
+export function renderOrHydrateComponent(domIdOrElement: string | Element) {
   const domId = getDomId(domIdOrElement);
   debugTurbolinks('renderOrHydrateComponent', domId);
   let root = renderedRoots.get(domId);
   if (!root) {
     root = new ComponentRenderer(domIdOrElement);
     renderedRoots.set(domId, root);
   }
-  return root;
+  return root.waitUntilRendered();
 }
 
-export function renderOrHydrateForceLoadedComponents(): void {
-  const els = document.querySelectorAll(`.js-react-on-rails-component[data-force-load="true"]`);
-  els.forEach((el) => renderOrHydrateComponent(el));
+async function forAllElementsAsync(
+  selector: string,
+  callback: (el: Element) => Promise<void>,
+): Promise<void> {
+  const els = document.querySelectorAll(selector);
+  await Promise.all(Array.from(els).map(callback));
 }
 
-export function renderOrHydrateAllComponents(): void {
-  const els = document.querySelectorAll(`.js-react-on-rails-component`);
-  els.forEach((el) => renderOrHydrateComponent(el));
-}
+export const renderOrHydrateForceLoadedComponents = () =>
+  forAllElementsAsync('.js-react-on-rails-component[data-force-load="true"]', renderOrHydrateComponent);
+
+export const renderOrHydrateAllComponents = () =>
+  forAllElementsAsync('.js-react-on-rails-component', renderOrHydrateComponent);
 
 function unmountAllComponents(): void {
   renderedRoots.forEach((root) => root.unmount());
@@ -270,15 +274,11 @@ export async function hydrateStore(storeNameOrElement: string | Element) {
   await storeRenderer.waitUntilHydrated();
 }
 
-export async function hydrateForceLoadedStores(): Promise<void> {
-  const els = document.querySelectorAll(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}][data-force-load="true"]`);
-  await Promise.all(Array.from(els).map((el) => hydrateStore(el)));
-}
+export const hydrateForceLoadedStores = () =>
+  forAllElementsAsync(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}][data-force-load="true"]`, hydrateStore);
 
-export async function hydrateAllStores(): Promise<void> {
-  const els = document.querySelectorAll(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}]`);
-  await Promise.all(Array.from(els).map((el) => hydrateStore(el)));
-}
+export const hydrateAllStores = () =>
+  forAllElementsAsync(`[${REACT_ON_RAILS_STORE_ATTRIBUTE}]`, hydrateStore);
 
 function unmountAllStores(): void {
   storeRenderers.forEach((storeRenderer) => storeRenderer.unmount());

node_package/src/ReactOnRails.client.ts

@@ -148,12 +148,12 @@ ctx.ReactOnRails = {
     return ClientStartup.reactOnRailsPageLoaded();
   },
 
-  reactOnRailsComponentLoaded(domId: string): void {
-    renderOrHydrateComponent(domId);
+  reactOnRailsComponentLoaded(domId: string): Promise<void> {
+    return renderOrHydrateComponent(domId);
   },
 
-  async reactOnRailsStoreLoaded(storeName: string): Promise<void> {
-    await hydrateStore(storeName);
+  reactOnRailsStoreLoaded(storeName: string): Promise<void> {
+    return hydrateStore(storeName);
   },
 
   /**

node_package/src/clientStartup.ts

@@ -11,9 +11,7 @@ import { debugTurbolinks } from './turbolinksUtils';
 
 export async function reactOnRailsPageLoaded() {
   debugTurbolinks('reactOnRailsPageLoaded');
-  const promise = hydrateAllStores();
-  renderOrHydrateAllComponents();
-  await promise;
+  await Promise.all([hydrateAllStores(), renderOrHydrateAllComponents()]);
 }
 
 function reactOnRailsPageUnloaded(): void {
@@ -36,10 +34,10 @@ export async function clientStartup(context: Context): Promise<void> {
   // eslint-disable-next-line no-underscore-dangle
   context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
 
-  // force loaded components and stores are rendered and hydrated immediately
-  renderOrHydrateForceLoadedComponents();
+  // Force loaded components and stores are rendered and hydrated immediately.
   // The hydration process can handle the concurrent hydration of components and stores,
   // so awaiting this isn't necessary.
+  void renderOrHydrateForceLoadedComponents();
   void hydrateForceLoadedStores();
 
   // Other components and stores are rendered and hydrated when the page is fully loaded

node_package/src/types/index.ts

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