From dc65074b0169afab4b49cb29ab49912845998cc7 Mon Sep 17 00:00:00 2001 From: Jonghyeon Ko Date: Mon, 17 Jun 2024 17:25:41 +0900 Subject: [PATCH] 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. --- .changeset/neat-poets-drive.md | 5 + configs/eslint-config/package.json | 1 + configs/eslint-config/react.js | 2 + configs/test-utils/src/index.tsx | 2 +- packages/react/src/Delay.spec.tsx | 6 +- packages/react/src/Delay.tsx | 4 +- packages/react/src/ErrorBoundary.tsx | 8 +- .../react/src/ErrorBoundaryGroup.spec.tsx | 4 +- packages/react/src/ErrorBoundaryGroup.tsx | 4 +- packages/react/src/Suspensive.spec.tsx | 6 +- packages/react/src/Suspensive.tsx | 4 +- packages/react/src/models/SuspensiveError.ts | 11 +- pnpm-lock.yaml | 237 ++++++++++++++++++ .../src/app/react/useErrorBoundary/page.tsx | 49 ++-- 14 files changed, 299 insertions(+), 44 deletions(-) create mode 100644 .changeset/neat-poets-drive.md diff --git a/.changeset/neat-poets-drive.md b/.changeset/neat-poets-drive.md new file mode 100644 index 000000000..25c7310bd --- /dev/null +++ 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 index 14aaafd4b..89b893a32 100644 --- 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 index 349a85db1..da57e3530 100644 --- 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 index fa565fbe1..fa75ec151 100644 --- 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 index 160c390ce..c4aa4c031 100644 --- 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('', () => { await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument()) }) it('should throw SuspensiveError if negative number is passed as ms prop', () => { - expect(() => render({TEXT})).toThrow(Delay_ms_prop_should_be_greater_than_or_equal_to_0) + expect(() => render({TEXT})).toThrow( + Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0 + ) try { render({TEXT}) } catch (error) { diff --git a/packages/react/src/Delay.tsx b/packages/react/src/Delay.tsx index 7173dc938..2b3387e05 100644 --- 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 index 061b8a646..70c9d3533 100644 --- 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 = () => { 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 = (): 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 index 2beb65118..419479b10 100644 --- 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 index 13c942f7e..42fd77aab 100644 --- 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 index 46ddfed2f..ae022fa47 100644 --- 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('', () => { 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('', () => { } 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 index 4caaf5526..a0611580d 100644 --- 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 index a31e32aa4..c9d04ec29 100644 --- 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' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c5e267c4..0a166e8fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -119,6 +119,9 @@ importers: eslint-plugin-react: specifier: ^7.34.2 version: 7.34.2(eslint@8.57.0) + eslint-plugin-react-compiler: + specifier: 0.0.0-experimental-51a85ea-20240601 + version: 0.0.0-experimental-51a85ea-20240601(eslint@8.57.0) eslint-plugin-react-hooks: specifier: ^4.6.2 version: 4.6.2(eslint@8.57.0) @@ -533,6 +536,14 @@ packages: '@babel/highlight': 7.24.5 picocolors: 1.0.1 + /@babel/code-frame@7.24.7: + resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/highlight': 7.24.7 + picocolors: 1.0.1 + dev: false + /@babel/compat-data@7.24.4: resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==} engines: {node: '>=6.9.0'} @@ -568,6 +579,23 @@ packages: '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 + /@babel/generator@7.24.7: + resolution: {integrity: sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.7 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + jsesc: 2.5.2 + dev: false + + /@babel/helper-annotate-as-pure@7.24.7: + resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.7 + dev: false + /@babel/helper-compilation-targets@7.23.6: resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==} engines: {node: '>=6.9.0'} @@ -578,10 +606,37 @@ packages: lru-cache: 5.1.1 semver: 6.3.1 + /@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.24.5): + resolution: {integrity: sha512-kTkaDl7c9vO80zeX1rJxnuRpEsD5tA81yh11X1gQo+PhSti3JS+7qeZo9U4RHobKRiFPKaGK3svUAeb8D0Q7eg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.24.5 + '@babel/helper-annotate-as-pure': 7.24.7 + '@babel/helper-environment-visitor': 7.24.7 + '@babel/helper-function-name': 7.24.7 + '@babel/helper-member-expression-to-functions': 7.24.7 + '@babel/helper-optimise-call-expression': 7.24.7 + '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.5) + '@babel/helper-skip-transparent-expression-wrappers': 7.24.7 + '@babel/helper-split-export-declaration': 7.24.7 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-environment-visitor@7.22.20: resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==} engines: {node: '>=6.9.0'} + /@babel/helper-environment-visitor@7.24.7: + resolution: {integrity: sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.7 + dev: false + /@babel/helper-function-name@7.23.0: resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} engines: {node: '>=6.9.0'} @@ -589,12 +644,37 @@ packages: '@babel/template': 7.24.0 '@babel/types': 7.24.5 + /@babel/helper-function-name@7.24.7: + resolution: {integrity: sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.24.7 + '@babel/types': 7.24.7 + dev: false + /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.24.5 + /@babel/helper-hoist-variables@7.24.7: + resolution: {integrity: sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.7 + dev: false + + /@babel/helper-member-expression-to-functions@7.24.7: + resolution: {integrity: sha512-LGeMaf5JN4hAT471eJdBs/GK1DoYIJ5GCtZN/EsL6KUiiDZOvO/eKE11AMZJa2zP4zk4qe9V2O/hxAmkRc8p6w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/traverse': 7.24.7 + '@babel/types': 7.24.7 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-module-imports@7.24.3: resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==} engines: {node: '>=6.9.0'} @@ -614,26 +694,79 @@ packages: '@babel/helper-split-export-declaration': 7.24.5 '@babel/helper-validator-identifier': 7.24.5 + /@babel/helper-optimise-call-expression@7.24.7: + resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.7 + dev: false + + /@babel/helper-plugin-utils@7.24.7: + resolution: {integrity: sha512-Rq76wjt7yz9AAc1KnlRKNAi/dMSVWgDRx43FHoJEbcYU6xOWaE2dVPwcdTukJrjxS65GITyfbvEYHvkirZ6uEg==} + engines: {node: '>=6.9.0'} + dev: false + + /@babel/helper-replace-supers@7.24.7(@babel/core@7.24.5): + resolution: {integrity: sha512-qTAxxBM81VEyoAY0TtLrx1oAEJc09ZK67Q9ljQToqCnA+55eNwCORaxlKyu+rNfX86o8OXRUSNUnrtsAZXM9sg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.24.5 + '@babel/helper-environment-visitor': 7.24.7 + '@babel/helper-member-expression-to-functions': 7.24.7 + '@babel/helper-optimise-call-expression': 7.24.7 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-simple-access@7.24.5: resolution: {integrity: sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.24.5 + /@babel/helper-skip-transparent-expression-wrappers@7.24.7: + resolution: {integrity: sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/traverse': 7.24.7 + '@babel/types': 7.24.7 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-split-export-declaration@7.24.5: resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.24.5 + /@babel/helper-split-export-declaration@7.24.7: + resolution: {integrity: sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.7 + dev: false + /@babel/helper-string-parser@7.24.1: resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==} engines: {node: '>=6.9.0'} + /@babel/helper-string-parser@7.24.7: + resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/helper-validator-identifier@7.24.5: resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==} engines: {node: '>=6.9.0'} + /@babel/helper-validator-identifier@7.24.7: + resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/helper-validator-option@7.23.5: resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==} engines: {node: '>=6.9.0'} @@ -657,6 +790,16 @@ packages: js-tokens: 4.0.0 picocolors: 1.0.1 + /@babel/highlight@7.24.7: + resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-validator-identifier': 7.24.7 + chalk: 2.4.2 + js-tokens: 4.0.0 + picocolors: 1.0.1 + dev: false + /@babel/parser@7.24.5: resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==} engines: {node: '>=6.0.0'} @@ -664,6 +807,28 @@ packages: dependencies: '@babel/types': 7.24.5 + /@babel/parser@7.24.7: + resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.24.7 + dev: false + + /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.24.5): + resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} + engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.24.5 + '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.5) + '@babel/helper-plugin-utils': 7.24.7 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/runtime@7.24.4: resolution: {integrity: sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==} engines: {node: '>=6.9.0'} @@ -685,6 +850,15 @@ packages: '@babel/parser': 7.24.5 '@babel/types': 7.24.5 + /@babel/template@7.24.7: + resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.24.7 + '@babel/parser': 7.24.7 + '@babel/types': 7.24.7 + dev: false + /@babel/traverse@7.24.5: resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==} engines: {node: '>=6.9.0'} @@ -702,6 +876,24 @@ packages: transitivePeerDependencies: - supports-color + /@babel/traverse@7.24.7: + resolution: {integrity: sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.24.7 + '@babel/generator': 7.24.7 + '@babel/helper-environment-visitor': 7.24.7 + '@babel/helper-function-name': 7.24.7 + '@babel/helper-hoist-variables': 7.24.7 + '@babel/helper-split-export-declaration': 7.24.7 + '@babel/parser': 7.24.7 + '@babel/types': 7.24.7 + debug: 4.3.4 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/types@7.24.5: resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==} engines: {node: '>=6.9.0'} @@ -710,6 +902,15 @@ packages: '@babel/helper-validator-identifier': 7.24.5 to-fast-properties: 2.0.0 + /@babel/types@7.24.7: + resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.24.7 + '@babel/helper-validator-identifier': 7.24.7 + to-fast-properties: 2.0.0 + dev: false + /@braintree/sanitize-url@6.0.4: resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==} dev: false @@ -4978,6 +5179,23 @@ packages: synckit: 0.8.8 dev: false + /eslint-plugin-react-compiler@0.0.0-experimental-51a85ea-20240601(eslint@8.57.0): + resolution: {integrity: sha512-ROiKTVu9pZsNHyJepZj/JULWnkw8+I8+9gOF/MkJ8Q22/9f9MkPQkD2f6FXzVH+iyWbp7DQ3RXKhB3hWhf8AIg==} + engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} + peerDependencies: + eslint: '>=7' + dependencies: + '@babel/core': 7.24.5 + '@babel/parser': 7.24.5 + '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.24.5) + eslint: 8.57.0 + hermes-parser: 0.20.1 + zod: 3.23.8 + zod-validation-error: 3.3.0(zod@3.23.8) + transitivePeerDependencies: + - supports-color + dev: false + /eslint-plugin-react-hooks@4.6.2(eslint@8.57.0): resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==} engines: {node: '>=10'} @@ -5965,6 +6183,16 @@ packages: resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==} dev: false + /hermes-estree@0.20.1: + resolution: {integrity: sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==} + dev: false + + /hermes-parser@0.20.1: + resolution: {integrity: sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==} + dependencies: + hermes-estree: 0.20.1 + dev: false + /hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} dev: true @@ -11072,6 +11300,15 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} + /zod-validation-error@3.3.0(zod@3.23.8): + resolution: {integrity: sha512-Syib9oumw1NTqEv4LT0e6U83Td9aVRk9iTXPUQr1otyV1PuXQKOvOwhMNqZIq5hluzHP2pMgnOmHEo7kPdI2mw==} + engines: {node: '>=18.0.0'} + peerDependencies: + zod: ^3.18.0 + dependencies: + zod: 3.23.8 + dev: false + /zod@3.19.1: resolution: {integrity: sha512-LYjZsEDhCdYET9ikFu6dVPGp2YH9DegXjdJToSzD9rO6fy4qiRYFoyEYwps88OseJlPyl2NOe2iJuhEhL7IpEA==} dev: true diff --git a/websites/visualization/src/app/react/useErrorBoundary/page.tsx b/websites/visualization/src/app/react/useErrorBoundary/page.tsx index 1a3668240..0b8b6485f 100644 --- a/websites/visualization/src/app/react/useErrorBoundary/page.tsx +++ b/websites/visualization/src/app/react/useErrorBoundary/page.tsx @@ -1,29 +1,36 @@ 'use client' -import { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react' -import { type PropsWithChildren, createElement, useEffect, useState } from 'react' +import { + ErrorBoundary, + type ErrorBoundaryFallbackProps, + useErrorBoundary, + useErrorBoundaryFallbackProps, +} from '@suspensive/react' +import { type PropsWithChildren, useEffect, useState } from 'react' -export default function Page() { - return ( - reset: {error.message} +} + +function ErrorComponent() { + const errorBoundary = useErrorBoundary() - return - }} - > - {createElement(function ErrorComponent() { - const errorBoundary = useErrorBoundary() + return ( + + No Error{' '} + + + ) +} - return ( - - No Error{' '} - - - ) - })} +export default function Page() { + return ( + + ) }