Skip to content

Commit

Permalink
Merge branch 'main' into rh/rm-ff-cache
Browse files Browse the repository at this point in the history 
# Conflicts:
#	packages/react-server/src/ReactFizzServer.js
  • Loading branch information
@rickhanlonii
rickhanlonii committed Dec 15, 2024
2 parents dc5e75a + 2d32056 commit 7286add
Show file tree
Hide file tree
Showing 38 changed files with 120 additions and 1,140 deletions.
14 changes: 1 addition & 13 deletions packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3080,7 +3080,7 @@ function pushTitle(
console.error(
'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length %s instead.' +
' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value' +
' which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes.' +
' which is why Arrays of length greater than 1 are not supported. When using JSX it can be common to combine text nodes and value nodes.' +
' For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +
' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
children.length,
Expand Down Expand Up @@ -3886,18 +3886,6 @@ const clientRenderedSuspenseBoundaryError1D =
const clientRenderedSuspenseBoundaryError2 =
stringToPrecomputedChunk('></template>');

export function pushStartCompletedSuspenseBoundary(
target: Array<Chunk | PrecomputedChunk>,
) {
target.push(startCompletedSuspenseBoundary);
}

export function pushEndCompletedSuspenseBoundary(
target: Array<Chunk | PrecomputedChunk>,
) {
target.push(endSuspenseBoundary);
}

export function writeStartCompletedSuspenseBoundary(
destination: Destination,
renderState: RenderState,
Expand Down
2 changes: 0 additions & 2 deletions packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,6 @@ export {
makeId,
pushStartInstance,
pushEndInstance,
pushStartCompletedSuspenseBoundary,
pushEndCompletedSuspenseBoundary,
pushFormStateMarkerIsMatching,
pushFormStateMarkerIsNotMatching,
writeStartSegment,
Expand Down
147 changes: 1 addition & 146 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2211,151 +2211,6 @@ describe('ReactDOMFizzServer', () => {
expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
});

// @gate enableSuspenseAvoidThisFallbackFizz
it('should respect unstable_avoidThisFallback', async () => {
const resolved = {
0: false,
1: false,
};
const promiseRes = {};
const promises = {
0: new Promise(res => {
promiseRes[0] = () => {
resolved[0] = true;
res();
};
}),
1: new Promise(res => {
promiseRes[1] = () => {
resolved[1] = true;
res();
};
}),
};

const InnerComponent = ({isClient, depth}) => {
if (isClient) {
// Resuspend after re-rendering on client to check that fallback shows on client
throw new Promise(() => {});
}
if (!resolved[depth]) {
throw promises[depth];
}
return (
<div>
<Text text={`resolved ${depth}`} />
</div>
);
};

function App({isClient}) {
return (
<div>
<Text text="Non Suspense Content" />
<Suspense
fallback={
<span>
<Text text="Avoided Fallback" />
</span>
}
unstable_avoidThisFallback={true}>
<InnerComponent isClient={isClient} depth={0} />
<div>
<Suspense fallback={<Text text="Fallback" />}>
<Suspense
fallback={
<span>
<Text text="Avoided Fallback2" />
</span>
}
unstable_avoidThisFallback={true}>
<InnerComponent isClient={isClient} depth={1} />
</Suspense>
</Suspense>
</div>
</Suspense>
</div>
);
}

await jest.runAllTimers();

await act(() => {
const {pipe} = renderToPipeableStream(<App isClient={false} />);
pipe(writable);
});

// Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved
expect(getVisibleChildren(container)).toEqual(undefined);
expect(container.innerHTML).not.toContain('Avoided Fallback');

// resolve first suspense component with avoidThisFallback
await act(() => {
promiseRes[0]();
});

expect(getVisibleChildren(container)).toEqual(
<div>
Non Suspense Content
<div>resolved 0</div>
<div>Fallback</div>
</div>,
);

expect(container.innerHTML).not.toContain('Avoided Fallback2');

await act(() => {
promiseRes[1]();
});

expect(getVisibleChildren(container)).toEqual(
<div>
Non Suspense Content
<div>resolved 0</div>
<div>
<div>resolved 1</div>
</div>
</div>,
);

let root;
await act(async () => {
root = ReactDOMClient.hydrateRoot(container, <App isClient={false} />);
await waitForAll([]);
await jest.runAllTimers();
});

// No change after hydration
expect(getVisibleChildren(container)).toEqual(
<div>
Non Suspense Content
<div>resolved 0</div>
<div>
<div>resolved 1</div>
</div>
</div>,
);

await act(async () => {
// Trigger update by changing isClient to true
root.render(<App isClient={true} />);
await waitForAll([]);
await jest.runAllTimers();
});

// Now that we've resuspended at the root we show the root fallback
expect(getVisibleChildren(container)).toEqual(
<div>
Non Suspense Content
<div style="display: none;">resolved 0</div>
<div style="display: none;">
<div>resolved 1</div>
</div>
<span>Avoided Fallback</span>
</div>,
);
});

it('calls getServerSnapshot instead of getSnapshot', async () => {
const ref = React.createRef();

Expand Down Expand Up @@ -5928,7 +5783,7 @@ describe('ReactDOMFizzServer', () => {
pipe(writable);
});
}).toErrorDev([
'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be common to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
]);

expect(getVisibleChildren(document.head)).toEqual(<title />);
Expand Down
50 changes: 0 additions & 50 deletions packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,56 +37,6 @@ describe('ReactDOMServerIntegration', () => {
resetModules();
});

// Test pragmas don't support itRenders abstraction
if (
__EXPERIMENTAL__ &&
require('shared/ReactFeatureFlags').enableDebugTracing
) {
describe('React.unstable_DebugTracingMode', () => {
beforeEach(() => {
spyOnDevAndProd(console, 'log');
});

itRenders('with one child', async render => {
const e = await render(
<React.unstable_DebugTracingMode>
<div>text1</div>
</React.unstable_DebugTracingMode>,
);
const parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
});

itRenders('mode with several children', async render => {
const Header = props => {
return <p>header</p>;
};
const Footer = props => {
return (
<React.unstable_DebugTracingMode>
<h2>footer</h2>
<h3>about</h3>
</React.unstable_DebugTracingMode>
);
};
const e = await render(
<React.unstable_DebugTracingMode>
<div>text1</div>
<span>text2</span>
<Header />
<Footer />
</React.unstable_DebugTracingMode>,
);
const parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
expect(parent.childNodes[1].tagName).toBe('SPAN');
expect(parent.childNodes[2].tagName).toBe('P');
expect(parent.childNodes[3].tagName).toBe('H2');
expect(parent.childNodes[4].tagName).toBe('H3');
});
});
}

describe('React.StrictMode', () => {
itRenders('a strict mode with one child', async render => {
const e = await render(
Expand Down
2 changes: 0 additions & 2 deletions packages/react-markup/src/ReactFizzConfigMarkup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,6 @@ export {
getChildFormatContext,
makeId,
pushEndInstance,
pushStartCompletedSuspenseBoundary,
pushEndCompletedSuspenseBoundary,
pushFormStateMarkerIsMatching,
pushFormStateMarkerIsNotMatching,
writeStartSegment,
Expand Down
Loading

0 comments on commit 7286add

Please sign in to comment.