remix-utils - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

browser/server.d.ts

 export * from "./server/body-parser";
+export * from "./server/cors";
 export * from "./server/csrf";
 export * from "./server/get-client-id-address";
 export * from "./server/responses";

browser/server.js

 export * from "./server/body-parser";
+export * from "./server/cors";
 export * from "./server/csrf";
 export * from "./server/get-client-id-address";
 export * from "./server/responses";

browser/server/responses.d.ts

@@ -155,1 +155,16 @@ /// <reference types="node" />
 export declare function html(content: string, init?: number | ResponseInit): Response;
+export declare type ImageType = "image/jpeg" | "image/png" | "image/gif" | "image/svg+xml" | "image/webp" | "image/bmp" | "image/avif";
+/**
+ * Create a response with a image file response.
+ * It receives a Buffer, ArrayBuffer or ReadableStream with the image content
+ * and set the Content-Type header to the `type` parameter.
+ *
+ * This is useful to dynamically create a image file from a Resource Route.
+ * @example
+ * export let loader: LoaderFunction = async ({ request }) => {
+ *   return image(await takeScreenshot(), { type: "image/avif" });
+ * }
+ */
+export declare function image(content: Buffer | ArrayBuffer | ReadableStream, { type, ...init }: ResponseInit & {
+    type: ImageType;
+}): Response;

browser/server/responses.js

@@ -211,1 +211,22 @@ import { json as remixJson, redirect } from "@remix-run/server-runtime";
 }
+/**
+ * Create a response with a image file response.
+ * It receives a Buffer, ArrayBuffer or ReadableStream with the image content
+ * and set the Content-Type header to the `type` parameter.
+ *
+ * This is useful to dynamically create a image file from a Resource Route.
+ * @example
+ * export let loader: LoaderFunction = async ({ request }) => {
+ *   return image(await takeScreenshot(), { type: "image/avif" });
+ * }
+ */
+export function image(content, { type, ...init }) {
+    let headers = new Headers(init.headers);
+    if (!headers.has("Content-Type")) {
+        headers.set("Content-Type", type);
+    }
+    return new Response(content, {
+        ...init,
+        headers,
+    });
+}

build/server.d.ts

 export * from "./server/body-parser";
+export * from "./server/cors";
 export * from "./server/csrf";
 export * from "./server/get-client-id-address";
 export * from "./server/responses";

build/server.js

@@ -14,4 +14,5 @@ "use strict";
 __exportStar(require("./server/body-parser"), exports);
+__exportStar(require("./server/cors"), exports);
 __exportStar(require("./server/csrf"), exports);
 __exportStar(require("./server/get-client-id-address"), exports);
 __exportStar(require("./server/responses"), exports);

build/server/responses.d.ts

@@ -155,1 +155,16 @@ /// <reference types="node" />
 export declare function html(content: string, init?: number | ResponseInit): Response;
+export declare type ImageType = "image/jpeg" | "image/png" | "image/gif" | "image/svg+xml" | "image/webp" | "image/bmp" | "image/avif";
+/**
+ * Create a response with a image file response.
+ * It receives a Buffer, ArrayBuffer or ReadableStream with the image content
+ * and set the Content-Type header to the `type` parameter.
+ *
+ * This is useful to dynamically create a image file from a Resource Route.
+ * @example
+ * export let loader: LoaderFunction = async ({ request }) => {
+ *   return image(await takeScreenshot(), { type: "image/avif" });
+ * }
+ */
+export declare function image(content: Buffer | ArrayBuffer | ReadableStream, { type, ...init }: ResponseInit & {
+    type: ImageType;
+}): Response;

build/server/responses.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.html = exports.pdf = exports.stylesheet = exports.javascript = exports.notModified = exports.serverError = exports.unprocessableEntity = exports.notFound = exports.forbidden = exports.unauthorized = exports.badRequest = exports.redirectBack = exports.json = void 0;
+exports.image = exports.html = exports.pdf = exports.stylesheet = exports.javascript = 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");
@@ -227,1 +227,23 @@ /**
 exports.html = html;
+/**
+ * Create a response with a image file response.
+ * It receives a Buffer, ArrayBuffer or ReadableStream with the image content
+ * and set the Content-Type header to the `type` parameter.
+ *
+ * This is useful to dynamically create a image file from a Resource Route.
+ * @example
+ * export let loader: LoaderFunction = async ({ request }) => {
+ *   return image(await takeScreenshot(), { type: "image/avif" });
+ * }
+ */
+function image(content, { type, ...init }) {
+    let headers = new Headers(init.headers);
+    if (!headers.has("Content-Type")) {
+        headers.set("Content-Type", type);
+    }
+    return new Response(content, {
+        ...init,
+        headers,
+    });
+}
+exports.image = image;

package.json

 {
   "name": "remix-utils",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "engines": {

README.md

@@ -42,2 +42,74 @@ # Remix Utils
 
+### CORS
+
+The CORS function let you implement CORS headers on your loaders and actions so you can use them as an API for other client-side applications.
+
+There are two main ways to use the `cors` function.
+
+1. Use it on each loader/action where you want to enable it.
+2. Use it globally on entry.server handleDataRequest export.
+
+If you want to use it on every loader/action, you can do it like this:
+
+```ts
+export let loader: LoaderFunction = async ({ request }) => {
+  let data = await getData(request);
+  let response = json<LoaderData>(data);
+  return await cors(request, response);
+};
+```
+
+You could also do the `json` and `cors` call in one line.
+
+```ts
+export let loader: LoaderFunction = async ({ request }) => {
+  let data = await getData(request);
+  return await cors(request, json<LoaderData>(data));
+};
+```
+
+And because `cors` mutates the response, you can also call it and later return.
+
+```ts
+export let loader: LoaderFunction = async ({ request }) => {
+  let data = await getData(request);
+  let response = json<LoaderData>(data);
+  await cors(request, response); // this mutates the Response object
+  return response; // so you can return it here
+};
+```
+
+If you want to setup it globally once, you can do it like this in `entry.server`
+
+```ts
+export let handleDataRequest: HandleDataRequestFunction = async (
+  response,
+  { request }
+) => {
+  return await cors(request, response);
+};
+```
+
+#### Options
+
+Additionally, the `cors` function accepts a `options` object as a third optional argument. These are the options.
+
+- `origin`: Configures the **Access-Control-Allow-Origin** CORS header.
+  Possible values are:
+  - `true`: Enable CORS for any origin (same as "\*")
+  - `false`: Don't setup CORS
+  - `string`: Set to a specific origin, if set to "\*" it will allow any origin
+  - `RegExp`: Set to a RegExp to match against the origin
+  - `Array<string | RegExp>`: Set to an array of origins to match against the
+    string or RegExp
+  - `Function`: Set to a function that will be called with the request origin
+    and should return a boolean indicating if the origin is allowed or not.
+    The default value is `true`.
+- `methods`: Configures the **Access-Control-Allow-Methods** CORS header.
+  The default value is `["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"]`.
+- `allowedHeaders`: Configures the **Access-Control-Allow-Headers** CORS header.
+- `exposedHeaders`: Configures the **Access-Control-Expose-Headers** CORS header.
+- `credentials`: Configures the **Access-Control-Allow-Credentials** CORS header.
+- `maxAge`: Configures the **Access-Control-Max-Age** CORS header.
+
 ### CSRF
@@ -44,0 +116,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

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

Improved metrics

Total package byte prevSize

149445

increased by20.7%

Number of package files

86

increased by4.88%

Lines of code

3154

increased by25.86%

Number of lines in readme file

836

increased by9.42%

No dependency changes