ci(*): add eslint-plugin-react-compiler to prepare react 19 (#934)

related #929 ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
toss · Jun 17, 2024 · dc65074 · dc65074
1 parent 0873bc5
commit dc65074
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 44 deletions.
diff --git a/.changeset/neat-poets-drive.md b/.changeset/neat-poets-drive.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+ci(*): add eslint-plugin-react-compiler to prepare react 19
diff --git a/configs/eslint-config/package.json b/configs/eslint-config/package.json
@@ -15,6 +15,7 @@
  "@suspensive/eslint-config-ts": "workspace:*",
  "eslint-plugin-import": "^2.29.1",
  "eslint-plugin-react": "^7.34.2",
+ "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
  "eslint-plugin-react-hooks": "^4.6.2"
  }
 }
diff --git a/configs/eslint-config/react.js b/configs/eslint-config/react.js
@@ -2,8 +2,10 @@
 module.exports = {
  root: true,
  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+ plugins: ['react-compiler'],
  globals: { JSX: true },
  rules: {
+ 'react-compiler/react-compiler': 'error',
  'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
  'react/react-in-jsx-scope': 'off',
  'react/prop-types': 'off',

diff --git a/configs/test-utils/src/index.tsx b/configs/test-utils/src/index.tsx
@@ -25,7 +25,7 @@ export const Suspend = ({ during, toShow }: SuspendProps) => {
  }, during)
  )
  }
