@quilted/quilt 0.5.136 → 0.5.138
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 +20 -0
- package/build/cjs/index.cjs +34 -0
- package/build/cjs/server/ServerContext.cjs +3 -3
- package/build/cjs/server/index.cjs +28 -14
- package/build/cjs/server/preload.cjs +37 -0
- package/build/cjs/server/request-router.cjs +73 -57
- package/build/cjs/static/StaticContext.cjs +3 -3
- package/build/cjs/static/index.cjs +30 -44
- package/build/cjs/static/render.cjs +9 -6
- package/build/esm/index.mjs +2 -0
- package/build/esm/server/ServerContext.mjs +3 -3
- package/build/esm/server/index.mjs +3 -2
- package/build/esm/server/preload.mjs +35 -0
- package/build/esm/server/request-router.mjs +55 -39
- package/build/esm/static/StaticContext.mjs +3 -3
- package/build/esm/static/index.mjs +25 -39
- package/build/esm/static/render.mjs +7 -4
- package/build/esnext/index.esnext +2 -0
- package/build/esnext/server/ServerContext.esnext +3 -3
- package/build/esnext/server/index.esnext +3 -2
- package/build/esnext/server/preload.esnext +35 -0
- package/build/esnext/server/request-router.esnext +55 -39
- package/build/esnext/static/StaticContext.esnext +3 -3
- package/build/esnext/static/index.esnext +25 -39
- package/build/esnext/static/render.esnext +7 -4
- package/build/tsconfig.tsbuildinfo +1 -1
- package/build/typescript/assets.d.ts +7 -0
- package/build/typescript/assets.d.ts.map +1 -0
- package/build/typescript/index.d.ts +3 -0
- package/build/typescript/index.d.ts.map +1 -1
- package/build/typescript/magic/assets.d.ts +3 -0
- package/build/typescript/magic/assets.d.ts.map +1 -0
- package/build/typescript/server/ServerContext.d.ts +5 -5
- package/build/typescript/server/ServerContext.d.ts.map +1 -1
- package/build/typescript/server/index.d.ts +4 -3
- package/build/typescript/server/index.d.ts.map +1 -1
- package/build/typescript/server/preload.d.ts +8 -0
- package/build/typescript/server/preload.d.ts.map +1 -0
- package/build/typescript/server/request-router.d.ts +23 -14
- package/build/typescript/server/request-router.d.ts.map +1 -1
- package/build/typescript/static/StaticContext.d.ts +5 -5
- package/build/typescript/static/StaticContext.d.ts.map +1 -1
- package/build/typescript/static/index.d.ts +3 -5
- package/build/typescript/static/index.d.ts.map +1 -1
- package/build/typescript/static/render.d.ts +6 -4
- package/build/typescript/static/render.d.ts.map +1 -1
- package/package.json +5 -3
- package/source/assets.ts +7 -0
- package/source/index.ts +19 -0
- package/source/magic/assets.ts +5 -0
- package/source/server/ServerContext.tsx +7 -10
- package/source/server/index.ts +19 -13
- package/source/server/preload.ts +69 -0
- package/source/server/request-router.tsx +129 -73
- package/source/static/StaticContext.tsx +7 -10
- package/source/static/index.tsx +30 -41
- package/source/static/render.tsx +9 -12
- package/tsconfig.json +2 -0
- package/source/magic/asset-manifest.ts +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @quilted/quilt
|
|
2
2
|
|
|
3
|
+
## 0.5.138
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#532](https://github.com/lemonmade/quilt/pull/532) [`70b042d2`](https://github.com/lemonmade/quilt/commit/70b042d256579ab88e4ac65b2f869f143332de56) Thanks [@lemonmade](https://github.com/lemonmade)! - Move asset manifest code into asset packages
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`70b042d2`](https://github.com/lemonmade/quilt/commit/70b042d256579ab88e4ac65b2f869f143332de56)]:
|
|
10
|
+
- @quilted/assets@0.0.2
|
|
11
|
+
- @quilted/react-assets@0.0.2
|
|
12
|
+
|
|
13
|
+
## 0.5.137
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#527](https://github.com/lemonmade/quilt/pull/527) [`a255c7c2`](https://github.com/lemonmade/quilt/commit/a255c7c284391b2c3157fffed5a5feb576cd45ac) Thanks [@lemonmade](https://github.com/lemonmade)! - Improve asset manifests
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [[`a255c7c2`](https://github.com/lemonmade/quilt/commit/a255c7c284391b2c3157fffed5a5feb576cd45ac)]:
|
|
20
|
+
- @quilted/assets@0.0.1
|
|
21
|
+
- @quilted/react-assets@0.0.1
|
|
22
|
+
|
|
3
23
|
## 0.5.136
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/build/cjs/index.cjs
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var assets = require('@quilted/assets');
|
|
3
4
|
var async = require('@quilted/async');
|
|
4
5
|
var events = require('@quilted/events');
|
|
6
|
+
var reactAssets = require('@quilted/react-assets');
|
|
5
7
|
var reactAsync = require('@quilted/react-async');
|
|
6
8
|
var reactGraphql = require('@quilted/react-graphql');
|
|
7
9
|
var reactIdle = require('@quilted/react-idle');
|
|
@@ -16,6 +18,30 @@ var App = require('./App.cjs');
|
|
|
16
18
|
|
|
17
19
|
|
|
18
20
|
|
|
21
|
+
Object.defineProperty(exports, 'createBrowserAssetsEntryFromManifest', {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return assets.createBrowserAssetsEntryFromManifest; }
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, 'createBrowserAssetsFromManifests', {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () { return assets.createBrowserAssetsFromManifests; }
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, 'scriptAssetAttributes', {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () { return assets.scriptAssetAttributes; }
|
|
32
|
+
});
|
|
33
|
+
Object.defineProperty(exports, 'scriptAssetPreloadAttributes', {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: function () { return assets.scriptAssetPreloadAttributes; }
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, 'styleAssetAttributes', {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () { return assets.styleAssetAttributes; }
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, 'styleAssetPreloadAttributes', {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () { return assets.styleAssetPreloadAttributes; }
|
|
44
|
+
});
|
|
19
45
|
Object.defineProperty(exports, 'createAsyncModule', {
|
|
20
46
|
enumerable: true,
|
|
21
47
|
get: function () { return async.createAsyncModule; }
|
|
@@ -56,6 +82,14 @@ Object.defineProperty(exports, 'sleep', {
|
|
|
56
82
|
enumerable: true,
|
|
57
83
|
get: function () { return events.sleep; }
|
|
58
84
|
});
|
|
85
|
+
Object.defineProperty(exports, 'useAssetsCacheKey', {
|
|
86
|
+
enumerable: true,
|
|
87
|
+
get: function () { return reactAssets.useAssetsCacheKey; }
|
|
88
|
+
});
|
|
89
|
+
Object.defineProperty(exports, 'useModuleAssets', {
|
|
90
|
+
enumerable: true,
|
|
91
|
+
get: function () { return reactAssets.useModuleAssets; }
|
|
92
|
+
});
|
|
59
93
|
Object.defineProperty(exports, 'createAsyncComponent', {
|
|
60
94
|
enumerable: true,
|
|
61
95
|
get: function () { return reactAsync.createAsyncComponent; }
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var server$2 = require('@quilted/react-assets/server');
|
|
3
4
|
var reactRouter = require('@quilted/react-router');
|
|
4
5
|
var server$1 = require('@quilted/react-html/server');
|
|
5
|
-
var server$2 = require('@quilted/react-async/server');
|
|
6
6
|
var server = require('@quilted/react-http/server');
|
|
7
7
|
var react = require('../utilities/react.cjs');
|
|
8
8
|
|
|
@@ -10,11 +10,11 @@ function ServerContext({
|
|
|
10
10
|
url,
|
|
11
11
|
html,
|
|
12
12
|
http,
|
|
13
|
-
|
|
13
|
+
assets,
|
|
14
14
|
children
|
|
15
15
|
}) {
|
|
16
16
|
const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
|
|
17
|
-
return react.maybeWrapContext(server$2.
|
|
17
|
+
return react.maybeWrapContext(server$2.AssetsContext, assets, react.maybeWrapContext(server.HttpServerContext, http, react.maybeWrapContext(server$1.HtmlContext, html, react.maybeWrapContext(reactRouter.InitialUrlContext, normalizedUrl, children))));
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
exports.ServerContext = ServerContext;
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
var server = require('@quilted/react-html/server');
|
|
4
4
|
var server$1 = require('@quilted/react-server-render/server');
|
|
5
|
-
var
|
|
6
|
-
var server$
|
|
5
|
+
var assets = require('@quilted/assets');
|
|
6
|
+
var server$2 = require('@quilted/react-assets/server');
|
|
7
7
|
var requestRouter = require('@quilted/react-localize/request-router');
|
|
8
8
|
var requestRouter$1 = require('@quilted/request-router');
|
|
9
9
|
var reactLocalize = require('@quilted/react-localize');
|
|
10
10
|
var ServerContext = require('./ServerContext.cjs');
|
|
11
11
|
var requestRouter$2 = require('./request-router.cjs');
|
|
12
|
+
var preload = require('./preload.cjs');
|
|
12
13
|
|
|
13
14
|
|
|
14
15
|
|
|
@@ -56,37 +57,49 @@ Object.defineProperty(exports, 'useServerAction', {
|
|
|
56
57
|
enumerable: true,
|
|
57
58
|
get: function () { return server$1.useServerAction; }
|
|
58
59
|
});
|
|
59
|
-
Object.defineProperty(exports, '
|
|
60
|
+
Object.defineProperty(exports, 'createBrowserAssetsEntryFromManifest', {
|
|
60
61
|
enumerable: true,
|
|
61
|
-
get: function () { return
|
|
62
|
+
get: function () { return assets.createBrowserAssetsEntryFromManifest; }
|
|
63
|
+
});
|
|
64
|
+
Object.defineProperty(exports, 'createBrowserAssetsFromManifests', {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: function () { return assets.createBrowserAssetsFromManifests; }
|
|
62
67
|
});
|
|
63
68
|
Object.defineProperty(exports, 'scriptAssetAttributes', {
|
|
64
69
|
enumerable: true,
|
|
65
|
-
get: function () { return
|
|
70
|
+
get: function () { return assets.scriptAssetAttributes; }
|
|
66
71
|
});
|
|
67
72
|
Object.defineProperty(exports, 'scriptAssetPreloadAttributes', {
|
|
68
73
|
enumerable: true,
|
|
69
|
-
get: function () { return
|
|
74
|
+
get: function () { return assets.scriptAssetPreloadAttributes; }
|
|
70
75
|
});
|
|
71
76
|
Object.defineProperty(exports, 'styleAssetAttributes', {
|
|
72
77
|
enumerable: true,
|
|
73
|
-
get: function () { return
|
|
78
|
+
get: function () { return assets.styleAssetAttributes; }
|
|
74
79
|
});
|
|
75
80
|
Object.defineProperty(exports, 'styleAssetPreloadAttributes', {
|
|
76
81
|
enumerable: true,
|
|
77
|
-
get: function () { return
|
|
82
|
+
get: function () { return assets.styleAssetPreloadAttributes; }
|
|
83
|
+
});
|
|
84
|
+
Object.defineProperty(exports, 'ASSETS_SERVER_ACTION_ID', {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () { return server$2.SERVER_ACTION_ID; }
|
|
87
|
+
});
|
|
88
|
+
Object.defineProperty(exports, 'AssetsContext', {
|
|
89
|
+
enumerable: true,
|
|
90
|
+
get: function () { return server$2.AssetsContext; }
|
|
78
91
|
});
|
|
79
|
-
Object.defineProperty(exports, '
|
|
92
|
+
Object.defineProperty(exports, 'AssetsManager', {
|
|
80
93
|
enumerable: true,
|
|
81
|
-
get: function () { return server$
|
|
94
|
+
get: function () { return server$2.AssetsManager; }
|
|
82
95
|
});
|
|
83
|
-
Object.defineProperty(exports, '
|
|
96
|
+
Object.defineProperty(exports, 'useAssetsCacheKey', {
|
|
84
97
|
enumerable: true,
|
|
85
|
-
get: function () { return server$
|
|
98
|
+
get: function () { return server$2.useAssetsCacheKey; }
|
|
86
99
|
});
|
|
87
|
-
Object.defineProperty(exports, '
|
|
100
|
+
Object.defineProperty(exports, 'useModuleAssets', {
|
|
88
101
|
enumerable: true,
|
|
89
|
-
get: function () { return server$
|
|
102
|
+
get: function () { return server$2.useModuleAssets; }
|
|
90
103
|
});
|
|
91
104
|
Object.defineProperty(exports, 'createRequestRouterLocalization', {
|
|
92
105
|
enumerable: true,
|
|
@@ -124,3 +137,4 @@ exports.ServerContext = ServerContext.ServerContext;
|
|
|
124
137
|
exports.createServerRender = requestRouter$2.createServerRender;
|
|
125
138
|
exports.renderAppToResponse = requestRouter$2.renderAppToResponse;
|
|
126
139
|
exports.renderAppToStreamedResponse = requestRouter$2.renderAppToStreamedResponse;
|
|
140
|
+
exports.createAssetPreloader = preload.createAssetPreloader;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var requestRouter = require('@quilted/request-router');
|
|
4
|
+
|
|
5
|
+
function createAssetPreloader(options) {
|
|
6
|
+
return async function handler(request, requestContext) {
|
|
7
|
+
const manifest = await assetsForRequest(request, {
|
|
8
|
+
...options,
|
|
9
|
+
context: requestContext
|
|
10
|
+
});
|
|
11
|
+
return requestRouter.json(manifest);
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
async function assetsForRequest(request, {
|
|
15
|
+
assets,
|
|
16
|
+
context,
|
|
17
|
+
cacheKey: getCacheKey
|
|
18
|
+
}) {
|
|
19
|
+
const url = new URL(request.url);
|
|
20
|
+
const modules = url.searchParams.get('modules')?.split(',') ?? [];
|
|
21
|
+
const includeStyles = url.searchParams.get('styles') !== 'false';
|
|
22
|
+
const includeScripts = url.searchParams.get('scripts') !== 'false';
|
|
23
|
+
const cacheKey = (await getCacheKey?.(request, context)) ?? (await assets.cacheKey?.(request));
|
|
24
|
+
const {
|
|
25
|
+
styles,
|
|
26
|
+
scripts
|
|
27
|
+
} = await assets.entry({
|
|
28
|
+
modules,
|
|
29
|
+
cacheKey
|
|
30
|
+
});
|
|
31
|
+
const result = {};
|
|
32
|
+
if (includeStyles) result.styles = styles;
|
|
33
|
+
if (includeScripts) result.scripts = scripts;
|
|
34
|
+
return result;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
exports.createAssetPreloader = createAssetPreloader;
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var react = require('react');
|
|
4
|
-
var
|
|
5
|
-
var server$2 = require('@quilted/react-
|
|
6
|
-
var server$
|
|
7
|
-
var server
|
|
8
|
-
var server$
|
|
4
|
+
var assets = require('@quilted/assets');
|
|
5
|
+
var server$2 = require('@quilted/react-assets/server');
|
|
6
|
+
var server$1 = require('@quilted/react-http/server');
|
|
7
|
+
var server = require('@quilted/react-html/server');
|
|
8
|
+
var server$3 = require('@quilted/react-server-render/server');
|
|
9
9
|
var requestRouter = require('@quilted/request-router');
|
|
10
10
|
var ServerContext = require('./ServerContext.cjs');
|
|
11
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
12
|
|
|
13
13
|
function createServerRender(getApp, {
|
|
14
|
-
context,
|
|
15
14
|
stream,
|
|
16
15
|
...options
|
|
17
16
|
} = {}) {
|
|
@@ -19,23 +18,29 @@ function createServerRender(getApp, {
|
|
|
19
18
|
const accepts = request.headers.get('Accept');
|
|
20
19
|
if (accepts != null && !accepts.includes('text/html')) return;
|
|
21
20
|
const renderResponse = stream ? renderAppToStreamedResponse : renderAppToResponse;
|
|
22
|
-
return renderResponse(typeof getApp === 'function' ? () => getApp(request, requestContext) : getApp,
|
|
21
|
+
return renderResponse(typeof getApp === 'function' ? () => getApp(request, requestContext) : getApp, {
|
|
23
22
|
...options,
|
|
23
|
+
request,
|
|
24
|
+
context: requestContext,
|
|
24
25
|
extract: {
|
|
25
26
|
...options.extract,
|
|
26
|
-
context: options.extract
|
|
27
|
+
context: typeof options.extract?.context === 'function' ? options.extract.context(request, requestContext) : options.extract?.context
|
|
27
28
|
}
|
|
28
29
|
});
|
|
29
30
|
};
|
|
30
31
|
}
|
|
31
|
-
async function renderAppToResponse(getApp,
|
|
32
|
+
async function renderAppToResponse(getApp, {
|
|
33
|
+
request,
|
|
34
|
+
context,
|
|
32
35
|
assets,
|
|
33
36
|
extract,
|
|
34
37
|
renderHtml
|
|
35
|
-
}
|
|
38
|
+
}) {
|
|
36
39
|
const app = typeof getApp === 'function' ? await getApp() : getApp;
|
|
40
|
+
const cacheKey = await assets?.cacheKey?.(request);
|
|
37
41
|
const renderDetails = await serverRenderDetailsForApp(app, {
|
|
38
42
|
extract,
|
|
43
|
+
cacheKey,
|
|
39
44
|
url: request.url,
|
|
40
45
|
headers: request.headers
|
|
41
46
|
});
|
|
@@ -50,7 +55,9 @@ async function renderAppToResponse(getApp, request, {
|
|
|
50
55
|
headers
|
|
51
56
|
});
|
|
52
57
|
}
|
|
53
|
-
const content = await renderAppDetailsToHtmlString(renderDetails,
|
|
58
|
+
const content = await renderAppDetailsToHtmlString(renderDetails, {
|
|
59
|
+
request,
|
|
60
|
+
context,
|
|
54
61
|
assets,
|
|
55
62
|
renderHtml
|
|
56
63
|
});
|
|
@@ -59,25 +66,25 @@ async function renderAppToResponse(getApp, request, {
|
|
|
59
66
|
status: statusCode
|
|
60
67
|
});
|
|
61
68
|
}
|
|
62
|
-
async function renderAppToStreamedResponse(getApp,
|
|
63
|
-
|
|
69
|
+
async function renderAppToStreamedResponse(getApp, {
|
|
70
|
+
request,
|
|
71
|
+
context,
|
|
72
|
+
assets: assets$1,
|
|
64
73
|
extract,
|
|
65
74
|
renderHtml
|
|
66
|
-
}
|
|
75
|
+
}) {
|
|
67
76
|
const headers = new Headers();
|
|
68
77
|
const stream = new TransformStream();
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
const guaranteedAssets = await assets?.assets({
|
|
73
|
-
context: assetContext
|
|
78
|
+
const cacheKey = await assets$1?.cacheKey?.(request);
|
|
79
|
+
const guaranteedAssets = await assets$1?.entry({
|
|
80
|
+
cacheKey
|
|
74
81
|
});
|
|
75
82
|
if (guaranteedAssets) {
|
|
76
83
|
for (const style of guaranteedAssets.styles) {
|
|
77
|
-
headers.append('Link', preloadHeader(
|
|
84
|
+
headers.append('Link', preloadHeader(assets.styleAssetPreloadAttributes(style)));
|
|
78
85
|
}
|
|
79
86
|
for (const script of guaranteedAssets.scripts) {
|
|
80
|
-
headers.append('Link', preloadHeader(
|
|
87
|
+
headers.append('Link', preloadHeader(assets.scriptAssetPreloadAttributes(script)));
|
|
81
88
|
}
|
|
82
89
|
}
|
|
83
90
|
renderResponseToStream();
|
|
@@ -89,11 +96,14 @@ async function renderAppToStreamedResponse(getApp, request, {
|
|
|
89
96
|
const app = typeof getApp === 'function' ? await getApp() : getApp;
|
|
90
97
|
const renderDetails = await serverRenderDetailsForApp(app, {
|
|
91
98
|
extract,
|
|
99
|
+
cacheKey,
|
|
92
100
|
url: request.url,
|
|
93
101
|
headers: request.headers
|
|
94
102
|
});
|
|
95
|
-
const content = await renderAppDetailsToHtmlString(renderDetails,
|
|
96
|
-
|
|
103
|
+
const content = await renderAppDetailsToHtmlString(renderDetails, {
|
|
104
|
+
request,
|
|
105
|
+
context,
|
|
106
|
+
assets: assets$1,
|
|
97
107
|
renderHtml
|
|
98
108
|
});
|
|
99
109
|
const encoder = new TextEncoder();
|
|
@@ -105,24 +115,27 @@ async function renderAppToStreamedResponse(getApp, request, {
|
|
|
105
115
|
async function serverRenderDetailsForApp(app, {
|
|
106
116
|
url,
|
|
107
117
|
headers,
|
|
118
|
+
cacheKey,
|
|
108
119
|
extract: extractOptions
|
|
109
120
|
} = {}) {
|
|
110
|
-
const html = new server
|
|
111
|
-
const
|
|
112
|
-
const http = new server$3.HttpManager({
|
|
121
|
+
const html = new server.HtmlManager();
|
|
122
|
+
const http = new server$1.HttpManager({
|
|
113
123
|
headers
|
|
114
124
|
});
|
|
125
|
+
const assets = new server$2.AssetsManager({
|
|
126
|
+
cacheKey
|
|
127
|
+
});
|
|
115
128
|
const {
|
|
116
129
|
decorate,
|
|
117
130
|
...rest
|
|
118
131
|
} = extractOptions ?? {};
|
|
119
|
-
const rendered = await server$
|
|
132
|
+
const rendered = await server$3.extract(app, {
|
|
120
133
|
decorate(app) {
|
|
121
134
|
return /*#__PURE__*/jsxRuntime.jsx(ServerContext.ServerContext, {
|
|
122
|
-
asyncAssets: asyncAssets,
|
|
123
135
|
http: http,
|
|
124
136
|
html: html,
|
|
125
137
|
url: url,
|
|
138
|
+
assets: assets,
|
|
126
139
|
children: decorate?.(app) ?? app
|
|
127
140
|
});
|
|
128
141
|
},
|
|
@@ -132,66 +145,69 @@ async function serverRenderDetailsForApp(app, {
|
|
|
132
145
|
rendered,
|
|
133
146
|
http,
|
|
134
147
|
html,
|
|
135
|
-
|
|
148
|
+
assets
|
|
136
149
|
};
|
|
137
150
|
}
|
|
138
|
-
async function renderAppDetailsToHtmlString(details,
|
|
151
|
+
async function renderAppDetailsToHtmlString(details, {
|
|
152
|
+
request,
|
|
153
|
+
context,
|
|
139
154
|
assets,
|
|
140
155
|
renderHtml = defaultRenderHtml
|
|
141
|
-
}
|
|
156
|
+
}) {
|
|
142
157
|
const {
|
|
143
|
-
html: htmlManager,
|
|
144
158
|
http,
|
|
145
159
|
rendered,
|
|
146
|
-
|
|
160
|
+
html: htmlManager,
|
|
161
|
+
assets: assetsManager
|
|
147
162
|
} = details;
|
|
148
|
-
const
|
|
163
|
+
const cacheKey = assetsManager.cacheKey;
|
|
164
|
+
const usedModules = assetsManager.usedModules({
|
|
149
165
|
timing: 'load'
|
|
150
166
|
});
|
|
151
|
-
const
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
async: usedAssets,
|
|
156
|
-
context: assetContext
|
|
157
|
-
}), assets.asyncAssets(asyncAssets.used({
|
|
167
|
+
const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.entry({
|
|
168
|
+
modules: usedModules,
|
|
169
|
+
cacheKey
|
|
170
|
+
}), assets.modules(assetsManager.usedModules({
|
|
158
171
|
timing: 'preload'
|
|
159
172
|
}), {
|
|
160
|
-
|
|
173
|
+
cacheKey
|
|
161
174
|
})]) : [];
|
|
162
|
-
const htmlElement = await renderHtml(rendered,
|
|
175
|
+
const htmlElement = await renderHtml(rendered, {
|
|
176
|
+
request,
|
|
177
|
+
context,
|
|
163
178
|
html: htmlManager,
|
|
164
179
|
http,
|
|
165
180
|
assets: entryAssets,
|
|
166
181
|
preloadAssets
|
|
167
182
|
});
|
|
168
|
-
return server
|
|
183
|
+
return server.renderHtmlToString(htmlElement);
|
|
169
184
|
}
|
|
170
|
-
const defaultRenderHtml = function defaultRenderHtml(content,
|
|
185
|
+
const defaultRenderHtml = function defaultRenderHtml(content, {
|
|
186
|
+
request,
|
|
171
187
|
html,
|
|
172
|
-
assets,
|
|
188
|
+
assets: assets$1,
|
|
173
189
|
preloadAssets
|
|
174
190
|
}) {
|
|
175
191
|
const baseUrl = new URL(request.url);
|
|
176
|
-
return /*#__PURE__*/jsxRuntime.jsx(server
|
|
192
|
+
return /*#__PURE__*/jsxRuntime.jsx(server.Html, {
|
|
177
193
|
manager: html,
|
|
178
194
|
headEndContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
179
|
-
children: [assets &&
|
|
180
|
-
const attributes =
|
|
195
|
+
children: [assets$1 && assets$1.styles.map(style => {
|
|
196
|
+
const attributes = assets.styleAssetAttributes(style, {
|
|
181
197
|
baseUrl
|
|
182
198
|
});
|
|
183
199
|
return /*#__PURE__*/jsxRuntime.jsx("link", {
|
|
184
200
|
...attributes
|
|
185
201
|
}, style.source);
|
|
186
|
-
}), assets &&
|
|
187
|
-
const isModule = script.attributes
|
|
188
|
-
const attributes =
|
|
202
|
+
}), assets$1 && assets$1.scripts.map(script => {
|
|
203
|
+
const isModule = script.attributes?.type === 'module';
|
|
204
|
+
const attributes = assets.scriptAssetAttributes(script, {
|
|
189
205
|
baseUrl
|
|
190
206
|
});
|
|
191
207
|
if (isModule) {
|
|
192
208
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
193
209
|
children: [/*#__PURE__*/jsxRuntime.jsx("link", {
|
|
194
|
-
...
|
|
210
|
+
...assets.scriptAssetPreloadAttributes(script)
|
|
195
211
|
}), /*#__PURE__*/jsxRuntime.jsx("script", {
|
|
196
212
|
...attributes,
|
|
197
213
|
async: true
|
|
@@ -202,15 +218,15 @@ const defaultRenderHtml = function defaultRenderHtml(content, request, {
|
|
|
202
218
|
...attributes,
|
|
203
219
|
defer: true
|
|
204
220
|
}, script.source);
|
|
205
|
-
}), preloadAssets &&
|
|
206
|
-
const attributes =
|
|
221
|
+
}), preloadAssets && preloadAssets.styles.map(style => {
|
|
222
|
+
const attributes = assets.styleAssetPreloadAttributes(style, {
|
|
207
223
|
baseUrl
|
|
208
224
|
});
|
|
209
225
|
return /*#__PURE__*/jsxRuntime.jsx("link", {
|
|
210
226
|
...attributes
|
|
211
227
|
}, style.source);
|
|
212
|
-
}), preloadAssets &&
|
|
213
|
-
const attributes =
|
|
228
|
+
}), preloadAssets && preloadAssets.scripts.map(script => {
|
|
229
|
+
const attributes = assets.scriptAssetPreloadAttributes(script, {
|
|
214
230
|
baseUrl
|
|
215
231
|
});
|
|
216
232
|
return /*#__PURE__*/jsxRuntime.jsx("link", {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var server$2 = require('@quilted/react-assets/server');
|
|
3
4
|
var reactRouter = require('@quilted/react-router');
|
|
4
5
|
var server$1 = require('@quilted/react-html/server');
|
|
5
|
-
var server$2 = require('@quilted/react-async/server');
|
|
6
6
|
var server = require('@quilted/react-http/server');
|
|
7
7
|
var react = require('../utilities/react.cjs');
|
|
8
8
|
|
|
@@ -10,11 +10,11 @@ function StaticContext({
|
|
|
10
10
|
url,
|
|
11
11
|
html,
|
|
12
12
|
http,
|
|
13
|
-
|
|
13
|
+
assets,
|
|
14
14
|
children
|
|
15
15
|
}) {
|
|
16
16
|
const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
|
|
17
|
-
return react.maybeWrapContext(server$2.
|
|
17
|
+
return react.maybeWrapContext(server$2.AssetsContext, assets, react.maybeWrapContext(server.HttpServerContext, http, react.maybeWrapContext(server$1.HtmlContext, html, react.maybeWrapContext(reactRouter.InitialUrlContext, normalizedUrl, children))));
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
exports.StaticContext = StaticContext;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var assets = require('@quilted/assets');
|
|
4
5
|
var server = require('@quilted/react-html/server');
|
|
5
6
|
var _static = require('@quilted/react-router/static');
|
|
6
7
|
var render = require('./render.cjs');
|
|
@@ -8,7 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
8
9
|
|
|
9
10
|
const BASE_URL = 'http://localhost:3000';
|
|
10
11
|
async function renderStatic(App, {
|
|
11
|
-
assets,
|
|
12
|
+
assets: assets$1,
|
|
12
13
|
routes: startingRoutes,
|
|
13
14
|
onRender,
|
|
14
15
|
crawl = true,
|
|
@@ -159,13 +160,15 @@ async function renderStatic(App, {
|
|
|
159
160
|
const routeRecorder = new _static.StaticRenderer({
|
|
160
161
|
forceFallback: fallback ? url.pathname : undefined
|
|
161
162
|
});
|
|
163
|
+
const initialCacheKey = await assets$1.cacheKey?.(new Request(url));
|
|
162
164
|
const {
|
|
163
165
|
http,
|
|
164
166
|
html: htmlManager,
|
|
165
|
-
|
|
166
|
-
|
|
167
|
+
assets: assetsManager,
|
|
168
|
+
markup
|
|
167
169
|
} = await render.renderApp( /*#__PURE__*/jsxRuntime.jsx(App, {}), {
|
|
168
170
|
url,
|
|
171
|
+
cacheKey: initialCacheKey,
|
|
169
172
|
decorate(app) {
|
|
170
173
|
return /*#__PURE__*/jsxRuntime.jsx(_static.StaticRendererContext.Provider, {
|
|
171
174
|
value: routeRecorder,
|
|
@@ -173,66 +176,49 @@ async function renderStatic(App, {
|
|
|
173
176
|
});
|
|
174
177
|
}
|
|
175
178
|
});
|
|
176
|
-
const
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
}), assets.asyncAssets(asyncAssets.used({
|
|
179
|
+
const cacheKey = assetsManager.cacheKey;
|
|
180
|
+
const [mainAssets, preloadAssets] = await Promise.all([assets$1.entry({
|
|
181
|
+
modules: assetsManager.usedModules({
|
|
182
|
+
timing: 'load'
|
|
183
|
+
}),
|
|
184
|
+
cacheKey
|
|
185
|
+
}), assets$1.modules(assetsManager.usedModules({
|
|
185
186
|
timing: 'preload'
|
|
186
187
|
}), {
|
|
187
|
-
|
|
188
|
-
modules: true
|
|
189
|
-
}
|
|
190
|
-
}), assets.assets({
|
|
191
|
-
async: usedAssets,
|
|
192
|
-
context: {
|
|
193
|
-
modules: false
|
|
194
|
-
}
|
|
188
|
+
cacheKey
|
|
195
189
|
})]);
|
|
196
|
-
|
|
197
|
-
// We don’t want to load styles from both bundles, so we only use module styles,
|
|
198
|
-
// since modules are intended to be the default and CSS (usually) doesn’t
|
|
199
|
-
// have features that meaningfully break older user agents.
|
|
200
|
-
const styles = moduleAssets.styles.length > 0 ? moduleAssets.styles : nomoduleAssets.styles;
|
|
201
190
|
const minifiedHtml = server.renderHtmlToString( /*#__PURE__*/jsxRuntime.jsx(server.Html, {
|
|
202
191
|
manager: htmlManager,
|
|
203
192
|
headEndContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
204
|
-
children: [[...styles].map(style => {
|
|
205
|
-
const attributes =
|
|
193
|
+
children: [[...mainAssets.styles].map(style => {
|
|
194
|
+
const attributes = assets.styleAssetAttributes(style, {
|
|
206
195
|
baseUrl: url
|
|
207
196
|
});
|
|
208
197
|
return /*#__PURE__*/jsxRuntime.jsx("link", {
|
|
209
198
|
...attributes
|
|
210
199
|
}, style.source);
|
|
211
|
-
}), [...
|
|
212
|
-
const attributes =
|
|
200
|
+
}), [...mainAssets.scripts].map(script => {
|
|
201
|
+
const attributes = assets.scriptAssetAttributes(script, {
|
|
213
202
|
baseUrl: url
|
|
214
203
|
});
|
|
215
|
-
return /*#__PURE__*/jsxRuntime.
|
|
204
|
+
return attributes.type === 'module' ? /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
205
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("link", {
|
|
206
|
+
...assets.scriptAssetPreloadAttributes(script)
|
|
207
|
+
}), /*#__PURE__*/jsxRuntime.jsx("script", {
|
|
208
|
+
...attributes
|
|
209
|
+
})]
|
|
210
|
+
}, script.source) : /*#__PURE__*/jsxRuntime.jsx("script", {
|
|
216
211
|
...attributes
|
|
217
212
|
}, script.source);
|
|
218
|
-
}), [...
|
|
219
|
-
const attributes =
|
|
220
|
-
baseUrl: url
|
|
221
|
-
});
|
|
222
|
-
return /*#__PURE__*/jsxRuntime.jsx("script", {
|
|
223
|
-
...attributes,
|
|
224
|
-
// @ts-expect-error Rendering to HTML, so using the lowercase name
|
|
225
|
-
nomodule: moduleAssets.scripts.length > 0 ? true : undefined
|
|
226
|
-
}, script.source);
|
|
227
|
-
}), [...modulePreload.styles].map(style => {
|
|
228
|
-
const attributes = server$1.styleAssetPreloadAttributes(style, {
|
|
213
|
+
}), [...preloadAssets.styles].map(style => {
|
|
214
|
+
const attributes = assets.styleAssetPreloadAttributes(style, {
|
|
229
215
|
baseUrl: url
|
|
230
216
|
});
|
|
231
217
|
return /*#__PURE__*/jsxRuntime.jsx("link", {
|
|
232
218
|
...attributes
|
|
233
219
|
}, style.source);
|
|
234
|
-
}), [...
|
|
235
|
-
const attributes =
|
|
220
|
+
}), [...preloadAssets.scripts].map(script => {
|
|
221
|
+
const attributes = assets.scriptAssetPreloadAttributes(script, {
|
|
236
222
|
baseUrl: url
|
|
237
223
|
});
|
|
238
224
|
return /*#__PURE__*/jsxRuntime.jsx("link", {
|