React 19 modernization: forwardRef removal, Compiler, ErrorBoundary, Suspense, native <script>

Adopt React 19 idioms across the codebase. The runtime was already on
react@19.2.5 but no React 19 APIs were in use.

- forwardRef -> ref-as-prop in 7 layout/component files
  (NitroInput/Button/ItemCountBadge/Card×5/InfiniteGridItem,
  ToolbarItemView, AvatarEditorIcon)
- <Ctx.Provider> -> <Ctx> in 6 contexts (CatalogAdmin, FloorplanEditor,
  UiSettings, GridContext, NitroCardContext, NitroCardAccordionContext)
- Native <script> hoisting for Turnstile, ExternalPluginLoader, GoogleAdsView
  (React 19 dedupes by src; removes manual document.head.appendChild +
  module-level promise caches)
- React Compiler enabled at build time via babel-plugin-react-compiler
  in vite.config.mjs (target: '19'), plus eslint-plugin-react-compiler
  in lint mode
- Global <ErrorBoundary> + <Suspense> in src/index.tsx using
  react-error-boundary, with LoadingView as fallback
- BackgroundsView migrated to use(promise) as a demonstrator pattern
  for Suspense-driven config loading
- ESLint react setting bumped 18.3.1 -> 19.2; legacy
  @typescript-eslint/ban-types replaced with no-restricted-types
  (the old rule was removed in @typescript-eslint v8)
- Refresh public/configuration/{asset-loader,bootstrap}.js to match
  current write-asset-loader.mjs output

Phase 3 (login forms -> useActionState/useFormStatus) deferred:
LoginView is 1623 lines with lockout + Turnstile + heartbeat
interleaving; safer as its own PR.

https://claude.ai/code/session_01GrR87LAqnAEyKG2ZbmQt5Q

src/components/ads/GoogleAdsView.tsx

@@ -9,8 +9,6 @@ interface AdsenseConfig {
     fullWidthResponsive?: boolean;
 }
 
