duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/InfiniteGrid.tsx
+7 -7
View File
@@ -1,5 +1,5 @@
import { useVirtualizer } from '@tanstack/react-virtual';
import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, forwardRef, useEffect, useRef, useState } from 'react';
import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, Ref, useEffect, useRef, useState } from 'react';
import { classNames } from './classNames';
import { NitroLimitedEditionStyledNumberView } from './limited-edition';
import { styleNames } from './styleNames';
@@ -150,7 +150,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
);
};
const InfiniteGridItem = forwardRef<HTMLDivElement, {
type InfiniteGridItemProps = {
itemImage?: string;
itemColor?: string;
itemActive?: boolean;
@@ -161,9 +161,11 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
itemUnseen?: boolean;
itemHighlight?: boolean;
disabled?: boolean;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
ref?: Ref<HTMLDivElement>;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
const InfiniteGridItem = ({ ref, itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, className = null, style = {}, children = null, ...rest }: InfiniteGridItemProps) =>
{
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, className = null, style = {}, children = null, ...rest } = props;
const [ backgroundImageUrl, setBackgroundImageUrl ] = useState<string>(null);
const disposed = useRef<boolean>(false);
@@ -238,9 +240,7 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
{ children }
</div>
);
});
InfiniteGridItem.displayName = 'InfiniteGridItem';
};
export const InfiniteGrid = Object.assign(InfiniteGridRoot, {
Item: InfiniteGridItem
src/layout/NitroButton.tsx
+7 -8
View File
@@ -1,4 +1,4 @@
import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, PropsWithChildren } from 'react';
import { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren, Ref } from 'react';
import { classNames } from './classNames';
const classes = {
@@ -17,14 +17,15 @@ const classes = {
}
};
export const NitroButton = forwardRef<HTMLButtonElement, PropsWithChildren<{
type NitroButtonProps = PropsWithChildren<{
color?: 'default' | 'dark' | 'ghost';
size?: 'default' | 'lg' | 'xl';
outline?: boolean;
}> & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>((props, ref) =>
{
const { color = 'default', size = 'default', outline = false, disabled = false, type = 'button', className = null, ...rest } = props;
ref?: Ref<HTMLButtonElement>;
}> & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
export const NitroButton = ({ ref, color = 'default', size = 'default', outline = false, disabled = false, type = 'button', className = null, ...rest }: NitroButtonProps) =>
{
return (
<button
ref={ ref }
@@ -39,6 +40,4 @@ export const NitroButton = forwardRef<HTMLButtonElement, PropsWithChildren<{
type={ type }
{ ...rest } />
);
});
NitroButton.displayName = 'NitroButton';
};
src/layout/NitroCard.tsx
+45 -50
View File
@@ -1,13 +1,14 @@
import { DetailedHTMLProps, forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
import { DetailedHTMLProps, HTMLAttributes, MouseEvent, PropsWithChildren, Ref } from 'react';
import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../common';
import { classNames } from './classNames';
import { NitroItemCountBadge } from './NitroItemCountBadge';
const NitroCardRoot = forwardRef<HTMLDivElement, PropsWithChildren<{
} & DraggableWindowProps> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
{
const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, className = null, ...rest } = props;
type NitroCardRootProps = PropsWithChildren<{
ref?: Ref<HTMLDivElement>;
} & DraggableWindowProps> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
const NitroCardRoot = ({ ref, uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, className = null, ...rest }: NitroCardRootProps) =>
{
return (
<DraggableWindow disableDrag={ disableDrag } handleSelector={ handleSelector } uniqueKey={ uniqueKey } windowPosition={ windowPosition }>
<div
@@ -19,41 +20,39 @@ const NitroCardRoot = forwardRef<HTMLDivElement, PropsWithChildren<{
{ ...rest } />
</DraggableWindow>
);
});
};
NitroCardRoot.displayName = 'NitroCardRoot';
const NitroCardHeader = forwardRef<HTMLDivElement, {
type NitroCardHeaderProps = {
headerText: string;
onCloseClick?: (event: MouseEvent) => void;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
{
const { headerText = '', onCloseClick = null, className = null, ...rest } = props;
ref?: Ref<HTMLDivElement>;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
const onMouseDown = (event: MouseEvent<HTMLDivElement>) =>
{
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
};
return (
<div ref={ ref } className={ classNames('nitro-card-header-shell relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header', className) }>
<div className="flex items-center justify-center w-full ">
<span className="nitro-card-title text-white">{ headerText }</span>
<div className="absolute flex items-center justify-center cursor-pointer right-2 nitro-card-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown } />
</div>
</div>
);
});
NitroCardHeader.displayName = 'NitroCardHeader';
const NitroCardContent = forwardRef<HTMLDivElement, {
isLoading?: boolean;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
const NitroCardHeader = ({ ref, headerText = '', onCloseClick = null, className = null, ...rest }: NitroCardHeaderProps) =>
{
const { isLoading = false, className = null, children = null, ...rest } = props;
const onMouseDown = (event: MouseEvent<HTMLDivElement>) =>
{
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
};
return (
<div ref={ ref } className={ classNames('nitro-card-header-shell relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header', className) }>
<div className="flex items-center justify-center w-full ">
<span className="nitro-card-title text-white">{ headerText }</span>
<div className="absolute flex items-center justify-center cursor-pointer right-2 nitro-card-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown } />
</div>
</div>
);
};
type NitroCardContentProps = {
isLoading?: boolean;
ref?: Ref<HTMLDivElement>;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
const NitroCardContent = ({ ref, isLoading = false, className = null, children = null, ...rest }: NitroCardContentProps) =>
{
return (
<div
ref={ ref }
@@ -67,15 +66,14 @@ const NitroCardContent = forwardRef<HTMLDivElement, {
{ children }
</div>
);
});
};
NitroCardContent.displayName = 'NitroCardContent';
type NitroCardTabsProps = {
ref?: Ref<HTMLDivElement>;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
const NitroCardTabs = forwardRef<HTMLDivElement, {
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
const NitroCardTabs = ({ ref, className = null, ...rest }: NitroCardTabsProps) =>
{
const { className = null, ...rest } = props;
return (
<div
ref={ ref }
@@ -85,17 +83,16 @@ const NitroCardTabs = forwardRef<HTMLDivElement, {
}
{ ...rest } />
);
});
};
NitroCardTabs.displayName = 'NitroCardTabs';
const NitroCardTabItem = forwardRef<HTMLDivElement, {
type NitroCardTabItemProps = {
isActive?: boolean;
count?: number;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
{
const { isActive = false, count = 0, className = null, children = null, ...rest } = props;
ref?: Ref<HTMLDivElement>;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
const NitroCardTabItem = ({ ref, isActive = false, count = 0, className = null, children = null, ...rest }: NitroCardTabItemProps) =>
{
return (
<div
ref={ ref }
@@ -112,9 +109,7 @@ const NitroCardTabItem = forwardRef<HTMLDivElement, {
<NitroItemCountBadge count={ count } /> }
</div>
);
});
NitroCardTabItem.displayName = 'NitroCardTabItem';
};
export const NitroCard = Object.assign(NitroCardRoot, {
Header: NitroCardHeader,
src/layout/NitroInput.tsx
+7 -8
View File
@@ -1,4 +1,4 @@
import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, PropsWithChildren } from 'react';
import { DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, Ref } from 'react';
import { classNames } from './classNames';
const classes = {
@@ -13,20 +13,19 @@ const classes = {
}
};
export const NitroInput = forwardRef<HTMLInputElement, PropsWithChildren<{
type NitroInputProps = PropsWithChildren<{
color?: 'default' | 'dark' | 'ghost';
inputSize?: 'xs' | 'sm' | 'default' | 'lg' | 'xl';
rounded?: boolean;
}> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>((props, ref) =>
{
const { color = 'default', inputSize = 'default', rounded = true, disabled = false, type = 'text', autoComplete = 'off', className = null, ...rest } = props;
ref?: Ref<HTMLInputElement>;
}> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
export const NitroInput = ({ ref, color = 'default', inputSize = 'default', rounded = true, disabled = false, type = 'text', autoComplete = 'off', className = null, ...rest }: NitroInputProps) =>
{
return (
<input ref={ ref } autoComplete={ autoComplete } className={ classNames( classes.base, classes.size[inputSize], rounded && classes.rounded, classes.color[color], disabled && classes.disabled, className ) }
disabled={ disabled }
type={ type }
{ ...rest } />
);
});
NitroInput.displayName = 'NitroInput';
};
src/layout/NitroItemCountBadge.tsx
+7 -8
View File
@@ -1,4 +1,4 @@
import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, Ref } from 'react';
import { classNames } from './classNames';
const classes = {
@@ -8,13 +8,14 @@ const classes = {
}
};
export const NitroItemCountBadge = forwardRef<HTMLDivElement, PropsWithChildren<{
type NitroItemCountBadgeProps = PropsWithChildren<{
theme?: 'primary';
count: number;
}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
{
const { theme = 'primary', count = 0, className = null, children = null, ...rest } = props;
ref?: Ref<HTMLDivElement>;
}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
export const NitroItemCountBadge = ({ ref, theme = 'primary', count = 0, className = null, children = null, ...rest }: NitroItemCountBadgeProps) =>
{
return (
<div
ref={ ref }
@@ -28,6 +29,4 @@ export const NitroItemCountBadge = forwardRef<HTMLDivElement, PropsWithChildren<
{ children }
</div>
);
});
NitroItemCountBadge.displayName = 'NitroItemCountBadge';
};