npm - remix - Versions diffs - 3.0.0-beta.0 → 3.0.0-beta.2 - Mend

remix 3.0.0-beta.0 → 3.0.0-beta.2

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.

Files changed (88) hide show

package/dist/fetch-router.d.ts +7 -0
package/dist/fetch-router.d.ts.map +1 -1
package/dist/node-tsx/load-module.d.ts +2 -0
package/dist/node-tsx/load-module.d.ts.map +1 -0
package/dist/node-tsx/load-module.js +2 -0
package/dist/node-tsx.d.ts +3 -0
package/dist/node-tsx.d.ts.map +1 -0
package/{src/node-serve.ts → dist/node-tsx.js} +2 -1
package/dist/render-middleware.d.ts +2 -0
package/dist/render-middleware.d.ts.map +1 -0
package/dist/render-middleware.js +2 -0
package/dist/route-pattern/href.d.ts +2 -0
package/dist/route-pattern/href.d.ts.map +1 -0
package/dist/route-pattern/href.js +2 -0
package/dist/route-pattern/join.d.ts +2 -0
package/dist/route-pattern/join.d.ts.map +1 -0
package/dist/route-pattern/join.js +2 -0
package/dist/route-pattern/match.d.ts +2 -0
package/dist/route-pattern/match.d.ts.map +1 -0
package/dist/route-pattern/match.js +2 -0
package/package.json +158 -44
package/src/assert/README.md +109 -0
package/src/assets/README.md +539 -0
package/src/async-context-middleware/README.md +100 -0
package/src/auth/README.md +445 -0
package/src/auth-middleware/README.md +246 -0
package/src/cli/README.md +78 -0
package/src/compression-middleware/README.md +176 -0
package/src/cookie/README.md +106 -0
package/src/cop-middleware/README.md +117 -0
package/src/cors-middleware/README.md +174 -0
package/src/csrf-middleware/README.md +99 -0
package/src/data-schema/README.md +422 -0
package/src/data-table/README.md +552 -0
package/src/data-table-mysql/README.md +97 -0
package/src/data-table-postgres/README.md +74 -0
package/src/data-table-sqlite/README.md +84 -0
package/src/fetch-proxy/README.md +46 -0
package/src/fetch-router/README.md +902 -0
package/src/fetch-router.ts +7 -0
package/src/file-storage/README.md +57 -0
package/src/file-storage-s3/README.md +47 -0
package/src/form-data-middleware/README.md +109 -0
package/src/form-data-parser/README.md +160 -0
package/src/fs/README.md +60 -0
package/src/headers/README.md +629 -0
package/src/html-template/README.md +101 -0
package/src/lazy-file/README.md +109 -0
package/src/logger-middleware/README.md +132 -0
package/src/method-override-middleware/README.md +71 -0
package/src/mime/README.md +110 -0
package/src/multipart-parser/README.md +241 -0
package/src/node-fetch-server/README.md +352 -0
package/src/node-tsx/README.md +79 -0
package/src/node-tsx/load-module.ts +2 -0
package/{dist/node-serve.js → src/node-tsx.ts} +2 -1
package/src/render-middleware/README.md +99 -0
package/src/render-middleware.ts +2 -0
package/src/route-pattern/README.md +291 -0
package/src/route-pattern/href.ts +2 -0
package/src/route-pattern/join.ts +2 -0
package/src/route-pattern/match.ts +2 -0
package/src/session/README.md +171 -0
package/src/session-middleware/README.md +109 -0
package/src/session-storage-memcache/README.md +37 -0
package/src/session-storage-redis/README.md +37 -0
package/src/static-middleware/README.md +89 -0
package/src/tar-parser/README.md +74 -0
package/src/terminal/README.md +92 -0
package/src/test/README.md +430 -0
package/src/ui/README.md +219 -0
package/src/ui/accordion/README.md +166 -0
package/src/ui/anchor/README.md +153 -0
package/src/ui/animation/README.md +316 -0
package/src/ui/breadcrumbs/README.md +55 -0
package/src/ui/button/README.md +44 -0
package/src/ui/combobox/README.md +145 -0
package/src/ui/glyph/README.md +72 -0
package/src/ui/listbox/README.md +115 -0
package/src/ui/menu/README.md +96 -0
package/src/ui/popover/README.md +122 -0
package/src/ui/scroll-lock/README.md +33 -0
package/src/ui/select/README.md +107 -0
package/src/ui/server/README.md +90 -0
package/src/ui/test/README.md +107 -0
package/src/ui/theme/README.md +103 -0
package/dist/node-serve.d.ts +0 -2
package/dist/node-serve.d.ts.map +0 -1

