tutuca 0.9.80 → 0.9.81
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/package.json
CHANGED
package/skill/tutuca/advanced.md
CHANGED
|
@@ -42,9 +42,16 @@ Touch is wired up too (drag fires after a small move threshold).
|
|
|
42
42
|
|
|
43
43
|
## Dynamic Bindings
|
|
44
44
|
|
|
45
|
-
For passing values "context-style"
|
|
46
|
-
|
|
47
|
-
resolve as `*name`.
|
|
45
|
+
For passing values "context-style" to a deep descendant without threading
|
|
46
|
+
them through every component in between. **`provide`** on the producer;
|
|
47
|
+
**`lookup`** on consumers; resolve as `*name`.
|
|
48
|
+
|
|
49
|
+
> **Best practice:** keep state local to the component and reach for
|
|
50
|
+
> `provide` / `lookup` only when it is genuinely the only solution. Dynamic
|
|
51
|
+
> bindings couple a consumer to a producer that may not be in scope — prefer
|
|
52
|
+
> keeping components as self-contained as possible: let a child render the
|
|
53
|
+
> field it needs from its owner, and lift state only as far up the tree as it
|
|
54
|
+
> actually needs to live.
|
|
48
55
|
|
|
49
56
|
```js
|
|
50
57
|
const Theme = component({
|
|
@@ -24,7 +24,7 @@ task.
|
|
|
24
24
|
|
|
25
25
|
## Context & dynamic variables
|
|
26
26
|
|
|
27
|
-
- [Share state
|
|
27
|
+
- [Share state across the tree](share-state-across-the-tree.md) — `provide` / `lookup` and reading `*name`.
|
|
28
28
|
- [Edit through a dynamic target](edit-through-a-dynamic-target.md) — render `*name` and teleport edits back to the owner.
|
|
29
29
|
|
|
30
30
|
## Composition
|
|
@@ -24,4 +24,4 @@ fired inside the rendered child is *teleported*: the mutation skips the
|
|
|
24
24
|
intermediate components and lands on `Workspace.sheet`, so the owner and any
|
|
25
25
|
other view of the same value update in lock-step. A `provide` can even point at
|
|
26
26
|
a seq-access (`.items[.selectedKey]`) to expose "the selected item". This is
|
|
27
|
-
the **edit** counterpart of the share-state-
|
|
27
|
+
the **edit** counterpart of the share-state-across-the-tree recipe.
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
# Share state
|
|
1
|
+
# Share state across the tree
|
|
2
2
|
|
|
3
3
|
**Problem:** a deep descendant needs a value owned by a distant ancestor, and
|
|
4
4
|
you don't want to thread it through every component in between.
|
|
5
5
|
|
|
6
|
+
> **Reach for this last.** Keep state local to the component and use
|
|
7
|
+
> `provide` / `lookup` only when it is genuinely the only solution — a value
|
|
8
|
+
> owned far away that a deep descendant needs and nothing in between should
|
|
9
|
+
> know about. Dynamic bindings couple a consumer to a producer that may not be
|
|
10
|
+
> in scope, so keep components as self-contained as possible: let a child
|
|
11
|
+
> render the field it needs from its owner, and lift state only as far up the
|
|
12
|
+
> tree as it needs to live.
|
|
13
|
+
|
|
6
14
|
```js
|
|
7
15
|
// producer — exposes one of its fields under a name
|
|
8
16
|
const Producer = component({
|