New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

remix-utils

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

remix-utils - npm Package Compare versions

Comparing version

2.3.0
to
2.4.0

browser/react/dynamic-links.d.ts
browser/react/dynamic-links.js
build/react/dynamic-links.d.ts
build/react/dynamic-links.js

1

browser/react.d.ts
export * from "./react/client-only";
export * from "./react/csrf";
export * from "./react/dynamic-links";
export * from "./react/external-scripts";

@@ -4,0 +5,0 @@ export * from "./react/outlet";

1

browser/react.js
export * from "./react/client-only";
export * from "./react/csrf";
export * from "./react/dynamic-links";
export * from "./react/external-scripts";

@@ -4,0 +5,0 @@ export * from "./react/outlet";

4

browser/react/external-scripts.d.ts
/// <reference types="react" />
declare type ReferrerPolicy = "no-referrer-when-downgrade" | "no-referrer" | "origin-when-cross-origin" | "origin" | "same-origin" | "strict-origin-when-cross-origin" | "strict-origin" | "unsafe-url";
declare type CrossOrigin = "anonymous" | "use-credentials";
declare type ExternalScript = {
declare type ScriptDescriptor = {
async?: boolean;

@@ -15,4 +15,4 @@ crossOrigin?: CrossOrigin;

};
export declare type ExternalScriptsFunction = () => ExternalScript[];
export declare type ExternalScriptsFunction = () => ScriptDescriptor[];
export declare function ExternalScripts(): JSX.Element;
export {};

1

build/react.d.ts
export * from "./react/client-only";
export * from "./react/csrf";
export * from "./react/dynamic-links";
export * from "./react/external-scripts";

@@ -4,0 +5,0 @@ export * from "./react/outlet";

1

build/react.js

@@ -15,2 +15,3 @@ "use strict";

__exportStar(require("./react/csrf"), exports);
__exportStar(require("./react/dynamic-links"), exports);
__exportStar(require("./react/external-scripts"), exports);

@@ -17,0 +18,0 @@ __exportStar(require("./react/outlet"), exports);

4

build/react/external-scripts.d.ts
/// <reference types="react" />
declare type ReferrerPolicy = "no-referrer-when-downgrade" | "no-referrer" | "origin-when-cross-origin" | "origin" | "same-origin" | "strict-origin-when-cross-origin" | "strict-origin" | "unsafe-url";
declare type CrossOrigin = "anonymous" | "use-credentials";
declare type ExternalScript = {
declare type ScriptDescriptor = {
async?: boolean;

@@ -15,4 +15,4 @@ crossOrigin?: CrossOrigin;

};
export declare type ExternalScriptsFunction = () => ExternalScript[];
export declare type ExternalScriptsFunction = () => ScriptDescriptor[];
export declare function ExternalScripts(): JSX.Element;
export {};

2

package.json
{
"name": "remix-utils",
"version": "2.3.0",
"version": "2.4.0",
"license": "MIT",

@@ -5,0 +5,0 @@ "engines": {

65

README.md

@@ -161,2 +161,49 @@ # Remix Utils

### DynamicLinks
If you need to create `<link />` tags based on the loader data instead of being static, you can use the `DynamicLinks` component together with the `DynamicLinksFunction` type.
In the route you want to define dynamic links add `handle` export with a `dynamicLinks` method, this method should implement the `DynamicLinksFunction` type.
```ts
let dynamicLinks: DynamicLinksFunction<LoaderData> = async ({ data }) => {
if (!data.user) return [];
return [{ rel: "preload", href: data.user.avatar, as: "image" }];
};
```
Then, in the root route, add the `DynamicLinks` component before the Remix's Links component, usually inside a Document component.
```tsx
import { Links, LiveReload, Meta, Scripts, ScrollRestoration } from "remix";
import { DynamicLinks } from "remix-utils";
type Props = { children: React.ReactNode; title?: string };
export function Document({ children, title }: Props) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
{title ? <title>{title}</title> : null}
<Meta />
<DynamicLinks />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}
</body>
</html>
);
}
```
Now, any link you defined in the `DynamicLinksFunction` will be added to the HTML as any static link in your `LinksFunction`s.
> Note: You can also put the `DynamicLinks` after the `Links` component, it's up to you what to prioritize, since static links are probably prefetched when you do `<Link prefetch>` you may want to put the `DynamicLinks` first to prioritize them.
### ExternalScripts

@@ -166,3 +213,3 @@

In the route you want to load the script add a `handle` export with a scripts method, this method should implement the `ExternalScriptsFunction` type.
In the route you want to load the script add a `handle` export with a `scripts` method, this method should implement the `ExternalScriptsFunction` type.

@@ -186,3 +233,3 @@ ```ts

Then, in the root route, add the `ExternalScripts` component together with the Remix Scripts component, usually inside a Document component.
Then, in the root route, add the `ExternalScripts` component together with the Remix's Scripts component, usually inside a Document component.

@@ -223,3 +270,3 @@ ```tsx

> This features is not built-in into Remix so it's marked as deprecated here. The features will be removed in v3 of Remix Utils.
> This feature is now built-in into Remix as `Outlet` & `useOutletContext` so it's marked as deprecated here. The feature will be removed in v3 of Remix Utils.

@@ -263,3 +310,3 @@ This wrapper of the Remix Outlet component lets you pass an optional `data` prop, then using the `useParentData` hook, you can access that data.

This lets you detect if your component is already hydrated. This means the JS for the element loaded client-side and React is running.
This hook lets you detect if your component is already hydrated. This means the JS for the element loaded client-side and React is running.

@@ -288,3 +335,3 @@ With useHydrated, you can render different things on the server and client while ensuring the hydration will not have a mismatched HTML.

This Hook gives you a function you can call to trigger a revalidation of the loaders in the current routes.
This hook lets you trigger a revalidation of the loaders in the current routes.

@@ -438,3 +485,3 @@ The way this works is by navigating to `.` and adding `replace: true` to avoid creating a new entry on the history stack.

> A better version of this features is supported out of the box by Remix. It's recommended to use `await request.formData()` instead.
> A better version of this feature is supported out of the box by Remix. It's recommended to use `await request.formData()` instead.

@@ -495,3 +542,3 @@ This function receives the whole request and returns a promise with an instance of `URLSearchParams`, and the request's body is already parsed.

> This features is not built-in into Remix so it's marked as deprecated here. The features will be removed in v3 of Remix Utils.
> This feature is now built-in into Remix so it's marked as deprecated here. The feature will be removed in v3 of Remix Utils.

@@ -531,3 +578,3 @@ This function is a typed version of the `json` helper provided by Remix. It accepts a generic with the type of data you are going to send in the response.

This function is a wrapper of the `redirect` helper from Remix, contrarian to Remix's version. This one receives the whole request object as the first value and an object with the response init and a fallback URL.
This function is a wrapper of the `redirect` helper from Remix. Unlike Remix's version, this one receives the whole request object as the first value and an object with the response init and a fallback URL.

@@ -545,3 +592,3 @@ The response created with this function will have the `Location` header pointing to the `Referer` header from the request, or if not available, the fallback URL provided in the second argument.

This helper is more useful when used in a generic action to send the user to the same URL it was before.
This helper is most useful when used in a generic action to send the user to the same URL it was before.

@@ -548,0 +595,0 @@ #### Bad Request