@ea-lab/reactive-json-docs 0.1.7 → 0.1.8
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 +1 -1
- package/public/rjbuild/docs/getting-started.md +151 -0
- package/public/rjbuild/docs/getting-started.yaml +220 -0
- package/public/rjbuild/docs/index.yaml +5 -0
- package/public/rjbuild/docs/install.md +168 -0
- package/public/rjbuild/docs/install.yaml +336 -0
- package/public/rjbuild/docs/template.md +94 -0
- package/public/rjbuild/docs/template.yaml +109 -0
package/package.json
CHANGED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# Reactive-JSON Getting Started Guide
|
|
2
|
+
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
Reactive-JSON is a powerful library that allows you to create interactive user interfaces using only JSON/YAML configurations. No need to write complex JavaScript code - simply define your interface and its behavior declaratively.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @ea-lab/reactive-json
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Basic Structure
|
|
14
|
+
|
|
15
|
+
Every Reactive-JSON configuration follows this structure:
|
|
16
|
+
|
|
17
|
+
```yaml
|
|
18
|
+
renderView: # Defines what should be rendered
|
|
19
|
+
- type: div
|
|
20
|
+
content: "Hello World!"
|
|
21
|
+
|
|
22
|
+
templates: # Defines reusable templates (optional)
|
|
23
|
+
myTemplate:
|
|
24
|
+
type: div
|
|
25
|
+
content: "Template content"
|
|
26
|
+
|
|
27
|
+
data: # Defines the data to be used (optional)
|
|
28
|
+
message: "Hello!"
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Key Concepts
|
|
32
|
+
|
|
33
|
+
### 1. Template System
|
|
34
|
+
|
|
35
|
+
Reactive-JSON uses three main notations to access data:
|
|
36
|
+
|
|
37
|
+
- `~.` : Local context (relative to current template)
|
|
38
|
+
- `~~.` : Global context (access to global data)
|
|
39
|
+
- `~>field` : Access to a specific parent context
|
|
40
|
+
|
|
41
|
+
Example:
|
|
42
|
+
```yaml
|
|
43
|
+
templates:
|
|
44
|
+
userCard:
|
|
45
|
+
type: div
|
|
46
|
+
content:
|
|
47
|
+
- type: div
|
|
48
|
+
content: ["Name: ", ~.name] # Local access to user data
|
|
49
|
+
- type: div
|
|
50
|
+
content: ["Admin: ", ~~.isAdmin] # Global access to isAdmin
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 2. Basic Elements
|
|
54
|
+
|
|
55
|
+
Reactive-JSON provides several types of elements:
|
|
56
|
+
|
|
57
|
+
#### HTML Elements
|
|
58
|
+
- Div, Button, Modal, Accordion, etc.
|
|
59
|
+
- Example:
|
|
60
|
+
```yaml
|
|
61
|
+
renderView:
|
|
62
|
+
- type: button
|
|
63
|
+
content: "Click me"
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
#### Form Fields
|
|
67
|
+
- TextField, SelectField, CheckBoxField, etc.
|
|
68
|
+
- Example:
|
|
69
|
+
```yaml
|
|
70
|
+
renderView:
|
|
71
|
+
- type: TextField
|
|
72
|
+
label: "Username"
|
|
73
|
+
dataLocation: ~.username
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
#### Special Elements
|
|
77
|
+
- DataFilter, Switch, Count, etc.
|
|
78
|
+
- Example:
|
|
79
|
+
```yaml
|
|
80
|
+
renderView:
|
|
81
|
+
- type: Switch
|
|
82
|
+
content: ~.items
|
|
83
|
+
template:
|
|
84
|
+
type: div
|
|
85
|
+
content: ~.name
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 3. Actions and Reactions
|
|
89
|
+
|
|
90
|
+
#### Actions
|
|
91
|
+
Actions modify element behavior:
|
|
92
|
+
```yaml
|
|
93
|
+
renderView:
|
|
94
|
+
- type: div
|
|
95
|
+
content: "Hidden content"
|
|
96
|
+
actions:
|
|
97
|
+
- what: hide
|
|
98
|
+
when: ~.shouldHide
|
|
99
|
+
is: true
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
#### Reactions
|
|
103
|
+
Reactions respond to user events:
|
|
104
|
+
```yaml
|
|
105
|
+
renderView:
|
|
106
|
+
- type: button
|
|
107
|
+
content: "Save"
|
|
108
|
+
actions:
|
|
109
|
+
- what: setData
|
|
110
|
+
on: click
|
|
111
|
+
path: ~.saved
|
|
112
|
+
value: true
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Complete Example
|
|
116
|
+
|
|
117
|
+
Here's a simple example of an interactive form:
|
|
118
|
+
|
|
119
|
+
```yaml
|
|
120
|
+
renderView:
|
|
121
|
+
- type: div
|
|
122
|
+
content:
|
|
123
|
+
- type: TextField
|
|
124
|
+
label: "Name"
|
|
125
|
+
dataLocation: ~.form.name
|
|
126
|
+
- type: TextField
|
|
127
|
+
label: "Email"
|
|
128
|
+
dataLocation: ~.form.email
|
|
129
|
+
- type: button
|
|
130
|
+
content: "Submit"
|
|
131
|
+
actions:
|
|
132
|
+
- what: submitData
|
|
133
|
+
on: click
|
|
134
|
+
url: "/api/submit"
|
|
135
|
+
data: ~.form
|
|
136
|
+
when: ~.form.name
|
|
137
|
+
isEmpty: not
|
|
138
|
+
|
|
139
|
+
data:
|
|
140
|
+
form:
|
|
141
|
+
name: ""
|
|
142
|
+
email: ""
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Next Steps
|
|
146
|
+
|
|
147
|
+
1. Explore the [complete examples](/docs/core/example) to see Reactive-JSON in action
|
|
148
|
+
2. Check out the [elements documentation](/docs/core/element) to discover all available components
|
|
149
|
+
3. Learn how to use the [action system](/docs/core/action) to create interactive interfaces
|
|
150
|
+
4. Discover the [reaction system](/docs/core/reaction) to handle user interactions
|
|
151
|
+
5. If needed, learn how to [extend Reactive-JSON](/docs/extend) with your own components
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
renderView:
|
|
2
|
+
- type: Markdown
|
|
3
|
+
content: |
|
|
4
|
+
# Reactive-JSON Getting Started Guide
|
|
5
|
+
|
|
6
|
+
## Introduction
|
|
7
|
+
|
|
8
|
+
Reactive-JSON is a powerful library that allows you to create interactive user interfaces using only JSON/YAML configurations. No need to write complex JavaScript code - simply define your interface and its behavior declaratively.
|
|
9
|
+
|
|
10
|
+
- type: RjBuildDescriber
|
|
11
|
+
title: "Installation and Basic Structure"
|
|
12
|
+
description:
|
|
13
|
+
- type: Markdown
|
|
14
|
+
content: |
|
|
15
|
+
To get started with Reactive-JSON, install the package via npm and create your first configuration.
|
|
16
|
+
|
|
17
|
+
The basic structure includes three main sections:
|
|
18
|
+
- `renderView`: Defines what should be rendered
|
|
19
|
+
- `templates`: Defines reusable templates (optional)
|
|
20
|
+
- `data`: Defines the data to be used (optional)
|
|
21
|
+
toDescribe:
|
|
22
|
+
renderView:
|
|
23
|
+
- type: div
|
|
24
|
+
content: "Hello World!"
|
|
25
|
+
templates:
|
|
26
|
+
myTemplate:
|
|
27
|
+
type: div
|
|
28
|
+
content: "Template content"
|
|
29
|
+
data:
|
|
30
|
+
message: "Hello!"
|
|
31
|
+
|
|
32
|
+
- type: Markdown
|
|
33
|
+
content: |
|
|
34
|
+
## Key Concepts
|
|
35
|
+
|
|
36
|
+
### 1. Template System
|
|
37
|
+
|
|
38
|
+
Reactive-JSON uses three main notations to access data:
|
|
39
|
+
- `~.` : Local context (relative to current template)
|
|
40
|
+
- `~~.` : Global context (access to global data)
|
|
41
|
+
- `~>field` : Access to a specific parent context
|
|
42
|
+
|
|
43
|
+
- type: RjBuildDescriber
|
|
44
|
+
title: "Template System Example"
|
|
45
|
+
description:
|
|
46
|
+
- type: Markdown
|
|
47
|
+
content: |
|
|
48
|
+
This example shows how to use different types of data access in a template.
|
|
49
|
+
The component accesses local data with `~.` and global data with `~~.`.
|
|
50
|
+
toDescribe:
|
|
51
|
+
templates:
|
|
52
|
+
userCard:
|
|
53
|
+
type: div
|
|
54
|
+
content:
|
|
55
|
+
- type: div
|
|
56
|
+
content: ["Name: ", ~.name]
|
|
57
|
+
- type: div
|
|
58
|
+
content: ["Admin: ", ~~.isAdmin]
|
|
59
|
+
data:
|
|
60
|
+
name: "John Doe"
|
|
61
|
+
isAdmin: true
|
|
62
|
+
|
|
63
|
+
- type: Markdown
|
|
64
|
+
content: |
|
|
65
|
+
### 2. Basic Elements
|
|
66
|
+
|
|
67
|
+
Reactive-JSON provides several types of elements:
|
|
68
|
+
|
|
69
|
+
#### HTML Elements
|
|
70
|
+
- Div, Button, Modal, Accordion, etc.
|
|
71
|
+
|
|
72
|
+
- type: RjBuildDescriber
|
|
73
|
+
title: "HTML Elements Example"
|
|
74
|
+
description:
|
|
75
|
+
- type: Markdown
|
|
76
|
+
content: |
|
|
77
|
+
Basic HTML elements like buttons and divs are easy to use.
|
|
78
|
+
toDescribe:
|
|
79
|
+
renderView:
|
|
80
|
+
- type: button
|
|
81
|
+
content: "Click me"
|
|
82
|
+
|
|
83
|
+
- type: Markdown
|
|
84
|
+
content: |
|
|
85
|
+
#### Form Fields
|
|
86
|
+
- TextField, SelectField, CheckBoxField, etc.
|
|
87
|
+
|
|
88
|
+
- type: RjBuildDescriber
|
|
89
|
+
title: "Form Fields Example"
|
|
90
|
+
description:
|
|
91
|
+
- type: Markdown
|
|
92
|
+
content: |
|
|
93
|
+
Form fields use `dataLocation` to bind data.
|
|
94
|
+
toDescribe:
|
|
95
|
+
renderView:
|
|
96
|
+
- type: TextField
|
|
97
|
+
label: "Username"
|
|
98
|
+
dataLocation: ~.username
|
|
99
|
+
data:
|
|
100
|
+
username: ""
|
|
101
|
+
|
|
102
|
+
- type: Markdown
|
|
103
|
+
content: |
|
|
104
|
+
#### Special Elements
|
|
105
|
+
- DataFilter, Switch, Count, etc.
|
|
106
|
+
|
|
107
|
+
- type: RjBuildDescriber
|
|
108
|
+
title: "Special Element Example (Switch)"
|
|
109
|
+
description:
|
|
110
|
+
- type: Markdown
|
|
111
|
+
content: |
|
|
112
|
+
The Switch component is used to iterate over data collections.
|
|
113
|
+
toDescribe:
|
|
114
|
+
renderView:
|
|
115
|
+
- type: Switch
|
|
116
|
+
content: ~.items
|
|
117
|
+
template:
|
|
118
|
+
type: div
|
|
119
|
+
content: ~.name
|
|
120
|
+
data:
|
|
121
|
+
items:
|
|
122
|
+
- name: "Item 1"
|
|
123
|
+
- name: "Item 2"
|
|
124
|
+
|
|
125
|
+
- type: Markdown
|
|
126
|
+
content: |
|
|
127
|
+
### 3. Actions and Reactions
|
|
128
|
+
|
|
129
|
+
#### Actions
|
|
130
|
+
Actions modify element behavior.
|
|
131
|
+
|
|
132
|
+
- type: RjBuildDescriber
|
|
133
|
+
title: "Action Example"
|
|
134
|
+
description:
|
|
135
|
+
- type: Markdown
|
|
136
|
+
content: |
|
|
137
|
+
Actions can be conditional, like hiding an element based on a condition.
|
|
138
|
+
toDescribe:
|
|
139
|
+
renderView:
|
|
140
|
+
- type: div
|
|
141
|
+
content: "Hidden content"
|
|
142
|
+
actions:
|
|
143
|
+
- what: hide
|
|
144
|
+
when: ~.shouldHide
|
|
145
|
+
is: true
|
|
146
|
+
data:
|
|
147
|
+
shouldHide: true
|
|
148
|
+
|
|
149
|
+
- type: Markdown
|
|
150
|
+
content: |
|
|
151
|
+
#### Reactions
|
|
152
|
+
Reactions respond to user events.
|
|
153
|
+
|
|
154
|
+
- type: RjBuildDescriber
|
|
155
|
+
title: "Reaction Example"
|
|
156
|
+
description:
|
|
157
|
+
- type: Markdown
|
|
158
|
+
content: |
|
|
159
|
+
Reactions allow responding to events like clicks.
|
|
160
|
+
toDescribe:
|
|
161
|
+
renderView:
|
|
162
|
+
- type: button
|
|
163
|
+
content: "Save"
|
|
164
|
+
actions:
|
|
165
|
+
- what: setData
|
|
166
|
+
on: click
|
|
167
|
+
path: ~.saved
|
|
168
|
+
value: true
|
|
169
|
+
data:
|
|
170
|
+
saved: false
|
|
171
|
+
|
|
172
|
+
- type: Markdown
|
|
173
|
+
content: |
|
|
174
|
+
## Complete Example
|
|
175
|
+
|
|
176
|
+
Here's a simple example of an interactive form:
|
|
177
|
+
|
|
178
|
+
- type: RjBuildDescriber
|
|
179
|
+
title: "Complete Interactive Form"
|
|
180
|
+
description:
|
|
181
|
+
- type: Markdown
|
|
182
|
+
content: |
|
|
183
|
+
This example combines several concepts:
|
|
184
|
+
- Form fields with data binding
|
|
185
|
+
- User event reactions
|
|
186
|
+
- Data validation
|
|
187
|
+
- Form submission
|
|
188
|
+
toDescribe:
|
|
189
|
+
renderView:
|
|
190
|
+
- type: div
|
|
191
|
+
content:
|
|
192
|
+
- type: TextField
|
|
193
|
+
label: "Name"
|
|
194
|
+
dataLocation: ~.form.name
|
|
195
|
+
- type: TextField
|
|
196
|
+
label: "Email"
|
|
197
|
+
dataLocation: ~.form.email
|
|
198
|
+
- type: button
|
|
199
|
+
content: "Submit"
|
|
200
|
+
actions:
|
|
201
|
+
- what: submitData
|
|
202
|
+
on: click
|
|
203
|
+
url: "/api/submit"
|
|
204
|
+
data: ~.form
|
|
205
|
+
when: ~.form.name
|
|
206
|
+
isEmpty: not
|
|
207
|
+
data:
|
|
208
|
+
form:
|
|
209
|
+
name: ""
|
|
210
|
+
email: ""
|
|
211
|
+
|
|
212
|
+
- type: Markdown
|
|
213
|
+
content: |
|
|
214
|
+
## Next Steps
|
|
215
|
+
|
|
216
|
+
1. Explore the [complete examples](/docs/core/example) to see Reactive-JSON in action
|
|
217
|
+
2. Check out the [elements documentation](/docs/core/element) to discover all available components
|
|
218
|
+
3. Learn how to use the [action system](/docs/core/action) to create interactive interfaces
|
|
219
|
+
4. Discover the [reaction system](/docs/core/reaction) to handle user interactions
|
|
220
|
+
5. If needed, learn how to [extend Reactive-JSON](/docs/extend) with your own components
|
|
@@ -24,6 +24,11 @@ renderView:
|
|
|
24
24
|
|
|
25
25
|
### Core Components
|
|
26
26
|
|
|
27
|
+
- **Template System** - Understand data binding and context management
|
|
28
|
+
- Local Context - Using `~.` for template-scoped data
|
|
29
|
+
- Global Context - Using `~~.` for application-wide data
|
|
30
|
+
- Parent Context - Using `~>` for parent template access
|
|
31
|
+
|
|
27
32
|
- **Elements** - Form fields, HTML elements, and special components
|
|
28
33
|
- Form Fields - Input fields, selects, checkboxes, etc.
|
|
29
34
|
- HTML Elements - Divs, modals, accordions, syntax highlighting, etc.
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# Reactive-JSON Installation Guide (Vite + React)
|
|
2
|
+
|
|
3
|
+
> **Tip**: In the interactive version of this documentation, a button is available to automatically copy the initialization prompt. Copy it and paste it into Cursor to start the step-by-step assistant.
|
|
4
|
+
|
|
5
|
+
## ⚠️ Important Rule
|
|
6
|
+
|
|
7
|
+
**DO NOT SKIP STEPS** unless explicitly requested by the user. Each step is critical for the proper functioning of the project and must be executed in the defined order.
|
|
8
|
+
|
|
9
|
+
## Table of Contents
|
|
10
|
+
|
|
11
|
+
1. [Collecting User Information](#1-collecting-user-information)
|
|
12
|
+
2. [Documentation Repositories Setup](#2-documentation-repositories-setup)
|
|
13
|
+
3. [Cursor Workspace Configuration](#3-cursor-workspace-configuration)
|
|
14
|
+
4. [Vite Project Initialization](#4-vite-project-initialization)
|
|
15
|
+
5. [Dependencies Installation](#5-dependencies-installation)
|
|
16
|
+
6. [Cursor Rules Creation](#6-cursor-rules-creation)
|
|
17
|
+
7. [Generated Project Cleanup](#7-generated-project-cleanup)
|
|
18
|
+
8. [Basic Configuration with ReactiveJsonRoot](#8-basic-configuration-with-reactivejsonroot)
|
|
19
|
+
9. [Final Verification](#9-final-verification)
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 1. Collecting User Information
|
|
24
|
+
|
|
25
|
+
Ask the user for:
|
|
26
|
+
|
|
27
|
+
- **Project name**
|
|
28
|
+
- **TypeScript?** (yes/no)
|
|
29
|
+
- **Documentation repositories location** (absolute path)
|
|
30
|
+
|
|
31
|
+
Remember:
|
|
32
|
+
|
|
33
|
+
| Variable | Description |
|
|
34
|
+
| -------- | ----------- |
|
|
35
|
+
| `<project_name>` | Project name |
|
|
36
|
+
| `<use_typescript>` | `true` or `false` |
|
|
37
|
+
| `<docs_location>` | Absolute path for repositories |
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## 2. Documentation Repositories Setup
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
cd <docs_location>
|
|
45
|
+
git clone https://github.com/Ealab-collab/reactive-json.git
|
|
46
|
+
git clone https://github.com/Ealab-collab/reactive-json-docs.git
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
> These repositories are used **only** for Cursor to index the documentation and will **not** be included in the final project.
|
|
50
|
+
|
|
51
|
+
If repositories are already cloned, proceed directly to step 3.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 3. Cursor Workspace Configuration
|
|
56
|
+
|
|
57
|
+
**Manual action required!**
|
|
58
|
+
|
|
59
|
+
1. Open `File > Add Folder to Workspace`
|
|
60
|
+
2. Add `<docs_location>/reactive-json`
|
|
61
|
+
3. Add `<docs_location>/reactive-json-docs`
|
|
62
|
+
|
|
63
|
+
Make sure these folders appear in the explorer before continuing.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## 4. Vite Project Initialization
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
# With TypeScript
|
|
71
|
+
npm create vite@latest <project_name> -- --template react-ts
|
|
72
|
+
|
|
73
|
+
# With JavaScript
|
|
74
|
+
npm create vite@latest <project_name> -- --template react
|
|
75
|
+
|
|
76
|
+
cd <project_name>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## 5. Dependencies Installation
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
npm install
|
|
85
|
+
npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 6. Cursor Rules Creation
|
|
91
|
+
|
|
92
|
+
Copy rules from documentation repositories **before** any code modification:
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
# Create rules directory
|
|
96
|
+
mkdir -p .cursor/rules
|
|
97
|
+
|
|
98
|
+
# Copy rules from reactive-json
|
|
99
|
+
cp -r <docs_location>/reactive-json/.cursor/rules/* .cursor/rules/
|
|
100
|
+
|
|
101
|
+
# Copy and merge rules from reactive-json-docs
|
|
102
|
+
cp -r <docs_location>/reactive-json-docs/.cursor/rules/* .cursor/rules/
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
These rules contain all the necessary directives to work effectively with reactive-json, including:
|
|
106
|
+
- Required documentation rules
|
|
107
|
+
- Component creation rules
|
|
108
|
+
- Code language rules
|
|
109
|
+
- And other project-specific rules
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 7. Generated Project Cleanup
|
|
114
|
+
|
|
115
|
+
Remove unnecessary files:
|
|
116
|
+
|
|
117
|
+
- `src/App.css`
|
|
118
|
+
- `src/index.css` (keep only base styles)
|
|
119
|
+
- `public/vite.svg`
|
|
120
|
+
- `src/assets/react.svg`
|
|
121
|
+
|
|
122
|
+
Modify `src/main.tsx` (or `src/main.jsx`):
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
import React from 'react'
|
|
126
|
+
import ReactDOM from 'react-dom/client'
|
|
127
|
+
import App from './App.tsx'
|
|
128
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
129
|
+
|
|
130
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
131
|
+
<App />
|
|
132
|
+
)
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## 8. Basic Configuration with ReactiveJsonRoot
|
|
138
|
+
|
|
139
|
+
`src/App.tsx`:
|
|
140
|
+
|
|
141
|
+
```typescript
|
|
142
|
+
import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
|
|
143
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
144
|
+
|
|
145
|
+
function App() {
|
|
146
|
+
return <ReactiveJsonRoot dataUrl="/config.yaml" dataFetchMethod="GET" />
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
export default App
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
`public/config.yaml`:
|
|
153
|
+
|
|
154
|
+
```yaml
|
|
155
|
+
renderView:
|
|
156
|
+
- type: h1
|
|
157
|
+
content: "Ready to start!"
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## 9. Final Verification
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
npm run dev
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
If the "Ready to start!" message appears without errors, the installation is complete! You can start developing your application with Reactive-JSON.
|
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
renderView:
|
|
2
|
+
- type: button
|
|
3
|
+
content: "📋 Copy initialization prompt"
|
|
4
|
+
actions:
|
|
5
|
+
- what: setClipboardData
|
|
6
|
+
on: click
|
|
7
|
+
value: |
|
|
8
|
+
# Initialization Prompt - Vite + React + @ea-lab/reactive-json Project
|
|
9
|
+
|
|
10
|
+
## ⚠️ Important Rule
|
|
11
|
+
|
|
12
|
+
**NEVER SKIP STEPS** unless explicitly requested by the user. Each step is critical for the proper functioning of the project and must be executed in the defined chronological order.
|
|
13
|
+
|
|
14
|
+
Adapt commands according to the execution environment (Windows, Ubuntu, Mac...).
|
|
15
|
+
|
|
16
|
+
## Table of Contents
|
|
17
|
+
|
|
18
|
+
1. [Collecting User Information](#1-collecting-user-information)
|
|
19
|
+
2. [Documentation Repositories Setup](#2-documentation-repositories-setup)
|
|
20
|
+
3. [Cursor Workspace Configuration](#3-cursor-workspace-configuration)
|
|
21
|
+
4. [Vite Project Initialization](#4-vite-project-initialization)
|
|
22
|
+
5. [Dependencies Installation](#5-dependencies-installation)
|
|
23
|
+
6. [Cursor Project Rules Creation](#6-cursor-project-rules-creation)
|
|
24
|
+
7. [Generated Project Cleanup](#7-generated-project-cleanup)
|
|
25
|
+
8. [Basic Configuration with ReactiveJsonRoot](#8-basic-configuration-with-reactivejsonroot)
|
|
26
|
+
9. [Final Verification](#9-final-verification)
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Chronological Steps
|
|
31
|
+
|
|
32
|
+
### 1. Collecting User Information
|
|
33
|
+
|
|
34
|
+
**Action:** Ask the user for the following information:
|
|
35
|
+
|
|
36
|
+
- **Project name**: Will be used to create the project folder
|
|
37
|
+
- **TypeScript**: Ask if the user wants to use TypeScript (yes/no)
|
|
38
|
+
- **Documentation repositories location**: Absolute path where to clone reactive-json and reactive-json-docs repositories
|
|
39
|
+
|
|
40
|
+
**Variables to remember:**
|
|
41
|
+
- `<project_name>`: The name provided by the user
|
|
42
|
+
- `<use_typescript>`: true/false based on the answer
|
|
43
|
+
- `<docs_location>`: Absolute path for repositories
|
|
44
|
+
|
|
45
|
+
### 2. Documentation Repositories Setup
|
|
46
|
+
|
|
47
|
+
**Action:** Clone the required documentation repositories
|
|
48
|
+
|
|
49
|
+
**Commands to execute:**
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
cd <docs_location>
|
|
53
|
+
git clone https://github.com/Ealab-collab/reactive-json.git
|
|
54
|
+
git clone https://github.com/Ealab-collab/reactive-json-docs.git
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**Important:** Explain to the user that these repositories are **only** for Cursor to index the documentation and will **not** be included in the final project.
|
|
58
|
+
|
|
59
|
+
**Note:** If the user indicates that the repositories are already cloned, proceed directly to step 3 (Cursor Workspace Configuration) as it is essential to add the folders to the workspace even if they already exist.
|
|
60
|
+
|
|
61
|
+
### 3. Cursor Workspace Configuration
|
|
62
|
+
|
|
63
|
+
**Action:** Ask the user to add repositories to the workspace
|
|
64
|
+
|
|
65
|
+
**Instructions to give to the user:**
|
|
66
|
+
|
|
67
|
+
> **IMPORTANT: Manual Action Required**
|
|
68
|
+
>
|
|
69
|
+
> Before continuing, you must add the cloned repositories to your Cursor workspace:
|
|
70
|
+
>
|
|
71
|
+
> 1. Go to `File > Add Folder to Workspace`
|
|
72
|
+
> 2. Add the folder `<docs_location>/reactive-json`
|
|
73
|
+
> 3. Add the folder `<docs_location>/reactive-json-docs`
|
|
74
|
+
>
|
|
75
|
+
> **Confirm that this step is completed before continuing.**
|
|
76
|
+
|
|
77
|
+
### 4. Vite Project Initialization
|
|
78
|
+
|
|
79
|
+
**Action:** Create the project with Vite
|
|
80
|
+
|
|
81
|
+
**Commands to execute:**
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
# If TypeScript
|
|
85
|
+
npm create vite@latest <project_name> -- --template react-ts
|
|
86
|
+
|
|
87
|
+
# If JavaScript
|
|
88
|
+
npm create vite@latest <project_name> -- --template react
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
cd <project_name>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### 5. Dependencies Installation
|
|
96
|
+
|
|
97
|
+
**Action:** Install required packages
|
|
98
|
+
|
|
99
|
+
**Commands to execute:**
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
npm install
|
|
103
|
+
npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### 6. Cursor Project Rules Creation
|
|
107
|
+
|
|
108
|
+
**Action:** Copy Cursor rules from documentation repositories
|
|
109
|
+
|
|
110
|
+
**IMPORTANT:** This step must be done **immediately after installing dependencies** so that Cursor applies the rules during all subsequent code modifications.
|
|
111
|
+
|
|
112
|
+
**Instructions:**
|
|
113
|
+
|
|
114
|
+
1. Create the `.cursor/rules/` folder in your project:
|
|
115
|
+
```bash
|
|
116
|
+
mkdir -p .cursor/rules
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
2. Copy and merge rules from documentation repositories:
|
|
120
|
+
```bash
|
|
121
|
+
# Copy rules from reactive-json
|
|
122
|
+
cp -r <docs_location>/reactive-json/.cursor/rules/* .cursor/rules/
|
|
123
|
+
|
|
124
|
+
# Copy and merge rules from reactive-json-docs
|
|
125
|
+
cp -r <docs_location>/reactive-json-docs/.cursor/rules/* .cursor/rules/
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
These rules contain all the necessary directives to work effectively with reactive-json, including:
|
|
129
|
+
- Required documentation rules
|
|
130
|
+
- Component creation rules
|
|
131
|
+
- Code language rules
|
|
132
|
+
- And other project-specific rules
|
|
133
|
+
|
|
134
|
+
### 7. Generated Project Cleanup
|
|
135
|
+
|
|
136
|
+
**Action:** Remove/clean files generated by Vite
|
|
137
|
+
|
|
138
|
+
**Files to delete:**
|
|
139
|
+
- `src/App.css`
|
|
140
|
+
- `src/index.css` (keep only base styles)
|
|
141
|
+
- `public/vite.svg`
|
|
142
|
+
- `src/assets/react.svg`
|
|
143
|
+
|
|
144
|
+
**Files to modify:**
|
|
145
|
+
|
|
146
|
+
**`src/main.tsx` (or `src/main.jsx`):**
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
import React from 'react'
|
|
150
|
+
import ReactDOM from 'react-dom/client'
|
|
151
|
+
import App from './App.tsx'
|
|
152
|
+
// Import Bootstrap styles for reactive-json
|
|
153
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
154
|
+
|
|
155
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
156
|
+
<App />
|
|
157
|
+
)
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### 8. Basic Configuration with ReactiveJsonRoot
|
|
161
|
+
|
|
162
|
+
**Action:** Configure the base component with an external YAML file
|
|
163
|
+
|
|
164
|
+
**IMPORTANT:** Always use an external YAML file for configuration. Never pass configuration directly in props.
|
|
165
|
+
|
|
166
|
+
**`src/App.tsx` (or `src/App.jsx`):**
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
|
|
170
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
171
|
+
|
|
172
|
+
function App() {
|
|
173
|
+
return <ReactiveJsonRoot dataUrl="/config.yaml" dataFetchMethod="GET" />
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export default App
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
**`public/config.yaml`:**
|
|
180
|
+
|
|
181
|
+
```yaml
|
|
182
|
+
renderView:
|
|
183
|
+
- type: h1
|
|
184
|
+
content: "Ready to start!"
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### 9. Final Verification
|
|
188
|
+
|
|
189
|
+
**Action:** Launch development server
|
|
190
|
+
|
|
191
|
+
```bash
|
|
192
|
+
npm run dev
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
If the server starts without errors and you see the "Ready to start!" message in your browser, the installation is successful. You can start developing your application with reactive-json.
|
|
196
|
+
- type: Markdown
|
|
197
|
+
content: |
|
|
198
|
+
# Reactive-JSON Installation Guide (Vite + React)
|
|
199
|
+
|
|
200
|
+
Follow the steps below to initialize a Vite + React project using `@ea-lab/reactive-json`. Do **not** skip any steps.
|
|
201
|
+
|
|
202
|
+
> **Note:** This guide assumes the use of the **Cursor** IDE to benefit from its AI assistant and automatic rules features. However, you can adapt each step and command to your preferred editor or IDE (VS Code, WebStorm, etc.).
|
|
203
|
+
|
|
204
|
+
## Detailed Installation Steps
|
|
205
|
+
|
|
206
|
+
The sections below walk you through each required action. Copy and paste the commands when provided.
|
|
207
|
+
|
|
208
|
+
### 1. Collecting User Information
|
|
209
|
+
Ask the following questions:
|
|
210
|
+
1. **Project name** (`<project_name>`)
|
|
211
|
+
2. **Use TypeScript?** (`<use_typescript>`)
|
|
212
|
+
3. **Absolute path for documentation repositories** (`<docs_location>`)
|
|
213
|
+
|
|
214
|
+
### 2. Documentation Repositories Setup
|
|
215
|
+
Execute the following commands:
|
|
216
|
+
- type: SyntaxHighlighter
|
|
217
|
+
language: bash
|
|
218
|
+
content: |
|
|
219
|
+
cd <docs_location>
|
|
220
|
+
git clone https://github.com/Ealab-collab/reactive-json.git
|
|
221
|
+
git clone https://github.com/Ealab-collab/reactive-json-docs.git
|
|
222
|
+
|
|
223
|
+
- type: Markdown
|
|
224
|
+
content: |
|
|
225
|
+
### 3. Cursor Workspace Configuration
|
|
226
|
+
**Manually** add the two cloned folders to the workspace:
|
|
227
|
+
1. `<docs_location>/reactive-json`
|
|
228
|
+
2. `<docs_location>/reactive-json-docs`
|
|
229
|
+
|
|
230
|
+
- type: Markdown
|
|
231
|
+
content: |
|
|
232
|
+
### 4. Vite Project Initialization
|
|
233
|
+
- type: SyntaxHighlighter
|
|
234
|
+
language: bash
|
|
235
|
+
content: |
|
|
236
|
+
# With TypeScript
|
|
237
|
+
npm create vite@latest <project_name> -- --template react-ts
|
|
238
|
+
# With JavaScript
|
|
239
|
+
npm create vite@latest <project_name> -- --template react
|
|
240
|
+
cd <project_name>
|
|
241
|
+
|
|
242
|
+
- type: Markdown
|
|
243
|
+
content: |
|
|
244
|
+
### 5. Dependencies Installation
|
|
245
|
+
- type: SyntaxHighlighter
|
|
246
|
+
language: bash
|
|
247
|
+
content: |
|
|
248
|
+
npm install
|
|
249
|
+
npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
|
|
250
|
+
|
|
251
|
+
- type: Markdown
|
|
252
|
+
content: |
|
|
253
|
+
### 6. Cursor Rules Creation
|
|
254
|
+
Copy rules from documentation repositories **before any code modification**.
|
|
255
|
+
- type: SyntaxHighlighter
|
|
256
|
+
language: bash
|
|
257
|
+
content: |
|
|
258
|
+
# Create rules directory
|
|
259
|
+
mkdir -p .cursor/rules
|
|
260
|
+
|
|
261
|
+
# Copy rules from reactive-json
|
|
262
|
+
cp -r <docs_location>/reactive-json/.cursor/rules/* .cursor/rules/
|
|
263
|
+
|
|
264
|
+
# Copy and merge rules from reactive-json-docs
|
|
265
|
+
cp -r <docs_location>/reactive-json-docs/.cursor/rules/* .cursor/rules/
|
|
266
|
+
|
|
267
|
+
- type: Markdown
|
|
268
|
+
content: |
|
|
269
|
+
These rules contain all the necessary directives to work effectively with reactive-json, including:
|
|
270
|
+
- Required documentation rules
|
|
271
|
+
- Component creation rules
|
|
272
|
+
- Code language rules
|
|
273
|
+
- And other project-specific rules
|
|
274
|
+
|
|
275
|
+
- type: Markdown
|
|
276
|
+
content: |
|
|
277
|
+
### 7. Vite Project Cleanup
|
|
278
|
+
Remove unnecessary files (`App.css`, `index.css`, `vite.svg`, `react.svg`) and modify `src/main.tsx`:
|
|
279
|
+
|
|
280
|
+
- type: Markdown
|
|
281
|
+
content: |
|
|
282
|
+
**File: src/main.tsx**
|
|
283
|
+
- type: SyntaxHighlighter
|
|
284
|
+
language: typescript
|
|
285
|
+
content: |
|
|
286
|
+
import React from 'react'
|
|
287
|
+
import ReactDOM from 'react-dom/client'
|
|
288
|
+
import App from './App.tsx'
|
|
289
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
290
|
+
|
|
291
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
292
|
+
<App />
|
|
293
|
+
)
|
|
294
|
+
|
|
295
|
+
- type: Markdown
|
|
296
|
+
content: |
|
|
297
|
+
### 8. Basic Configuration with ReactiveJsonRoot
|
|
298
|
+
|
|
299
|
+
- type: Markdown
|
|
300
|
+
content: |
|
|
301
|
+
**File: src/App.tsx**
|
|
302
|
+
- type: SyntaxHighlighter
|
|
303
|
+
language: typescript
|
|
304
|
+
content: |
|
|
305
|
+
import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
|
|
306
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
307
|
+
|
|
308
|
+
function App() {
|
|
309
|
+
return <ReactiveJsonRoot dataUrl="/config.yaml" dataFetchMethod="GET" />
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
export default App
|
|
313
|
+
|
|
314
|
+
- type: Markdown
|
|
315
|
+
content: |
|
|
316
|
+
**File: public/config.yaml**
|
|
317
|
+
- type: SyntaxHighlighter
|
|
318
|
+
language: yaml
|
|
319
|
+
content: |
|
|
320
|
+
renderView:
|
|
321
|
+
- type: h1
|
|
322
|
+
content: "Ready to start!"
|
|
323
|
+
|
|
324
|
+
- type: Markdown
|
|
325
|
+
content: |
|
|
326
|
+
### 9. Final Verification
|
|
327
|
+
- type: SyntaxHighlighter
|
|
328
|
+
language: bash
|
|
329
|
+
content: |
|
|
330
|
+
npm run dev
|
|
331
|
+
|
|
332
|
+
# Open http://localhost:5173 and verify that "Ready to start!" is displayed.
|
|
333
|
+
|
|
334
|
+
templates:
|
|
335
|
+
|
|
336
|
+
data: {}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Template and Context System
|
|
2
|
+
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
The template system in reactive-json efficiently manages data contexts and their access. Understanding how templates "containerize" data is essential for properly using components, actions, and reactions.
|
|
6
|
+
|
|
7
|
+
## Context Notations
|
|
8
|
+
|
|
9
|
+
There are three main notations for accessing data:
|
|
10
|
+
|
|
11
|
+
- `~.` : Local context (relative to current template)
|
|
12
|
+
- `~~.` : Global context (access to global data)
|
|
13
|
+
- `~>field` : Access to a specific parent context by climbing up to a given key
|
|
14
|
+
|
|
15
|
+
### Context Usage Example
|
|
16
|
+
|
|
17
|
+
```yaml
|
|
18
|
+
templates:
|
|
19
|
+
userList:
|
|
20
|
+
type: Switch
|
|
21
|
+
content: ~~.users
|
|
22
|
+
template:
|
|
23
|
+
type: div
|
|
24
|
+
content:
|
|
25
|
+
- type: div
|
|
26
|
+
content: ["Name: ", ~.name] # Local access to current user data
|
|
27
|
+
- type: div
|
|
28
|
+
content: ["Admin: ", ~~.isAdmin] # Global access to isAdmin data
|
|
29
|
+
- type: div
|
|
30
|
+
content: ["Parent: ", ~>userList.title] # Climbs up to 'userList' template to access title
|
|
31
|
+
|
|
32
|
+
data:
|
|
33
|
+
users:
|
|
34
|
+
- name: "John"
|
|
35
|
+
isAdmin: true
|
|
36
|
+
userList:
|
|
37
|
+
title: "User List"
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
In this example:
|
|
41
|
+
- `~.name` accesses the `name` property from the local context (current user)
|
|
42
|
+
- `~~.isAdmin` accesses the `isAdmin` property from the global context
|
|
43
|
+
- `~>userList.title` climbs up to the "userList" template and accesses its `title` property
|
|
44
|
+
|
|
45
|
+
## Containerization Principle
|
|
46
|
+
|
|
47
|
+
Templates create context "containers". This means each template defines its own local data space.
|
|
48
|
+
|
|
49
|
+
### Impact on Components
|
|
50
|
+
|
|
51
|
+
This containerization affects several aspects:
|
|
52
|
+
|
|
53
|
+
1. **Forms**: Form fields using `~.` access data from their defining template
|
|
54
|
+
2. **Actions**: Actions using `~.` modify data within the template context
|
|
55
|
+
3. **Reactions**: Reactions can access different levels depending on the prefix used
|
|
56
|
+
|
|
57
|
+
### Form Context Example
|
|
58
|
+
|
|
59
|
+
```yaml
|
|
60
|
+
templates:
|
|
61
|
+
editForm:
|
|
62
|
+
type: form
|
|
63
|
+
content:
|
|
64
|
+
- type: TextField
|
|
65
|
+
path: ~.temp_name # Local modification
|
|
66
|
+
value: ~.name # Initial value
|
|
67
|
+
- type: button
|
|
68
|
+
content: "Save"
|
|
69
|
+
actions:
|
|
70
|
+
- what: setData
|
|
71
|
+
on: click
|
|
72
|
+
path: ~~.globalUser.name # Global save
|
|
73
|
+
value: ~.temp_name # Uses temporary value
|
|
74
|
+
|
|
75
|
+
data:
|
|
76
|
+
temp_name: ""
|
|
77
|
+
name: "John"
|
|
78
|
+
globalUser:
|
|
79
|
+
name: "John"
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Key Points to Remember
|
|
83
|
+
|
|
84
|
+
1. Two components using `~.` in different templates access different data
|
|
85
|
+
2. Actions and reactions respect the context where they are defined
|
|
86
|
+
3. Containerization allows isolating modifications until validation
|
|
87
|
+
4. `~~.` allows "escaping" the container to access global data
|
|
88
|
+
5. `~>field` allows climbing up to a specific parent context using the template name as reference
|
|
89
|
+
|
|
90
|
+
## Best Practices
|
|
91
|
+
|
|
92
|
+
1. **Context Coherence**: Ensure components that need to share data are in the same context
|
|
93
|
+
2. **Global Access**: Use `~~.` for data that needs to be shared between different templates
|
|
94
|
+
3. **Hierarchical Navigation**: Use `~>field` to access specific parent template data by explicitly naming it
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
renderView:
|
|
2
|
+
- type: Markdown
|
|
3
|
+
content: |
|
|
4
|
+
# Template and Context System
|
|
5
|
+
|
|
6
|
+
## Introduction
|
|
7
|
+
|
|
8
|
+
The template system in reactive-json efficiently manages data contexts and their access. Understanding how templates "containerize" data is essential for properly using components, actions, and reactions.
|
|
9
|
+
|
|
10
|
+
- type: RjBuildDescriber
|
|
11
|
+
title: "Context Notations"
|
|
12
|
+
description:
|
|
13
|
+
- type: Markdown
|
|
14
|
+
content: |
|
|
15
|
+
There are three main notations for accessing data:
|
|
16
|
+
|
|
17
|
+
- `~.` : Local context (relative to current template)
|
|
18
|
+
- `~~.` : Global context (access to global data)
|
|
19
|
+
- `~>field` : Access to a specific parent context by climbing up to a given key
|
|
20
|
+
|
|
21
|
+
toDescribe:
|
|
22
|
+
templates:
|
|
23
|
+
userList:
|
|
24
|
+
type: Switch
|
|
25
|
+
content: ~~.users
|
|
26
|
+
template:
|
|
27
|
+
type: div
|
|
28
|
+
content:
|
|
29
|
+
- type: div
|
|
30
|
+
content: ["Name: ", ~.name] # Local access to current user data
|
|
31
|
+
- type: div
|
|
32
|
+
content: ["Admin: ", ~~.isAdmin] # Global access to isAdmin data
|
|
33
|
+
- type: div
|
|
34
|
+
content: ["Parent: ", ~>userList.title] # Climbs up to 'userList' template to access title
|
|
35
|
+
|
|
36
|
+
data:
|
|
37
|
+
users:
|
|
38
|
+
- name: "John"
|
|
39
|
+
isAdmin: true
|
|
40
|
+
userList:
|
|
41
|
+
title: "User List"
|
|
42
|
+
|
|
43
|
+
- type: Markdown
|
|
44
|
+
content: |
|
|
45
|
+
In this example:
|
|
46
|
+
- `~.name` accesses the `name` property from the local context (current user)
|
|
47
|
+
- `~~.isAdmin` accesses the `isAdmin` property from the global context
|
|
48
|
+
- `~>userList.title` climbs up to the "userList" template and accesses its `title` property
|
|
49
|
+
|
|
50
|
+
## Containerization Principle
|
|
51
|
+
|
|
52
|
+
Templates create context "containers". This means each template defines its own local data space.
|
|
53
|
+
|
|
54
|
+
### Impact on Components
|
|
55
|
+
|
|
56
|
+
This containerization affects several aspects:
|
|
57
|
+
|
|
58
|
+
1. **Forms**: Form fields using `~.` access data from their defining template
|
|
59
|
+
2. **Actions**: Actions using `~.` modify data within the template context
|
|
60
|
+
3. **Reactions**: Reactions can access different levels depending on the prefix used
|
|
61
|
+
|
|
62
|
+
- type: RjBuildDescriber
|
|
63
|
+
title: "Form Context Example"
|
|
64
|
+
description:
|
|
65
|
+
- type: Markdown
|
|
66
|
+
content: |
|
|
67
|
+
This example shows how a form uses local context for editing before saving to the global context.
|
|
68
|
+
|
|
69
|
+
toDescribe:
|
|
70
|
+
templates:
|
|
71
|
+
editForm:
|
|
72
|
+
type: form
|
|
73
|
+
content:
|
|
74
|
+
- type: TextField
|
|
75
|
+
path: ~.temp_name # Local modification
|
|
76
|
+
value: ~.name # Initial value
|
|
77
|
+
- type: button
|
|
78
|
+
content: "Save"
|
|
79
|
+
actions:
|
|
80
|
+
- what: setData
|
|
81
|
+
on: click
|
|
82
|
+
path: ~~.globalUser.name # Global save
|
|
83
|
+
value: ~.temp_name # Uses temporary value
|
|
84
|
+
|
|
85
|
+
data:
|
|
86
|
+
temp_name: ""
|
|
87
|
+
name: "John"
|
|
88
|
+
globalUser:
|
|
89
|
+
name: "John"
|
|
90
|
+
|
|
91
|
+
- type: Markdown
|
|
92
|
+
content: |
|
|
93
|
+
## Key Points to Remember
|
|
94
|
+
|
|
95
|
+
1. Two components using `~.` in different templates access different data
|
|
96
|
+
2. Actions and reactions respect the context where they are defined
|
|
97
|
+
3. Containerization allows isolating modifications until validation
|
|
98
|
+
4. `~~.` allows "escaping" the container to access global data
|
|
99
|
+
5. `~>field` allows climbing up to a specific parent context using the template name as reference
|
|
100
|
+
|
|
101
|
+
## Best Practices
|
|
102
|
+
|
|
103
|
+
1. **Context Coherence**: Ensure components that need to share data are in the same context
|
|
104
|
+
2. **Global Access**: Use `~~.` for data that needs to be shared between different templates
|
|
105
|
+
3. **Hierarchical Navigation**: Use `~>field` to access specific parent template data by explicitly naming it
|
|
106
|
+
|
|
107
|
+
templates:
|
|
108
|
+
|
|
109
|
+
data: {}
|