@remix-run/ui 0.8.0 → 0.9.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.
Files changed (52) hide show
  1. package/README.md +56 -8
  2. package/dist/runtime/component.d.ts +9 -4
  3. package/dist/runtime/component.js +38 -9
  4. package/dist/runtime/component.js.map +1 -1
  5. package/dist/runtime/core/mix.d.ts +21 -0
  6. package/dist/runtime/core/mix.js +128 -0
  7. package/dist/runtime/core/mix.js.map +1 -0
  8. package/dist/runtime/diff-dom.js +7 -13
  9. package/dist/runtime/diff-dom.js.map +1 -1
  10. package/dist/runtime/document-reload.d.ts +2 -0
  11. package/dist/runtime/document-reload.js +14 -0
  12. package/dist/runtime/document-reload.js.map +1 -0
  13. package/dist/runtime/frame.d.ts +19 -4
  14. package/dist/runtime/frame.js +80 -11
  15. package/dist/runtime/frame.js.map +1 -1
  16. package/dist/runtime/import-map-manager.d.ts +8 -0
  17. package/dist/runtime/import-map-manager.js +295 -0
  18. package/dist/runtime/import-map-manager.js.map +1 -0
  19. package/dist/runtime/mixins/mixin.d.ts +0 -1
  20. package/dist/runtime/mixins/mixin.js +18 -132
  21. package/dist/runtime/mixins/mixin.js.map +1 -1
  22. package/dist/runtime/module-preloader.d.ts +2 -1
  23. package/dist/runtime/module-preloader.js +3 -2
  24. package/dist/runtime/module-preloader.js.map +1 -1
  25. package/dist/runtime/navigation.js +143 -48
  26. package/dist/runtime/navigation.js.map +1 -1
  27. package/dist/runtime/reconcile.js +9 -0
  28. package/dist/runtime/reconcile.js.map +1 -1
  29. package/dist/runtime/run.d.ts +3 -0
  30. package/dist/runtime/run.js +3 -1
  31. package/dist/runtime/run.js.map +1 -1
  32. package/dist/runtime/to-vnode.js +1 -1
  33. package/dist/runtime/to-vnode.js.map +1 -1
  34. package/dist/server/stream.d.ts +25 -2
  35. package/dist/server/stream.js +361 -166
  36. package/dist/server/stream.js.map +1 -1
  37. package/package.json +1 -1
  38. package/src/runtime/component.ts +52 -14
  39. package/src/runtime/core/mix.ts +157 -0
  40. package/src/runtime/diff-dom.ts +7 -12
  41. package/src/runtime/document-reload.ts +14 -0
  42. package/src/runtime/frame.ts +105 -16
  43. package/src/runtime/import-map-manager.ts +369 -0
  44. package/src/runtime/mixins/mixin.ts +18 -145
  45. package/src/runtime/module-preloader.ts +6 -3
  46. package/src/runtime/navigation.ts +178 -58
  47. package/src/runtime/reconcile.ts +9 -0
  48. package/src/runtime/run.ts +7 -1
  49. package/src/runtime/to-vnode.ts +1 -1
  50. package/src/server/README.md +25 -5
  51. package/src/server/stream.ts +478 -197
  52. package/src/test/utils.ts +1 -6
package/src/runtime/to-vnode.ts CHANGED
@@ -5,7 +5,7 @@ import { isEmptyChild, isPrimitiveChild, isRemixNode, normalizeChildren } from '
5
5
  import type { RemixNode } from './jsx.ts'
6
6
  import type { ElementFunction } from './element-function.ts'
7
7
  import type { FrameProps } from './component.ts'
8
- import { isMixinDescriptor } from './mixins/mixin.ts'
8
+ import { isMixinDescriptor } from './core/mix.ts'
9
9
  import {
10
10
  isRemixElement,
11
11
  NON_RENDER_NODE,
package/src/server/README.md CHANGED
@@ -33,12 +33,10 @@ let stream = renderToStream(<App />, {
33
33
  return fetchHtml(frameUrl)
34
34
  },
35
35
  async resolveClientEntry(entryId, component) {
36
- let [href, preloads] = await Promise.all([
37
- assetServer.getHref(entryId),
38
- assetServer.getPreloads(entryId),
39
- ])
36
+ let { href, importMap, preloads } = await assetServer.getScriptEntry(entryId)
40
37
  return {
41
38
  href,
39
+ importMap,
42
40
  exportName: entryId.split('#')[1] || component.name,
43
41
  preloads,
44
42
  }
@@ -59,7 +57,7 @@ return new Response(stream, {
59
57
  - **`topFrameSrc`** - Overrides the root frame URL used for `handle.frames.top.src`. This is mainly useful when calling `renderToStream()` from inside `resolveFrame()` for a nested frame render.
60
58
  - **`signal`** - Cancels pending server rendering work. Pass `request.signal` so client disconnects can stop unresolved frame work without invoking `onError` for the disconnect itself.
61
59
  - **`resolveFrame(src, target, context)`** - Called when a `<Frame>` needs its content. Return a string of HTML, a `ReadableStream<Uint8Array>`, or a promise of either. `context.currentFrameSrc` is the URL for the frame that contains the `<Frame>`, and `context.topFrameSrc` is the outer document URL. Required if your component tree contains `<Frame>` elements.
62
- - **`resolveClientEntry(entryId, component)`** - Resolves the public module URL, export name, and optional module preload hrefs for a hydrated client entry.
60
+ - **`resolveClientEntry(entryId, component)`** - Resolves the public module URL, export name, optional import map, and optional module preload hrefs for a hydrated client entry.
63
61
  - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error.
64
62
 
65
63
  When you render nested frame responses with `renderToStream()` inside `resolveFrame()`, pass `frameSrc` for the frame being rendered and carry `topFrameSrc` forward from the parent context. That preserves `handle.frames.top.src` across the whole SSR frame tree.
@@ -97,6 +95,28 @@ function ProductPage() {
97
95
 
98
96
  Components using the `css(...)` mixin through `mix` have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
99
97
 
98
+ ### Import maps
99
+
100
+ Use `<ImportMap>` when the document needs one initial import map containing both authored mappings and mappings from blocking client entries. The server merges these mappings into the component before sending the initial HTML.
101
+
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
+
104
+ ```tsx
105
+ import type { Handle, RemixNode } from 'remix/ui'
106
+ import { ImportMap } from 'remix/ui/server'
107
+
108
+ function Document(handle: Handle<{ children: RemixNode }>) {
109
+ return () => (
110
+ <html>
111
+ <head>
112
+ <ImportMap value={scriptEntry.importMap} />
113
+ </head>
114
+ <body>{handle.props.children}</body>
115
+ </html>
116
+ )
117
+ }
118
+ ```
119
+
100
120
  ## See Also
101
121
 
102
122
  - [Hydration](https://github.com/remix-run/remix/blob/main/packages/ui/docs/hydration.md) - Making server-rendered components interactive on the client