Skip to content

Commit 321bd8f

Browse files
kentcdoddskentcdodds
committed
add support for nonce and defer
Closes #173
1 parent cc8564d commit 321bd8f

File tree

3 files changed

+465
-0
lines changed

3 files changed

+465
-0
lines changed

‎other/patches/@remix-run+react+1.17.0.patch

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
diff --git a/node_modules/@remix-run/react/dist/components.js b/node_modules/@remix-run/react/dist/components.js
2+
index f03433d..398e27e 100644
3+
--- a/node_modules/@remix-run/react/dist/components.js
4+
+++ b/node_modules/@remix-run/react/dist/components.js
5+
@@ -591,6 +591,7 @@ function V2Meta() {
6+
json = JSON.stringify(metaProps["script:ld+json"]);
7+
} catch (err) {}
8+
return json != null && /*#__PURE__*/React__namespace.createElement("script", {
9+
+ nonce: metaProps.nonce,
10+
key: "script:ld+json",
11+
type: "application/ld+json",
12+
dangerouslySetInnerHTML: {
13+
@@ -671,6 +672,7 @@ function Scripts(props) {
14+
let promiseKeyValues = deferredData.deferredKeys.map(key => {
15+
if (pendingKeys.has(key)) {
16+
deferredScripts.push( /*#__PURE__*/React__namespace.createElement(DeferredHydrationScript, {
17+
+ nonce: props.nonce,
18+
key: `${routeId} | ${key}`,
19+
deferredData: deferredData,
20+
routeId: routeId,
21+
@@ -721,6 +723,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
22+
if (!isStatic && typeof __remixContext === "object" && __remixContext.a) {
23+
for (let i = 0; i < __remixContext.a; i++) {
24+
deferredScripts.push( /*#__PURE__*/React__namespace.createElement(DeferredHydrationScript, {
25+
+ nonce: props.nonce,
26+
key: i
27+
}));
28+
}
29+
@@ -753,6 +756,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
30+
})), initialScripts, deferredScripts);
31+
}
32+
function DeferredHydrationScript({
33+
+ nonce,
34+
dataKey,
35+
deferredData,
36+
routeId
37+
@@ -766,6 +770,7 @@ function DeferredHydrationScript({
38+
// but when hydrating, we need to render a script tag to avoid a hydration issue.
39+
// To reproduce a hydration mismatch, just render null as a fallback.
40+
typeof document === "undefined" && deferredData && dataKey && routeId ? null : /*#__PURE__*/React__namespace.createElement("script", {
41+
+ nonce,
42+
async: true,
43+
suppressHydrationWarning: true,
44+
dangerouslySetInnerHTML: {
45+
@@ -775,10 +780,12 @@ function DeferredHydrationScript({
46+
}, typeof document === "undefined" && deferredData && dataKey && routeId ? /*#__PURE__*/React__namespace.createElement(Await, {
47+
resolve: deferredData.data[dataKey],
48+
errorElement: /*#__PURE__*/React__namespace.createElement(ErrorDeferredHydrationScript, {
49+
+ nonce,
50+
dataKey: dataKey,
51+
routeId: routeId
52+
}),
53+
children: data => /*#__PURE__*/React__namespace.createElement("script", {
54+
+ nonce,
55+
async: true,
56+
suppressHydrationWarning: true,
57+
dangerouslySetInnerHTML: {
58+
@@ -786,6 +793,7 @@ function DeferredHydrationScript({
59+
}
60+
})
61+
}) : /*#__PURE__*/React__namespace.createElement("script", {
62+
+ nonce,
63+
async: true,
64+
suppressHydrationWarning: true,
65+
dangerouslySetInnerHTML: {
66+
@@ -794,6 +802,7 @@ function DeferredHydrationScript({
67+
}));
68+
}
69+
function ErrorDeferredHydrationScript({
70+
+ nonce,
71+
dataKey,
72+
routeId
73+
}) {
74+
@@ -806,6 +815,7 @@ function ErrorDeferredHydrationScript({
75+
stack: undefined
76+
};
77+
return /*#__PURE__*/React__namespace.createElement("script", {
78+
+ nonce,
79+
suppressHydrationWarning: true,
80+
dangerouslySetInnerHTML: {
81+
__html: `__remixContext.r(${JSON.stringify(routeId)}, ${JSON.stringify(dataKey)}, !1, ${markup.escapeHtml(JSON.stringify(toSerialize))});`
82+
diff --git a/node_modules/@remix-run/react/dist/esm/components.js b/node_modules/@remix-run/react/dist/esm/components.js
83+
index c4a7e3f..660817d 100644
84+
--- a/node_modules/@remix-run/react/dist/esm/components.js
85+
+++ b/node_modules/@remix-run/react/dist/esm/components.js
86+
@@ -567,6 +567,7 @@ function V2Meta() {
87+
json = JSON.stringify(metaProps["script:ld+json"]);
88+
} catch (err) {}
89+
return json != null && /*#__PURE__*/React.createElement("script", {
90+
+ nonce: metaProps.nonce,
91+
key: "script:ld+json",
92+
type: "application/ld+json",
93+
dangerouslySetInnerHTML: {
94+
@@ -647,6 +648,7 @@ function Scripts(props) {
95+
let promiseKeyValues = deferredData.deferredKeys.map(key => {
96+
if (pendingKeys.has(key)) {
97+
deferredScripts.push( /*#__PURE__*/React.createElement(DeferredHydrationScript, {
98+
+ nonce: props.nonce,
99+
key: `${routeId} | ${key}`,
100+
deferredData: deferredData,
101+
routeId: routeId,
102+
@@ -697,6 +699,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
103+
if (!isStatic && typeof __remixContext === "object" && __remixContext.a) {
104+
for (let i = 0; i < __remixContext.a; i++) {
105+
deferredScripts.push( /*#__PURE__*/React.createElement(DeferredHydrationScript, {
106+
+ nonce,
107+
key: i
108+
}));
109+
}
110+
@@ -729,6 +732,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
111+
})), initialScripts, deferredScripts);
112+
}
113+
function DeferredHydrationScript({
114+
+ nonce,
115+
dataKey,
116+
deferredData,
117+
routeId
118+
@@ -742,6 +746,7 @@ function DeferredHydrationScript({
119+
// but when hydrating, we need to render a script tag to avoid a hydration issue.
120+
// To reproduce a hydration mismatch, just render null as a fallback.
121+
typeof document === "undefined" && deferredData && dataKey && routeId ? null : /*#__PURE__*/React.createElement("script", {
122+
+ nonce,
123+
async: true,
124+
suppressHydrationWarning: true,
125+
dangerouslySetInnerHTML: {
126+
@@ -751,10 +756,12 @@ function DeferredHydrationScript({
127+
}, typeof document === "undefined" && deferredData && dataKey && routeId ? /*#__PURE__*/React.createElement(Await, {
128+
resolve: deferredData.data[dataKey],
129+
errorElement: /*#__PURE__*/React.createElement(ErrorDeferredHydrationScript, {
130+
+ nonce,
131+
dataKey: dataKey,
132+
routeId: routeId
133+
}),
134+
children: data => /*#__PURE__*/React.createElement("script", {
135+
+ nonce,
136+
async: true,
137+
suppressHydrationWarning: true,
138+
dangerouslySetInnerHTML: {
139+
@@ -762,6 +769,7 @@ function DeferredHydrationScript({
140+
}
141+
})
142+
}) : /*#__PURE__*/React.createElement("script", {
143+
+ nonce,
144+
async: true,
145+
suppressHydrationWarning: true,
146+
dangerouslySetInnerHTML: {
147+
@@ -770,6 +778,7 @@ function DeferredHydrationScript({
148+
}));
149+
}
150+
function ErrorDeferredHydrationScript({
151+
+ nonce,
152+
dataKey,
153+
routeId
154+
}) {
155+
@@ -782,6 +791,7 @@ function ErrorDeferredHydrationScript({
156+
stack: undefined
157+
};
158+
return /*#__PURE__*/React.createElement("script", {
159+
+ nonce,
160+
suppressHydrationWarning: true,
161+
dangerouslySetInnerHTML: {
162+
__html: `__remixContext.r(${JSON.stringify(routeId)}, ${JSON.stringify(dataKey)}, !1, ${escapeHtml(JSON.stringify(toSerialize))});`

0 commit comments

Comments
 (0)