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
This commit is contained in:
simoleo89
2026-05-11 16:31:50 +00:00
parent 2137d23ac0
commit a1bee1d825
24 changed files with 354 additions and 258 deletions
+11 -13
View File
@@ -1,6 +1,7 @@
import typescriptEslintPlugin from "@typescript-eslint/eslint-plugin";
import typescriptEslintParser from "@typescript-eslint/parser";
import reactPlugin from "eslint-plugin-react";
import reactCompilerPlugin from "eslint-plugin-react-compiler";
import reactHooksPlugin from "eslint-plugin-react-hooks";
import path from "path";
import { fileURLToPath } from "url";
@@ -14,6 +15,7 @@ export default [
plugins: {
react: reactPlugin,
"react-hooks": reactHooksPlugin,
"react-compiler": reactCompilerPlugin,
"@typescript-eslint": typescriptEslintPlugin,
},
languageOptions: {
@@ -110,28 +112,24 @@ export default [
'@typescript-eslint/no-unused-vars': [
'off'
],
'@typescript-eslint/ban-types': [
'@typescript-eslint/no-restricted-types': [
'error',
{
'types':
{
'String': true,
'Boolean': true,
'Number': true,
'Symbol': true,
'{}': false,
'Object': false,
'object': false,
'Function': false
},
'extendDefaults': true
'String': { message: 'Use string instead', fixWith: 'string' },
'Boolean': { message: 'Use boolean instead', fixWith: 'boolean' },
'Number': { message: 'Use number instead', fixWith: 'number' },
'Symbol': { message: 'Use symbol instead', fixWith: 'symbol' }
}
}
],
'react/react-in-jsx-scope': 'off'
'react/react-in-jsx-scope': 'off',
'react-compiler/react-compiler': 'warn'
},
settings: {
react: {
version: "18.3.1",
version: "19.2",
},
},
},