@owlmeans/client 0.1.18-rc.2 → 0.1.18-rc.20
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/README.md +36 -12
- package/agent-meta/manifest.json +2 -2
- package/agent-meta/skills/client/SKILL.md +194 -19
- package/build/context.d.ts.map +1 -1
- package/build/context.js +1 -3
- package/build/context.js.map +1 -1
- package/build/entrypoint.d.ts +3 -0
- package/build/entrypoint.d.ts.map +1 -0
- package/build/entrypoint.js +4 -0
- package/build/entrypoint.js.map +1 -0
- package/build/helper.js +3 -3
- package/build/helper.js.map +1 -1
- package/build/index.d.ts +1 -1
- package/build/index.d.ts.map +1 -1
- package/build/index.js +1 -1
- package/build/index.js.map +1 -1
- package/build/navigate.d.ts.map +1 -1
- package/build/navigate.js +15 -18
- package/build/navigate.js.map +1 -1
- package/build/router.d.ts.map +1 -1
- package/build/router.js +12 -6
- package/build/router.js.map +1 -1
- package/build/services/debug.js.map +1 -1
- package/build/store.d.ts +19 -3
- package/build/store.d.ts.map +1 -1
- package/build/store.js +57 -50
- package/build/store.js.map +1 -1
- package/build/types.d.ts +16 -5
- package/build/types.d.ts.map +1 -1
- package/build/utils/entrypoint.d.ts +3 -0
- package/build/utils/entrypoint.d.ts.map +1 -0
- package/build/utils/{module.js → entrypoint.js} +2 -2
- package/build/utils/entrypoint.js.map +1 -0
- package/build/utils/index.d.ts +1 -1
- package/build/utils/index.d.ts.map +1 -1
- package/build/utils/index.js +1 -1
- package/build/utils/index.js.map +1 -1
- package/build/utils/route.d.ts.map +1 -1
- package/build/utils/route.js +12 -6
- package/build/utils/route.js.map +1 -1
- package/build/utils/router.d.ts +4 -4
- package/build/utils/router.d.ts.map +1 -1
- package/build/utils/router.js +8 -8
- package/build/utils/router.js.map +1 -1
- package/package.json +12 -12
- package/src/context.ts +1 -4
- package/src/entrypoint.ts +6 -0
- package/src/helper.tsx +6 -6
- package/src/index.ts +1 -1
- package/src/navigate.ts +16 -19
- package/src/router.ts +14 -10
- package/src/services/debug.ts +2 -2
- package/src/store.ts +71 -54
- package/src/types.ts +18 -5
- package/src/utils/{module.ts → entrypoint.ts} +2 -2
- package/src/utils/index.ts +1 -1
- package/src/utils/route.tsx +15 -8
- package/src/utils/router.ts +11 -11
- package/build/module.d.ts +0 -3
- package/build/module.d.ts.map +0 -1
- package/build/module.js +0 -4
- package/build/module.js.map +0 -1
- package/build/utils/module.d.ts +0 -3
- package/build/utils/module.d.ts.map +0 -1
- package/build/utils/module.js.map +0 -1
- package/src/module.ts +0 -6
package/README.md
CHANGED
|
@@ -5,15 +5,16 @@ Core React client framework providing hooks, context, navigation, and state mana
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
7
|
- React hooks for subscribing to state stores (`useStoreModel`, `useStoreList`) and async data (`useValue`)
|
|
8
|
-
- `useNavigate()` —
|
|
8
|
+
- `useNavigate()` — entrypoint-aware navigation that builds URLs and drives the router
|
|
9
9
|
- `useContext()` — access the application's `ClientContext` from any React component
|
|
10
|
+
- `useEntrypoint()` — the alias, params and path of the entrypoint that rendered the current screen
|
|
10
11
|
- `useToggle()` — boolean state toggle hook
|
|
11
12
|
- Used by every React frontend in the OwlMeans ecosystem
|
|
12
13
|
|
|
13
14
|
## Installation
|
|
14
15
|
|
|
15
16
|
```bash
|
|
16
|
-
bun add @owlmeans/client
|
|
17
|
+
bun add @owlmeans/client@^0.1.18-rc.15
|
|
17
18
|
```
|
|
18
19
|
|
|
19
20
|
## Usage
|
|
@@ -25,10 +26,22 @@ import { useStoreModel, useStoreList } from '@owlmeans/client'
|
|
|
25
26
|
|
|
26
27
|
function ProjectView({ projectId }: { projectId: string }) {
|
|
27
28
|
const model = useStoreModel<ProjectState>(projectId, 'project-state')
|
|
29
|
+
if (model.empty) return <Loading />
|
|
30
|
+
|
|
28
31
|
return <div>{model.record.title}</div>
|
|
29
32
|
}
|
|
30
33
|
```
|
|
31
34
|
|
|
35
|
+
Subscribe to a live list:
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
const open = useStoreList<ProjectState>({
|
|
39
|
+
query: { status: ['draft', 'active'] },
|
|
40
|
+
sort: [{ field: 'createdAt', order: 'desc' }],
|
|
41
|
+
resource: 'project-state'
|
|
42
|
+
})
|
|
43
|
+
```
|
|
44
|
+
|
|
32
45
|
Load async data:
|
|
33
46
|
|
|
34
47
|
```typescript
|
|
@@ -36,14 +49,14 @@ import { useValue } from '@owlmeans/client'
|
|
|
36
49
|
|
|
37
50
|
function StoryList({ projectId }: { projectId: string }) {
|
|
38
51
|
const stories = useValue(async () => {
|
|
39
|
-
return await ctx.story().list({
|
|
52
|
+
return await ctx.story().list({ projectId })
|
|
40
53
|
}, [projectId])
|
|
41
54
|
|
|
42
55
|
return stories ? <List items={stories.items} /> : <Loading />
|
|
43
56
|
}
|
|
44
57
|
```
|
|
45
58
|
|
|
46
|
-
Navigate to
|
|
59
|
+
Navigate to an entrypoint:
|
|
47
60
|
|
|
48
61
|
```typescript
|
|
49
62
|
import { useNavigate } from '@owlmeans/client'
|
|
@@ -56,13 +69,18 @@ function CreateButton() {
|
|
|
56
69
|
|
|
57
70
|
## API
|
|
58
71
|
|
|
59
|
-
### `useStoreModel<T>(id?,
|
|
72
|
+
### `useStoreModel<T>(id?, alias?): StateModel<T>`
|
|
60
73
|
|
|
61
|
-
|
|
74
|
+
One record from a state resource, live. An id the store knows nothing about yields a model whose
|
|
75
|
+
`empty` is true — `record` gives the resource's configured default and nothing is written on the
|
|
76
|
+
way — so the hook never throws for missing data. Passing no id addresses the one record of a
|
|
77
|
+
`single` resource; on any other that is a configuration error and throws.
|
|
62
78
|
|
|
63
|
-
### `useStoreList<T>(
|
|
79
|
+
### `useStoreList<T>(opts?): StateModel<T>[]`
|
|
64
80
|
|
|
65
|
-
|
|
81
|
+
A live list from a state resource: every record `opts.query` accepts, re-evaluated on every write
|
|
82
|
+
that changes the answer. `opts` takes `query` (a `Criteria<T>`; omitted matches everything), `sort`
|
|
83
|
+
and `resource` (the context's default state resource when omitted).
|
|
66
84
|
|
|
67
85
|
### `useValue<T>(loader, deps?, forceDefault?): T | null`
|
|
68
86
|
|
|
@@ -71,13 +89,19 @@ Async data loader hook. Re-runs when `deps` change. Returns `null` while loading
|
|
|
71
89
|
### `useNavigate(): Navigator`
|
|
72
90
|
|
|
73
91
|
Returns a navigator with:
|
|
74
|
-
- `navigate(
|
|
75
|
-
- `go(alias, request?)` — navigate by
|
|
92
|
+
- `navigate(entrypoint, request?)` — navigate to a bound protocol, addressed by its `url()`
|
|
93
|
+
- `go(alias, request?)` — navigate by entrypoint alias
|
|
94
|
+
- `press(alias, request?)` / `pressBack()` — the same as event handlers
|
|
95
|
+
- `back()` / `location()`
|
|
76
96
|
|
|
77
97
|
### `useContext<T>(): T`
|
|
78
98
|
|
|
79
99
|
Returns the current `ClientContext` cast to `T`.
|
|
80
100
|
|
|
101
|
+
### `useEntrypoint<T>(): EntrypointContextParams<T>`
|
|
102
|
+
|
|
103
|
+
The `alias`, `params`, `path` and `context` of the entrypoint that rendered the current screen.
|
|
104
|
+
|
|
81
105
|
### `useToggle(initial?): [boolean, () => void]`
|
|
82
106
|
|
|
83
107
|
Simple boolean toggle hook.
|
|
@@ -85,7 +109,7 @@ Simple boolean toggle hook.
|
|
|
85
109
|
## Related Packages
|
|
86
110
|
|
|
87
111
|
- [`@owlmeans/state`](../state) — `StateModel`, `StateResource` used by `useStoreModel`
|
|
88
|
-
- [`@owlmeans/client-
|
|
112
|
+
- [`@owlmeans/client-entrypoint`](../client-entrypoint) — protocol bindings used by `useNavigate`
|
|
89
113
|
- [`@owlmeans/client-context`](../client-context) — `ClientContext` returned by `useContext`
|
|
90
114
|
|
|
91
115
|
<!-- owlmeans:agent-guidance:start -->
|
|
@@ -96,7 +120,7 @@ This package ships embedded agent skills under `agent-meta/`. After installing y
|
|
|
96
120
|
your project's skill store (`.agents/skills/`):
|
|
97
121
|
|
|
98
122
|
```sh
|
|
99
|
-
npx @owlmeans/agent-skills
|
|
123
|
+
npx @owlmeans/agent-skills@^0.1.18-rc.16
|
|
100
124
|
```
|
|
101
125
|
|
|
102
126
|
The embedded files are version-matched to this package release. Do not edit them
|
package/agent-meta/manifest.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 2,
|
|
3
3
|
"package": "@owlmeans/client",
|
|
4
|
-
"version": "0.1.18-rc.
|
|
5
|
-
"generatedAt": "2026-
|
|
4
|
+
"version": "0.1.18-rc.20",
|
|
5
|
+
"generatedAt": "2026-09-12T12:32:46.373Z",
|
|
6
6
|
"canonicalRepo": "https://github.com/owlmeans/common",
|
|
7
7
|
"entries": [
|
|
8
8
|
{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: client
|
|
3
|
-
description: How to use @owlmeans/client — platform-agnostic React client framework (
|
|
3
|
+
description: How to use @owlmeans/client — the platform-agnostic React client framework (web and native) — makeClientContext, App/Router, useNavigate/Navigator, useEntrypoint/RoutedComponent, useStoreModel/useStoreList, useValue, the modal and debug services. Auto-invoked when importing client framework primitives, navigating between screens, or reading client state from React.
|
|
4
4
|
user-invocable: false
|
|
5
5
|
---
|
|
6
6
|
<!-- AUTO-GENERATED — do not edit. Regenerate via sync-agent-meta. -->
|
|
@@ -8,37 +8,212 @@ user-invocable: false
|
|
|
8
8
|
# @owlmeans/client
|
|
9
9
|
|
|
10
10
|
**Layer:** Client
|
|
11
|
-
**Install:** `"@owlmeans/client": "^0.1.18-rc.
|
|
11
|
+
**Install:** `"@owlmeans/client": "^0.1.18-rc.20"` in `dependencies`
|
|
12
|
+
|
|
13
|
+
The React substrate `@owlmeans/web-client` (browser) and the native equivalent are built on. A
|
|
14
|
+
cross-platform package imports from here; an application normally imports from the platform
|
|
15
|
+
package, which re-exports what it needs — **except the hooks below, which are only here**.
|
|
16
|
+
|
|
17
|
+
## What lives where
|
|
18
|
+
|
|
19
|
+
| Import from `@owlmeans/client` | Import from `@owlmeans/web-client` |
|
|
20
|
+
|---|---|
|
|
21
|
+
| `useNavigate`, `useEntrypoint`, `useStoreModel`, `useStoreList`, `useValue`, `useToggle`, `useSetupModalNavigator` — none of these are re-exported | `renderApp`, `makeContext`, `useAuthenticated`, and protocol binding helpers from `@owlmeans/client-entrypoint` |
|
|
22
|
+
| `RoutedComponent`, `EntrypointContextParams`, `Navigator`, `NavRequest`, `ClientContext` | `AppConfig`, `AppContext` |
|
|
23
|
+
| `App`, `Router`, `makeClientContext` — the platform-agnostic mounts | `WebApp`, `renderApp` — the browser mounts that wrap them |
|
|
12
24
|
|
|
13
25
|
## Key Exports
|
|
14
26
|
|
|
15
27
|
| Export | Description |
|
|
16
28
|
|--------|-------------|
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
|
|
|
24
|
-
|
|
|
29
|
+
| `makeClientContext(cfg)` | The React client context: `@owlmeans/client-context` plus the state resource, both config resources, the modal and debug services, the rerender hook and `context.router()` |
|
|
30
|
+
| `ClientContext<C>` | That context's interface — adds `router()`, `registerRerenderer(fn)`, `rerender()`, `modal()`, `debug()` |
|
|
31
|
+
| `App` / `AppProps` | Mount: provides the context and, unless `noRouter`, the router. `children` render inside the provider and before the router |
|
|
32
|
+
| `Context` / `ClientContextContainer` / `useContext()` | The React context container and the hook that reads it |
|
|
33
|
+
| `Router` / `RouterProps` / `RouterProvider` / `makeRouterModel()` | Route rendering. `provide` is optional — omitted, the active router plugin's `compile` is used |
|
|
34
|
+
| `useNavigate()` | The `Navigator` — programmatic navigation by entrypoint alias |
|
|
35
|
+
| `Navigator` / `NavRequest` | `navigate` `go` `press` `back` `pressBack` `location`; a request adds `replace` and `silent` to an `AbstractRequest` |
|
|
36
|
+
| `useEntrypoint<T>()` | The `EntrypointContextParams` of the screen currently rendering — `{ alias, path, params, context }` |
|
|
37
|
+
| `RoutedComponent<Extra>` | Type of a component bound to a frontend protocol |
|
|
38
|
+
| `handler(Component, preprender?)` | Wrap a React component as an entrypoint handler |
|
|
39
|
+
| `useStoreModel` / `useStoreList` | React hooks over a `@owlmeans/state` resource — one record by id, or a live query |
|
|
40
|
+
| `useValue(loader, deps?, forceDefault?)` / `UseValueParams<T>` | Render an async result. The second argument is the **dependency list**, not a default — see Async values |
|
|
41
|
+
| `useToggle(opened?)` / `Toggleable` | An open/close/toggle handle, which is what a modal surface binds to |
|
|
42
|
+
| `appendModalService` / `createModalService` / `ModalService` / `ModalStackLayer` | The modal stack — `context.modal()`: `request` `response` `cancel` `error` `layer()` `link(toggle)` |
|
|
43
|
+
| `ModalBodyProps` / `useSetupModalNavigator()` | `{ modal?: ModalService }` — the props a modal body is rendered with; and the hook that lets a body navigate |
|
|
44
|
+
| `appendDebugService` / `createDebugService` / `appendStateDebug(ctx, alias)` / `DebugService` | The debug menu — `context.debug()` |
|
|
45
|
+
| `ClientError`, `ComponentError`, `ComponentPropError`, `ComponentPropUndefined` | The client error family, registered with `ResilientError` |
|
|
46
|
+
| `DEF_MODAL_ALIAS` (`modal`), `DEF_DEBUG_ALIAS` (`debug`), `DEBUGGER_FLAG` / `DEBUG_CONFIG_KEY` (`debugger`) | Constants |
|
|
25
47
|
|
|
26
48
|
## Subpath Exports
|
|
27
49
|
|
|
28
|
-
- `./utils` —
|
|
50
|
+
- `./utils` — `buildEntrypointTree`, `visitEntrypointTree`, `initializeRouter`, `createRouteRenderer`,
|
|
51
|
+
`EntrypointContext`. What the router is assembled from; a package building its own routing surface
|
|
52
|
+
uses these, an application does not.
|
|
53
|
+
|
|
54
|
+
## Navigation
|
|
55
|
+
|
|
56
|
+
Navigation addresses an ALIAS, never a URL — the path lives in the entrypoint declaration, so a
|
|
57
|
+
component never builds one. `useNavigate()` returns the `Navigator`, which asks the target
|
|
58
|
+
entrypoint for its `url(request)` and hands that to the active router plugin:
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
import { useNavigate } from '@owlmeans/client'
|
|
62
|
+
import type { RoutedComponent } from '@owlmeans/client'
|
|
63
|
+
|
|
64
|
+
export const ProjectScreen: RoutedComponent = ({ params }) => {
|
|
65
|
+
const nav = useNavigate()
|
|
66
|
+
|
|
67
|
+
// `go` navigates; `press` returns the handler for an onClick. `params` fills the path
|
|
68
|
+
// parameters of the target entrypoint, `query` the query string, `replace` swaps the
|
|
69
|
+
// history entry instead of pushing one.
|
|
70
|
+
void nav.go(PROJECT_ITEM, { params: { id: params.id }, query: { tab: 'files' } })
|
|
71
|
+
|
|
72
|
+
return <a onClick={nav.press(PROJECT_LIST)}>Back to the list</a>
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
A URL that comes back starting with `http` belongs to another service, and the navigator assigns
|
|
77
|
+
`location.href` rather than pushing a history entry. `nav.navigate(entrypoint, request)` takes the
|
|
78
|
+
entrypoint itself when you already hold it; `nav.back()` / `nav.pressBack()` go one entry back, and
|
|
79
|
+
`nav.location()` reads the current one.
|
|
80
|
+
|
|
81
|
+
A bound screen receives `{ alias, path, params, context }` as props, and `useEntrypoint()`
|
|
82
|
+
reads the same values from anywhere below it — read path parameters from `params` and pass them
|
|
83
|
+
down; a nested component never resolves route parameters itself.
|
|
84
|
+
|
|
85
|
+
## Routing and guards
|
|
86
|
+
|
|
87
|
+
`App` mounts `Router`, which resolves the frontend entrypoints the context holds into a nested
|
|
88
|
+
route tree. Only entrypoints whose route is `AppType.Frontend` are mounted, and among those only
|
|
89
|
+
the ones that name no service at all, name this app's service, or are `sticky`. Each node
|
|
90
|
+
contributes **only its own segment** — its ancestors already carry theirs, so a declaration nests
|
|
91
|
+
by naming a `parent`.
|
|
92
|
+
|
|
93
|
+
A screen's guards are its own plus every ancestor's, taken from `getGuards()`. An empty list is an
|
|
94
|
+
open screen; when the list is non-empty and no guard matches, the renderer throws
|
|
95
|
+
`AuthorizationError('frontend-guard')`.
|
|
96
|
+
|
|
97
|
+
## Client state
|
|
98
|
+
|
|
99
|
+
State lives on the context as a `@owlmeans/state` resource; these hooks subscribe to it.
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
import { useStoreList, useStoreModel } from '@owlmeans/client'
|
|
103
|
+
|
|
104
|
+
const task = useStoreModel<Task>(id, TASKS) // one record
|
|
105
|
+
const open = useStoreList<Task>({ query: { status: 'open' }, resource: TASKS }) // live query
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
`useStoreModel` returns a `StateModel` — read `model.record`, write with `model.update({ ... })`.
|
|
109
|
+
Never assign into `model.record` — it is not a snapshot. On a model the store backs, it IS the
|
|
110
|
+
object the store holds: a field assignment mutates what every other holder of that key reads, and
|
|
111
|
+
the next `update()`/`commit()` carries the mutation through, while nothing notifies and nothing
|
|
112
|
+
re-renders. The hook never throws for missing data either — an id the store knows nothing about
|
|
113
|
+
yields a model whose `empty` is true, and nothing is written into the store on the way.
|
|
114
|
+
`useStoreList` takes `{ query?, sort?, resource? }` and matches everything when `query` is omitted.
|
|
115
|
+
Full contract: [[state]].
|
|
116
|
+
|
|
117
|
+
Both hooks go through `useSyncExternalStore`, and the live subscription React installs is torn down
|
|
118
|
+
with the component. The FIRST snapshot is taken during render, by subscribing and unsubscribing
|
|
119
|
+
again in one statement — a state resource seeds its listener synchronously, so no render runs
|
|
120
|
+
without a value and that momentary subscription never outlives the call. The value is then cached
|
|
121
|
+
and the same reference is returned until something actually changes, which is what keeps React from
|
|
122
|
+
re-rendering forever.
|
|
123
|
+
|
|
124
|
+
## Async values
|
|
125
|
+
|
|
126
|
+
`useValue(loader, deps?, forceDefault?)` runs an async loader in an effect and answers with the
|
|
127
|
+
default — `null` when there is none — until it resolves. Its second argument is overloaded, and
|
|
128
|
+
reading it as "a default" is the standard mistake:
|
|
129
|
+
|
|
130
|
+
```typescript
|
|
131
|
+
useValue(async () => api.load(id), [id]) // a DependencyList — re-runs on id
|
|
132
|
+
useValue(async () => api.load(id), { default: EMPTY, deps: [id] }) // both, via UseValueParams
|
|
133
|
+
useValue(async () => api.load(id)) // no deps — the loader runs once
|
|
134
|
+
useValue(async () => api.count(), 0) // a bare non-array value IS the default
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
The deps always come from the argument's SHAPE: an array is the dependency list itself, an object
|
|
138
|
+
with a `deps` key gives `deps ?? []`, and anything else gives `[]`. The default is read from the
|
|
139
|
+
same argument: `default` off a `UseValueParams` object, `null` when an array was passed, the value
|
|
140
|
+
itself otherwise. `forceDefault: true` changes only the second half — the argument is then taken as
|
|
141
|
+
the default whatever its shape, while still deciding the deps.
|
|
142
|
+
|
|
143
|
+
The loader is handed a `MutableRefObject<boolean>` cancel ref, which the effect's cleanup sets to
|
|
144
|
+
`true`, so a loader that awaits more than once checks `cancel.current` before it commits. A loader that resolves to a **function** is kept aside and returned as it is, rather than
|
|
145
|
+
being run as a state updater — which is what lets a component be an async value.
|
|
146
|
+
|
|
147
|
+
## Modals
|
|
148
|
+
|
|
149
|
+
`context.modal()` owns a STACK of body components and one surface. The surface is a component the
|
|
150
|
+
app mounts once: it links a toggle to the service, reads the top layer through `layer()`, and
|
|
151
|
+
renders it with the service as a prop.
|
|
29
152
|
|
|
30
|
-
|
|
153
|
+
```tsx
|
|
154
|
+
import { useContext, useSetupModalNavigator, useToggle, useValue } from '@owlmeans/client'
|
|
155
|
+
import type { ModalBodyProps } from '@owlmeans/client'
|
|
156
|
+
import { useEffect } from 'react'
|
|
157
|
+
import type { FC } from 'react'
|
|
31
158
|
|
|
32
|
-
|
|
159
|
+
export const Modal: FC = () => {
|
|
160
|
+
useSetupModalNavigator() // lets a body navigate; call it once
|
|
161
|
+
const context = useContext()
|
|
162
|
+
const toggle = useToggle(false)
|
|
163
|
+
|
|
164
|
+
useEffect(() => {
|
|
165
|
+
void context.waitForInitialized().then(() => context.modal().link(toggle))
|
|
166
|
+
}, [])
|
|
167
|
+
|
|
168
|
+
const Com = useValue<FC<ModalBodyProps> | undefined>(
|
|
169
|
+
async () => toggle.opened ? context.modal().layer()?.Com : undefined,
|
|
170
|
+
[toggle.opened]
|
|
171
|
+
)
|
|
172
|
+
|
|
173
|
+
return <Dialog open={toggle.opened} onOpenChange={toggle.set}>
|
|
174
|
+
{Com != null ? <Com modal={context.modal()} /> : undefined}
|
|
175
|
+
</Dialog>
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
A **body is an `FC<ModalBodyProps>`** — it receives the service as an optional `modal` prop, and
|
|
180
|
+
that prop is how it answers. Nothing else reaches it, so whatever a body needs travels in the
|
|
181
|
+
closure of the component that requested it.
|
|
33
182
|
|
|
34
183
|
```typescript
|
|
35
|
-
|
|
36
|
-
const navigateTo = navigate(context)
|
|
37
|
-
navigateTo('/projects')
|
|
184
|
+
const result = await context.modal().request<Answer>(ConfirmBody) // null when cancelled
|
|
38
185
|
```
|
|
39
186
|
|
|
187
|
+
`request` pushes the body onto the stack, opens the linked toggle, and resolves when the body calls
|
|
188
|
+
`modal.response(value)`, `modal.cancel()` (which resolves `null`) or `modal.error(e)` (which
|
|
189
|
+
rejects). All three settle the promise first, then pop the layer and close the surface — and
|
|
190
|
+
`request` pops a SECOND time when its own `await` resumes. One completed request therefore removes
|
|
191
|
+
two layers.
|
|
192
|
+
|
|
193
|
+
**Keep the stack one deep.** A lone body ends on an empty stack and the second pop costs nothing.
|
|
194
|
+
A body requested from inside another body takes its parent down with it: closing the child pops the
|
|
195
|
+
child, sees a layer still there and schedules the surface to reopen 500 ms later, and then the
|
|
196
|
+
child's continuation pops the parent in the microtask before that timer fires. The surface reopens
|
|
197
|
+
with `layer()` answering `undefined` and nothing to render, and the parent's own `request` — whose
|
|
198
|
+
deferred no one is left to settle — never resolves. Chain from the caller instead: await the first
|
|
199
|
+
request, then issue the next.
|
|
200
|
+
|
|
201
|
+
## Debug menu
|
|
202
|
+
|
|
203
|
+
`appendDebugService` registers the menu only when `cfg.debug.all` or `cfg.debug.debugger` is set,
|
|
204
|
+
so `context.debug()` answers `undefined` in a normal build and a caller must handle that. A package
|
|
205
|
+
that owns a client resource calls `appendStateDebug(context, alias)` at wiring time to have it
|
|
206
|
+
listed under "Reset states"; "Reset app" erases the whole client DB.
|
|
207
|
+
|
|
40
208
|
## Depends On
|
|
41
209
|
|
|
42
|
-
- `@owlmeans/client-context`, `@owlmeans/client-entrypoint`, `@owlmeans/client-
|
|
43
|
-
- `@owlmeans/router`, `@owlmeans/
|
|
44
|
-
|
|
210
|
+
- `@owlmeans/client-context`, `@owlmeans/client-entrypoint`, `@owlmeans/client-resource`
|
|
211
|
+
- `@owlmeans/router` (the routing plugin surface), `@owlmeans/state`, `@owlmeans/entrypoint`,
|
|
212
|
+
`@owlmeans/resource`, `@owlmeans/config`, `@owlmeans/context`, `@owlmeans/auth`, `@owlmeans/error`
|
|
213
|
+
- `react` and `@remix-run/router` (peer)
|
|
214
|
+
|
|
215
|
+
## Related
|
|
216
|
+
|
|
217
|
+
- [[web-client]] — the browser layer built on this
|
|
218
|
+
- [[state]] — the store the two state hooks read
|
|
219
|
+
- [[router]] — the routing plugin `context.router()` resolves
|
package/build/context.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAmB/C,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,KAAG,CA4BjH,CAAA;AAED,eAAO,MAAM,sBAAsB,2CAA+C,CAAA;AAElF,eAAO,MAAM,OAAO,uDAAkC,CAAA;AAEtD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,aAAa,CAAC,CAAC,CAAC,QAE5E,CAAA"}
|
package/build/context.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createContext, useContext as useCtx } from 'react';
|
|
2
2
|
import { makeClientContext as makeBasicContext, PLUGINS } from '@owlmeans/client-context';
|
|
3
|
-
import { AppType, CONFIG_RECORD
|
|
3
|
+
import { AppType, CONFIG_RECORD } from '@owlmeans/context';
|
|
4
4
|
import { appendStateResource } from '@owlmeans/state';
|
|
5
5
|
import { appendModalService } from './components/modal.js';
|
|
6
6
|
import { appendDebugService } from './services/debug.js';
|
|
@@ -9,7 +9,6 @@ import { ROUTER_SERVICE } from '@owlmeans/router';
|
|
|
9
9
|
const defaultCfg = {
|
|
10
10
|
services: {},
|
|
11
11
|
brand: {},
|
|
12
|
-
layer: Layer.Service,
|
|
13
12
|
trusted: [],
|
|
14
13
|
[CONFIG_RECORD]: [],
|
|
15
14
|
ready: false,
|
|
@@ -40,7 +39,6 @@ export const makeClientContext = (cfg) => {
|
|
|
40
39
|
};
|
|
41
40
|
}
|
|
42
41
|
context.router = () => context.service(ROUTER_SERVICE);
|
|
43
|
-
context.makeContext = makeClientContext;
|
|
44
42
|
return context;
|
|
45
43
|
};
|
|
46
44
|
export const ClientContextContainer = createContext(makeClientContext(defaultCfg));
|
package/build/context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,IAAI,MAAM,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAEzF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,IAAI,MAAM,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAEzF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,UAAU,GAAiB;IAC/B,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,EAAE;IACX,CAAC,aAAa,CAAC,EAAE,EAAE;IACnB,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,OAAO,CAAC,QAAQ;CACvB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAwE,GAAM,EAAK,EAAE;IACpH,MAAM,OAAO,GAAG,gBAAgB,CAAC,GAAG,CAAM,CAAA;IAC1C,mBAAmB,CAAO,OAAO,CAAC,CAAA;IAClC,kBAAkB,CAAO,OAAO,CAAC,CAAA;IACjC,oBAAoB,CAAO,OAAO,CAAC,CAAA;IACnC,oBAAoB,CAAO,OAAO,EAAE,OAAO,EAAE,aAAa,CAAC,CAAA;IAC3D,kBAAkB,CAAO,OAAO,CAAC,CAAA;IAEjC,IAAI,OAAO,CAAC,kBAAkB,IAAI,IAAI,EAAE,CAAC;QACvC,MAAM,WAAW,GAAuB,EAAE,CAAA;QAE1C,OAAO,CAAC,kBAAkB,GAAG,QAAQ,CAAC,EAAE;YACtC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAC1B,OAAO,GAAG,EAAE;gBACV,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;gBAC3C,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC,CAAA;QACH,CAAC,CAAA;QACD,OAAO,CAAC,QAAQ,GAAG,GAAG,EAAE;YACtB,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,CAAC,CAAA;IACH,CAAC;IAED,OAAO,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAgB,cAAc,CAAC,CAAA;IAErE,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAA;AAElF,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAAC,QAAQ,CAAA;AAEtD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAuD,EAAE,CAAC,MAAM,CACxF,sBAAoD,CACrD,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entrypoint.d.ts","sourceRoot":"","sources":["../src/entrypoint.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AAEzD,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,EAAE,GAAG,EAAE,OAAwC,uBAAuB,CAAC,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entrypoint.js","sourceRoot":"","sources":["../src/entrypoint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGpD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAsB,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAA+B,CAAA"}
|
package/build/helper.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { isValidElement } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { EntrypointContext } from './utils/entrypoint.js';
|
|
4
4
|
import { assertContext } from '@owlmeans/context';
|
|
5
5
|
export const handler = (Component, preprender) => ref => (req, res) => {
|
|
6
|
-
const location = `client-handler:${ref.ref?.
|
|
6
|
+
const location = `client-handler:${ref.ref?.alias ?? 'unknown'}`;
|
|
7
7
|
if (ref.ref == null) {
|
|
8
8
|
throw new SyntaxError('Module reference is not provided');
|
|
9
9
|
}
|
|
@@ -23,7 +23,7 @@ export const handler = (Component, preprender) => ref => (req, res) => {
|
|
|
23
23
|
}
|
|
24
24
|
const Renderer = ({ children, ...props }) => {
|
|
25
25
|
const Renderer = Component;
|
|
26
|
-
return _jsx(
|
|
26
|
+
return _jsx(EntrypointContext.Provider, { value: props, children: _jsx(Renderer, { ...props, children: children }) });
|
|
27
27
|
};
|
|
28
28
|
return Renderer;
|
|
29
29
|
};
|
package/build/helper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helper.js","sourceRoot":"","sources":["../src/helper.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"helper.js","sourceRoot":"","sources":["../src/helper.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAKjD,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,SAA6B,EAAE,UAAoB,EACxB,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAGrC,GAAM,EAAE,GAAM,EAAO,EAAE;IACvB,MAAM,QAAQ,GAAG,kBAAkB,GAAG,CAAC,GAAG,EAAE,KAAK,IAAI,SAAS,EAAE,CAAA;IAChE,IAAI,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;QACpB,MAAM,IAAI,WAAW,CAAC,kCAAkC,CAAC,CAAA;IAC3D,CAAC;IACD,MAAM,GAAG,GAAG,aAAa,CAAkB,GAAG,CAAC,GAAG,CAAC,GAAc,EAAE,QAAQ,CAAC,CAAA;IAC5E,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QAChB,MAAM,IAAI,WAAW,CAAC,gCAAgC,CAAC,CAAA;IACzD,CAAC;IACD,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;QAC9B,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;QACtB,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,SAAoC,CAAA;QACrD,MAAM,OAAO,GAAG,KAAC,QAAQ,OAAK,GAAG,EAAE,OAAO,EAAE,GAAG,GAAI,CAAA;QACnD,GAAG,CAAC,OAAO,CAAC,OAA6B,CAAC,CAAA;QAE1C,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;QAC3D,MAAM,QAAQ,GAAG,SAAoC,CAAA;QACrD,OAAO,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC7C,KAAC,QAAQ,OAAK,KAAK,YAAG,QAAQ,GAAY,GACf,CAAA;IAC/B,CAAC,CAAA;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}
|
package/build/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export * from './components/index.js';
|
|
|
3
3
|
export * from './services/index.js';
|
|
4
4
|
export * from './helper.js';
|
|
5
5
|
export * from './navigate.js';
|
|
6
|
-
export * from './
|
|
6
|
+
export * from './entrypoint.js';
|
|
7
7
|
export * from './router.js';
|
|
8
8
|
export * from './types.js';
|
|
9
9
|
export * from './store.js';
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA"}
|
package/build/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export * from './components/index.js';
|
|
|
3
3
|
export * from './services/index.js';
|
|
4
4
|
export * from './helper.js';
|
|
5
5
|
export * from './navigate.js';
|
|
6
|
-
export * from './
|
|
6
|
+
export * from './entrypoint.js';
|
|
7
7
|
export * from './router.js';
|
|
8
8
|
export * from './types.js';
|
|
9
9
|
export * from './store.js';
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA"}
|
package/build/navigate.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigate.d.ts","sourceRoot":"","sources":["../src/navigate.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"navigate.d.ts","sourceRoot":"","sources":["../src/navigate.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAI3C,eAAO,MAAM,WAAW,QAAO,SA6C9B,CAAA"}
|
package/build/navigate.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
import { EntrypointOutcome } from '@owlmeans/entrypoint';
|
|
3
2
|
import { useContext } from './context.js';
|
|
4
3
|
export const useNavigate = () => {
|
|
5
4
|
const context = useContext();
|
|
@@ -8,25 +7,23 @@ export const useNavigate = () => {
|
|
|
8
7
|
const navigator = useMemo(() => {
|
|
9
8
|
const navigator = {
|
|
10
9
|
_navigate: navigate,
|
|
11
|
-
navigate: async (
|
|
12
|
-
const
|
|
13
|
-
if (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
});
|
|
24
|
-
}
|
|
10
|
+
navigate: async (entrypoint, request) => {
|
|
11
|
+
const url = await entrypoint.url(request);
|
|
12
|
+
if (url.startsWith('http')) {
|
|
13
|
+
globalThis.location.href = url;
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
navigate(url, {
|
|
17
|
+
state: {
|
|
18
|
+
...entrypoint.route.route, silent: request?.silent
|
|
19
|
+
},
|
|
20
|
+
replace: request?.replace ?? false
|
|
21
|
+
});
|
|
25
22
|
}
|
|
26
23
|
},
|
|
27
|
-
go: async (
|
|
28
|
-
press: (
|
|
29
|
-
void navigator.go(
|
|
24
|
+
go: async (target, request) => navigator.navigate(context.entrypoint(target), request),
|
|
25
|
+
press: (target, request) => () => {
|
|
26
|
+
void navigator.go(target, request);
|
|
30
27
|
},
|
|
31
28
|
back: async () => {
|
|
32
29
|
navigate(-1);
|
package/build/navigate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigate.js","sourceRoot":"","sources":["../src/navigate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"navigate.js","sourceRoot":"","sources":["../src/navigate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAc,EAAE;IACzC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,CAAA;IAC/C,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,CAAA;IAC/C,MAAM,SAAS,GAAc,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,SAAS,GAAc;YAC3B,SAAS,EAAE,QAAQ;YAEnB,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE;gBACtC,MAAM,GAAG,GAAG,MAAM,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;gBAEzC,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC3B,UAAU,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAA;gBAChC,CAAC;qBAAM,CAAC;oBACN,QAAQ,CAAC,GAAG,EAAE;wBACZ,KAAK,EAAE;4BACL,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;yBACnD;wBACD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK;qBACnC,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;YAED,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,CAC5B,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,CAA2B,MAAM,CAAC,EAAE,OAAO,CAAC;YAEnF,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,GAAG,EAAE;gBAC/B,KAAK,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;YACpC,CAAC;YAED,IAAI,EAAE,KAAK,IAAI,EAAE;gBACf,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;YACd,CAAC;YAED,SAAS,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE;gBACpB,KAAK,SAAS,CAAC,IAAI,EAAE,CAAA;YACvB,CAAC;YAED,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ;SACzB,CAAA;QAED,OAAO,SAAS,CAAA;IAClB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA"}
|
package/build/router.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAkB,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAkB,MAAM,YAAY,CAAA;AAqB1E,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAkClC,CAAA;AAED,eAAO,MAAM,eAAe,QAAO,WA6BlC,CAAA"}
|
package/build/router.js
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import { createElement, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { buildEntrypointTree, initializeRouter, visitEntrypointTree } from './utils/router.js';
|
|
3
3
|
import { createRouteRenderer } from './utils/route.js';
|
|
4
4
|
import { useContext } from './context.js';
|
|
5
5
|
import { assertContext } from '@owlmeans/context';
|
|
6
|
+
/** A child path that keeps its leading separator reads as absolute, and the router rejects it. */
|
|
7
|
+
const relative = (segment) => {
|
|
8
|
+
segment = segment.trim();
|
|
9
|
+
segment = segment.endsWith('/') ? segment.slice(0, -1) : segment;
|
|
10
|
+
return segment.startsWith('/') ? segment.substring(1) : segment;
|
|
11
|
+
};
|
|
6
12
|
export const Router = ({ provide }) => {
|
|
7
13
|
const progress = useRef(false);
|
|
8
14
|
const context = useContext();
|
|
@@ -37,16 +43,16 @@ export const makeRouterModel = () => {
|
|
|
37
43
|
routes: [],
|
|
38
44
|
resolve: async (ctx) => {
|
|
39
45
|
const context = assertContext(ctx, location);
|
|
40
|
-
const
|
|
41
|
-
const reactRoutes = await
|
|
42
|
-
const ctx = assertContext((module.ctx ?? context), location);
|
|
43
|
-
await module.route.resolve(ctx);
|
|
46
|
+
const entrypointTree = buildEntrypointTree(context);
|
|
47
|
+
const reactRoutes = await visitEntrypointTree(entrypointTree, async (module, children) => {
|
|
44
48
|
const renderer = module.handle != null
|
|
45
49
|
? { Component: createRouteRenderer({ context, module, hasChildren: children.length > 0 }) }
|
|
46
50
|
: undefined;
|
|
51
|
+
// The React tree nests, so each node contributes only its OWN segment — its ancestors are
|
|
52
|
+
// the branches it hangs under and already carry theirs.
|
|
47
53
|
const route = {
|
|
48
54
|
...(module.route.route.default ? { index: true } : undefined),
|
|
49
|
-
...(!module.route.route.default ? { path: module.
|
|
55
|
+
...(!module.route.route.default ? { path: relative(module.segment()), children } : undefined),
|
|
50
56
|
...renderer
|
|
51
57
|
};
|
|
52
58
|
return route;
|
package/build/router.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC9F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAMjD,kGAAkG;AAClG,MAAM,QAAQ,GAAG,CAAC,OAAe,EAAU,EAAE;IAC3C,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;IACxB,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAEhE,OAAO,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AACjE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAE5B,8EAA8E;IAC9E,uDAAuD;IACvD,MAAM,SAAS,GAA+B,OAAO,OAAO,KAAK,UAAU;QACzE,CAAC,CAAE,OAA0B;QAC7B,CAAC,CAAC,OAAO,IAAI,IAAI;YACf,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAC9C,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAkB,CAC3D,CAAA;IACD,sFAAsF;IACtF,sCAAsC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;YAC5C,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;YAEvB,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;gBACtB,gBAAgB,CAAC,OAAc,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;qBAC/D,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAA;YACtC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,mDAAmD;IACnD,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;QACnB,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAA;AAC/D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,GAAgB,EAAE;IAC/C,MAAM,QAAQ,GAAG,eAAe,CAAA;IAChC,MAAM,KAAK,GAAgB;QACzB,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;YACrB,MAAM,OAAO,GAAG,aAAa,CAAkB,GAAc,EAAE,QAAQ,CAAC,CAAA;YACxE,MAAM,cAAc,GAAG,mBAAmB,CAAC,OAAkB,CAAC,CAAA;YAE9D,MAAM,WAAW,GAAkB,MAAM,mBAAmB,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;gBACtG,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,IAAI,IAAI;oBACpC,CAAC,CAAC,EAAE,SAAS,EAAE,mBAAmB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE;oBAC3F,CAAC,CAAC,SAAS,CAAA;gBAEb,0FAA0F;gBAC1F,wDAAwD;gBACxD,MAAM,KAAK,GAAgB;oBACzB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAS,CAAC,CAAC,CAAC,SAAS,CAAC;oBACpE,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC7F,GAAG,QAAQ;iBACZ,CAAA;gBAED,OAAO,KAAK,CAAA;YACd,CAAC,CAAC,CAAA;YAEF,OAAO,KAAK,CAAC,MAAM,GAAG,WAAW,CAAA;QACnC,CAAC;KACF,CAAA;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
|