remix-utils - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

browser/react.d.ts

 export * from "./react/client-only";
 export * from "./react/csrf";
 export * from "./react/outlet";
+export * from "./react/revalidate-link";
 export * from "./react/use-hydrated";
+export * from "./react/use-revalidate";
 export * from "./react/use-should-hydrate";

browser/react.js

 export * from "./react/client-only";
 export * from "./react/csrf";
 export * from "./react/outlet";
+export * from "./react/revalidate-link";
 export * from "./react/use-hydrated";
+export * from "./react/use-revalidate";
 export * from "./react/use-should-hydrate";

browser/react/outlet.js

 import { jsx as _jsx } from "react/jsx-runtime";
+import { Outlet as RemixOutlet } from "@remix-run/react";
 import { createContext, useContext } from "react";
-import { Outlet as RemixOutlet } from "remix";
 let context = createContext(null);
@@ -5,0 +5,0 @@ /**

browser/react/use-should-hydrate.js

@@ -1,2 +0,2 @@
-import { useMatches } from "remix";
+import { useMatches } from "@remix-run/react";
 /**
@@ -3,0 +3,0 @@ * Determine if at least one of the routes is asking to load JS and return a

browser/server/body-parser.d.ts

@@ -14,2 +14,3 @@ export declare let bodyParser: {
      * Parse the body of a Request to an URLSearchParams instance.
+     * @deprecated Use `request.formData()`
      * @example
@@ -16,0 +17,0 @@ * async function action({ request }: ActionArgs): Promise<ActionReturn> {

browser/server/body-parser.js

@@ -16,2 +16,3 @@ export let bodyParser = {
      * Parse the body of a Request to an URLSearchParams instance.
+     * @deprecated Use `request.formData()`
      * @example
@@ -18,0 +19,0 @@ * async function action({ request }: ActionArgs): Promise<ActionReturn> {

browser/server/csrf.d.ts

@@ -1,2 +0,2 @@
-import { Session } from "remix";
+import { Session } from "@remix-run/server-runtime";
 /**
@@ -3,0 +3,0 @@ * Create a random string in Base64 to be used as an authenticity token for

browser/server/csrf.js

@@ -43,3 +43,3 @@ import { randomBytes } from "crypto";
         throw unprocessableEntity({
-            message: "Can't verify CSRF token authenticity.",
+            message: "Can't find CSRF token in session.",
         });
@@ -50,3 +50,3 @@ }
         throw unprocessableEntity({
-            message: "Can't verify CSRF token authenticity.",
+            message: "Can't find CSRF token in body.",
         });
@@ -53,0 +53,0 @@ }

browser/server/responses.d.ts

@@ -93,1 +93,10 @@ import { JsonValue } from "type-fest";
 export declare function serverError<Data = unknown>(data: Data, init?: Omit<ResponseInit, "status">): Response;
+/**
+ * Create a response with only the status 304 and optional headers.
+ * This is useful when trying to implement conditional responses based on Etags.
+ * @example
+ * let loader: LoaderFunction = async ({ request }) => {
+ *   return notModified();
+ * }
+ */
+export declare function notModified(init?: Omit<ResponseInit, "status">): Response;

browser/server/responses.js

@@ -1,2 +0,2 @@
-import { json as remixJson, redirect } from "remix";
+import { json as remixJson, redirect } from "@remix-run/server-runtime";
 /**
@@ -108,1 +108,12 @@ * A wrapper of the `json` function from `remix` which accepts a generic for the
 }
+/**
+ * Create a response with only the status 304 and optional headers.
+ * This is useful when trying to implement conditional responses based on Etags.
+ * @example
+ * let loader: LoaderFunction = async ({ request }) => {
+ *   return notModified();
+ * }
+ */
+export function notModified(init) {
+    return new Response("", { ...init, status: 304 });
+}

build/react.d.ts

 export * from "./react/client-only";
 export * from "./react/csrf";
 export * from "./react/outlet";
+export * from "./react/revalidate-link";
 export * from "./react/use-hydrated";
+export * from "./react/use-revalidate";
 export * from "./react/use-should-hydrate";

build/react.js

@@ -16,3 +16,5 @@ "use strict";
 __exportStar(require("./react/outlet"), exports);
+__exportStar(require("./react/revalidate-link"), exports);
 __exportStar(require("./react/use-hydrated"), exports);
