Replace context with globalThis

Author: alexeyr

node_package/src/CallbackRegistry.ts

@@ -1,6 +1,6 @@
 import { ItemRegistrationCallback } from './types';
 import { onPageLoaded, onPageUnloaded } from './pageLifecycle';
-import { getContextAndRailsContext } from './context';
+import { getRailsContext } from './context';
 
 /**
  * Represents information about a registered item including its value,
@@ -47,7 +47,7 @@ export default class CallbackRegistry<T> {
     };
 
     onPageLoaded(() => {
-      const registryTimeout = getContextAndRailsContext().railsContext?.componentRegistryTimeout;
+      const registryTimeout = getRailsContext().railsContext?.componentRegistryTimeout;
       if (!registryTimeout) return;
 
       timeoutId = setTimeout(triggerTimeout, registryTimeout);

node_package/src/ClientSideRenderer.ts

@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types';
 
-import { getContextAndRailsContext, resetContextAndRailsContext, type Context } from './context';
+import { getRailsContext, resetRailsContext } from './context';
 import createReactOutput from './createReactOutput';
 import { isServerRenderHash } from './isServerRenderResult';
 import reactHydrateOrRender from './reactHydrateOrRender';
@@ -61,23 +61,23 @@ class ComponentRenderer {
     const storeDependencies = el.getAttribute('data-store-dependencies');
     const storeDependenciesArray = storeDependencies ? (JSON.parse(storeDependencies) as string[]) : [];
 
-    const { context, railsContext } = getContextAndRailsContext();
-    if (!context || !railsContext) return;
+    const { railsContext } = getRailsContext();
+    if (!railsContext) return;
 
     // Wait for all store dependencies to be loaded
     this.renderPromise = Promise.all(
-      storeDependenciesArray.map((storeName) => context.ReactOnRails.getOrWaitForStore(storeName)),
+      storeDependenciesArray.map((storeName) => globalThis.ReactOnRails.getOrWaitForStore(storeName)),
     ).then(() => {
       if (this.state === 'unmounted') return Promise.resolve();
-      return this.render(el, context, railsContext);
+      return this.render(el, railsContext);
     });
   }
 
   /**
    * Used for client rendering by ReactOnRails. Either calls ReactDOM.hydrate, ReactDOM.render, or
    * delegates to a renderer registered by the user.
    */
