Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for preload media to ReactDOM #28635

Merged
merged 1 commit into from
Mar 28, 2024
Merged

Add support for preload media to ReactDOM #28635

merged 1 commit into from
Mar 28, 2024

Conversation

mariusc23
Copy link
Contributor

Summary

This PR adds support for media option to ReactDOM.preload(), which is needed when images differ between screen sizes (for example mobile vs desktop).

Tests copied from #27129 (thanks @damnsamn!)

How did you test this change?

Ran the tests from #27129 before:

yarn test ReactDOMFloat

  ● ReactDOMFloat › should handle media on image preload

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 0

    @@ -2,11 +2,10 @@
        <head>
          <link
            as="image"
            imagesizes="100vw"
            imagesrcset="/server"
    -       media="print and (min-width: 768px)"
            rel="preload"
          />
        </head>
        <body>
          hello

      4290 |       renderToPipeableStream(<App />).pipe(writable);
      4291 |     });
    > 4292 |     expect(getMeaningfulChildren(document)).toEqual(
           |                                             ^
      4293 |       <html>
      4294 |         <head>
      4295 |           <link

      at Object.<anonymous> (packages/react-dom/src/__tests__/ReactDOMFloat-test.js:4292:45)

After:

Test Suites: 1 passed, 1 total
Tests:       1 skipped, 109 passed, 110 total
Snapshots:   0 total
Time:        25.541 s
Ran all test suites matching /ReactDOMFloat/i.
✨  Done in 27.84s.

@mariusc23 mariusc23 changed the title Add support for preload meadia to ReactDOM Add support for preload media to ReactDOM Mar 25, 2024
@react-sizebot
Copy link

react-sizebot commented Mar 25, 2024 •
edited
Loading

Comparing: 5a75f9e...281a48c

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.03% 176.93 kB 176.98 kB +0.02% 54.95 kB 54.96 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.03% 173.36 kB 173.41 kB +0.02% 54.08 kB 54.09 kB
facebook-www/ReactDOM-prod.classic.js +0.01% 595.27 kB 595.34 kB +0.01% 104.55 kB 104.56 kB
facebook-www/ReactDOM-prod.modern.js +0.01% 578.53 kB 578.60 kB +0.01% 101.57 kB 101.58 kB
test_utils/ReactAllWarnings.js Deleted 65.49 kB 0.00 kB Deleted 16.16 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-dom/cjs/react-dom.react-server.production.min.js +1.75% 2.69 kB 2.74 kB +1.38% 0.87 kB 0.88 kB
oss-stable-semver/react-dom/cjs/react-dom.react-server.production.min.js +1.75% 2.69 kB 2.74 kB +1.38% 0.87 kB 0.88 kB
oss-stable/react-dom/cjs/react-dom.react-server.production.min.js +1.75% 2.69 kB 2.74 kB +1.38% 0.87 kB 0.88 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.min.js +1.32% 3.64 kB 3.69 kB +1.03% 1.27 kB 1.28 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.min.js +1.31% 3.67 kB 3.72 kB +1.01% 1.29 kB 1.31 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.min.js +1.31% 3.68 kB 3.72 kB +0.93% 1.29 kB 1.30 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.production.min.js +1.24% 3.78 kB 3.83 kB +0.96% 1.36 kB 1.37 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.production.min.js +1.23% 3.81 kB 3.85 kB +0.79% 1.38 kB 1.40 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.production.min.js +1.23% 3.81 kB 3.86 kB +0.87% 1.38 kB 1.39 kB
oss-experimental/react-dom/cjs/react-dom.react-server.production.js +1.19% 6.39 kB 6.47 kB +0.93% 1.29 kB 1.30 kB
oss-stable-semver/react-dom/cjs/react-dom.react-server.production.js +1.19% 6.39 kB 6.47 kB +0.93% 1.29 kB 1.30 kB
oss-stable/react-dom/cjs/react-dom.react-server.production.js +1.19% 6.39 kB 6.47 kB +0.93% 1.29 kB 1.30 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.js +0.83% 9.17 kB 9.25 kB +0.57% 2.29 kB 2.31 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.js +0.83% 9.20 kB 9.27 kB +0.52% 2.32 kB 2.33 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.js +0.83% 9.20 kB 9.28 kB +0.56% 2.32 kB 2.33 kB
oss-experimental/react-dom/cjs/react-dom.react-server.development.js +0.52% 14.74 kB 14.81 kB +0.42% 3.11 kB 3.12 kB
oss-stable-semver/react-dom/cjs/react-dom.react-server.development.js +0.52% 14.74 kB 14.81 kB +0.42% 3.11 kB 3.12 kB
oss-stable/react-dom/cjs/react-dom.react-server.development.js +0.52% 14.74 kB 14.81 kB +0.42% 3.11 kB 3.12 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.development.js +0.42% 17.95 kB 18.02 kB +0.31% 4.17 kB 4.18 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.development.js +0.42% 17.97 kB 18.05 kB +0.29% 4.20 kB 4.21 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.development.js +0.42% 17.98 kB 18.06 kB +0.31% 4.20 kB 4.21 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.development.js +0.41% 18.86 kB 18.94 kB +0.30% 4.29 kB 4.30 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.development.js +0.41% 18.89 kB 18.97 kB +0.32% 4.32 kB 4.33 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.development.js +0.41% 18.89 kB 18.97 kB +0.32% 4.32 kB 4.33 kB
test_utils/ReactAllWarnings.js Deleted 65.49 kB 0.00 kB Deleted 16.16 kB 0.00 kB

Generated by 🚫 dangerJS against 281a48c

@eps1lon eps1lon requested a review from gnoff March 25, 2024 21:38
gnoff
gnoff approved these changes Mar 28, 2024
View reviewed changes
Copy link
Collaborator

@gnoff gnoff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TY

@gnoff gnoff merged commit 78328c0 into facebook:main Mar 28, 2024
38 checks passed
github-actions bot pushed a commit that referenced this pull request Mar 28, 2024
@gnoff
Add support for preload media to ReactDOM (#28635)
9d23ab1 
This PR adds support for `media` option to `ReactDOM.preload()`, which
is needed when images differ between screen sizes (for example mobile vs
desktop)

DiffTrain build for [78328c0](78328c0)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
@mariusc23 @AndyPengc12
Add support for preload media to ReactDOM (facebook#28635)
8e201ad 
This PR adds support for `media` option to `ReactDOM.preload()`, which
is needed when images differ between screen sizes (for example mobile vs
desktop)
This was referenced Apr 24, 2024
Closed
Merged
@eps1lon eps1lon mentioned this pull request May 1, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gnoff gnoff gnoff approved these changes

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@mariusc23 @react-sizebot @gnoff @facebook-github-bot