Skip to content

Commit 650431a

Browse files
committed
[Fizz][Float] stop automatically preloading scripts that are not script resources (#26877)
Currently we preload all scripts that are not hoisted. One of the original reasons for this is we stopped SSR rendering async scripts that had an onLoad/onError because we needed to be able to distinguish between Float scripts and non-Float scripts during hydration. Hydration has been refactored a bit and we can not get around this limitation so we can just emit the async script in place. However, sync and defer scripts are also preloaded. While this is sometimes desirable it is not universally so and there are issues with conveying priority properly (see fetchpriority) so with this change we remove the automatic preloading of non-Float scripts altogether. For this change to make sense we also need to emit async scripts with loading handlers during SSR. we previously only preloaded them during SSR because it was necessary to keep async scripts as unambiguously resources when hydrating. One ancillary benefit was that load handlers would always fire b/c there was no chance the script would run before hydration. With this change we go back to having the ability to have load handlers fired before hydration. This is already a problem with images and we don't have a generalized solution for it however our likely approach to this sort of thing where you need to wait for a script to load is to use something akin to `importScripts()` rather than rendering a script with onLoad. DiffTrain build for [e1ad4aa](e1ad4aa)
1 parent 54ded05 commit 650431a

21 files changed

+906
-1334
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
5fb2c15a89de844a1dd12a61e7674e55dc0dfa89
1+
e1ad4aa3615333009d76f947ff05ddeff01039c6

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-www-modern-c2caceb8";
30+
var ReactVersion = "18.3.0-www-modern-c6e529af";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-classic-173d7c2e";
72+
var ReactVersion = "18.3.0-www-classic-98dc4286";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-modern-c2caceb8";
72+
var ReactVersion = "18.3.0-www-modern-c6e529af";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;

compiled/facebook-www/ReactART-prod.classic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10193,7 +10193,7 @@ var slice = Array.prototype.slice,
1019310193
return null;
1019410194
},
1019510195
bundleType: 0,
10196-
version: "18.3.0-www-classic-808eab78",
10196+
version: "18.3.0-www-classic-ced03d12",
1019710197
rendererPackageName: "react-art"
1019810198
};
1019910199
var internals$jscomp$inline_1318 = {
@@ -10224,7 +10224,7 @@ var internals$jscomp$inline_1318 = {
1022410224
scheduleRoot: null,
1022510225
setRefreshHandler: null,
1022610226
getCurrentFiber: null,
10227-
reconcilerVersion: "18.3.0-www-classic-808eab78"
10227+
reconcilerVersion: "18.3.0-www-classic-ced03d12"
1022810228
};
1022910229
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1023010230
var hook$jscomp$inline_1319 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled/facebook-www/ReactDOM-dev.classic.js

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8196,16 +8196,6 @@ function tryToClaimNextHydratableInstance(fiber) {
81968196
return;
81978197
}
81988198

8199-
{
8200-
if (!isHydratableType(fiber.type, fiber.pendingProps)) {
8201-
// This fiber never hydrates from the DOM and always does an insert
8202-
fiber.flags = (fiber.flags & ~Hydrating) | Placement;
8203-
isHydrating = false;
8204-
hydrationParentFiber = fiber;
8205-
return;
8206-
}
8207-
}
8208-
82098199
var initialInstance = nextHydratableInstance;
82108200
var nextInstance = nextHydratableInstance;
82118201

@@ -34188,7 +34178,7 @@ function createFiberRoot(
3418834178
return root;
3418934179
}
3419034180

34191-
var ReactVersion = "18.3.0-www-classic-632e744f";
34181+
var ReactVersion = "18.3.0-www-classic-494075fe";
3419234182

3419334183
function createPortal$1(
3419434184
children,
@@ -42955,20 +42945,6 @@ function clearContainerSparingly(container) {
4295542945

4295642946
return;
4295742947
} // Making this so we can eventually move all of the instance caching to the commit phase.
42958-
// inserted without breaking hydration
42959-
42960-
function isHydratableType(type, props) {
42961-
{
42962-
if (type === "script") {
42963-
var async = props.async,
42964-
onLoad = props.onLoad,
42965-
onError = props.onError;
42966-
return !(async && (onLoad || onError));
42967-
}
42968-
42969-
return true;
42970-
}
42971-
}
4297242948
function isHydratableText(text) {
4297342949
return text !== "";
4297442950
}
@@ -43059,21 +43035,22 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) {
4305943035
var srcAttr = element.getAttribute("src");
4306043036

4306143037
if (
43062-
srcAttr &&
43063-
element.hasAttribute("async") &&
43064-
!element.hasAttribute("itemprop")
43065-
) {
43066-
// This is an async script resource
43067-
break;
43068-
} else if (
4306943038
srcAttr !== (anyProps.src == null ? null : anyProps.src) ||
4307043039
element.getAttribute("type") !==
4307143040
(anyProps.type == null ? null : anyProps.type) ||
4307243041
element.getAttribute("crossorigin") !==
4307343042
(anyProps.crossOrigin == null ? null : anyProps.crossOrigin)
4307443043
) {
43075-
// This script is for a different src
43076-
break;
43044+
// This script is for a different src/type/crossOrigin. It may be a script resource
43045+
// or it may just be a mistmatch
43046+
if (
43047+
srcAttr &&
43048+
element.hasAttribute("async") &&
43049+
!element.hasAttribute("itemprop")
43050+
) {
43051+
// This is an async script resource
43052+
break;
43053+
}
4307743054
}
4307843055

4307943056
return element;

compiled/facebook-www/ReactDOM-dev.modern.js

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8137,16 +8137,6 @@ function tryToClaimNextHydratableInstance(fiber) {
81378137
return;
81388138
}
81398139

8140-
{
8141-
if (!isHydratableType(fiber.type, fiber.pendingProps)) {
8142-
// This fiber never hydrates from the DOM and always does an insert
8143-
fiber.flags = (fiber.flags & ~Hydrating) | Placement;
8144-
isHydrating = false;
8145-
hydrationParentFiber = fiber;
8146-
return;
8147-
}
8148-
}
8149-
81508140
var initialInstance = nextHydratableInstance;
81518141
var nextInstance = nextHydratableInstance;
81528142

@@ -34033,7 +34023,7 @@ function createFiberRoot(
3403334023
return root;
3403434024
}
3403534025

34036-
var ReactVersion = "18.3.0-www-modern-c632da18";
34026+
var ReactVersion = "18.3.0-www-modern-88494b05";
3403734027

3403834028
function createPortal$1(
3403934029
children,
@@ -43465,20 +43455,6 @@ function clearContainerSparingly(container) {
4346543455

4346643456
return;
4346743457
} // Making this so we can eventually move all of the instance caching to the commit phase.
43468-
// inserted without breaking hydration
43469-
43470-
function isHydratableType(type, props) {
43471-
{
43472-
if (type === "script") {
43473-
var async = props.async,
43474-
onLoad = props.onLoad,
43475-
onError = props.onError;
43476-
return !(async && (onLoad || onError));
43477-
}
43478-
43479-
return true;
43480-
}
43481-
}
4348243458
function isHydratableText(text) {
4348343459
return text !== "";
4348443460
}
@@ -43569,21 +43545,22 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) {
4356943545
var srcAttr = element.getAttribute("src");
4357043546

4357143547
if (
43572-
srcAttr &&
43573-
element.hasAttribute("async") &&
43574-
!element.hasAttribute("itemprop")
43575-
) {
43576-
// This is an async script resource
43577-
break;
43578-
} else if (
4357943548
srcAttr !== (anyProps.src == null ? null : anyProps.src) ||
4358043549
element.getAttribute("type") !==
4358143550
(anyProps.type == null ? null : anyProps.type) ||
4358243551
element.getAttribute("crossorigin") !==
4358343552
(anyProps.crossOrigin == null ? null : anyProps.crossOrigin)
4358443553
) {
43585-
// This script is for a different src
43586-
break;
43554+
// This script is for a different src/type/crossOrigin. It may be a script resource
43555+
// or it may just be a mistmatch
43556+
if (
43557+
srcAttr &&
43558+
element.hasAttribute("async") &&
43559+
!element.hasAttribute("itemprop")
43560+
) {
43561+
// This is an async script resource
43562+
break;
43563+
}
4358743564
}
4358843565

4358943566
return element;

0 commit comments

Comments
 (0)