@jsenv/navi 0.29.44 → 0.29.45
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/dist/jsenv_navi.js +806 -718
- package/dist/jsenv_navi.js.map +21 -16
- package/dist/jsenv_navi_side_effects.js +86 -1
- package/dist/jsenv_navi_side_effects.js.map +3 -3
- package/docs/AI_INSTRUCTIONS.md +3 -2
- package/docs/css_architecture.md +66 -0
- package/docs/form_changed.md +50 -0
- package/package.json +1 -1
package/docs/form_changed.md
CHANGED
|
@@ -7,6 +7,7 @@ as an answer the form already holds, and what to do on a screen whose fields are
|
|
|
7
7
|
filled a request later.
|
|
8
8
|
|
|
9
9
|
- [Sending nothing is the default](#sending-nothing-is-the-default)
|
|
10
|
+
- [What follows a send](#what-follows-a-send)
|
|
10
11
|
- [What the form is measured against](#what-the-form-is-measured-against)
|
|
11
12
|
- [What counts as already held](#what-counts-as-already-held)
|
|
12
13
|
- [A screen filled after it opened: `pristineKey`](#a-screen-filled-after-it-opened-pristinekey)
|
|
@@ -31,6 +32,50 @@ duplicates are fine.
|
|
|
31
32
|
<Form action={notify} canSendWhileUnchanged>
|
|
32
33
|
```
|
|
33
34
|
|
|
35
|
+
## What follows a send
|
|
36
|
+
|
|
37
|
+
The form has answered its question; `command` says what the screen does about
|
|
38
|
+
it — dismiss the popup (`--navi-close`), move on the slide map
|
|
39
|
+
(`--navi-left`…), go to a page (`--navi-nav-to:/games/42`), stay put
|
|
40
|
+
(`--navi-void`). Left out, the surface the form sits in decides: a popup closes,
|
|
41
|
+
a slide goes on, a form on a page does nothing.
|
|
42
|
+
|
|
43
|
+
It runs **whether or not there was anything to send** — that is the other half
|
|
44
|
+
of the rule above: the person is done either way, and a submit that ran no
|
|
45
|
+
action still closes the popup, still moves on, still navigates. Which is why
|
|
46
|
+
this is a prop, decided before the send: the form has to know where it goes even
|
|
47
|
+
when nothing happened.
|
|
48
|
+
|
|
49
|
+
Nothing runs when the send fails, or when a constraint refuses it. The form then
|
|
50
|
+
stays in front of the person, showing what it is waiting for.
|
|
51
|
+
|
|
52
|
+
### When only the response knows where to go
|
|
53
|
+
|
|
54
|
+
A creation lands on the page the server just made, and its id comes back with
|
|
55
|
+
the response — too late for a prop. Do it in the action, which is where the
|
|
56
|
+
answer is:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
<Form
|
|
60
|
+
action={async (value) => {
|
|
61
|
+
const game = await createGame(value);
|
|
62
|
+
navTo(`/games/${game.id}`);
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Nothing to declare: a creation always has something to send, so there is no
|
|
68
|
+
"the press did nothing" case for `command` to cover.
|
|
69
|
+
|
|
70
|
+
If you would rather it go through the command machinery all the same (to reuse
|
|
71
|
+
whatever a command does on that surface), the form carries what follows the send
|
|
72
|
+
as `data-after-send`, read once the send has succeeded — so an action can write
|
|
73
|
+
it while it runs:
|
|
74
|
+
|
|
75
|
+
```js
|
|
76
|
+
formRef.current.setAttribute("data-after-send", `--navi-nav-to:/games/${id}`);
|
|
77
|
+
```
|
|
78
|
+
|
|
34
79
|
## What the form is measured against
|
|
35
80
|
|
|
36
81
|
One value, called the baseline here: **what the form held the last time it had
|
|
@@ -90,6 +135,11 @@ Its submit is live, and pressing it sends back the resource untouched.
|
|
|
90
135
|
Change it **once**, when the screen is ready. Taken again after someone started
|
|
91
136
|
typing, it would call what they wrote the reference.
|
|
92
137
|
|
|
138
|
+
No need to delay it by a tick: the reference is taken when the fields have
|
|
139
|
+
settled, and again at the end of that same tick — so a row that arrives in a
|
|
140
|
+
render of its own (a value computed from signals, a memoized row) is part of it
|
|
141
|
+
without the screen having to know which of its fields settle late.
|
|
142
|
+
|
|
93
143
|
Do not use a `key` on the `<Form>` for this: it remounts every control and every
|
|
94
144
|
popup inside it, and anything half-typed goes with them.
|
|
95
145
|
|