Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use react.lazy in dynamic when suspense = true
- Loading branch information
Showing
29 changed files
with
445 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { Suspense } from 'react' | ||
import dynamic from 'next/dynamic' | ||
import { useCachedPromise } from './promise-cache' | ||
|
||
const Foo = dynamic(() => import('./foo'), { | ||
suspense: true, | ||
}) | ||
|
||
export default function Bar() { | ||
useCachedPromise( | ||
'bar', | ||
() => new Promise((resolve) => setTimeout(resolve, 300)), | ||
true | ||
) | ||
|
||
return ( | ||
<div> | ||
bar | ||
<Suspense fallback={'oof'}> | ||
<Foo /> | ||
</Suspense> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { Suspense } from 'react' | ||
import dynamic from 'next/dynamic' | ||
|
||
let ssr | ||
const suspense = false | ||
|
||
const Hello = dynamic(() => import('./hello'), { | ||
ssr, | ||
suspense, | ||
}) | ||
|
||
export default function DynamicHello(props) { | ||
return ( | ||
<Suspense fallback={'loading'}> | ||
<Hello {...props} /> | ||
</Suspense> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Foo() { | ||
return 'foo' | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React from 'react' | ||
import ReactDOM from 'react-dom' | ||
import { useCachedPromise } from './promise-cache' | ||
|
||
export default function Hello({ name, thrown = false }) { | ||
useCachedPromise( | ||
name, | ||
() => new Promise((resolve) => setTimeout(resolve, 200)), | ||
thrown | ||
) | ||
|
||
return <p>hello {ReactDOM.version}</p> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React from 'react' | ||
|
||
const PromiseCacheContext = React.createContext(null) | ||
|
||
export const cache = new Map() | ||
export const PromiseCacheProvider = PromiseCacheContext.Provider | ||
|
||
export function useCachedPromise(key, fn, thrown = false) { | ||
const cache = React.useContext(PromiseCacheContext) | ||
|
||
if (!thrown) return undefined | ||
let entry = cache.get(key) | ||
if (!entry) { | ||
entry = { | ||
status: 'PENDING', | ||
value: fn().then( | ||
(value) => { | ||
cache.set(key, { | ||
status: 'RESOLVED', | ||
value, | ||
}) | ||
}, | ||
(err) => { | ||
cache.set(key, { | ||
status: 'REJECTED', | ||
value: err, | ||
}) | ||
} | ||
), | ||
} | ||
cache.set(key, entry) | ||
} | ||
if (['PENDING', 'REJECTED'].includes(entry.status)) { | ||
throw entry.value | ||
} | ||
return entry.value | ||
} |
4 changes: 4 additions & 0 deletions
4
...ration/react-18/prerelease/next.config.js → test/integration/react-18/app/next.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"scripts": { | ||
"next": "node -r ../test/require-hook.js ../../../../packages/next/dist/bin/next", | ||
"dev": "yarn next dev", | ||
"build": "yarn next build", | ||
"start": "yarn next start" | ||
}, | ||
"dependencies": { | ||
"react": "*", | ||
"react-dom": "*" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { PromiseCacheProvider } from '../components/promise-cache' | ||
|
||
const cache = new Map() | ||
|
||
function MyApp({ Component, pageProps }) { | ||
return ( | ||
<PromiseCacheProvider value={cache}> | ||
<Component {...pageProps} /> | ||
</PromiseCacheProvider> | ||
) | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import ReactDOM from 'react-dom' | ||
|
||
export default function Index() { | ||
if (typeof window !== 'undefined') { | ||
window.didHydrate = true | ||
} | ||
return ( | ||
<div> | ||
<p id="react-dom-version">{ReactDOM.version}</p> | ||
</div> | ||
) | ||
} |
21 changes: 21 additions & 0 deletions
21
test/integration/react-18/app/pages/suspense/no-preload.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { Suspense } from 'react' | ||
import dynamic from 'next/dynamic' | ||
|
||
const Bar = dynamic(() => import('../../components/bar'), { | ||
suspense: true, | ||
// Explicitly declare loaded modules. | ||
// For suspense cases, they'll be ignored. | ||
// For loadable component cases, they'll be handled | ||
loadableGenerated: { | ||
modules: ['../../components/bar'], | ||
webpack: [require.resolveWeak('../../components/bar')], | ||
}, | ||
}) | ||
|
||
export default function NoPreload() { | ||
return ( | ||
<Suspense fallback={'rab'}> | ||
<Bar /> | ||
</Suspense> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import DynamicHello from '../../components/dynamic-hello' | ||
|
||
export default function NoThrown() { | ||
return <DynamicHello name="no-thrown" thrown={false} /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import DynamicHello from '../../components/dynamic-hello' | ||
|
||
export default function Thrown() { | ||
return <DynamicHello name="thrown" thrown /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
import dynamic from 'next/dynamic' | ||
|
||
const Hello = dynamic(() => import('../../components/hello'), { | ||
suspense: true, | ||
}) | ||
|
||
export default function Unwrapped() { | ||
return <Hello /> | ||
} |
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
test/integration/react-18/prerelease/node_modules/react-dom/package.json
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.