+__exportStar(require("./react/use-revalidate"), exports);
 __exportStar(require("./react/use-should-hydrate"), exports);

build/react/outlet.js

@@ -5,5 +5,5 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remix_1 = require("remix");
-let context = react_1.createContext(null);
+const react_1 = require("@remix-run/react");
+const react_2 = require("react");
+let context = react_2.createContext(null);
 /**
@@ -20,3 +20,3 @@ * Wrapper of the React Router Outlet component. This Outlet receives an
 function Outlet({ data }) {
-    return (jsx_runtime_1.jsx(context.Provider, Object.assign({ value: data }, { children: jsx_runtime_1.jsx(remix_1.Outlet, {}, void 0) }), void 0));
+    return (jsx_runtime_1.jsx(context.Provider, Object.assign({ value: data }, { children: jsx_runtime_1.jsx(react_1.Outlet, {}, void 0) }), void 0));
 }
@@ -33,3 +33,3 @@ exports.Outlet = Outlet;
 function useParentData() {
-    let parentData = react_1.useContext(context);
+    let parentData = react_2.useContext(context);
     if (!parentData)
@@ -36,0 +36,0 @@ throw new Error("Missing parent data.");

build/react/use-should-hydrate.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useShouldHydrate = void 0;
-const remix_1 = require("remix");
+const react_1 = require("@remix-run/react");
 /**
@@ -26,3 +26,3 @@ * Determine if at least one of the routes is asking to load JS and return a
 function useShouldHydrate() {
-    return remix_1.useMatches().some((match) => {
+    return react_1.useMatches().some((match) => {
         if (!match.handle)
@@ -29,0 +29,0 @@ return false;

build/server/body-parser.d.ts

@@ -14,2 +14,3 @@ export declare let bodyParser: {
      * Parse the body of a Request to an URLSearchParams instance.
+     * @deprecated Use `request.formData()`
      * @example
@@ -16,0 +17,0 @@ * async function action({ request }: ActionArgs): Promise<ActionReturn> {

build/server/body-parser.js

@@ -19,2 +19,3 @@ "use strict";
      * Parse the body of a Request to an URLSearchParams instance.
+     * @deprecated Use `request.formData()`
      * @example
@@ -21,0 +22,0 @@ * async function action({ request }: ActionArgs): Promise<ActionReturn> {

build/server/csrf.d.ts

@@ -1,2 +0,2 @@
-import { Session } from "remix";
+import { Session } from "@remix-run/server-runtime";
 /**
@@ -3,0 +3,0 @@ * Create a random string in Base64 to be used as an authenticity token for

build/server/csrf.js

@@ -47,3 +47,3 @@ "use strict";
         throw responses_1.unprocessableEntity({
-            message: "Can't verify CSRF token authenticity.",
+            message: "Can't find CSRF token in session.",
         });
@@ -54,3 +54,3 @@ }
         throw responses_1.unprocessableEntity({
-            message: "Can't verify CSRF token authenticity.",
+            message: "Can't find CSRF token in body.",
         });
@@ -57,0 +57,0 @@ }

build/server/responses.d.ts

@@ -93,1 +93,10 @@ import { JsonValue } from "type-fest";
 export declare function serverError<Data = unknown>(data: Data, init?: Omit<ResponseInit, "status">): Response;
+/**
+ * Create a response with only the status 304 and optional headers.
+ * This is useful when trying to implement conditional responses based on Etags.
+ * @example
+ * let loader: LoaderFunction = async ({ request }) => {
+ *   return notModified();
+ * }
+ */
+export declare function notModified(init?: Omit<ResponseInit, "status">): Response;