-  private async render(el: Element, context: Context, railsContext: RailsContext): Promise<void> {
+  private async render(el: Element, railsContext: RailsContext): Promise<void> {
     // This must match lib/react_on_rails/helper.rb
     const name = el.getAttribute('data-component-name') || '';
     const { domNodeId } = this;
@@ -87,7 +87,7 @@ class ComponentRenderer {
     try {
       const domNode = document.getElementById(domNodeId);
       if (domNode) {
-        const componentObj = await context.ReactOnRails.getOrWaitForComponent(name);
+        const componentObj = await globalThis.ReactOnRails.getOrWaitForComponent(name);
         if (this.state === 'unmounted') {
           return;
         }
@@ -181,8 +181,8 @@ class StoreRenderer {
 
   constructor(storeDataElement: Element) {
     this.state = 'hydrating';
-    const { context, railsContext } = getContextAndRailsContext();
-    if (!context || !railsContext) {
+    const { railsContext } = getRailsContext();
+    if (!railsContext) {
       return;
     }
 
@@ -191,22 +191,17 @@ class StoreRenderer {
       storeDataElement.textContent !== null
         ? (JSON.parse(storeDataElement.textContent) as Record<string, unknown>)
         : {};
-    this.hydratePromise = this.hydrate(context, railsContext, name, props);
+    this.hydratePromise = this.hydrate(railsContext, name, props);
   }
 
-  private async hydrate(
-    context: Context,
-    railsContext: RailsContext,
-    name: string,
-    props: Record<string, unknown>,
-  ) {
-    const storeGenerator = await context.ReactOnRails.getOrWaitForStoreGenerator(name);
+  private async hydrate(railsContext: RailsContext, name: string, props: Record<string, unknown>) {
+    const storeGenerator = await globalThis.ReactOnRails.getOrWaitForStoreGenerator(name);
     if (this.state === 'unmounted') {
       return;
     }
 
     const store = storeGenerator(props, railsContext);
-    context.ReactOnRails.setStore(name, store);
+    globalThis.ReactOnRails.setStore(name, store);
     this.state = 'hydrated';
   }
 
@@ -252,7 +247,7 @@ export const renderOrHydrateAllComponents = () =>
 function unmountAllComponents(): void {
   renderedRoots.forEach((root) => root.unmount());
   renderedRoots.clear();
-  resetContextAndRailsContext();
+  resetRailsContext();
 }
 
 const storeRenderers = new Map<string, StoreRenderer>();

node_package/src/ReactOnRails.client.ts

@@ -6,7 +6,6 @@ import * as StoreRegistry from './StoreRegistry';
 import buildConsoleReplay from './buildConsoleReplay';
 import createReactOutput from './createReactOutput';
 import * as Authenticity from './Authenticity';
-import context from './context';
 import type {
   RegisteredComponent,
   RenderResult,
@@ -19,27 +18,19 @@ import type {
 } from './types';
 import reactHydrateOrRender from './reactHydrateOrRender';
 
-const ctx = context();
-
-if (ctx === undefined) {
-  throw new Error("The context (usually Window or NodeJS's Global) is undefined.");
-}
-
-if (ctx.ReactOnRails !== undefined) {
-  /* eslint-disable @typescript-eslint/no-base-to-string -- Window and Global both have useful toString() */
+if (globalThis.ReactOnRails !== undefined) {
   throw new Error(`\
-The ReactOnRails value exists in the ${ctx} scope, it may not be safe to overwrite it.
+The ReactOnRails value exists in the ${globalThis} scope, it may not be safe to overwrite it.
 This could be caused by setting Webpack's optimization.runtimeChunk to "true" or "multiple," rather than "single."
 Check your Webpack configuration. Read more at https://github.com/shakacode/react_on_rails/issues/1558.`);
-  /* eslint-enable @typescript-eslint/no-base-to-string */
 }
 
 const DEFAULT_OPTIONS = {
   traceTurbolinks: false,
   turbo: false,
 };
 
-ctx.ReactOnRails = {
+globalThis.ReactOnRails = {
   options: {},
 
   register(components: Record<string, ReactComponentOrRenderFunction>): void {
@@ -199,9 +190,9 @@ ctx.ReactOnRails = {
   },
 };
 
-ctx.ReactOnRails.resetOptions();
+globalThis.ReactOnRails.resetOptions();
 
-ClientStartup.clientStartup(ctx);
+ClientStartup.clientStartup();
 
 export * from './types';
-export default ctx.ReactOnRails;
+export default globalThis.ReactOnRails;

node_package/src/clientStartup.ts

@@ -1,9 +1,8 @@
-import { type Context, isWindow } from './context';
 import {
-  renderOrHydrateForceLoadedComponents,
-  renderOrHydrateAllComponents,
-  hydrateForceLoadedStores,
   hydrateAllStores,
+  hydrateForceLoadedStores,
+  renderOrHydrateAllComponents,
+  renderOrHydrateForceLoadedComponents,
   unmountAll,
 } from './ClientSideRenderer';
 import { onPageLoaded, onPageUnloaded } from './pageLifecycle';
@@ -19,20 +18,20 @@ function reactOnRailsPageUnloaded(): void {
   unmountAll();
 }
 
-export function clientStartup(context: Context) {
+export function clientStartup() {
   // Check if server rendering
-  if (!isWindow(context)) {
+  if (globalThis.document === undefined) {
     return;
   }
 
   // Tried with a file local variable, but the install handler gets called twice.
   // eslint-disable-next-line no-underscore-dangle
-  if (context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__) {
+  if (globalThis.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__) {
     return;
   }
 
   // eslint-disable-next-line no-underscore-dangle
-  context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
+  globalThis.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
 
   // Force loaded components and stores are rendered and hydrated immediately.
   // The hydration process can handle the concurrent hydration of components and stores,

node_package/src/context.ts

@@ -1,69 +1,37 @@
-import type { ReactOnRailsInternal as ReactOnRailsType, RailsContext } from './types';
+import type { ReactOnRailsInternal, RailsContext } from './types';
 
 declare global {
-  interface Window {
-    ReactOnRails: ReactOnRailsType;
-    __REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__?: boolean;
-  }
-
-  namespace globalThis {
-    /* eslint-disable no-var,vars-on-top */
-    var ReactOnRails: ReactOnRailsType;
-    /* eslint-enable no-var,vars-on-top */
-  }
-}
-
-export type Context = Window | typeof globalThis;
-
-/**
- * Get the context, be it window or global
- */
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-export default function context(this: void): Context | void {
-  return (typeof window !== 'undefined' && window) || (typeof global !== 'undefined' && global) || this;
+  /* eslint-disable no-var,vars-on-top,no-underscore-dangle */
+  var ReactOnRails: ReactOnRailsInternal;
+  var __REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__: boolean;
+  /* eslint-enable no-var,vars-on-top,no-underscore-dangle */
 }
 
-export function isWindow(ctx: Context): ctx is Window {
-  return (ctx as Window).document !== undefined;
-}
-
-export function reactOnRailsContext(): Context {
-  const ctx = context();
-  if (ctx === undefined || typeof ctx.ReactOnRails === 'undefined') {
-    throw new Error('ReactOnRails is undefined in both global and window namespaces.');
-  }
-  return ctx;
-}
-
-let currentContext: Context | null = null;
 let currentRailsContext: RailsContext | null = null;
 
 // caches context and railsContext to avoid re-parsing rails-context each time a component is rendered
-// Cached values will be reset when resetContextAndRailsContext() is called
-export function getContextAndRailsContext(): { context: Context | null; railsContext: RailsContext | null } {
+// Cached values will be reset when resetRailsContext() is called
+export function getRailsContext(): { railsContext: RailsContext | null } {
   // Return cached values if already set
-  if (currentContext && currentRailsContext) {
-    return { context: currentContext, railsContext: currentRailsContext };
+  if (currentRailsContext) {
+    return { railsContext: currentRailsContext };
   }
 
-  currentContext = reactOnRailsContext();
-
   const el = document.getElementById('js-react-on-rails-context');
-  if (!el || !el.textContent) {
-    return { context: null, railsContext: null };
+  if (!el?.textContent) {
+    return { railsContext: null };
   }
 
   try {
     currentRailsContext = JSON.parse(el.textContent) as RailsContext;
   } catch (e) {
     console.error('Error parsing Rails context:', e);
-    return { context: null, railsContext: null };
+    return { railsContext: null };
   }
 
-  return { context: currentContext, railsContext: currentRailsContext };
+  return { railsContext: currentRailsContext };
 }
 
-export function resetContextAndRailsContext(): void {
-  currentContext = null;
+export function resetRailsContext(): void {
   currentRailsContext = null;
 }

node_package/src/turbolinksUtils.ts

@@ -1,5 +1,3 @@
-import { reactOnRailsContext } from './context';
-
 declare global {
   namespace Turbolinks {
     interface TurbolinksStatic {
@@ -18,8 +16,7 @@ export function debugTurbolinks(...msg: unknown[]): void {
     return;
   }
 
-  const context = reactOnRailsContext();
-  if (context.ReactOnRails?.option('traceTurbolinks')) {
+  if (globalThis.ReactOnRails?.option('traceTurbolinks')) {
     console.log('TURBO:', ...msg);
   }
 }
@@ -29,11 +26,7 @@ export function turbolinksInstalled(): boolean {
 }
 
 export function turboInstalled() {
-  const context = reactOnRailsContext();
-  if (context.ReactOnRails) {
-    return context.ReactOnRails.option('turbo') === true;
-  }
-  return false;
+  return globalThis.ReactOnRails?.option('turbo') === true;
 }
 
 export function turbolinksVersion5(): boolean {

node_package/tests/ComponentRegistry.test.js

@@ -23,7 +23,7 @@ jest.mock('../src/pageLifecycle', () => ({
 }));
 
 jest.mock('../src/context', () => ({
-  getContextAndRailsContext: () => ({ railsContext: { componentRegistryTimeout: 100 } }),
+  getRailsContext: () => ({ railsContext: { componentRegistryTimeout: 100 } }),
 }));
 
 describe('ComponentRegistry', () => {