-const ADSENSE_SCRIPT_ID = 'google-adsense-script';
-
 const parsePublisherIdFromAdsTxt = (text: string): string | null => {
     for (const rawLine of text.split(/\r?\n/)) {
         const line = rawLine.split('#')[0].trim();
@@ -24,18 +22,6 @@ const parsePublisherIdFromAdsTxt = (text: string): string | null => {
     return null;
 };
 
-const ensureAdsenseScript = (publisherId: string): void => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(ADSENSE_SCRIPT_ID)) return;
-
-    const script = document.createElement('script');
-    script.id = ADSENSE_SCRIPT_ID;
-    script.async = true;
-    script.crossOrigin = 'anonymous';
-    script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-${ publisherId }`;
-    document.head.appendChild(script);
-};
-
 export const GoogleAdsView: FC<{}> = () => {
     const adsEnabled = GetConfigurationValue<boolean>('show.google.ads', false);
     const [ isOpen, setIsOpen ] = useState(false);
@@ -95,11 +81,6 @@ export const GoogleAdsView: FC<{}> = () => {
         return () => { cancelled = true; };
     }, []);
 
-    useEffect(() => {
-        if (!isOpen || !publisherId || !config) return;
-        ensureAdsenseScript(publisherId);
-    }, [ isOpen, publisherId, config ]);
-
     useEffect(() => {
         if (!isOpen) {
             pushedRef.current = false;
@@ -138,6 +119,11 @@ export const GoogleAdsView: FC<{}> = () => {
 
     return (
         <NitroCardView className="nitro-google-ads" uniqueKey="google-ads" theme="primary">
+            { publisherId &&
+                <script
+                    async
+                    crossOrigin="anonymous"
+                    src={ `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-${ publisherId }` } /> }
             <NitroCardHeaderView headerText="Sponsored" onCloseClick={ () => setIsOpen(false) } />
             <NitroCardContentView>
                 <div className="flex items-center justify-center w-[300px] h-[250px] bg-white">

src/components/avatar-editor/AvatarEditorIcon.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, Ref } from 'react';
 import { classNames } from '../../layout';
 
 import arrowLeftIcon from '../../assets/images/avatareditor/arrow-left-icon.png';
@@ -55,13 +55,14 @@ const ICON_MAP: Record<string, { normal: string; selected?: string }> = {
     'wa': { normal: waIcon, selected: waSelectedIcon },
 };
 
-export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
+type AvatarEditorIconProps = PropsWithChildren<{
     icon: string;
     selected?: boolean;
-}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
-{
-    const { icon = null, selected = false, className = null, children, ...rest } = props;
+    ref?: Ref<HTMLDivElement>;
+}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
+export const AvatarEditorIcon = ({ ref, icon = null, selected = false, className = null, children, ...rest }: AvatarEditorIconProps) =>
+{
     const iconEntry = icon ? ICON_MAP[icon] : null;
 
     if(!iconEntry) return null;
@@ -77,6 +78,4 @@ export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
             { children }
         </div>
     );
-});
-
-AvatarEditorIcon.displayName = 'AvatarEditorIcon';
+};

src/components/backgrounds/BackgroundsView.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';
+import { Dispatch, FC, SetStateAction, use, useCallback, useMemo, useState } from 'react';
 import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text } from '../../common';
 import { useRoom } from '../../hooks';
 import { GetOptionalConfigurationValue } from '../../api';
@@ -25,6 +25,20 @@ type TabType = typeof TABS[number];
 
 type RemoteData = Partial<Record<'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data', any[]>>;
 
+let backgroundsDataPromise: Promise<RemoteData | null> | null = null;
+
+const fetchBackgroundsData = (): Promise<RemoteData | null> =>
+{
+    if(backgroundsDataPromise) return backgroundsDataPromise;
+
+    backgroundsDataPromise = fetch(configFileUrl('infostand_backgrounds.json'), { credentials: 'omit' })
+        .then(r => r.ok ? r.json() : null)
+        .then(json => (json && typeof json === 'object') ? json as RemoteData : null)
+        .catch(() => null);
+
+    return backgroundsDataPromise;
+};
+
 export const BackgroundsView: FC<BackgroundsViewProps> = ({
     setIsVisible,
     selectedBackground,
@@ -37,18 +51,9 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
     setSelectedCardBackground
 }) => {
     const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
-    const [remoteData, setRemoteData] = useState<RemoteData | null>(null);
+    const remoteData = use(fetchBackgroundsData());
     const { roomSession } = useRoom();
 
-    useEffect(() => {
-        let cancelled = false;
-        fetch(configFileUrl('infostand_backgrounds.json'), { credentials: 'omit' })
-            .then(r => r.ok ? r.json() : null)
-            .then(json => { if(!cancelled && json && typeof json === 'object') setRemoteData(json as RemoteData); })
-            .catch(() => {});
-        return () => { cancelled = true; };
-    }, []);
-
     const processData = useCallback((configData: any[], idField: string): ItemData[] => {
         if (!configData?.length) return [];
 

src/components/catalog/CatalogAdminContext.tsx

@@ -280,7 +280,7 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
     }, []);
 
     return (
-        <CatalogAdminContext.Provider value={ {
+        <CatalogAdminContext value={ {
             adminMode, setAdminMode,
             editingOffer, setEditingOffer,
             editingPageData, setEditingPageData,
@@ -293,6 +293,6 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
             publishCatalog
         } }>
             { children }
-        </CatalogAdminContext.Provider>
+        </CatalogAdminContext>
     );
 };

src/components/floorplan-editor/FloorplanEditorContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
+import { createContext, Dispatch, FC, SetStateAction, useContext } from 'react';
 import { IFloorplanSettings } from '@nitrots/nitro-renderer';
 import { IVisualizationSettings } from '@nitrots/nitro-renderer';
 
@@ -29,6 +29,6 @@ const FloorplanEditorContext = createContext<IFloorplanEditorContext>({
     areaInfo: { total: 0, walkable: 0 }
 });
 
-export const FloorplanEditorContextProvider: FC<ProviderProps<IFloorplanEditorContext>> = props => <FloorplanEditorContext.Provider { ...props } />;
+export const FloorplanEditorContextProvider: FC<{ value: IFloorplanEditorContext; children?: React.ReactNode }> = props => <FloorplanEditorContext { ...props } />;
 
 export const useFloorplanEditorContext = () => useContext(FloorplanEditorContext);

src/components/login/TurnstileWidget.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 
 declare global
 {
@@ -13,41 +13,8 @@ declare global
     }
 }
 
-const SCRIPT_ID = 'cf-turnstile-script';
 const SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
 
-let scriptPromise: Promise<void> | null = null;
-
-const loadTurnstileScript = (): Promise<void> =>
-{
-    if(typeof window === 'undefined') return Promise.resolve();
-    if(window.turnstile) return Promise.resolve();
-    if(scriptPromise) return scriptPromise;
-
-    scriptPromise = new Promise<void>((resolve, reject) =>
-    {
-        const existing = document.getElementById(SCRIPT_ID) as HTMLScriptElement | null;
-
-        if(existing)
-        {
-            existing.addEventListener('load', () => resolve());
-            existing.addEventListener('error', () => reject(new Error('Turnstile failed to load')));
-            return;
-        }
-
-        const script = document.createElement('script');
-        script.id = SCRIPT_ID;
-        script.src = SCRIPT_SRC;
-        script.async = true;
-        script.defer = true;
-        script.onload = () => resolve();
-        script.onerror = () => reject(new Error('Turnstile failed to load'));
-        document.head.appendChild(script);
-    });
-
-    return scriptPromise;
-};
-
 export interface TurnstileWidgetProps
 {
     siteKey: string;
@@ -64,44 +31,47 @@ export const TurnstileWidget: FC<TurnstileWidgetProps> = props =>
     const { siteKey, theme = 'light', size = 'normal', onToken, onExpire, onError, resetSignal = 0 } = props;
     const containerRef = useRef<HTMLDivElement | null>(null);
     const widgetIdRef = useRef<string | null>(null);
+    const [ scriptReady, setScriptReady ] = useState<boolean>(typeof window !== 'undefined' && !!window.turnstile);
 
     useEffect(() =>
     {
-        if(!siteKey || !containerRef.current) return;
+        if(scriptReady) return;
+        if(typeof window === 'undefined') return;
 
-        let cancelled = false;
-
-        loadTurnstileScript()
-            .then(() =>
+        const interval = window.setInterval(() =>
+        {
+            if(window.turnstile)
             {
-                if(cancelled || !window.turnstile || !containerRef.current) return;
+                setScriptReady(true);
+                window.clearInterval(interval);
+            }
+        }, 100);
 
-                widgetIdRef.current = window.turnstile.render(containerRef.current, {
-                    sitekey: siteKey,
-                    theme,
-                    size,
-                    callback: (token: string) => onToken(token),
-                    'expired-callback': () => onExpire?.(),
-                    'error-callback': () => onError?.()
-                });
-            })
-            .catch(err =>
-            {
-                console.error('[Turnstile] script load failed', err);
-                onError?.();
-            });
+        return () => window.clearInterval(interval);
+    }, [ scriptReady ]);
+
+    useEffect(() =>
+    {
+        if(!scriptReady || !siteKey || !containerRef.current || !window.turnstile) return;
+
+        widgetIdRef.current = window.turnstile.render(containerRef.current, {
+            sitekey: siteKey,
+            theme,
+            size,
+            callback: (token: string) => onToken(token),
+            'expired-callback': () => onExpire?.(),
+            'error-callback': () => onError?.()
+        });
 
         return () =>
         {
-            cancelled = true;
-
             if(widgetIdRef.current && window.turnstile)
             {
                 try { window.turnstile.remove(widgetIdRef.current); } catch { }
                 widgetIdRef.current = null;
             }
         };
-    }, [ siteKey, theme, size ]);
+    }, [ scriptReady, siteKey, theme, size ]);
 
     useEffect(() =>
     {
@@ -114,5 +84,19 @@ export const TurnstileWidget: FC<TurnstileWidgetProps> = props =>
 
     if(!siteKey) return null;
 
-    return <div ref={ containerRef } className="turnstile-slot" />;
+    return (
+        <>
+            <script
+                async
+                defer
+                src={ SCRIPT_SRC }
+                onLoad={ () => setScriptReady(true) }
+                onError={ () =>
+                {
+                    console.error('[Turnstile] script load failed');
+                    onError?.();
+                } } />
+            <div ref={ containerRef } className="turnstile-slot" />
+        </>
+    );
 };

src/components/plugins/ExternalPluginLoader.tsx

@@ -2,29 +2,25 @@ import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue } from '../../api';
 import { subscribePlugins } from './NitroPluginApi';
 
-// Force the global API to be initialized
 import './NitroPluginApi';
 
 export const ExternalPluginLoader: FC<{}> = () =>
 {
     const [, forceUpdate] = useState(0);
+    const [ pluginUrls, setPluginUrls ] = useState<string[]>([]);
 
     useEffect(() =>
     {
         return subscribePlugins(() => forceUpdate(n => n + 1));
     }, []);
 
-    // MainView only renders after isReady=true in App.tsx,
-    // so the configuration is guaranteed to be loaded at this point.
     useEffect(() =>
     {
-        const scripts: HTMLScriptElement[] = [];
-
-        let pluginUrls: string[] = [];
+        let urls: string[] = [];
 
         try
         {
-            pluginUrls = GetConfigurationValue<string[]>('external.plugins', []);
+            urls = GetConfigurationValue<string[]>('external.plugins', []) || [];
         }
         catch (e)
         {
@@ -32,30 +28,28 @@ export const ExternalPluginLoader: FC<{}> = () =>
             return;
         }
 
-        if (!pluginUrls || pluginUrls.length === 0)
+        if (!urls.length)
         {
             console.log('[NitroPlugins] No external plugins configured');
             return;
         }
 
-        console.log('[NitroPlugins] Loading external plugins:', pluginUrls);
-
-        for (const url of pluginUrls)
-        {
-            const script = document.createElement('script');
-            script.src = url;
-            script.async = true;
-            script.onload = () => console.log(`[NitroPlugins] Loaded: ${url}`);
-            script.onerror = () => console.warn(`[NitroPlugins] Failed to load: ${url}`);
-            document.head.appendChild(script);
-            scripts.push(script);
-        }
-
-        return () =>
-        {
-            scripts.forEach(s => s.remove());
-        };
+        console.log('[NitroPlugins] Loading external plugins:', urls);
+        setPluginUrls(urls);
     }, []);
 
-    return null;
+    if (!pluginUrls.length) return null;
+
+    return (
+        <>
+            { pluginUrls.map(url => (
+                <script
+                    key={ url }
+                    async
+                    src={ url }
+                    onLoad={ () => console.log(`[NitroPlugins] Loaded: ${ url }`) }
+                    onError={ () => console.warn(`[NitroPlugins] Failed to load: ${ url }`) } />
+            )) }
+        </>
+    );
 };

src/components/toolbar/ToolbarItemView.tsx

@@ -1,12 +1,13 @@
-import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, Ref } from 'react';
 import { classNames } from '../../layout';
 
-export const ToolbarItemView = forwardRef<HTMLDivElement, PropsWithChildren<{
+type ToolbarItemViewProps = PropsWithChildren<{
     icon: string;
-}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
-{
-    const { icon = null, className = null, ...rest } = props;
+    ref?: Ref<HTMLDivElement>;
+}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
+export const ToolbarItemView = ({ ref, icon = null, className = null, ...rest }: ToolbarItemViewProps) =>
+{
     return (
         <div
             ref={ ref }
@@ -17,6 +18,4 @@ export const ToolbarItemView = forwardRef<HTMLDivElement, PropsWithChildren<{
             ) }
             { ...rest } />
     );
-});
-
-ToolbarItemView.displayName = 'ToolbarItemView';
+};