@quilted/quilt 0.6.14 → 0.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/build/esm/assets.mjs +0 -1
- package/build/esm/browser.mjs +2 -0
- package/build/esm/navigate.mjs +1 -1
- package/build/esm/server/ServerContext.mjs +10 -22
- package/build/esm/server/request-router.mjs +53 -95
- package/build/esm/server.mjs +1 -5
- package/build/esnext/assets.esnext +0 -1
- package/build/esnext/browser.esnext +2 -0
- package/build/esnext/navigate.esnext +1 -1
- package/build/esnext/server/ServerContext.esnext +8 -17
- package/build/esnext/server/request-router.esnext +59 -86
- package/build/esnext/server.esnext +1 -5
- package/build/tsconfig.tsbuildinfo +1 -1
- package/build/typescript/assets.d.ts +0 -1
- package/build/typescript/assets.d.ts.map +1 -1
- package/build/typescript/browser.d.ts +3 -0
- package/build/typescript/browser.d.ts.map +1 -0
- package/build/typescript/navigate.d.ts +1 -1
- package/build/typescript/server/ServerContext.d.ts +3 -8
- package/build/typescript/server/ServerContext.d.ts.map +1 -1
- package/build/typescript/server/request-router.d.ts +9 -8
- package/build/typescript/server/request-router.d.ts.map +1 -1
- package/build/typescript/server.d.ts +1 -7
- package/build/typescript/server.d.ts.map +1 -1
- package/package.json +29 -34
- package/source/assets.ts +0 -1
- package/source/browser.ts +5 -0
- package/source/navigate.ts +1 -1
- package/source/server/ServerContext.tsx +17 -38
- package/source/server/request-router.tsx +81 -110
- package/source/server.ts +1 -33
- package/tsconfig.json +2 -5
- package/build/esm/html/HTML.mjs +0 -19
- package/build/esm/html.mjs +0 -3
- package/build/esm/http.mjs +0 -1
- package/build/esnext/html/HTML.esnext +0 -16
- package/build/esnext/html.esnext +0 -3
- package/build/esnext/http.esnext +0 -1
- package/source/html/HTML.tsx +0 -22
- package/source/html.ts +0 -40
- package/source/http.ts +0 -37
- package/source/routing.ts +0 -24
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# @quilted/quilt
|
|
2
2
|
|
|
3
|
+
## 0.6.16
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`2c7c614`](https://github.com/lemonmade/quilt/commit/2c7c61486018b4192ef8d1f85ccd27ed7889f118) Thanks [@lemonmade](https://github.com/lemonmade)! - Upgrade Preact
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`cbbb036`](https://github.com/lemonmade/quilt/commit/cbbb0368b15a54badbeeace02a1c58baa9a2695f), [`2c7c614`](https://github.com/lemonmade/quilt/commit/2c7c61486018b4192ef8d1f85ccd27ed7889f118)]:
|
|
10
|
+
- @quilted/graphql@3.0.4
|
|
11
|
+
- @quilted/react-signals@0.2.5
|
|
12
|
+
- @quilted/react-testing@0.6.9
|
|
13
|
+
- @quilted/react-dom@18.2.12
|
|
14
|
+
- @quilted/react@18.2.10
|
|
15
|
+
- @quilted/react-router@0.4.1
|
|
16
|
+
|
|
17
|
+
## 0.6.15
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [#716](https://github.com/lemonmade/quilt/pull/716) [`7daafca`](https://github.com/lemonmade/quilt/commit/7daafca900b3d9ea66be179394eadf7998cc94be) Thanks [@lemonmade](https://github.com/lemonmade)! - Refactor browser APIs
|
|
22
|
+
|
|
23
|
+
- Updated dependencies [[`c402a9a`](https://github.com/lemonmade/quilt/commit/c402a9a1c98efa24deed160ba2eaddeaad3b008a), [`7daafca`](https://github.com/lemonmade/quilt/commit/7daafca900b3d9ea66be179394eadf7998cc94be)]:
|
|
24
|
+
- @quilted/react-async@0.4.2
|
|
25
|
+
- @quilted/react-localize@0.2.2
|
|
26
|
+
- @quilted/react-browser@0.0.1
|
|
27
|
+
- @quilted/react-router@0.4.1
|
|
28
|
+
- @quilted/react-dom@18.2.11
|
|
29
|
+
- @quilted/graphql@3.0.3
|
|
30
|
+
- @quilted/assets@0.1.2
|
|
31
|
+
|
|
3
32
|
## 0.6.14
|
|
4
33
|
|
|
5
34
|
### Patch Changes
|
package/build/esm/assets.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
1
|
export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
|
|
2
|
-
export { useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets';
|
package/build/esm/navigate.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl,
|
|
1
|
+
export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl, useInitialURL, useNavigate, useNavigationBlock, useRedirect, useRouteChangeFocusRef, useRouteMatch, useRouteMatchDetails, useRouter, useRoutes, useScrollRestoration } from '@quilted/react-router';
|
|
@@ -1,34 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { HTMLContext } from '@quilted/react-html/server';
|
|
4
|
-
import { HttpServerContext } from '@quilted/react-http/server';
|
|
1
|
+
import { InitialURLContext } from '@quilted/react-router';
|
|
2
|
+
import { BrowserDetailsContext } from '@quilted/react-browser/server';
|
|
5
3
|
import { jsx } from 'react/jsx-runtime';
|
|
6
4
|
|
|
7
5
|
function ServerContext({
|
|
8
|
-
|
|
9
|
-
html,
|
|
10
|
-
http,
|
|
11
|
-
assets,
|
|
6
|
+
browser,
|
|
12
7
|
children
|
|
13
8
|
}) {
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
|
|
9
|
+
const requestURL = browser?.request.url;
|
|
10
|
+
const initialURL = requestURL && new URL(requestURL);
|
|
11
|
+
const withInitialURL = initialURL ? /*#__PURE__*/jsx(InitialURLContext.Provider, {
|
|
12
|
+
value: initialURL,
|
|
17
13
|
children: children
|
|
18
14
|
}) : children;
|
|
19
|
-
const
|
|
20
|
-
value:
|
|
15
|
+
const withBrowser = browser ? /*#__PURE__*/jsx(BrowserDetailsContext.Provider, {
|
|
16
|
+
value: browser,
|
|
21
17
|
children: withInitialURL
|
|
22
18
|
}) : withInitialURL;
|
|
23
|
-
|
|
24
|
-
value: http,
|
|
25
|
-
children: withHTML
|
|
26
|
-
}) : withHTML;
|
|
27
|
-
const withAssets = assets ? /*#__PURE__*/jsx(AssetsContext.Provider, {
|
|
28
|
-
value: assets,
|
|
29
|
-
children: withHTTPServer
|
|
30
|
-
}) : withHTTPServer;
|
|
31
|
-
return withAssets;
|
|
19
|
+
return withBrowser;
|
|
32
20
|
}
|
|
33
21
|
|
|
34
22
|
export { ServerContext };
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { isValidElement } from 'react';
|
|
2
|
-
import { renderToStaticMarkup } from '
|
|
2
|
+
import { renderToStringAsync, renderToStaticMarkup } from 'preact-render-to-string';
|
|
3
3
|
import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/assets';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { HTMLManager, Head, Script, Style, StylePreload, ScriptPreload } from '@quilted/react-html/server';
|
|
7
|
-
import { extract } from '@quilted/react-server-render/server';
|
|
8
|
-
import { RedirectResponse, HTMLResponse } from '@quilted/request-router';
|
|
4
|
+
import { BrowserResponse, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/react-browser/server';
|
|
5
|
+
import { HTMLResponse } from '@quilted/request-router';
|
|
9
6
|
import { ServerContext } from './ServerContext.mjs';
|
|
10
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
8
|
|
|
@@ -21,59 +18,29 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
21
18
|
const {
|
|
22
19
|
request,
|
|
23
20
|
assets,
|
|
21
|
+
status: explicitStatus,
|
|
24
22
|
cacheKey: explicitCacheKey,
|
|
25
23
|
headers: explicitHeaders,
|
|
24
|
+
serializations: explicitSerializations,
|
|
26
25
|
waitUntil = noop,
|
|
27
26
|
stream: shouldStream = false,
|
|
28
27
|
renderHTML = true
|
|
29
28
|
} = options;
|
|
30
|
-
const
|
|
29
|
+
const baseURL = request.URL ?? new URL(request.url);
|
|
31
30
|
const cacheKey = explicitCacheKey ?? (await assets?.cacheKey?.(request)) ?? {};
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
const browserResponse = new BrowserResponse({
|
|
32
|
+
request,
|
|
33
|
+
cacheKey,
|
|
34
|
+
status: explicitStatus,
|
|
35
|
+
headers: new Headers(explicitHeaders),
|
|
36
|
+
serializations: explicitSerializations
|
|
38
37
|
});
|
|
39
|
-
let responseStatus = 200;
|
|
40
38
|
let appStream;
|
|
41
|
-
const headers = new Headers(explicitHeaders);
|
|
42
39
|
if (shouldStream === false && element != null) {
|
|
43
|
-
const rendered = await
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
html: html,
|
|
48
|
-
url: baseUrl,
|
|
49
|
-
assets: assetsManager,
|
|
50
|
-
children: element
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
const {
|
|
55
|
-
headers: appHeaders,
|
|
56
|
-
statusCode = 200,
|
|
57
|
-
redirectUrl
|
|
58
|
-
} = http.state;
|
|
59
|
-
const hasSetCookieHeader = typeof appHeaders.getSetCookie === 'function';
|
|
60
|
-
if (hasSetCookieHeader) {
|
|
61
|
-
for (const cookie of appHeaders.getSetCookie()) {
|
|
62
|
-
headers.append('Set-Cookie', cookie);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
for (const [header, value] of appHeaders.entries()) {
|
|
66
|
-
if (hasSetCookieHeader && header.toLowerCase() === 'set-cookie') continue;
|
|
67
|
-
headers.set(header, value);
|
|
68
|
-
}
|
|
69
|
-
if (redirectUrl) {
|
|
70
|
-
return new RedirectResponse(redirectUrl, {
|
|
71
|
-
status: statusCode,
|
|
72
|
-
headers: headers,
|
|
73
|
-
request
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
responseStatus = statusCode;
|
|
40
|
+
const rendered = await renderToStringAsync( /*#__PURE__*/jsx(ServerContext, {
|
|
41
|
+
browser: browserResponse,
|
|
42
|
+
children: element
|
|
43
|
+
}));
|
|
77
44
|
const appTransformStream = new TransformStream();
|
|
78
45
|
const appWriter = appTransformStream.writable.getWriter();
|
|
79
46
|
appStream = appTransformStream.readable;
|
|
@@ -86,17 +53,10 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
86
53
|
const renderAppStream = async function renderAppStream() {
|
|
87
54
|
const appWriter = appTransformStream.writable.getWriter();
|
|
88
55
|
if (element != null) {
|
|
89
|
-
const rendered = await
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
html: html,
|
|
94
|
-
url: baseUrl,
|
|
95
|
-
assets: assetsManager,
|
|
96
|
-
children: element
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
});
|
|
56
|
+
const rendered = await renderToStringAsync( /*#__PURE__*/jsx(ServerContext, {
|
|
57
|
+
browser: browserResponse,
|
|
58
|
+
children: element
|
|
59
|
+
}));
|
|
100
60
|
appWriter.write(rendered);
|
|
101
61
|
}
|
|
102
62
|
appWriter.close();
|
|
@@ -105,32 +65,31 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
105
65
|
}
|
|
106
66
|
const body = await renderToHTMLBody(appStream);
|
|
107
67
|
return new HTMLResponse(body, {
|
|
108
|
-
status:
|
|
109
|
-
headers
|
|
68
|
+
status: browserResponse.status.value,
|
|
69
|
+
headers: browserResponse.headers
|
|
110
70
|
});
|
|
111
71
|
async function renderToHTMLBody(content) {
|
|
112
72
|
const [synchronousAssets, preloadAssets] = await Promise.all([assets?.entry({
|
|
113
73
|
cacheKey,
|
|
114
|
-
modules:
|
|
74
|
+
modules: browserResponse.assets.get({
|
|
115
75
|
timing: 'load'
|
|
116
76
|
})
|
|
117
|
-
}), assets?.modules(
|
|
77
|
+
}), assets?.modules(browserResponse.assets.get({
|
|
118
78
|
timing: 'preload'
|
|
119
79
|
}), {
|
|
120
80
|
cacheKey
|
|
121
81
|
})]);
|
|
122
82
|
if (synchronousAssets) {
|
|
123
83
|
for (const style of synchronousAssets.styles) {
|
|
124
|
-
headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
|
|
84
|
+
browserResponse.headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
|
|
125
85
|
}
|
|
126
86
|
for (const script of synchronousAssets.scripts) {
|
|
127
|
-
headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
|
|
87
|
+
browserResponse.headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
|
|
128
88
|
}
|
|
129
89
|
}
|
|
130
90
|
if (typeof renderHTML === 'function') {
|
|
131
91
|
const body = await renderHTML(content, {
|
|
132
|
-
|
|
133
|
-
headers,
|
|
92
|
+
response: browserResponse,
|
|
134
93
|
assets: synchronousAssets,
|
|
135
94
|
preloadAssets
|
|
136
95
|
});
|
|
@@ -143,31 +102,30 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
143
102
|
const renderFullHTML = async function renderFullHTML() {
|
|
144
103
|
const writer = responseStream.writable.getWriter();
|
|
145
104
|
writer.write(`<!DOCTYPE html>`);
|
|
146
|
-
const {
|
|
147
|
-
htmlAttributes,
|
|
148
|
-
bodyAttributes,
|
|
149
|
-
...headProps
|
|
150
|
-
} = html.state;
|
|
151
105
|
const htmlContent = renderToStaticMarkup( /*#__PURE__*/jsxs("html", {
|
|
152
|
-
...htmlAttributes,
|
|
106
|
+
...browserResponse.htmlAttributes.value,
|
|
153
107
|
children: [/*#__PURE__*/jsxs("head", {
|
|
154
|
-
children: [/*#__PURE__*/jsx(
|
|
155
|
-
|
|
156
|
-
}),
|
|
108
|
+
children: [browserResponse.title.value && /*#__PURE__*/jsx("title", {
|
|
109
|
+
children: browserResponse.title.value
|
|
110
|
+
}), browserResponse.links.value.map((link, index) => /*#__PURE__*/jsx("link", {
|
|
111
|
+
...link
|
|
112
|
+
}, index)), browserResponse.metas.value.map((meta, index) => /*#__PURE__*/jsx("meta", {
|
|
113
|
+
...meta
|
|
114
|
+
}, index)), synchronousAssets?.scripts.map(script => /*#__PURE__*/jsx(ScriptAsset, {
|
|
157
115
|
asset: script,
|
|
158
|
-
|
|
159
|
-
}, script.source)), synchronousAssets?.styles.map(style => /*#__PURE__*/jsx(
|
|
116
|
+
baseURL: baseURL
|
|
117
|
+
}, script.source)), synchronousAssets?.styles.map(style => /*#__PURE__*/jsx(StyleAsset, {
|
|
160
118
|
asset: style,
|
|
161
|
-
|
|
162
|
-
}, style.source)), preloadAssets?.styles.map(style => /*#__PURE__*/jsx(
|
|
119
|
+
baseURL: baseURL
|
|
120
|
+
}, style.source)), preloadAssets?.styles.map(style => /*#__PURE__*/jsx(StyleAssetPreload, {
|
|
163
121
|
asset: style,
|
|
164
|
-
|
|
165
|
-
}, style.source)), preloadAssets?.scripts.map(script => /*#__PURE__*/jsx(
|
|
122
|
+
baseURL: baseURL
|
|
123
|
+
}, style.source)), preloadAssets?.scripts.map(script => /*#__PURE__*/jsx(ScriptAssetPreload, {
|
|
166
124
|
asset: script,
|
|
167
|
-
|
|
125
|
+
baseURL: baseURL
|
|
168
126
|
}, script.source))]
|
|
169
127
|
}), /*#__PURE__*/jsx("body", {
|
|
170
|
-
...bodyAttributes,
|
|
128
|
+
...browserResponse.bodyAttributes.value,
|
|
171
129
|
dangerouslySetInnerHTML: {
|
|
172
130
|
__html: '%%CONTENT%%'
|
|
173
131
|
}
|
|
@@ -190,10 +148,10 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
190
148
|
if (element != null) writer.write(`</div>`);
|
|
191
149
|
const [newSynchronousAssets, newPreloadAssets] = await Promise.all([assets?.entry({
|
|
192
150
|
cacheKey,
|
|
193
|
-
modules:
|
|
151
|
+
modules: browserResponse.assets.get({
|
|
194
152
|
timing: 'load'
|
|
195
153
|
})
|
|
196
|
-
}), assets?.modules(
|
|
154
|
+
}), assets?.modules(browserResponse.assets.get({
|
|
197
155
|
timing: 'preload'
|
|
198
156
|
}), {
|
|
199
157
|
cacheKey
|
|
@@ -202,18 +160,18 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
202
160
|
const diffedSynchronousAssets = diffBrowserAssetsEntries(newSynchronousAssets, synchronousAssets);
|
|
203
161
|
const diffedPreloadAssets = diffBrowserAssetsEntries(newPreloadAssets, preloadAssets);
|
|
204
162
|
const additionalAssetsContent = renderToStaticMarkup( /*#__PURE__*/jsxs(Fragment, {
|
|
205
|
-
children: [diffedSynchronousAssets.scripts.map(script => /*#__PURE__*/jsx(
|
|
163
|
+
children: [diffedSynchronousAssets.scripts.map(script => /*#__PURE__*/jsx(ScriptAsset, {
|
|
206
164
|
asset: script,
|
|
207
|
-
|
|
208
|
-
}, script.source)), diffedSynchronousAssets.styles.map(style => /*#__PURE__*/jsx(
|
|
165
|
+
baseURL: baseURL
|
|
166
|
+
}, script.source)), diffedSynchronousAssets.styles.map(style => /*#__PURE__*/jsx(StyleAsset, {
|
|
209
167
|
asset: style,
|
|
210
|
-
|
|
211
|
-
}, style.source)), diffedPreloadAssets.styles.map(style => /*#__PURE__*/jsx(
|
|
168
|
+
baseURL: baseURL
|
|
169
|
+
}, style.source)), diffedPreloadAssets.styles.map(style => /*#__PURE__*/jsx(StyleAssetPreload, {
|
|
212
170
|
asset: style,
|
|
213
|
-
|
|
214
|
-
}, style.source)), diffedPreloadAssets.scripts.map(script => /*#__PURE__*/jsx(
|
|
171
|
+
baseURL: baseURL
|
|
172
|
+
}, style.source)), diffedPreloadAssets.scripts.map(script => /*#__PURE__*/jsx(ScriptAssetPreload, {
|
|
215
173
|
asset: script,
|
|
216
|
-
|
|
174
|
+
baseURL: baseURL
|
|
217
175
|
}, script.source))]
|
|
218
176
|
}));
|
|
219
177
|
writer.write(additionalAssetsContent);
|
package/build/esm/server.mjs
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
export { ServerRenderManager, ServerRenderManagerContext, extract } from '@quilted/react-server-render/server';
|
|
1
|
+
export * from '@quilted/react-browser/server';
|
|
3
2
|
export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
|
|
4
|
-
export { SERVER_ACTION_ID as ASSETS_SERVER_ACTION_ID, AssetsContext, AssetsManager, useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets/server';
|
|
5
3
|
export { parseAcceptLanguageHeader } from '@quilted/react-localize';
|
|
6
4
|
export { createRequestRouterLocalization } from '@quilted/react-localize/request-router';
|
|
7
|
-
export { ServerAction, useServerAction, useServerContext } from '@quilted/react-server-render';
|
|
8
|
-
export { ServerContext } from './server/ServerContext.mjs';
|
|
9
5
|
export { renderToResponse } from './server/request-router.mjs';
|
|
@@ -1,2 +1 @@
|
|
|
1
1
|
export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
|
|
2
|
-
export { useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl,
|
|
1
|
+
export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl, useInitialURL, useNavigate, useNavigationBlock, useRedirect, useRouteChangeFocusRef, useRouteMatch, useRouteMatchDetails, useRouter, useRoutes, useScrollRestoration } from '@quilted/react-router';
|
|
@@ -1,22 +1,13 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { HTMLContext } from '@quilted/react-html/server';
|
|
5
|
-
import { HttpServerContext } from '@quilted/react-http/server';
|
|
2
|
+
import { InitialURLContext } from '@quilted/react-router';
|
|
3
|
+
import { BrowserDetailsContext } from '@quilted/react-browser/server';
|
|
6
4
|
|
|
7
|
-
function ServerContext({
|
|
8
|
-
url
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}) {
|
|
14
|
-
const normalizedUrl = typeof url === "string" ? new URL(url) : url;
|
|
15
|
-
const withInitialURL = normalizedUrl ? /* @__PURE__ */ jsx(InitialUrlContext.Provider, { value: normalizedUrl, children }) : children;
|
|
16
|
-
const withHTML = html ? /* @__PURE__ */ jsx(HTMLContext.Provider, { value: html, children: withInitialURL }) : withInitialURL;
|
|
17
|
-
const withHTTPServer = http ? /* @__PURE__ */ jsx(HttpServerContext.Provider, { value: http, children: withHTML }) : withHTML;
|
|
18
|
-
const withAssets = assets ? /* @__PURE__ */ jsx(AssetsContext.Provider, { value: assets, children: withHTTPServer }) : withHTTPServer;
|
|
19
|
-
return withAssets;
|
|
5
|
+
function ServerContext({ browser, children }) {
|
|
6
|
+
const requestURL = browser?.request.url;
|
|
7
|
+
const initialURL = requestURL && new URL(requestURL);
|
|
8
|
+
const withInitialURL = initialURL ? /* @__PURE__ */ jsx(InitialURLContext.Provider, { value: initialURL, children }) : children;
|
|
9
|
+
const withBrowser = browser ? /* @__PURE__ */ jsx(BrowserDetailsContext.Provider, { value: browser, children: withInitialURL }) : withInitialURL;
|
|
10
|
+
return withBrowser;
|
|
20
11
|
}
|
|
21
12
|
|
|
22
13
|
export { ServerContext };
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { isValidElement } from 'react';
|
|
3
|
-
import { renderToStaticMarkup } from '
|
|
3
|
+
import { renderToStringAsync, renderToStaticMarkup } from 'preact-render-to-string';
|
|
4
4
|
import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/assets';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { HTMLManager, Head, Script, Style, StylePreload, ScriptPreload } from '@quilted/react-html/server';
|
|
8
|
-
import { extract } from '@quilted/react-server-render/server';
|
|
9
|
-
import { RedirectResponse, HTMLResponse } from '@quilted/request-router';
|
|
5
|
+
import { BrowserResponse, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/react-browser/server';
|
|
6
|
+
import { HTMLResponse } from '@quilted/request-router';
|
|
10
7
|
import { ServerContext } from './ServerContext.esnext';
|
|
11
8
|
|
|
12
9
|
async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
@@ -21,55 +18,28 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
21
18
|
const {
|
|
22
19
|
request,
|
|
23
20
|
assets,
|
|
21
|
+
status: explicitStatus,
|
|
24
22
|
cacheKey: explicitCacheKey,
|
|
25
23
|
headers: explicitHeaders,
|
|
24
|
+
serializations: explicitSerializations,
|
|
26
25
|
waitUntil = noop,
|
|
27
26
|
stream: shouldStream = false,
|
|
28
27
|
renderHTML = true
|
|
29
28
|
} = options;
|
|
30
|
-
const
|
|
29
|
+
const baseURL = request.URL ?? new URL(request.url);
|
|
31
30
|
const cacheKey = explicitCacheKey ?? (await assets?.cacheKey?.(request) ?? {});
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
const browserResponse = new BrowserResponse({
|
|
32
|
+
request,
|
|
33
|
+
cacheKey,
|
|
34
|
+
status: explicitStatus,
|
|
35
|
+
headers: new Headers(explicitHeaders),
|
|
36
|
+
serializations: explicitSerializations
|
|
37
|
+
});
|
|
36
38
|
let appStream;
|
|
37
|
-
const headers = new Headers(explicitHeaders);
|
|
38
39
|
if (shouldStream === false && element != null) {
|
|
39
|
-
const rendered = await
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
ServerContext,
|
|
43
|
-
{
|
|
44
|
-
http,
|
|
45
|
-
html,
|
|
46
|
-
url: baseUrl,
|
|
47
|
-
assets: assetsManager,
|
|
48
|
-
children: element2
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
const { headers: appHeaders, statusCode = 200, redirectUrl } = http.state;
|
|
54
|
-
const hasSetCookieHeader = typeof appHeaders.getSetCookie === "function";
|
|
55
|
-
if (hasSetCookieHeader) {
|
|
56
|
-
for (const cookie of appHeaders.getSetCookie()) {
|
|
57
|
-
headers.append("Set-Cookie", cookie);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
for (const [header, value] of appHeaders.entries()) {
|
|
61
|
-
if (hasSetCookieHeader && header.toLowerCase() === "set-cookie")
|
|
62
|
-
continue;
|
|
63
|
-
headers.set(header, value);
|
|
64
|
-
}
|
|
65
|
-
if (redirectUrl) {
|
|
66
|
-
return new RedirectResponse(redirectUrl, {
|
|
67
|
-
status: statusCode,
|
|
68
|
-
headers,
|
|
69
|
-
request
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
responseStatus = statusCode;
|
|
40
|
+
const rendered = await renderToStringAsync(
|
|
41
|
+
/* @__PURE__ */ jsx(ServerContext, { browser: browserResponse, children: element })
|
|
42
|
+
);
|
|
73
43
|
const appTransformStream = new TransformStream();
|
|
74
44
|
const appWriter = appTransformStream.writable.getWriter();
|
|
75
45
|
appStream = appTransformStream.readable;
|
|
@@ -82,20 +52,9 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
82
52
|
const renderAppStream = async function renderAppStream2() {
|
|
83
53
|
const appWriter = appTransformStream.writable.getWriter();
|
|
84
54
|
if (element != null) {
|
|
85
|
-
const rendered = await
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
ServerContext,
|
|
89
|
-
{
|
|
90
|
-
http,
|
|
91
|
-
html,
|
|
92
|
-
url: baseUrl,
|
|
93
|
-
assets: assetsManager,
|
|
94
|
-
children: element2
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
});
|
|
55
|
+
const rendered = await renderToStringAsync(
|
|
56
|
+
/* @__PURE__ */ jsx(ServerContext, { browser: browserResponse, children: element })
|
|
57
|
+
);
|
|
99
58
|
appWriter.write(rendered);
|
|
100
59
|
}
|
|
101
60
|
appWriter.close();
|
|
@@ -104,28 +63,28 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
104
63
|
}
|
|
105
64
|
const body = await renderToHTMLBody(appStream);
|
|
106
65
|
return new HTMLResponse(body, {
|
|
107
|
-
status:
|
|
108
|
-
headers
|
|
66
|
+
status: browserResponse.status.value,
|
|
67
|
+
headers: browserResponse.headers
|
|
109
68
|
});
|
|
110
69
|
async function renderToHTMLBody(content) {
|
|
111
70
|
const [synchronousAssets, preloadAssets] = await Promise.all([
|
|
112
71
|
assets?.entry({
|
|
113
72
|
cacheKey,
|
|
114
|
-
modules:
|
|
73
|
+
modules: browserResponse.assets.get({ timing: "load" })
|
|
115
74
|
}),
|
|
116
|
-
assets?.modules(
|
|
75
|
+
assets?.modules(browserResponse.assets.get({ timing: "preload" }), {
|
|
117
76
|
cacheKey
|
|
118
77
|
})
|
|
119
78
|
]);
|
|
120
79
|
if (synchronousAssets) {
|
|
121
80
|
for (const style of synchronousAssets.styles) {
|
|
122
|
-
headers.append(
|
|
81
|
+
browserResponse.headers.append(
|
|
123
82
|
"Link",
|
|
124
83
|
preloadHeader(styleAssetPreloadAttributes(style))
|
|
125
84
|
);
|
|
126
85
|
}
|
|
127
86
|
for (const script of synchronousAssets.scripts) {
|
|
128
|
-
headers.append(
|
|
87
|
+
browserResponse.headers.append(
|
|
129
88
|
"Link",
|
|
130
89
|
preloadHeader(scriptAssetPreloadAttributes(script))
|
|
131
90
|
);
|
|
@@ -133,8 +92,7 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
133
92
|
}
|
|
134
93
|
if (typeof renderHTML === "function") {
|
|
135
94
|
const body3 = await renderHTML(content, {
|
|
136
|
-
|
|
137
|
-
headers,
|
|
95
|
+
response: browserResponse,
|
|
138
96
|
assets: synchronousAssets,
|
|
139
97
|
preloadAssets
|
|
140
98
|
});
|
|
@@ -147,26 +105,34 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
147
105
|
const renderFullHTML = async function renderFullHTML2() {
|
|
148
106
|
const writer = responseStream.writable.getWriter();
|
|
149
107
|
writer.write(`<!DOCTYPE html>`);
|
|
150
|
-
const { htmlAttributes, bodyAttributes, ...headProps } = html.state;
|
|
151
108
|
const htmlContent = renderToStaticMarkup(
|
|
152
|
-
/* @__PURE__ */ jsxs("html", { ...htmlAttributes, children: [
|
|
109
|
+
/* @__PURE__ */ jsxs("html", { ...browserResponse.htmlAttributes.value, children: [
|
|
153
110
|
/* @__PURE__ */ jsxs("head", { children: [
|
|
154
|
-
/* @__PURE__ */ jsx(
|
|
155
|
-
|
|
156
|
-
|
|
111
|
+
browserResponse.title.value && /* @__PURE__ */ jsx("title", { children: browserResponse.title.value }),
|
|
112
|
+
browserResponse.links.value.map((link, index) => /* @__PURE__ */ jsx("link", { ...link }, index)),
|
|
113
|
+
browserResponse.metas.value.map((meta, index) => /* @__PURE__ */ jsx("meta", { ...meta }, index)),
|
|
114
|
+
synchronousAssets?.scripts.map((script) => /* @__PURE__ */ jsx(
|
|
115
|
+
ScriptAsset,
|
|
116
|
+
{
|
|
117
|
+
asset: script,
|
|
118
|
+
baseURL
|
|
119
|
+
},
|
|
120
|
+
script.source
|
|
121
|
+
)),
|
|
122
|
+
synchronousAssets?.styles.map((style) => /* @__PURE__ */ jsx(StyleAsset, { asset: style, baseURL }, style.source)),
|
|
157
123
|
preloadAssets?.styles.map((style) => /* @__PURE__ */ jsx(
|
|
158
|
-
|
|
124
|
+
StyleAssetPreload,
|
|
159
125
|
{
|
|
160
126
|
asset: style,
|
|
161
|
-
|
|
127
|
+
baseURL
|
|
162
128
|
},
|
|
163
129
|
style.source
|
|
164
130
|
)),
|
|
165
131
|
preloadAssets?.scripts.map((script) => /* @__PURE__ */ jsx(
|
|
166
|
-
|
|
132
|
+
ScriptAssetPreload,
|
|
167
133
|
{
|
|
168
134
|
asset: script,
|
|
169
|
-
|
|
135
|
+
baseURL
|
|
170
136
|
},
|
|
171
137
|
script.source
|
|
172
138
|
))
|
|
@@ -174,7 +140,7 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
174
140
|
/* @__PURE__ */ jsx(
|
|
175
141
|
"body",
|
|
176
142
|
{
|
|
177
|
-
...bodyAttributes,
|
|
143
|
+
...browserResponse.bodyAttributes.value,
|
|
178
144
|
dangerouslySetInnerHTML: { __html: "%%CONTENT%%" }
|
|
179
145
|
}
|
|
180
146
|
)
|
|
@@ -197,9 +163,9 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
197
163
|
const [newSynchronousAssets, newPreloadAssets] = await Promise.all([
|
|
198
164
|
assets?.entry({
|
|
199
165
|
cacheKey,
|
|
200
|
-
modules:
|
|
166
|
+
modules: browserResponse.assets.get({ timing: "load" })
|
|
201
167
|
}),
|
|
202
|
-
assets?.modules(
|
|
168
|
+
assets?.modules(browserResponse.assets.get({ timing: "preload" }), {
|
|
203
169
|
cacheKey
|
|
204
170
|
})
|
|
205
171
|
]);
|
|
@@ -214,21 +180,28 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
|
|
|
214
180
|
);
|
|
215
181
|
const additionalAssetsContent = renderToStaticMarkup(
|
|
216
182
|
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
217
|
-
diffedSynchronousAssets.scripts.map((script) => /* @__PURE__ */ jsx(
|
|
218
|
-
|
|
183
|
+
diffedSynchronousAssets.scripts.map((script) => /* @__PURE__ */ jsx(
|
|
184
|
+
ScriptAsset,
|
|
185
|
+
{
|
|
186
|
+
asset: script,
|
|
187
|
+
baseURL
|
|
188
|
+
},
|
|
189
|
+
script.source
|
|
190
|
+
)),
|
|
191
|
+
diffedSynchronousAssets.styles.map((style) => /* @__PURE__ */ jsx(StyleAsset, { asset: style, baseURL }, style.source)),
|
|
219
192
|
diffedPreloadAssets.styles.map((style) => /* @__PURE__ */ jsx(
|
|
220
|
-
|
|
193
|
+
StyleAssetPreload,
|
|
221
194
|
{
|
|
222
195
|
asset: style,
|
|
223
|
-
|
|
196
|
+
baseURL
|
|
224
197
|
},
|
|
225
198
|
style.source
|
|
226
199
|
)),
|
|
227
200
|
diffedPreloadAssets.scripts.map((script) => /* @__PURE__ */ jsx(
|
|
228
|
-
|
|
201
|
+
ScriptAssetPreload,
|
|
229
202
|
{
|
|
230
203
|
asset: script,
|
|
231
|
-
|
|
204
|
+
baseURL
|
|
232
205
|
},
|
|
233
206
|
script.source
|
|
234
207
|
))
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
export { ServerRenderManager, ServerRenderManagerContext, extract } from '@quilted/react-server-render/server';
|
|
1
|
+
export * from '@quilted/react-browser/server';
|
|
3
2
|
export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
|
|
4
|
-
export { SERVER_ACTION_ID as ASSETS_SERVER_ACTION_ID, AssetsContext, AssetsManager, useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets/server';
|
|
5
3
|
export { parseAcceptLanguageHeader } from '@quilted/react-localize';
|
|
6
4
|
export { createRequestRouterLocalization } from '@quilted/react-localize/request-router';
|
|
7
|
-
export { ServerAction, useServerAction, useServerContext } from '@quilted/react-server-render';
|
|
8
|
-
export { ServerContext } from './server/ServerContext.esnext';
|
|
9
5
|
export { renderToResponse } from './server/request-router.esnext';
|