remix-utils
Advanced tools
remix-utils - npm Package Compare versions
Comparing version 5.1.0 to 5.2.0
@@ -12,1 +12,2 @@ export * from "./server/cors"; | ||
| export * from "./server/typed-session"; | ||
| export * from "./server/preload-route-assets"; |
@@ -12,1 +12,2 @@ export * from "./server/cors"; | ||
| export * from "./server/typed-session"; | ||
| export * from "./server/preload-route-assets"; |
@@ -18,2 +18,3 @@ /** | ||
| * - Forwarded | ||
| * - DO-Connecting-IP | ||
| * | ||
@@ -20,0 +21,0 @@ * If the IP address is valid, it will be returned. Otherwise, null will be |
@@ -19,2 +19,3 @@ import isIP from "is-ip"; | ||
| "Forwarded", | ||
| "DO-Connecting-IP" /** Digital ocean app platform */, | ||
| ]); | ||
@@ -29,5 +30,5 @@ export function getClientIPAddress(requestOrHeaders) { | ||
| } | ||
| if (!(value === null || value === void 0 ? void 0 : value.includes(", "))) | ||
| if (!(value === null || value === void 0 ? void 0 : value.includes(","))) | ||
| return value; | ||
| return value.split(", "); | ||
| return value.split(",").map((ip) => ip.trim()); | ||
| }) | ||
@@ -34,0 +35,0 @@ .find((ip) => { |
@@ -12,1 +12,2 @@ export * from "./server/cors"; | ||
| export * from "./server/typed-session"; | ||
| export * from "./server/preload-route-assets"; |
@@ -28,1 +28,2 @@ "use strict"; | ||
| __exportStar(require("./server/typed-session"), exports); | ||
| __exportStar(require("./server/preload-route-assets"), exports); |
@@ -18,2 +18,3 @@ /** | ||
| * - Forwarded | ||
| * - DO-Connecting-IP | ||
| * | ||
@@ -20,0 +21,0 @@ * If the IP address is valid, it will be returned. Otherwise, null will be |
@@ -25,2 +25,3 @@ "use strict"; | ||
| "Forwarded", | ||
| "DO-Connecting-IP" /** Digital ocean app platform */, | ||
| ]); | ||
@@ -35,5 +36,5 @@ function getClientIPAddress(requestOrHeaders) { | ||
| } | ||
| if (!(value === null || value === void 0 ? void 0 : value.includes(", "))) | ||
| if (!(value === null || value === void 0 ? void 0 : value.includes(","))) | ||
| return value; | ||
| return value.split(", "); | ||
| return value.split(",").map((ip) => ip.trim()); | ||
| }) | ||
@@ -40,0 +41,0 @@ .find((ip) => { |
| { | ||
| "name": "remix-utils", | ||
| "version": "5.1.0", | ||
| "version": "5.2.0", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "engines": { |
@@ -554,3 +554,3 @@ # Remix Utils | ||
| The return value of `useGlobalTransitionStates` is either `"idle"` or `"pending"`. | ||
| The return value of `useGlobalTransitionStates` can be `"idle"`, `"loading"` or `"submitting"` | ||
@@ -1315,2 +1315,42 @@ > **Note** This is used by the hooks below to determine if the app is loading, submitting or both (pending). | ||
| ### Preload Route Assets | ||
| The `Link` header allows responses to push to the browser assets that are needed for the document, this is useful to improve the performance of the application by sending those assets earlier. | ||
| Once Early Hints is supported this will also allows you to send the assets even before the document is ready, but for now you can benefit to send assets to preload before the browser parse the HTML. | ||
| You can do this with the functions `preloadRouteAssets`, `preloadLinkedAssets` and `preloadModuleAssets`. | ||
| All functions follows the same signature: | ||
| ```ts | ||
| // entry.server.tsx | ||
| export default function handleRequest( | ||
| request: Request, | ||
| statusCode: number, | ||
| headers: Headers, | ||
| context: EntryContext | ||
| ) { | ||
| let markup = renderToString( | ||
| <RemixServer context={context} url={request.url} /> | ||
| ); | ||
| headers.set("Content-Type", "text/html"); | ||
| preloadRouteAssets(context, headers); // add this line | ||
| // preloadLinkedAssets(context, headers); | ||
| // preloadModuleAssets(context, headers); | ||
| return new Response("<!DOCTYPE html>" + markup, { | ||
| status: statusCode, | ||
| headers: headers, | ||
| }); | ||
| } | ||
| ``` | ||
| The `preloadRouteAssets` is a combination of both `preloadLinkedAssets` and `preloadModuleAssets` so you can use it to preload all assets for a route, if you use this one you don't need the other two | ||
| The `preloadLinkedAssets` function will preload any link with `rel: "preload"` added with the Remix's `LinkFunction`, so you can configure assets to preload in your route and send them in the headers automatically. It will additionally preload any linked stylesheet file (with `rel: "stylesheet"`) even if not preloaded so it will load faster. | ||
| The `preloadModuleAssets` function will preload all the JS files Remix adds to the page when hydrating it, Remix already renders a `<link rel="modulepreload">` for each now before the `<script type="module">` used to start the application, this will use Link headers to preload those assets. | ||
| ## Author | ||
@@ -1317,0 +1357,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.42%
230360
- Number of package files
- increased by3.05%
135
- Lines of code
- increased by7.75%
5020
- Number of lines in readme file
- increased by3.03%
1361