package/src/html-template/README.md ADDED Viewed

@@ -0,0 +1,101 @@
+# html-template
+Safe HTML template literals for Remix. `html-template` automatically escapes interpolated values to prevent XSS while still supporting explicit trusted HTML insertion.
+## Features
+- **Automatic HTML escaping** - All interpolated values are escaped by default
+- **Explicit raw HTML** - Use `html.raw` when you need unescaped HTML from trusted sources
+- **Composable** - SafeHtml values can be nested without double-escaping
+- **Type-safe** - Full TypeScript support with branded types
+- **Zero dependencies** - Lightweight and self-contained
+- **Runtime agnostic** - Works in Node.js, Bun, Deno, browsers, and edge runtimes
+## Installation
+```sh
+npm i remix
+```
+## Usage
+```ts
+import { html } from 'remix/html-template'
+let userInput = '<script>alert("XSS")</script>'
+let greeting = html`<h1>Hello ${userInput}!</h1>`
+console.log(String(greeting))
+// Output: <h1>Hello &lt;script&gt;alert("XSS")&lt;/script&gt;!</h1>
+```
+By default, all interpolated values are automatically escaped to prevent XSS attacks.
+If you have trusted HTML that should not be escaped, use `html.raw`:
+```ts
+import { html } from 'remix/html-template'
+let trustedIcon = '<svg>...</svg>'
+let button = html.raw`<button>${trustedIcon} Click me</button>`
+console.log(String(button))
+// => <button><svg>...</svg> Click me</button>
+```
+**Warning**: Only use `html.raw` with content you trust. Never use it with user input.
+### Composing HTML Fragments
+SafeHtml values can be nested without double-escaping:
+```ts
+import { html } from 'remix/html-template'
+let title = html`<h1>My Title</h1>`
+let content = html`<p>Some content with ${userInput}</p>`
+let page = html`
+  <!doctype html>
+  <html>
+    <body>
+      ${title} ${content}
+    </body>
+  </html>
+`
+```
+### Working with Arrays
+You can interpolate arrays of values, which will be flattened and joined:
+```ts
+import { html } from 'remix/html-template'
+let items = ['Apple', 'Banana', 'Cherry']
+let list = html`
+  <ul>
+    ${items.map((item) => html`<li>${item}</li>`)}
+  </ul>
+`
+```
+### Conditional Rendering
+Use `null` or `undefined` to render nothing:
+```ts
+import { html } from 'remix/html-template'
+let showError = false
+let errorMessage = 'Something went wrong'
+let page = html`<div>${showError ? html`<div class="error">${errorMessage}</div>` : null}</div>`
+```
+## Related Packages
+- [`remix/router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - HTTP router that works great with html-template
+## License
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/lazy-file/README.md ADDED Viewed

@@ -0,0 +1,109 @@
+# lazy-file
+A lazy, streaming `Blob`/`File` implementation for JavaScript.
+It allows you to easily create [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)-like and [File](https://developer.mozilla.org/en-US/docs/Web/API/File)-like objects that defer reading their contents until needed, which is ideal for situations where a file's contents do not fit in memory all at once. When file contents are read, they are streamed to avoid buffering.
+## Features
+- **Deferred Loading** - Blob/file contents loaded on demand to minimize memory usage
+- **Familiar Interface** - `LazyBlob` and `LazyFile` implement the same interface as native `Blob` and `File`
+- **Easy Conversion** - Convert to native `ReadableStream` with `.stream()`, or to native `Blob`/`File` with `.toBlob()` and `.toFile()`
+- **Standard Constructors** - Accepts all the same content types as the original [`Blob()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) and [`File()`](https://developer.mozilla.org/en-US/docs/Web/API/File/File) constructors
+- **Slice Support** - Supports [`Blob.slice()`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice), even on streaming content
+## Why You Need This
+JavaScript's [File API](https://developer.mozilla.org/en-US/docs/Web/API/File) is useful, but it's not a great fit for streaming server environments where you don't want to buffer file contents. In particular, [`the File() constructor`](https://developer.mozilla.org/en-US/docs/Web/API/File/File) requires the contents of a file to be supplied up front when the object is first created, like this:
+```ts
+let file = new File(['hello world'], 'hello.txt', { type: 'text/plain' })
+```
+A `LazyFile` improves this model by accepting an additional content type in its constructor: `LazyContent`.
+```ts
+let lazyContent: LazyContent = {
+  /* See below for usage */
+}
+let lazyFile = new LazyFile(lazyContent, 'hello.txt', { type: 'text/plain' })
+```
+All other `File` functionality works as you'd expect.
+## Installation
+```sh
+npm i remix
+```
+## Usage
+The low-level API can be used to create a `LazyFile` that streams content from anywhere:
+```ts
+import { type LazyContent, LazyFile } from 'remix/lazy-file'
+let content: LazyContent = {
+  // The total length of this file in bytes.
+  byteLength: 100000,
+  // A function that provides a stream of data for the file contents,
+  // beginning at the `start` index and ending at `end`.
+  stream(start, end) {
+    // ... read the file contents from somewhere and return a ReadableStream
+    return new ReadableStream({
+      start(controller) {
+        controller.enqueue('X'.repeat(100000).slice(start, end))
+        controller.close()
+      },
+    })
+  },
+}
+let lazyFile = new LazyFile(content, 'example.txt', { type: 'text/plain' })
+await lazyFile.arrayBuffer() // ArrayBuffer of the file's content
+lazyFile.name // "example.txt"
+lazyFile.type // "text/plain"
+```
+All file contents are read on-demand and nothing is ever buffered unless you explicitly call `.toFile()` or `.toBlob()`.
+### Streaming Content
+Use `.stream()` to get a `ReadableStream` for `Response` and other streaming APIs:
+```ts
+import { openLazyFile } from 'remix/fs'
+let lazyFile = openLazyFile('./large-video.mp4')
+let response = new Response(lazyFile.stream(), {
+  headers: {
+    'Content-Type': lazyFile.type,
+    'Content-Length': String(lazyFile.size),
+  },
+})
+```
+### Converting to Native File/Blob
+For non-streaming APIs that require a complete `File` or `Blob` (e.g. `FormData`), use `.toFile()` or `.toBlob()`.
+```ts
+let lazyFile = openLazyFile('./document.pdf')
+let realFile = await lazyFile.toFile()
+let formData = new FormData()
+formData.append('document', realFile)
+```
+> **Note:** `.toFile()` and `.toBlob()` read the entire file into memory. Only use these for non-streaming APIs that require a complete `File` or `Blob` (e.g. `FormData`). Always prefer `.stream()` if possible.
+## Related Packages
+- [`fs`](https://github.com/remix-run/remix/tree/main/packages/fs) - Filesystem utilities for reading and writing files using the Web `File` API
+- [`file-storage`](https://github.com/remix-run/remix/tree/main/packages/file-storage) - Storage abstraction for files on disk or in memory
+## License
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/logger-middleware/README.md ADDED Viewed

@@ -0,0 +1,132 @@
+# logger-middleware
+HTTP request/response logging middleware for Remix. It logs request metadata and response details with configurable output formats, and exposes the configured log function on request context.
+## Features
+- **Request/Response Logging** - Logs method, path, status, and response metadata
+- **Context Logger** - Exposes `context.logger` (or `context.get(Logger)`)
+- **Token-Based Formatting** - Customize log output with built-in placeholders
+- **Structured Timing Data** - Includes request duration and timestamps
+- **Colorized Output** - Highlights method, status, duration, and content length in TTY output
+## Installation
+```sh
+npm i remix
+```
+## Usage
+```ts
+import { createRouter } from 'remix/router'
+import { logger } from 'remix/middleware/logger'
+let router = createRouter({
+  middleware: [logger()],
+})
+router.get('/users/:id', (context) => {
+  context.logger(`Loading user ${context.params.id}`)
+  return Response.json(loadUser(context.params.id))
+})
+// Logs: [19/Nov/2025:14:32:10 -0800] GET /users/123 200 1234
+```
+Use `context.logger(message)` (or `context.get(Logger)(message)`) for app logs that should use the configured logger.
+### Custom Format
+You can use the `format` option to customize the log format. The following tokens are available:
+- `%date` - Date and time in Apache/nginx format (dd/Mon/yyyy:HH:mm:ss ±zzzz)
+- `%dateISO` - Date and time in ISO format
+- `%duration` - Request duration in milliseconds
+- `%contentLength` - Response Content-Length header
+- `%contentType` - Response Content-Type header
+- `%host` - Request URL host
+- `%hostname` - Request URL hostname
+- `%method` - Request method
+- `%path` - Request pathname + search
+- `%pathname` - Request pathname
+- `%port` - Request port
+- `%query` - Request query string (search)
+- `%referer` - Request Referer header
+- `%search` - Request search string
+- `%status` - Response status code
+- `%statusText` - Response status text
+- `%url` - Full request URL
+- `%userAgent` - Request User-Agent header
+```ts
+let router = createRouter({
+  middleware: [
+    logger({
+      format: '%method %path - %status (%duration ms)',
+    }),
+  ],
+})
+// Logs: GET /users/123 - 200 (42 ms)
+```
+For Apache-style combined log format, you can use the following format:
+```ts
+let router = createRouter({
+  middleware: [
+    logger({
+      format: '%host - - [%date] "%method %path" %status %contentLength "%referer" "%userAgent"',
+    }),
+  ],
+})
+```
+### Colorized Output
+Logger output automatically uses ANSI colors for high-signal tokens when terminal color detection allows them. Set `colors` to `false` to disable colorized output or `true` to force it on. When the `process` global is defined, color detection respects `CI`, `NO_COLOR`, `FORCE_COLOR`, `TERM=dumb`, and TTY output streams.
+```ts
+let router = createRouter({
+  middleware: [
+    logger({
+      colors: false,
+    }),
+  ],
+})
+```
+The following tokens are colorized when colors are enabled:
+- `%method`
+- `%status`
+- `%duration`
+- `%contentLength`
+### Custom Logger
+You can use a custom logger to write logs to a file or other stream.
+```ts
+import { createWriteStream } from 'node:fs'
+let logStream = createWriteStream('access.log', { flags: 'a' })
+let router = createRouter({
+  middleware: [
+    logger({
+      log(message) {
+        logStream.write(message + '\n')
+      },
+    }),
+  ],
+})
+```
+## Related Packages
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Router for the web Fetch API
+## License
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/method-override-middleware/README.md ADDED Viewed

@@ -0,0 +1,71 @@
+# method-override-middleware
+Method override middleware for Remix. It allows HTML forms to simulate `PUT`, `PATCH`, and `DELETE` requests using a hidden form field.
+## Features
+- **Form Method Overrides** - Translate posted form fields into request methods
+- **HTML Form Friendly** - Supports REST-style routes from standard browser forms
+- **Configurable Field Name** - Choose a custom override field key
+## Installation
+```sh
+npm i remix
+```
+## Usage
+This middleware runs after [the `formData` middleware](https://github.com/remix-run/remix/tree/main/packages/form-data-middleware) and updates the request context's `context.method` with the value of the method override field. This is useful for simulating RESTful API request methods like PUT and DELETE using HTML forms.
+```ts
+import { createRouter } from 'remix/router'
+import { formData } from 'remix/middleware/form-data'
+import { methodOverride } from 'remix/middleware/method-override'
+let router = createRouter({
+  // methodOverride must come AFTER formData middleware
+  middleware: [formData(), methodOverride()],
+})
+router.delete('/users/:id', async (context) => {
+  let userId = context.params.id
+  // Delete user logic...
+  return new Response('User deleted')
+})
+```
+In your HTML form:
+```html
+<form method="POST" action="/users/123">
+  <input type="hidden" name="_method" value="DELETE" />
+  <button type="submit">Delete User</button>
+</form>
+```
+### Custom Field Name
+You can customize the name of the method override field by passing a `fieldName` option to the `methodOverride()` middleware.
+```ts
+let router = createRouter({
+  middleware: [formData(), methodOverride({ fieldName: '__method__' })],
+})
+```
+```html
+<form method="POST" action="/users/123">
+  <input type="hidden" name="__method__" value="PUT" />
+  <button type="submit">Update User</button>
+</form>
+```
+## Related Packages
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Router for the web Fetch API
+- [`form-data-middleware`](https://github.com/remix-run/remix/tree/main/packages/form-data-middleware) - Required for parsing form data
+## License
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/src/mime/README.md ADDED Viewed

@@ -0,0 +1,110 @@
+# mime
+MIME type detection and content-type helpers for Remix. This package maps extensions to MIME types and provides utilities for charset and compressibility checks.
+## Features
+- **MIME Detection** - Detect MIME types from extensions and filenames
+- **Content-Type Helpers** - Build `Content-Type` values with charset handling
+- **Compression Signals** - Check whether a media type is likely compressible
+- **Generated Data** - Built from [mime-db](https://github.com/jshttp/mime-db)
+## Installation
+```sh
+npm i remix
+```
+## Usage
+### `detectMimeType(extension)`
+Detects the MIME type for a given file extension or filename.
+```ts
+import { detectMimeType } from 'remix/mime'
+detectMimeType('txt') // 'text/plain'
+detectMimeType('.txt') // 'text/plain'
+detectMimeType('file.txt') // 'text/plain'
+detectMimeType('path/to/file.txt') // 'text/plain'
+detectMimeType('unknown') // undefined
+```
+### `detectContentType(extension)`
+Detects the Content-Type header value for a given file extension or filename, including `charset` for text-based types. See [`mimeTypeToContentType`](#mimetypetocontenttypemimetype) for charset logic.
+```ts
+import { detectContentType } from 'remix/mime'
+detectContentType('css') // 'text/css; charset=utf-8'
+detectContentType('.json') // 'application/json; charset=utf-8'
+detectContentType('image.png') // 'image/png'
+detectContentType('path/to/file.unknown') // undefined
+```
+### `isCompressibleMimeType(mimeType)`
+Checks if a MIME type is known to be compressible.
+```ts
+import { isCompressibleMimeType } from 'remix/mime'
+isCompressibleMimeType('text/html') // true
+isCompressibleMimeType('application/json') // true
+isCompressibleMimeType('image/png') // false
+isCompressibleMimeType('video/mp4') // false
+```
+For convenience, the function also accepts a full Content-Type header value:
+```ts
+import { isCompressibleMimeType } from 'remix/mime'
+isCompressibleMimeType('text/html; charset=utf-8') // true
+isCompressibleMimeType('application/json; charset=utf-8') // true
+isCompressibleMimeType('image/png; charset=utf-8') // false
+isCompressibleMimeType('video/mp4; charset=utf-8') // false
+```
+### `mimeTypeToContentType(mimeType)`
+Converts a MIME type to a Content-Type header value, adding `; charset=utf-8` to text-based MIME types: `text/*` (except `text/xml` which has built-in encoding declarations), `application/json`, `application/javascript`, and all `+json` suffixed types. All other types are returned unchanged.
+```ts
+import { mimeTypeToContentType } from 'remix/mime'
+mimeTypeToContentType('text/css') // 'text/css; charset=utf-8'
+mimeTypeToContentType('application/json') // 'application/json; charset=utf-8'
+mimeTypeToContentType('application/ld+json') // 'application/ld+json; charset=utf-8'
+mimeTypeToContentType('image/png') // 'image/png'
+```
+### `defineMimeType(definition)`
+Registers or overrides a MIME type for one or more file extensions.
+```ts
+import { defineMimeType } from 'remix/mime'
+defineMimeType({
+  extensions: ['myformat'],
+  mimeType: 'application/x-myformat',
+})
+```
+You can also optionally configure the charset and whether the MIME type is compressible:
+```ts
+defineMimeType({
+  extensions: ['myformat'],
+  mimeType: 'application/x-myformat',
+  compressible: true,
+  charset: 'utf-8',
+})
+```
+## License
+MIT