- return <>{toShow}</>
+ return toShow
 }
 Suspend.reset = () => {
  suspendIsNeed.current = true

diff --git a/packages/react/src/Delay.spec.tsx b/packages/react/src/Delay.spec.tsx
@@ -2,7 +2,7 @@ import { CustomError, TEXT } from '@suspensive/test-utils'
 import { render, screen, waitFor } from '@testing-library/react'
 import ms from 'ms'
 import { Delay } from './Delay'
-import { Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
+import { Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
 
 beforeEach(() => {
  vi.useFakeTimers({ shouldAdvanceTime: true })
@@ -42,7 +42,9 @@ describe('<Delay/>', () => {
  await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
  })
  it('should throw SuspensiveError if negative number is passed as ms prop', () => {
- expect(() => render(<Delay ms={-1}>{TEXT}</Delay>)).toThrow(Delay_ms_prop_should_be_greater_than_or_equal_to_0)
+ expect(() => render(<Delay ms={-1}>{TEXT}</Delay>)).toThrow(
+ Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0
+ )
  try {
  render(<Delay ms={-1}>{TEXT}</Delay>)
  } catch (error) {

diff --git a/packages/react/src/Delay.tsx b/packages/react/src/Delay.tsx
@@ -1,7 +1,7 @@
 import { type PropsWithChildren, type ReactNode, useContext, useState } from 'react'
 import { DelayDefaultPropsContext } from './contexts'
 import { useTimeout } from './hooks'
-import { Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
+import { Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
 
 export interface DelayProps extends PropsWithChildren {
  ms?: number
@@ -11,7 +11,7 @@ export interface DelayProps extends PropsWithChildren {
 export const Delay = (props: DelayProps) => {
  if (process.env.NODE_ENV === 'development') {
  if (typeof props.ms === 'number') {
- SuspensiveError.assert(props.ms >= 0, Delay_ms_prop_should_be_greater_than_or_equal_to_0)
+ SuspensiveError.assert(props.ms >= 0, Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0)
  }
  }
  const defaultProps = useContext(DelayDefaultPropsContext)

diff --git a/packages/react/src/ErrorBoundary.tsx b/packages/react/src/ErrorBoundary.tsx
@@ -16,9 +16,9 @@ import { syncDevMode } from './contexts'
 import { Delay } from './Delay'
 import { ErrorBoundaryGroupContext } from './ErrorBoundaryGroup'
 import {
+ Message_useErrorBoundaryFallbackProps_this_hook_should_be_called_in_ErrorBoundary_props_fallback,
+ Message_useErrorBoundary_this_hook_should_be_called_in_ErrorBoundary_props_children,
  SuspensiveError,
- useErrorBoundaryFallbackProps_this_hook_should_be_called_in_ErrorBoundary_props_fallback,
- useErrorBoundary_this_hook_should_be_called_in_ErrorBoundary_props_children,
 } from './models/SuspensiveError'
 import type { ConstructorType, Nullable, PropsWithDevMode } from './utility-types'
 import { hasResetKeysChanged } from './utils'
@@ -204,7 +204,7 @@ export const useErrorBoundary = <TError extends Error = Error>() => {
  const errorBoundary = useContext(ErrorBoundaryContext)
  SuspensiveError.assert(
  errorBoundary != null && !errorBoundary.isError,
- useErrorBoundary_this_hook_should_be_called_in_ErrorBoundary_props_children
+ Message_useErrorBoundary_this_hook_should_be_called_in_ErrorBoundary_props_children
  )
 
  return useMemo(
@@ -219,7 +219,7 @@ export const useErrorBoundaryFallbackProps = <TError extends Error = Error>(): E
  const errorBoundary = useContext(ErrorBoundaryContext)
  SuspensiveError.assert(
  errorBoundary != null && errorBoundary.isError,
- useErrorBoundaryFallbackProps_this_hook_should_be_called_in_ErrorBoundary_props_fallback
+ Message_useErrorBoundaryFallbackProps_this_hook_should_be_called_in_ErrorBoundary_props_fallback
  )
 
  return useMemo(

diff --git a/packages/react/src/ErrorBoundaryGroup.spec.tsx b/packages/react/src/ErrorBoundaryGroup.spec.tsx
@@ -5,8 +5,8 @@ import { createElement } from 'react'
 import { ErrorBoundary } from './ErrorBoundary'
 import { ErrorBoundaryGroup, useErrorBoundaryGroup } from './ErrorBoundaryGroup'
 import {
+ Message_useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children,
  SuspensiveError,
- useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children,
 } from './models/SuspensiveError'
 
 const innerErrorBoundaryCount = 3
@@ -75,7 +75,7 @@ describe('useErrorBoundaryGroup', () => {
  return <></>
  })
  )
- ).toThrow(useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children)
+ ).toThrow(Message_useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children)
  try {
  render(
  createElement(() => {

diff --git a/packages/react/src/ErrorBoundaryGroup.tsx b/packages/react/src/ErrorBoundaryGroup.tsx
@@ -9,8 +9,8 @@ import {
 } from 'react'
 import { useIsChanged } from './hooks'
 import {
+ Message_useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children,
  SuspensiveError,
- useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children,
 } from './models/SuspensiveError'
 import { increase } from './utils'
 
@@ -67,7 +67,7 @@ export const useErrorBoundaryGroup = () => {
  const group = useContext(ErrorBoundaryGroupContext)
  SuspensiveError.assert(
  group != null,
- useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children
+ Message_useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children
  )
  return useMemo(
  () => ({

diff --git a/packages/react/src/Suspensive.spec.tsx b/packages/react/src/Suspensive.spec.tsx
@@ -5,8 +5,8 @@ import { createElement, useContext } from 'react'
 import { DelayDefaultPropsContext, SuspenseDefaultPropsContext } from './contexts'
 import { Delay, type DelayProps } from './Delay'
 import {
+ Message_Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0,
  SuspensiveError,
- Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0,
 } from './models/SuspensiveError'
 import { Suspense, type SuspenseProps } from './Suspense'
 import { Suspensive, SuspensiveProvider } from './Suspensive'
@@ -117,7 +117,7 @@ describe('<SuspensiveProvider/>', () => {
 
  it('should accept defaultOptions.delay.ms only positive number', () => {
  expect(() => new Suspensive({ defaultProps: { delay: { ms: 0 } } })).toThrow(
- Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0
+ Message_Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0
  )
  try {
  new Suspensive({ defaultProps: { delay: { ms: 0 } } })
@@ -128,7 +128,7 @@ describe('<SuspensiveProvider/>', () => {
  }
 
  expect(() => new Suspensive({ defaultProps: { delay: { ms: -1 } } })).toThrow(
- Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0
+ Message_Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0
  )
  try {
  new Suspensive({ defaultProps: { delay: { ms: -1 } } })

diff --git a/packages/react/src/Suspensive.tsx b/packages/react/src/Suspensive.tsx
@@ -1,8 +1,8 @@
 import { type ContextType, type PropsWithChildren, useMemo } from 'react'
 import { DelayDefaultPropsContext, DevModeContext, SuspenseDefaultPropsContext, SuspensiveDevMode } from './contexts'
 import {
+ Message_Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0,
  SuspensiveError,
- Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0,
 } from './models/SuspensiveError'
 
 export class Suspensive {
@@ -16,7 +16,7 @@ export class Suspensive {
  if (process.env.NODE_ENV === 'development' && typeof config.defaultProps?.delay?.ms === 'number') {
  SuspensiveError.assert(
  config.defaultProps.delay.ms > 0,
- Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0
+ Message_Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0
  )
  }
  this.defaultProps = config.defaultProps

diff --git a/packages/react/src/models/SuspensiveError.ts b/packages/react/src/models/SuspensiveError.ts
@@ -6,16 +6,17 @@ export class SuspensiveError extends Error {
  }
 }
 
-export const useErrorBoundary_this_hook_should_be_called_in_ErrorBoundary_props_children =
+export const Message_useErrorBoundary_this_hook_should_be_called_in_ErrorBoundary_props_children =
  'useErrorBoundary: this hook should be called in ErrorBoundary.props.children'
 
-export const useErrorBoundaryFallbackProps_this_hook_should_be_called_in_ErrorBoundary_props_fallback =
+export const Message_useErrorBoundaryFallbackProps_this_hook_should_be_called_in_ErrorBoundary_props_fallback =
  'useErrorBoundaryFallbackProps: this hook should be called in ErrorBoundary.props.fallback'
 
-export const useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children =
+export const Message_useErrorBoundaryGroup_this_hook_should_be_called_in_ErrorBoundary_props_children =
  'useErrorBoundaryGroup: this hook should be called in ErrorBoundary.props.children'
 
-export const Delay_ms_prop_should_be_greater_than_or_equal_to_0 = 'Delay: ms prop should be greater than or equal to 0'
+export const Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0 =
+ 'Delay: ms prop should be greater than or equal to 0'
 
-export const Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0 =
+export const Message_Suspensive_config_defaultProps_delay_ms_should_be_greater_than_0 =
  'Suspensive: config.defaultProps.delay.ms should be greater than 0'