@ea-lab/reactive-json-docs 0.1.8 → 0.1.9
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ea-lab/reactive-json-docs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides",
|
|
5
5
|
"main": "public/rjbuild/docs/index.yaml",
|
|
6
6
|
"files": [
|
|
@@ -24,10 +24,9 @@
|
|
|
24
24
|
},
|
|
25
25
|
"homepage": "https://github.com/Ealab-collab/reactive-json-docs#readme",
|
|
26
26
|
"private": false,
|
|
27
|
-
"dependencies": {},
|
|
28
27
|
"devDependencies": {
|
|
29
28
|
"@craco/craco": "^7.1.0",
|
|
30
|
-
"@ea-lab/reactive-json": "^0.0.
|
|
29
|
+
"@ea-lab/reactive-json": "^0.0.44",
|
|
31
30
|
"@ea-lab/reactive-json-chartjs": "^0.0.23",
|
|
32
31
|
"@npmcli/fs": "^4.0.0",
|
|
33
32
|
"@reduxjs/toolkit": "^2.6.1",
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Forward Update Pattern (Event Placeholders)
|
|
2
|
+
|
|
3
|
+
Added in **reactive-json@0.0.43**.
|
|
4
|
+
|
|
5
|
+
> Use the special placeholder `<reactive-json:event>` to reference values coming directly from the DOM or the custom event that triggered a reaction.
|
|
6
|
+
|
|
7
|
+
The **Forward Update** pattern lets you use the special placeholder `<reactive-json:event>` inside any reaction arguments. It is primarily useful with `setData`, but can be applied to any reaction. Instead of reading a value *after* the global data has been updated, you can forward the fresh value carried by the event itself.
|
|
8
|
+
|
|
9
|
+
## Syntax
|
|
10
|
+
|
|
11
|
+
```yaml
|
|
12
|
+
# Simplified shortcut
|
|
13
|
+
value: "<reactive-json:event-new-value>" # Auto-detects the relevant value (value or checked)
|
|
14
|
+
|
|
15
|
+
# Generic pattern
|
|
16
|
+
value: "<reactive-json:event>.target.value" # For text inputs
|
|
17
|
+
value: "<reactive-json:event>.target.checked" # For checkboxes
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### The `<reactive-json:event-new-value>` shortcut
|
|
21
|
+
|
|
22
|
+
`<reactive-json:event-new-value>` returns, in order of priority:
|
|
23
|
+
1. `event.target.checked` (checkboxes / toggle inputs)
|
|
24
|
+
2. `event.target.value` (text inputs, selects, etc.)
|
|
25
|
+
3. `undefined` if none of the above exists.
|
|
26
|
+
|
|
27
|
+
## Good Practice
|
|
28
|
+
|
|
29
|
+
- For standard form events (`change`, `input`, etc.), prefer the shortcut `<reactive-json:event-new-value>`.
|
|
30
|
+
- For custom events (e.g. messages via `postMessage`, `CustomEvent`), reference the payload explicitly:
|
|
31
|
+
- `<reactive-json:event>.data.foo` (MessageEvent)
|
|
32
|
+
- `<reactive-json:event>.detail.bar` (CustomEvent)
|
|
33
|
+
- The bare placeholder `<reactive-json:event>` returns `undefined` on purpose to avoid storing large non-serializable objects.
|
|
34
|
+
|
|
35
|
+
If no property path is provided (`<reactive-json:event>` alone), nothing is forwarded (`undefined`).
|
|
36
|
+
|
|
37
|
+
You can access any nested property (`detail`, `key`, etc.).
|
|
38
|
+
|
|
39
|
+
## Typical Use-cases
|
|
40
|
+
|
|
41
|
+
- Real-time mirroring of form fields
|
|
42
|
+
- “Select all” checkboxes
|
|
43
|
+
- Forward arbitrary values coming from events
|
|
44
|
+
|
|
45
|
+
## Examples
|
|
46
|
+
|
|
47
|
+
### Synchronized CheckBoxes (Select-all pattern)
|
|
48
|
+
|
|
49
|
+
```yaml
|
|
50
|
+
renderView:
|
|
51
|
+
- type: CheckBoxField
|
|
52
|
+
dataLocation: ~~.controller_checked
|
|
53
|
+
options:
|
|
54
|
+
- label: "Controller"
|
|
55
|
+
value: true
|
|
56
|
+
actions:
|
|
57
|
+
- what: setData
|
|
58
|
+
on: change
|
|
59
|
+
path: ~~.mirror_checked
|
|
60
|
+
value: "<reactive-json:event>.target.checked"
|
|
61
|
+
- type: CheckBoxField
|
|
62
|
+
dataLocation: ~~.mirror_checked
|
|
63
|
+
options:
|
|
64
|
+
- label: "Mirror (synced)"
|
|
65
|
+
value: true
|
|
66
|
+
|
|
67
|
+
data:
|
|
68
|
+
controller_checked: false
|
|
69
|
+
mirror_checked: false
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Synchronized TextFields
|
|
73
|
+
|
|
74
|
+
```yaml
|
|
75
|
+
renderView:
|
|
76
|
+
- type: TextField
|
|
77
|
+
label: Primary input
|
|
78
|
+
placeholder: Type here...
|
|
79
|
+
dataLocation: ~~.primary_text
|
|
80
|
+
actions:
|
|
81
|
+
- what: setData
|
|
82
|
+
on: change
|
|
83
|
+
path: ~~.secondary_text
|
|
84
|
+
value: "<reactive-json:event>.target.value"
|
|
85
|
+
- type: TextField
|
|
86
|
+
label: Secondary input (synced)
|
|
87
|
+
placeholder: Echo...
|
|
88
|
+
dataLocation: ~~.secondary_text
|
|
89
|
+
|
|
90
|
+
data:
|
|
91
|
+
primary_text: ""
|
|
92
|
+
secondary_text: ""
|
|
93
|
+
```
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
renderView:
|
|
2
|
+
# Version badge reusable component
|
|
3
|
+
- type: span
|
|
4
|
+
attributes:
|
|
5
|
+
class: "badge bg-secondary px-2 py-1"
|
|
6
|
+
content: "reactive-json@0.0.43"
|
|
7
|
+
|
|
8
|
+
- type: Markdown
|
|
9
|
+
content: |
|
|
10
|
+
# Forward Update Pattern (Event Placeholders)
|
|
11
|
+
|
|
12
|
+
> Use the special placeholder `<reactive-json:event>` to reference values coming directly from the DOM or custom event that triggered a reaction.
|
|
13
|
+
|
|
14
|
+
The **Forward Update** pattern lets you use the special placeholder `<reactive-json:event>` inside any reaction arguments.
|
|
15
|
+
It is primarily useful with `setData`, but can be applied to any reaction.
|
|
16
|
+
Instead of reading a value *after* the global data has been updated, you can forward the fresh value carried by the event itself.
|
|
17
|
+
|
|
18
|
+
- type: SyntaxHighlighter
|
|
19
|
+
language: yaml
|
|
20
|
+
content: |
|
|
21
|
+
# Simplified shortcut
|
|
22
|
+
value: "<reactive-json:event-new-value>" # Auto-detects the relevant value (value or checked)
|
|
23
|
+
|
|
24
|
+
# Generic pattern
|
|
25
|
+
value: "<reactive-json:event>.target.value" # For text inputs
|
|
26
|
+
value: "<reactive-json:event>.target.checked" # For checkboxes
|
|
27
|
+
|
|
28
|
+
- type: Markdown
|
|
29
|
+
content: |
|
|
30
|
+
`<reactive-json:event-new-value>` returns, in order of priority:
|
|
31
|
+
1. `event.target.checked` (checkboxes / toggle inputs)
|
|
32
|
+
2. `event.target.value` (text inputs, selects, etc.)
|
|
33
|
+
3. `undefined` if none of the above exists.
|
|
34
|
+
|
|
35
|
+
**Good practice**
|
|
36
|
+
- For standard form events (`change`, `input`, etc.), prefer the shortcut `<reactive-json:event-new-value>`.
|
|
37
|
+
- For custom events (e.g. messages via `postMessage`, `CustomEvent`), reference the payload explicitly :
|
|
38
|
+
- `<reactive-json:event>.data.foo` (MessageEvent)
|
|
39
|
+
- `<reactive-json:event>.detail.bar` (CustomEvent)
|
|
40
|
+
- The bare placeholder `<reactive-json:event>` returns `undefined` on purpose, to avoid storing large non-serializable objects.
|
|
41
|
+
|
|
42
|
+
If no property path is provided (`<reactive-json:event>` alone), nothing is forwarded (`undefined`).
|
|
43
|
+
|
|
44
|
+
You can access any nested property (`detail`, `key`, etc.).
|
|
45
|
+
|
|
46
|
+
Typical use-cases:
|
|
47
|
+
- Real-time mirroring of form fields
|
|
48
|
+
- "Select all" checkboxes
|
|
49
|
+
- Forward arbitrary values coming from events.
|
|
50
|
+
|
|
51
|
+
# --- Interactive example: Synchronized CheckBoxes (use-case "Select all")
|
|
52
|
+
- type: RjBuildDescriber
|
|
53
|
+
title: "Synchronized CheckBoxes (Select-all pattern)"
|
|
54
|
+
description:
|
|
55
|
+
type: Markdown
|
|
56
|
+
content: |
|
|
57
|
+
Ticking the **Controller** checkbox instantly updates the **Mirror** checkbox thanks to
|
|
58
|
+
`value: "<reactive-json:event>.target.checked"`.
|
|
59
|
+
toDescribe:
|
|
60
|
+
renderView:
|
|
61
|
+
- type: CheckBoxField
|
|
62
|
+
dataLocation: ~~.controller_checked
|
|
63
|
+
options:
|
|
64
|
+
- label: "Controller"
|
|
65
|
+
value: true
|
|
66
|
+
actions:
|
|
67
|
+
- what: setData
|
|
68
|
+
on: change
|
|
69
|
+
path: ~~.mirror_checked
|
|
70
|
+
value: "<reactive-json:event>.target.checked"
|
|
71
|
+
- type: CheckBoxField
|
|
72
|
+
dataLocation: ~~.mirror_checked
|
|
73
|
+
options:
|
|
74
|
+
- label: "Mirror (synced)"
|
|
75
|
+
value: true
|
|
76
|
+
data:
|
|
77
|
+
controller_checked: false
|
|
78
|
+
mirror_checked: false
|
|
79
|
+
|
|
80
|
+
# --- Interactive example: Synchronized TextFields ---
|
|
81
|
+
- type: RjBuildDescriber
|
|
82
|
+
title: "Synchronized TextFields"
|
|
83
|
+
description:
|
|
84
|
+
type: Markdown
|
|
85
|
+
content: |
|
|
86
|
+
Each keystroke in the **Primary** field is forwarded to the **Secondary** field via
|
|
87
|
+
`value: "<reactive-json:event>.target.value"`.
|
|
88
|
+
toDescribe:
|
|
89
|
+
renderView:
|
|
90
|
+
- type: TextField
|
|
91
|
+
label: Primary input
|
|
92
|
+
placeholder: Type here...
|
|
93
|
+
dataLocation: ~~.primary_text
|
|
94
|
+
actions:
|
|
95
|
+
- what: setData
|
|
96
|
+
on: change
|
|
97
|
+
path: ~~.secondary_text
|
|
98
|
+
value: "<reactive-json:event>.target.value"
|
|
99
|
+
- type: TextField
|
|
100
|
+
label: Secondary input (synced)
|
|
101
|
+
placeholder: Echo...
|
|
102
|
+
dataLocation: ~~.secondary_text
|
|
103
|
+
data:
|
|
104
|
+
primary_text: ""
|
|
105
|
+
secondary_text: ""
|
|
106
|
+
|
|
107
|
+
templates:
|
|
108
|
+
|
|
109
|
+
data: {}
|
|
@@ -157,6 +157,8 @@ renderView:
|
|
|
157
157
|
)
|
|
158
158
|
```
|
|
159
159
|
|
|
160
|
+
**IMPORTANT**: do not use `<StrictMode>`. Reactive-JSON doesn't work with it for now!
|
|
161
|
+
|
|
160
162
|
### 8. Basic Configuration with ReactiveJsonRoot
|
|
161
163
|
|
|
162
164
|
**Action:** Configure the base component with an external YAML file
|
|
@@ -294,6 +296,8 @@ renderView:
|
|
|
294
296
|
|
|
295
297
|
- type: Markdown
|
|
296
298
|
content: |
|
|
299
|
+
**IMPORTANT**: do not use `<StrictMode>`. Reactive-JSON doesn't work with it for now!
|
|
300
|
+
|
|
297
301
|
### 8. Basic Configuration with ReactiveJsonRoot
|
|
298
302
|
|
|
299
303
|
- type: Markdown
|