remix 3.0.0-rc.4 → 3.0.0
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.
- package/INDEX.md +6 -21
- package/README.md +1 -1
- package/dist/component/dev/refresh.d.ts +2 -0
- package/dist/component/dev/refresh.d.ts.map +1 -0
- package/dist/{ui → component}/dev/refresh.js +1 -1
- package/dist/component/jsx-dev-runtime.d.ts +2 -0
- package/dist/component/jsx-dev-runtime.d.ts.map +1 -0
- package/dist/{ui → component}/jsx-dev-runtime.js +1 -1
- package/dist/component/jsx-runtime.d.ts +2 -0
- package/dist/component/jsx-runtime.d.ts.map +1 -0
- package/dist/{ui → component}/jsx-runtime.js +1 -1
- package/dist/component/server.d.ts +2 -0
- package/dist/component/server.d.ts.map +1 -0
- package/dist/{ui → component}/server.js +1 -1
- package/dist/component/test.d.ts +2 -0
- package/dist/component/test.d.ts.map +1 -0
- package/dist/{ui → component}/test.js +1 -1
- package/dist/component-hmr/assets.d.ts +2 -0
- package/dist/component-hmr/assets.d.ts.map +1 -0
- package/dist/{ui-hmr.js → component-hmr/assets.js} +1 -1
- package/dist/component-hmr/node.d.ts +3 -0
- package/dist/component-hmr/node.d.ts.map +1 -0
- package/dist/{ui-hmr → component-hmr}/node.js +1 -1
- package/dist/component-hmr/runtime/browser.d.ts +2 -0
- package/dist/component-hmr/runtime/browser.d.ts.map +1 -0
- package/dist/{ui-hmr → component-hmr}/runtime/browser.js +1 -1
- package/dist/component-hmr/runtime/server.d.ts +2 -0
- package/dist/component-hmr/runtime/server.d.ts.map +1 -0
- package/dist/{ui-hmr → component-hmr}/runtime/server.js +1 -1
- package/dist/component-hmr.d.ts +2 -0
- package/dist/component-hmr.d.ts.map +1 -0
- package/dist/{ui-hmr/assets.js → component-hmr.js} +1 -1
- package/dist/component.d.ts +2 -0
- package/dist/component.d.ts.map +1 -0
- package/dist/{ui/anchor.js → component.js} +1 -1
- package/guides/01-start-here.md +20 -20
- package/guides/02-routing-and-controllers.md +1 -1
- package/guides/03-request-handling.md +1 -1
- package/guides/04-rendering-ui.md +41 -307
- package/guides/05-interactivity.md +42 -37
- package/guides/06-streaming-ui-with-frames.md +28 -70
- package/guides/07-animation.md +41 -35
- package/guides/08-data-and-validation.md +423 -27
- package/guides/09-forms-and-mutations.md +250 -25
- package/guides/13-testing.md +10 -10
- package/guides/14-cli-and-tooling.md +2 -2
- package/package.json +96 -180
- package/src/assets/README.md +12 -12
- package/src/cli/README.md +3 -3
- package/src/{ui → component}/README.md +31 -75
- package/src/{ui → component}/dev/refresh.ts +1 -1
- package/src/{ui → component}/jsx-dev-runtime.ts +1 -1
- package/src/{ui → component}/jsx-runtime.ts +1 -1
- package/src/{ui → component}/server/README.md +8 -8
- package/src/{ui → component}/server.ts +1 -1
- package/src/{ui → component}/test/README.md +6 -6
- package/src/{ui → component}/test.ts +1 -1
- package/src/{ui-hmr → component-hmr}/README.md +13 -13
- package/src/{ui-hmr → component-hmr}/assets.ts +1 -1
- package/src/{ui-hmr → component-hmr}/node.ts +1 -1
- package/src/{ui-hmr → component-hmr}/runtime/browser.ts +1 -1
- package/src/{ui-hmr → component-hmr}/runtime/server.ts +1 -1
- package/{dist/ui/accordion.js → src/component-hmr.ts} +1 -1
- package/{dist/ui/tabs.js → src/component.ts} +1 -1
- package/src/data-table/README.md +2 -1
- package/src/multiple-import-maps-polyfill/README.md +3 -3
- package/src/node-hmr/README.md +6 -6
- package/src/render-middleware/README.md +5 -5
- package/src/spa/README.md +4 -4
- package/src/test/README.md +4 -4
- package/dist/ui/accordion/primitives.d.ts +0 -2
- package/dist/ui/accordion/primitives.d.ts.map +0 -1
- package/dist/ui/accordion/primitives.js +0 -2
- package/dist/ui/accordion.d.ts +0 -2
- package/dist/ui/accordion.d.ts.map +0 -1
- package/dist/ui/anchor.d.ts +0 -2
- package/dist/ui/anchor.d.ts.map +0 -1
- package/dist/ui/animation.d.ts +0 -2
- package/dist/ui/animation.d.ts.map +0 -1
- package/dist/ui/animation.js +0 -2
- package/dist/ui/breadcrumbs.d.ts +0 -2
- package/dist/ui/breadcrumbs.d.ts.map +0 -1
- package/dist/ui/breadcrumbs.js +0 -2
- package/dist/ui/button.d.ts +0 -3
- package/dist/ui/button.d.ts.map +0 -1
- package/dist/ui/button.js +0 -3
- package/dist/ui/checkbox.d.ts +0 -3
- package/dist/ui/checkbox.d.ts.map +0 -1
- package/dist/ui/checkbox.js +0 -3
- package/dist/ui/combobox/primitives.d.ts +0 -2
- package/dist/ui/combobox/primitives.d.ts.map +0 -1
- package/dist/ui/combobox/primitives.js +0 -2
- package/dist/ui/combobox.d.ts +0 -2
- package/dist/ui/combobox.d.ts.map +0 -1
- package/dist/ui/combobox.js +0 -2
- package/dist/ui/dev/refresh.d.ts +0 -2
- package/dist/ui/dev/refresh.d.ts.map +0 -1
- package/dist/ui/input.d.ts +0 -3
- package/dist/ui/input.d.ts.map +0 -1
- package/dist/ui/input.js +0 -3
- package/dist/ui/jsx-dev-runtime.d.ts +0 -2
- package/dist/ui/jsx-dev-runtime.d.ts.map +0 -1
- package/dist/ui/jsx-runtime.d.ts +0 -2
- package/dist/ui/jsx-runtime.d.ts.map +0 -1
- package/dist/ui/listbox.d.ts +0 -2
- package/dist/ui/listbox.d.ts.map +0 -1
- package/dist/ui/listbox.js +0 -2
- package/dist/ui/menu/primitives.d.ts +0 -2
- package/dist/ui/menu/primitives.d.ts.map +0 -1
- package/dist/ui/menu/primitives.js +0 -2
- package/dist/ui/menu.d.ts +0 -2
- package/dist/ui/menu.d.ts.map +0 -1
- package/dist/ui/menu.js +0 -2
- package/dist/ui/popover.d.ts +0 -2
- package/dist/ui/popover.d.ts.map +0 -1
- package/dist/ui/popover.js +0 -2
- package/dist/ui/radio.d.ts +0 -3
- package/dist/ui/radio.d.ts.map +0 -1
- package/dist/ui/radio.js +0 -3
- package/dist/ui/select/primitives.d.ts +0 -2
- package/dist/ui/select/primitives.d.ts.map +0 -1
- package/dist/ui/select/primitives.js +0 -2
- package/dist/ui/select.d.ts +0 -2
- package/dist/ui/select.d.ts.map +0 -1
- package/dist/ui/select.js +0 -2
- package/dist/ui/server.d.ts +0 -2
- package/dist/ui/server.d.ts.map +0 -1
- package/dist/ui/tabs/primitives.d.ts +0 -2
- package/dist/ui/tabs/primitives.d.ts.map +0 -1
- package/dist/ui/tabs/primitives.js +0 -2
- package/dist/ui/tabs.d.ts +0 -2
- package/dist/ui/tabs.d.ts.map +0 -1
- package/dist/ui/test.d.ts +0 -2
- package/dist/ui/test.d.ts.map +0 -1
- package/dist/ui/toggle/primitives.d.ts +0 -2
- package/dist/ui/toggle/primitives.d.ts.map +0 -1
- package/dist/ui/toggle/primitives.js +0 -2
- package/dist/ui/toggle.d.ts +0 -3
- package/dist/ui/toggle.d.ts.map +0 -1
- package/dist/ui/toggle.js +0 -3
- package/dist/ui-hmr/assets.d.ts +0 -2
- package/dist/ui-hmr/assets.d.ts.map +0 -1
- package/dist/ui-hmr/node.d.ts +0 -3
- package/dist/ui-hmr/node.d.ts.map +0 -1
- package/dist/ui-hmr/runtime/browser.d.ts +0 -2
- package/dist/ui-hmr/runtime/browser.d.ts.map +0 -1
- package/dist/ui-hmr/runtime/server.d.ts +0 -2
- package/dist/ui-hmr/runtime/server.d.ts.map +0 -1
- package/dist/ui-hmr.d.ts +0 -2
- package/dist/ui-hmr.d.ts.map +0 -1
- package/dist/ui.d.ts +0 -2
- package/dist/ui.d.ts.map +0 -1
- package/dist/ui.js +0 -2
- package/src/ui/accordion/README.md +0 -202
- package/src/ui/accordion/primitives.ts +0 -2
- package/src/ui/accordion.ts +0 -2
- package/src/ui/anchor/README.md +0 -196
- package/src/ui/anchor.ts +0 -2
- package/src/ui/animation/README.md +0 -318
- package/src/ui/animation.ts +0 -2
- package/src/ui/breadcrumbs/README.md +0 -55
- package/src/ui/breadcrumbs.ts +0 -2
- package/src/ui/button/README.md +0 -44
- package/src/ui/button.ts +0 -3
- package/src/ui/checkbox/README.md +0 -59
- package/src/ui/checkbox.ts +0 -3
- package/src/ui/combobox/README.md +0 -194
- package/src/ui/combobox/primitives.ts +0 -2
- package/src/ui/combobox.ts +0 -2
- package/src/ui/input/README.md +0 -52
- package/src/ui/input.ts +0 -3
- package/src/ui/listbox/README.md +0 -83
- package/src/ui/listbox.ts +0 -2
- package/src/ui/menu/README.md +0 -161
- package/src/ui/menu/primitives.ts +0 -2
- package/src/ui/menu.ts +0 -2
- package/src/ui/popover/README.md +0 -103
- package/src/ui/popover.ts +0 -2
- package/src/ui/radio/README.md +0 -53
- package/src/ui/radio.ts +0 -3
- package/src/ui/select/README.md +0 -117
- package/src/ui/select/primitives.ts +0 -2
- package/src/ui/select.ts +0 -2
- package/src/ui/tabs/README.md +0 -141
- package/src/ui/tabs/primitives.ts +0 -2
- package/src/ui/tabs.ts +0 -2
- package/src/ui/toggle/README.md +0 -56
- package/src/ui/toggle/primitives.ts +0 -2
- package/src/ui/toggle.ts +0 -3
- package/src/ui-hmr.ts +0 -2
- package/src/ui.ts +0 -2
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# Server
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The component runtime can render to HTML on the server using two APIs:
|
|
4
4
|
|
|
5
5
|
- `renderToString` - Returns a complete HTML string. Simple, but buffers the entire response.
|
|
6
6
|
- `renderToStream` - Returns a `ReadableStream<Uint8Array>`. Sends the initial HTML immediately and streams frame content as it resolves.
|
|
7
7
|
|
|
8
|
-
Both are exported from `remix/
|
|
8
|
+
Both are exported from `remix/component/server`.
|
|
9
9
|
|
|
10
10
|
## renderToString
|
|
11
11
|
|
|
12
12
|
Renders a component tree to a complete HTML string. Use this when you need the full output before responding (e.g., generating static pages or embedding HTML in an email).
|
|
13
13
|
|
|
14
14
|
```tsx
|
|
15
|
-
import { renderToString } from 'remix/
|
|
15
|
+
import { renderToString } from 'remix/component/server'
|
|
16
16
|
|
|
17
17
|
let html = await renderToString(<App />)
|
|
18
18
|
```
|
|
@@ -22,7 +22,7 @@ let html = await renderToString(<App />)
|
|
|
22
22
|
Renders a component tree to a streaming response. The initial HTML is sent immediately. Any `<Frame>` components with a `fallback` prop will render the fallback first, then stream the resolved content as it becomes available.
|
|
23
23
|
|
|
24
24
|
```tsx
|
|
25
|
-
import { renderToStream } from 'remix/
|
|
25
|
+
import { renderToStream } from 'remix/component/server'
|
|
26
26
|
import { assetServer } from './assets.ts'
|
|
27
27
|
|
|
28
28
|
let stream = renderToStream(<App />, {
|
|
@@ -102,8 +102,8 @@ Use `<ImportMap>` when the document needs one initial import map containing both
|
|
|
102
102
|
Regular `<script type="importmap">` elements remain supported. The server leaves them unchanged and emits any additional client entry mappings separately, omitting entries already present in authored maps.
|
|
103
103
|
|
|
104
104
|
```tsx
|
|
105
|
-
import type { Handle, RemixNode } from 'remix/
|
|
106
|
-
import { ImportMap } from 'remix/
|
|
105
|
+
import type { Handle, RemixNode } from 'remix/component'
|
|
106
|
+
import { ImportMap } from 'remix/component/server'
|
|
107
107
|
|
|
108
108
|
function Document(handle: Handle<{ children: RemixNode }>) {
|
|
109
109
|
return () => (
|
|
@@ -119,5 +119,5 @@ function Document(handle: Handle<{ children: RemixNode }>) {
|
|
|
119
119
|
|
|
120
120
|
## See Also
|
|
121
121
|
|
|
122
|
-
- [Hydration](https://github.com/remix-run/remix/blob/main/packages/
|
|
123
|
-
- [Frames](https://github.com/remix-run/remix/blob/main/packages/
|
|
122
|
+
- [Hydration](https://github.com/remix-run/remix/blob/main/packages/component/docs/hydration.md) - Making server-rendered components interactive on the client
|
|
123
|
+
- [Frames](https://github.com/remix-run/remix/blob/main/packages/component/docs/frames.md) - Streaming partial server UI with `<Frame>`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component/server'
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# Test
|
|
2
2
|
|
|
3
|
-
Use `render` from `remix/
|
|
3
|
+
Use `render` from `remix/component/test` as the primary way to test components in a live browser through a `remix/test` "browser" test (`*.test.browser.tsx`). It creates a DOM container, renders and flushes the initial component tree, and returns helpers for querying, interacting with, and cleaning up the rendered output.
|
|
4
4
|
|
|
5
5
|
## Rendering Components
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
8
|
import { expect } from 'remix/assert'
|
|
9
9
|
import { describe, it } from 'remix/test'
|
|
10
|
-
import { on, type Handle } from 'remix/
|
|
11
|
-
import { render } from 'remix/
|
|
10
|
+
import { on, type Handle } from 'remix/component'
|
|
11
|
+
import { render } from 'remix/component/test'
|
|
12
12
|
|
|
13
13
|
function Counter(handle: Handle) {
|
|
14
14
|
let count = 0
|
|
@@ -164,7 +164,7 @@ cleanup()
|
|
|
164
164
|
You can also create and manage a root directly:
|
|
165
165
|
|
|
166
166
|
```tsx
|
|
167
|
-
import { createRoot } from 'remix/
|
|
167
|
+
import { createRoot } from 'remix/component'
|
|
168
168
|
|
|
169
169
|
let container = document.createElement('div')
|
|
170
170
|
let root = createRoot(container)
|
|
@@ -194,5 +194,5 @@ expect(container.textContent).toBe('Expected data')
|
|
|
194
194
|
|
|
195
195
|
## See Also
|
|
196
196
|
|
|
197
|
-
- [Getting Started](https://github.com/remix-run/remix/blob/main/packages/
|
|
198
|
-
- [Handle API](https://github.com/remix-run/remix/blob/main/packages/
|
|
197
|
+
- [Getting Started](https://github.com/remix-run/remix/blob/main/packages/component/docs/getting-started.md) - Root methods reference
|
|
198
|
+
- [Handle API](https://github.com/remix-run/remix/blob/main/packages/component/docs/handle.md) - `handle.queueTask()` behavior
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component/test'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
#
|
|
1
|
+
# component-hmr
|
|
2
2
|
|
|
3
|
-
Hot module replacement transforms for Remix
|
|
3
|
+
Hot module replacement transforms for Remix components, with integrations for Node and `remix/assets`.
|
|
4
4
|
|
|
5
|
-
`
|
|
5
|
+
`component-hmr` rewrites supported Remix component modules so they can use the standard `import.meta.hot` APIs provided by packages like [`assets`](../assets/README.md) and [`node-hmr`](../node-hmr/README.md).
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
@@ -19,17 +19,17 @@ npm i remix
|
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
22
|
-
Use `remix/
|
|
22
|
+
Use `remix/component-hmr/node` as a Node import hook for server modules:
|
|
23
23
|
|
|
24
24
|
```sh
|
|
25
|
-
node --import remix/node-tsx --import remix/
|
|
25
|
+
node --import remix/node-tsx --import remix/component-hmr/node ./server.ts
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
Use `
|
|
28
|
+
Use `componentHmr()` from `remix/component-hmr/assets` with `remix/assets` for browser modules:
|
|
29
29
|
|
|
30
30
|
```ts
|
|
31
31
|
import { createAssetServer } from 'remix/assets'
|
|
32
|
-
import {
|
|
32
|
+
import { componentHmr } from 'remix/component-hmr/assets'
|
|
33
33
|
|
|
34
34
|
let isDevelopment = process.env.NODE_ENV === 'development'
|
|
35
35
|
|
|
@@ -45,7 +45,7 @@ let assetServer = createAssetServer({
|
|
|
45
45
|
}
|
|
46
46
|
: undefined,
|
|
47
47
|
scripts: {
|
|
48
|
-
loaders: isDevelopment ? [
|
|
48
|
+
loaders: isDevelopment ? [componentHmr()] : undefined,
|
|
49
49
|
},
|
|
50
50
|
watch: isDevelopment,
|
|
51
51
|
})
|
|
@@ -58,7 +58,7 @@ HMR appends mappings for updated modules to the document in additional `<script
|
|
|
58
58
|
Use the direct transform APIs when you are writing your own loader, Node module hooks, or build integration.
|
|
59
59
|
|
|
60
60
|
```ts
|
|
61
|
-
import { transformComponentsForBrowser } from 'remix/
|
|
61
|
+
import { transformComponentsForBrowser } from 'remix/component-hmr'
|
|
62
62
|
|
|
63
63
|
let result = transformComponentsForBrowser(source, {
|
|
64
64
|
importSource: 'remix',
|
|
@@ -70,10 +70,10 @@ if (result.transformed) {
|
|
|
70
70
|
}
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
`transformComponentsForBrowser(source, options)` rewrites browser component modules and emits `import.meta.hot.accept()` code for browser updates. The direct transform uses `importSource` to derive imports for the
|
|
73
|
+
`transformComponentsForBrowser(source, options)` rewrites browser component modules and emits `import.meta.hot.accept()` code for browser updates. The direct transform uses `importSource` to derive imports for the component refresh runtime and browser HMR runtime.
|
|
74
74
|
|
|
75
75
|
```ts
|
|
76
|
-
import { transformComponentsForServer } from 'remix/
|
|
76
|
+
import { transformComponentsForServer } from 'remix/component-hmr'
|
|
77
77
|
|
|
78
78
|
let result = transformComponentsForServer(source, {
|
|
79
79
|
importSource: 'remix',
|
|
@@ -110,13 +110,13 @@ transformComponentsForServer(source, {
|
|
|
110
110
|
})
|
|
111
111
|
```
|
|
112
112
|
|
|
113
|
-
`importSource: 'remix'` generates imports from `remix/
|
|
113
|
+
`importSource: 'remix'` generates imports from `remix/component` and `remix/component-hmr`. `importSource: '@remix-run'` generates imports from `@remix-run/component` and `@remix-run/component-hmr`. Custom import sources follow the same nested import layout.
|
|
114
114
|
|
|
115
115
|
## Related Packages
|
|
116
116
|
|
|
117
117
|
- [`assets`](../assets/README.md) - Runs loaders while compiling assets
|
|
118
118
|
- [`node-hmr`](../node-hmr/README.md) - Provides the server-side `import.meta.hot` runtime
|
|
119
|
-
- [`
|
|
119
|
+
- [`component`](../component/README.md) - Component APIs transformed by `component-hmr`
|
|
120
120
|
|
|
121
121
|
## License
|
|
122
122
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component-hmr/assets'
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component-hmr/runtime/browser'
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component-hmr/runtime/server'
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component-hmr'
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// IMPORTANT: This file is auto-generated, please do not edit manually.
|
|
2
|
-
export * from '@remix-run/
|
|
2
|
+
export * from '@remix-run/component'
|
package/src/data-table/README.md
CHANGED
|
@@ -360,7 +360,8 @@ app/
|
|
|
360
360
|
```
|
|
361
361
|
|
|
362
362
|
- Keep migration directories in one parent directory (for example `app/db/migrations`).
|
|
363
|
-
- Each directory is named
|
|
363
|
+
- Each directory is named `<digits>_<slug>`, such as `0001_create_users` or `20260228090000_create_users` (`YYYYMMDDHHmmss`). Prefixes must contain 1 to 64 digits.
|
|
364
|
+
- All prefixes in the same migration directory must have the same number of digits so string sorting preserves numeric order (for example `0001`, `0002`, `0010`).
|
|
364
365
|
- `up.sql` is required. `down.sql` is optional (omit for irreversible migrations).
|
|
365
366
|
- Scripts may contain multiple statements. `id` and `name` are inferred from the directory name.
|
|
366
367
|
|
|
@@ -34,7 +34,7 @@ feature.openSearch()
|
|
|
34
34
|
|
|
35
35
|
`importModule` uses native `import()` when the browser supports multiple import maps. In other browsers, it loads the module through the polyfill using every import map currently installed in the document.
|
|
36
36
|
|
|
37
|
-
Use `detectMultipleImportMapSupport` and `preloadShim` when an integration also manages module preloads. For example, configure
|
|
37
|
+
Use `detectMultipleImportMapSupport` and `preloadShim` when an integration also manages module preloads. For example, configure the component runtime to load client entries discovered during navigation:
|
|
38
38
|
|
|
39
39
|
```ts
|
|
40
40
|
import {
|
|
@@ -42,7 +42,7 @@ import {
|
|
|
42
42
|
importModule,
|
|
43
43
|
preloadShim,
|
|
44
44
|
} from 'remix/multiple-import-maps-polyfill'
|
|
45
|
-
import { run } from 'remix/
|
|
45
|
+
import { run } from 'remix/component'
|
|
46
46
|
|
|
47
47
|
run({
|
|
48
48
|
async loadModule(moduleUrl, exportName) {
|
|
@@ -100,7 +100,7 @@ The module importer and its dependencies must be available through the document'
|
|
|
100
100
|
## Related Packages
|
|
101
101
|
|
|
102
102
|
- [`assets`](../assets/README.md) - Compiles and serves browser assets
|
|
103
|
-
- [`
|
|
103
|
+
- [`component`](../component/README.md) - Loads client entries discovered during navigation
|
|
104
104
|
|
|
105
105
|
## License
|
|
106
106
|
|
package/src/node-hmr/README.md
CHANGED
|
@@ -18,14 +18,14 @@ npm i remix
|
|
|
18
18
|
|
|
19
19
|
## Usage
|
|
20
20
|
|
|
21
|
-
Create a development script that starts your app server with HMR enabled, along with any additional Node args, such as the `--import` flag to provide [Node module customization hooks](https://nodejs.org/api/module.html#customization-hooks) for [JSX syntax support](../node-tsx/README.md) and [Remix component HMR](../
|
|
21
|
+
Create a development script that starts your app server with HMR enabled, along with any additional Node args, such as the `--import` flag to provide [Node module customization hooks](https://nodejs.org/api/module.html#customization-hooks) for [JSX syntax support](../node-tsx/README.md) and [Remix component HMR](../component-hmr/README.md):
|
|
22
22
|
|
|
23
23
|
```ts
|
|
24
24
|
// hmr.ts
|
|
25
25
|
import { run } from 'remix/node-hmr'
|
|
26
26
|
|
|
27
27
|
run('./server.ts', {
|
|
28
|
-
nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/
|
|
28
|
+
nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/component-hmr/node'],
|
|
29
29
|
watch: {
|
|
30
30
|
ignore: ['**/node_modules/**'],
|
|
31
31
|
},
|
|
@@ -161,7 +161,7 @@ You can optionally provide an array of glob patterns to the `watch.ignore` optio
|
|
|
161
161
|
import { run } from 'remix/node-hmr'
|
|
162
162
|
|
|
163
163
|
run('./server.ts', {
|
|
164
|
-
nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/
|
|
164
|
+
nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/component-hmr/node'],
|
|
165
165
|
watch: {
|
|
166
166
|
ignore: ['**/node_modules/**'],
|
|
167
167
|
},
|
|
@@ -174,7 +174,7 @@ You can also configure polling behavior. Polling defaults to `true` on Windows a
|
|
|
174
174
|
import { run } from 'remix/node-hmr'
|
|
175
175
|
|
|
176
176
|
run('./server.ts', {
|
|
177
|
-
nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/
|
|
177
|
+
nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/component-hmr/node'],
|
|
178
178
|
watch: {
|
|
179
179
|
poll: true,
|
|
180
180
|
pollInterval: 100,
|
|
@@ -184,7 +184,7 @@ run('./server.ts', {
|
|
|
184
184
|
|
|
185
185
|
## `import.meta.hot`
|
|
186
186
|
|
|
187
|
-
The `import.meta.hot` API provided by `node-hmr` is a small runtime contract for modules that can handle updates without restarting the process. It is primarily intended for transforms like [remix/
|
|
187
|
+
The `import.meta.hot` API provided by `node-hmr` is a small runtime contract for modules that can handle updates without restarting the process. It is primarily intended for transforms like [remix/component-hmr](../component-hmr/README.md), but it can also be used directly.
|
|
188
188
|
|
|
189
189
|
To type `import.meta.hot`, add the HMR types to your TypeScript config:
|
|
190
190
|
|
|
@@ -308,7 +308,7 @@ if (import.meta.hot) {
|
|
|
308
308
|
|
|
309
309
|
- [`assets`](../assets/README.md) - Consumes browser HMR channels for coordinating server and browser HMR updates
|
|
310
310
|
- [`fetch-proxy`](../fetch-proxy/README.md) - Creates fetch handlers for forwarding requests to another server
|
|
311
|
-
- [`
|
|
311
|
+
- [`component-hmr`](../component-hmr/README.md) - Provides code transforms and runtime for HMR for Remix components
|
|
312
312
|
|
|
313
313
|
## License
|
|
314
314
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# render-middleware
|
|
2
2
|
|
|
3
|
-
Request-scoped response rendering for Remix. It provides the conventional Remix
|
|
3
|
+
Request-scoped response rendering for Remix. It provides the conventional Remix component renderer and a low-level escape hatch for custom renderers.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- **Remix
|
|
7
|
+
- **Remix component rendering** - Stream nodes to HTML responses with `render()`
|
|
8
8
|
- **Framework-owned frames** - Resolve nested and targeted `<Frame>` requests through the current router
|
|
9
9
|
- **Client entry assets** - Resolve source-based `clientEntry()` modules, import maps, and preloads through an asset server
|
|
10
10
|
- **Typed context** - Preserve renderer input and response option types on `context.render`
|
|
@@ -25,7 +25,7 @@ import { createAssetServer } from 'remix/assets'
|
|
|
25
25
|
import { render } from 'remix/middleware/render'
|
|
26
26
|
import { staticFiles } from 'remix/middleware/static'
|
|
27
27
|
import { createRouter } from 'remix/router'
|
|
28
|
-
import { Frame } from 'remix/
|
|
28
|
+
import { Frame } from 'remix/component'
|
|
29
29
|
|
|
30
30
|
let assets = createAssetServer({
|
|
31
31
|
basePath: '/assets',
|
|
@@ -77,7 +77,7 @@ The middleware forwards request credentials and session headers to internal fram
|
|
|
77
77
|
|
|
78
78
|
## Custom renderers
|
|
79
79
|
|
|
80
|
-
Use `renderWith()` when the input is not a Remix
|
|
80
|
+
Use `renderWith()` when the input is not a Remix component node or the application owns a fully custom response pipeline. The factory runs once per request and may read the current request context.
|
|
81
81
|
|
|
82
82
|
```ts
|
|
83
83
|
import { renderWith } from 'remix/middleware/render'
|
|
@@ -101,7 +101,7 @@ Custom renderers are also available through `context.get(Renderer)` when direct-
|
|
|
101
101
|
|
|
102
102
|
- [`assets`](../assets/README.md) - Source asset compilation and browser module URLs
|
|
103
103
|
- [`fetch-router`](../fetch-router/README.md) - Request routing and typed context
|
|
104
|
-
- [`
|
|
104
|
+
- [`component`](../component/README.md) - Remix components, frames, and server rendering
|
|
105
105
|
- [`response`](../response/README.md) - Web `Response` helpers
|
|
106
106
|
|
|
107
107
|
## Related Work
|
package/src/spa/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# spa
|
|
2
2
|
|
|
3
3
|
Client-rendered application routing for Remix. It connects a standard fetch router to the browser
|
|
4
|
-
|
|
5
|
-
nodes.
|
|
4
|
+
component runtime without exposing the response carrier used to associate route responses with
|
|
5
|
+
Remix nodes.
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
@@ -81,7 +81,7 @@ const router = createRouter({
|
|
|
81
81
|
routing, controllers, and middleware context
|
|
82
82
|
- [`render-middleware`](../render-middleware/README.md) -
|
|
83
83
|
Request-scoped renderer middleware
|
|
84
|
-
- [`
|
|
84
|
+
- [`component`](../component/README.md) - Remix components, frames, and
|
|
85
85
|
browser runtime
|
|
86
86
|
|
|
87
87
|
## Related Work
|
|
@@ -89,7 +89,7 @@ const router = createRouter({
|
|
|
89
89
|
- [Fetch standard](https://fetch.spec.whatwg.org/) - The request and response model preserved by SPA
|
|
90
90
|
routers
|
|
91
91
|
- [Navigation API](https://wicg.github.io/navigation-api/) - Browser navigation lifecycle used by
|
|
92
|
-
the Remix
|
|
92
|
+
the Remix component runtime
|
|
93
93
|
|
|
94
94
|
## License
|
|
95
95
|
|
package/src/test/README.md
CHANGED
|
@@ -7,7 +7,7 @@ A test framework for JavaScript and TypeScript projects.
|
|
|
7
7
|
- `describe`/`it` test structure with `before`/`after`/`beforeEach`/`afterEach` hooks
|
|
8
8
|
- Server-side unit testing
|
|
9
9
|
- Playwright E2E testing via `t.serve`
|
|
10
|
-
- In-browser component testing (pair with `render` from `remix/
|
|
10
|
+
- In-browser component testing (pair with `render` from `remix/component/test`)
|
|
11
11
|
- Mock functions and method spies via `t.mock.fn` / `t.mock.method`
|
|
12
12
|
- Per-test and hook timeouts with `t.signal` abort support
|
|
13
13
|
- Unified code coverage reporting across unit and E2E tests
|
|
@@ -402,12 +402,12 @@ Browser tests run components in an actual browser environment via Playwright and
|
|
|
402
402
|
|
|
403
403
|
#### `render()`
|
|
404
404
|
|
|
405
|
-
`render`, exported from `remix/
|
|
405
|
+
`render`, exported from `remix/component/test`, mounts a component into the DOM and returns a `RenderResult`:
|
|
406
406
|
|
|
407
407
|
```ts
|
|
408
408
|
import * as assert from 'remix/assert'
|
|
409
409
|
import { describe, it } from 'remix/test'
|
|
410
|
-
import { render } from 'remix/
|
|
410
|
+
import { render } from 'remix/component/test'
|
|
411
411
|
import { Counter } from './counter.tsx'
|
|
412
412
|
|
|
413
413
|
describe('Counter', () => {
|
|
@@ -498,7 +498,7 @@ finish—useful for debugging failures.
|
|
|
498
498
|
## Related Packages
|
|
499
499
|
|
|
500
500
|
- [`assert`](../assert/README.md) provides assertions that work in server and browser tests.
|
|
501
|
-
- [`
|
|
501
|
+
- [`component`](../component/README.md) provides the `remix/component/test` browser rendering utilities.
|
|
502
502
|
|
|
503
503
|
## Related Work
|
|
504
504
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/ui/accordion/primitives.ts"],"names":[],"mappings":"AACA,cAAc,oCAAoC,CAAA"}
|
package/dist/ui/accordion.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA"}
|
package/dist/ui/anchor.d.ts
DELETED
package/dist/ui/anchor.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"anchor.d.ts","sourceRoot":"","sources":["../../src/ui/anchor.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA"}
|
package/dist/ui/animation.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/ui/animation.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA"}
|
package/dist/ui/animation.js
DELETED
package/dist/ui/breadcrumbs.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumbs.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA"}
|
package/dist/ui/breadcrumbs.js
DELETED
package/dist/ui/button.d.ts
DELETED
package/dist/ui/button.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}
|
package/dist/ui/button.js
DELETED
package/dist/ui/checkbox.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ui/checkbox.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA"}
|
package/dist/ui/checkbox.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/primitives.ts"],"names":[],"mappings":"AACA,cAAc,mCAAmC,CAAA"}
|
package/dist/ui/combobox.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA"}
|
package/dist/ui/combobox.js
DELETED
package/dist/ui/dev/refresh.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"refresh.d.ts","sourceRoot":"","sources":["../../../src/ui/dev/refresh.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA"}
|
package/dist/ui/input.d.ts
DELETED
package/dist/ui/input.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/ui/input.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA"}
|
package/dist/ui/input.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"jsx-dev-runtime.d.ts","sourceRoot":"","sources":["../../src/ui/jsx-dev-runtime.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAA"}
|
package/dist/ui/jsx-runtime.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../../src/ui/jsx-runtime.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA"}
|
package/dist/ui/listbox.d.ts
DELETED
package/dist/ui/listbox.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/ui/listbox.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAA"}
|
package/dist/ui/listbox.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/primitives.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAA"}
|
package/dist/ui/menu.d.ts
DELETED
package/dist/ui/menu.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ui/menu.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAA"}
|
package/dist/ui/menu.js
DELETED
package/dist/ui/popover.d.ts
DELETED
package/dist/ui/popover.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/ui/popover.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAA"}
|
package/dist/ui/popover.js
DELETED
package/dist/ui/radio.d.ts
DELETED
package/dist/ui/radio.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/ui/radio.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA"}
|
package/dist/ui/radio.js
DELETED