mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Wyatt JohnsonandGitHub
8abbb3dc2e
## What? Rename `experimental.dynamicIO` to `experimental.cacheComponents` across the Next.js codebase. ## Why? We're going to be merging the functionality of the `ppr`, `dynamicIO` and `useCache` experimental flags into the singular `cacheComponents` flag to reduce complexity of the codebase and simplify adoption for users wanting to experiment with experimental features. ## How? - Renamed the configuration option from `experimental.dynamicIO` to `experimental.cacheComponents` - Added deprecation handling with automatic migration for the old option name - Updated all documentation, tests, and internal references - Updated Rust code in SWC transforms and Turbopack - Maintained backward compatibility with deprecation warnings NAR-158
342 lines
6.8 KiB
TypeScript
342 lines
6.8 KiB
TypeScript
export function AllComponents<T extends Headers>({
|
|
headers,
|
|
xSentinelValues,
|
|
expression,
|
|
}: {
|
|
headers: T
|
|
xSentinelValues: Set<string>
|
|
expression: string
|
|
}) {
|
|
return (
|
|
<>
|
|
<Append headers={headers} expression={expression} />
|
|
<Delete headers={headers} expression={expression} />
|
|
<Get headers={headers} expression={expression} />
|
|
<Has headers={headers} expression={expression} />
|
|
<SetExercise headers={headers} expression={expression} />
|
|
<GetSetCookie headers={headers} expression={expression} />
|
|
<ForEach headers={headers} expression={expression} />
|
|
<Keys headers={headers} expression={expression} />
|
|
<Values
|
|
headers={headers}
|
|
expression={expression}
|
|
xSentinelValues={xSentinelValues}
|
|
/>
|
|
<Entries headers={headers} expression={expression} />
|
|
<ForOf headers={headers} expression={expression} />
|
|
<Spread headers={headers} expression={expression} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Append({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let result: string
|
|
try {
|
|
headers.append('x-sentinel', ' world')
|
|
result = 'no error'
|
|
} catch (e) {
|
|
result = e.message
|
|
}
|
|
return (
|
|
<section>
|
|
<h2>{expression}.append('...')</h2>
|
|
<ul>
|
|
<li>
|
|
<label>{expression}.append('x-sentinel', ' world')</label>
|
|
<span id={'append-result-x-sentinel'}>: {result}</span>
|
|
</li>
|
|
<li>
|
|
<label>x-sentinel value</label>
|
|
<span id={'append-value-x-sentinel'}>
|
|
: {headers.get('x-sentinel')}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Delete({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let result = 'no error'
|
|
try {
|
|
headers.delete('x-sentinel')
|
|
} catch (e) {
|
|
result = e.message
|
|
}
|
|
return (
|
|
<section>
|
|
<h2>{expression}.delete('...')</h2>
|
|
<ul>
|
|
<li>
|
|
<label>{expression}.delete('x-sentinel')</label>
|
|
<span id={'delete-result-x-sentinel'}>: {result}</span>
|
|
</li>
|
|
<li>
|
|
<label>x-sentinel value</label>
|
|
<span id={'delete-value-x-sentinel'}>
|
|
: {headers.get('x-sentinel')}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Get({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
return (
|
|
<section>
|
|
<h2>{expression}.get('...')</h2>
|
|
<div>
|
|
<pre id={'get-x-sentinel'}>{headers.get('x-sentinel')}</pre>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Has({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
return (
|
|
<section>
|
|
<h2>{expression}.has('...')</h2>
|
|
<ul>
|
|
<li>
|
|
<label>x-sentinel</label>
|
|
<span id={'has-x-sentinel'}>: {'' + headers.has('x-sentinel')}</span>
|
|
</li>
|
|
<li>
|
|
<label>x-sentinel-foobar</label>
|
|
<span id={'has-x-sentinel-foobar'}>
|
|
: {'' + headers.has('x-sentinel-foobar')}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function SetExercise({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let result = 'no error'
|
|
try {
|
|
headers.set('x-sentinel', 'goodbye')
|
|
} catch (e) {
|
|
result = e.message
|
|
}
|
|
return (
|
|
<section>
|
|
<h2>{expression}.set('...')</h2>
|
|
<ul>
|
|
<li>
|
|
<label>{expression}.set('x-sentinel', 'goodbye')</label>
|
|
<span id={'set-result-x-sentinel'}>: {result}</span>
|
|
</li>
|
|
<li>
|
|
<label>x-sentinel value</label>
|
|
<span id={'set-value-x-sentinel'}>: {headers.get('x-sentinel')}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function GetSetCookie({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
const result = headers.getSetCookie()
|
|
return (
|
|
<section>
|
|
<h2>{expression}.getSetCookie()</h2>
|
|
<pre id="get-set-cookie">{JSON.stringify(result, null, 2)}</pre>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function ForEach({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let output = []
|
|
headers.forEach((value, header) => {
|
|
if (header.startsWith('x-sentinel')) {
|
|
output.push(
|
|
<div key={header}>
|
|
<pre id={'for-each-' + header}>{value}</pre>
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<section>
|
|
<h2>{expression}.forEach(...)</h2>
|
|
{output.length ? output : <div>no headers found</div>}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Keys({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let output = []
|
|
for (let header of headers.keys()) {
|
|
if (header.startsWith('x-sentinel')) {
|
|
output.push(
|
|
<li key={header} id={'keys-' + header}>
|
|
{header}
|
|
</li>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2>{expression}.keys(...)</h2>
|
|
{output.length ? <ul>{output}</ul> : <div>no headers found</div>}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Values({
|
|
headers,
|
|
expression,
|
|
xSentinelValues,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
xSentinelValues: Set<string>
|
|
}) {
|
|
let output = []
|
|
for (let value of headers.values()) {
|
|
if (xSentinelValues.has(value)) {
|
|
output.push(
|
|
<li key={value} data-class={'values'}>
|
|
{value}
|
|
</li>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2>{expression}.values()</h2>
|
|
{output.length ? <ul>{output}</ul> : <div>no headers found</div>}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Entries({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let output = []
|
|
for (let entry of headers.entries()) {
|
|
if (entry[0].startsWith('x-sentinel')) {
|
|
output.push(
|
|
<li key={entry[0]} id={'entries-' + entry[0]}>
|
|
{entry[1]}
|
|
</li>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2>{expression}.entries()</h2>
|
|
{output.length ? <ul>{output}</ul> : <div>no headers found</div>}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function ForOf({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let output = []
|
|
for (let [headerName, value] of headers) {
|
|
if (headerName.startsWith('x-sentinel')) {
|
|
output.push(
|
|
<div key={headerName}>
|
|
<pre id={'for-of-' + headerName}>{value}</pre>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2>for...of {expression}</h2>
|
|
{output.length ? output : <div>no headers found</div>}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function Spread({
|
|
headers,
|
|
expression,
|
|
}: {
|
|
headers: Headers
|
|
expression: string
|
|
}) {
|
|
let output = [...headers]
|
|
.filter(([headerName]) => headerName.startsWith('x-sentinel'))
|
|
.map((v) => {
|
|
return (
|
|
<div key={v[0]}>
|
|
<pre id={'spread-' + v[0]}>{v[1]}</pre>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<section>
|
|
<h2>...{expression}</h2>
|
|
{output.length ? output : <div>no headers found</div>}
|
|
</section>
|
|
)
|
|
}
|