build/server/responses.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serverError = exports.unprocessableEntity = exports.notFound = exports.forbidden = exports.unauthorized = exports.badRequest = exports.redirectBack = exports.json = void 0;
-const remix_1 = require("remix");
+exports.notModified = exports.serverError = exports.unprocessableEntity = exports.notFound = exports.forbidden = exports.unauthorized = exports.badRequest = exports.redirectBack = exports.json = void 0;
+const server_runtime_1 = require("@remix-run/server-runtime");
 /**
@@ -25,3 +25,3 @@ * A wrapper of the `json` function from `remix` which accepts a generic for the
 function json(data, init) {
-    return remix_1.json(data, init);
+    return server_runtime_1.json(data, init);
 }
@@ -45,3 +45,3 @@ exports.json = json;
     var _a;
-    return remix_1.redirect((_a = request.headers.get("Referer")) !== null && _a !== void 0 ? _a : fallback, init);
+    return server_runtime_1.redirect((_a = request.headers.get("Referer")) !== null && _a !== void 0 ? _a : fallback, init);
 }
@@ -121,1 +121,13 @@ exports.redirectBack = redirectBack;
 exports.serverError = serverError;
+/**
+ * Create a response with only the status 304 and optional headers.
+ * This is useful when trying to implement conditional responses based on Etags.
+ * @example
+ * let loader: LoaderFunction = async ({ request }) => {
+ *   return notModified();
+ * }
+ */
+function notModified(init) {
+    return new Response("", { ...init, status: 304 });
+}
+exports.notModified = notModified;

package.json

 {
   "name": "remix-utils",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
@@ -17,5 +17,3 @@ "engines": {
     "lint": "eslint --ext .ts,.tsx src/",
-    "test": "jest --config=config/jest.config.ts --passWithNoTests",
-    "setup": "remix setup",
-    "postinstall": "npm run setup"
+    "test": "jest --config=config/jest.config.ts --passWithNoTests"
   },
@@ -46,6 +44,5 @@ "author": {
   "peerDependencies": {
-    "@remix-run/node": "^0.20.1",
-    "@remix-run/react": "^0.20.1",
-    "react": "^17.0.2",
-    "remix": "^0.20.1"
+    "@remix-run/react": "^1.0.0",
+    "@remix-run/server-runtime": "^1.0.0",
+    "react": "^17.0.2"
   },
@@ -58,5 +55,5 @@ "devDependencies": {
     "@jest/types": "^27.2.5",
-    "@remix-run/dev": "^0.20.1",
-    "@remix-run/node": "^0.20.1",
-    "@remix-run/react": "^0.20.1",
+    "@remix-run/node": "^1.0.0",
+    "@remix-run/react": "^1.0.0",
+    "@remix-run/server-runtime": "^1.0.0",
     "@size-limit/preset-small-lib": "^4.10.2",
@@ -87,3 +84,2 @@ "@testing-library/jest-dom": "^5.15.0",
     "react-router-dom": "^6.0.0-beta.6",
-    "remix": "^0.20.1",
     "ts-node": "^10.4.0",
@@ -90,0 +86,0 @@ "typescript": "^4.2.4"

README.md

@@ -186,2 +186,14 @@ # Remix Utils
 
+### RevalidateLink
+
+The RevalidateLink link components it's a simple wrapper of a Remix's Link, it receives the same props with the exception of the `to`, instead this component will render a Link to `.`.
+
+Because of linking to `.`, when clicked, this will tell Remix to fetch again the loaders of the current routes, but instead of creating a new entry on the browser's history stack, it will replace the current one, basically, it will refresh the page, but only reloading the data.
+
+If you don't have JS enabled, this will do a full page refresh instead, giving you the exact same behavior.
+
+```tsx
+<RevalidateLink className="refresh-btn-styles">Refresh</RevalidateLink>
+```
+
 ### useHydrated
@@ -211,2 +223,28 @@
 
+### useRevalidate
+
+This Hook gives you a function you can call to trigger a revalidation of the loaders in the current routes.
+
+The way this works is by navigating to `.` and adding `replace: true` to avoid creating a new entry on the history stack.
+
+> Check #RevalidateLink for more information and a component version of this feature that works without JS.
+
+This Hooks is mostly useful if you want to trigger the revalidation manually from an effect, examples of this are:
+
+- Set an interval to trigger the revalidation
+- Revalidate when the browser tab is focused again
+- Revalidate when the user is online again
+
+```ts
+import { useRevalidate } from "remix-utils";
+
+function useRevalidateOnInterval() {
+  let revalidate = useRevalidat();
+  useEffect(() => {
+    let interval = setInterval(revalidate, 5000);
+    return () => clearInterval(interval);
+  }, [revalidate]);
+}
+```
+
 ### useShouldHydrate
@@ -213,0 +251,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91572

increased by24.35%

Dependency count

5

decreased by-16.67%

Dev dependency count

35

decreased by-2.78%

Number of package files

66

increased by40.43%

Lines of code

1853

increased by25.37%

Number of lines in readme file

519

increased by7.9%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes