@ea-lab/reactive-json-docs 0.1.8 → 0.1.10
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.10",
|
|
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: {}
|
|
@@ -2,83 +2,166 @@
|
|
|
2
2
|
|
|
3
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
4
|
|
|
5
|
-
## ⚠️ Important
|
|
5
|
+
## ⚠️ Important Rules
|
|
6
6
|
|
|
7
|
-
**
|
|
7
|
+
**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.
|
|
8
|
+
|
|
9
|
+
When user feedback is required, wait for it and do not continue until this feedback is given.
|
|
10
|
+
|
|
11
|
+
Adapt commands according to the execution environment (Windows, Ubuntu, Mac...).
|
|
8
12
|
|
|
9
13
|
## Table of Contents
|
|
10
14
|
|
|
11
|
-
1. [
|
|
12
|
-
2. [
|
|
13
|
-
3. [
|
|
14
|
-
4. [
|
|
15
|
-
5. [
|
|
16
|
-
6. [
|
|
17
|
-
7. [
|
|
18
|
-
8. [
|
|
19
|
-
9. [
|
|
15
|
+
1. [Project Directory Confirmation](#1-project-directory-confirmation)
|
|
16
|
+
2. [Collecting User Information](#2-collecting-user-information)
|
|
17
|
+
3. [Documentation Repositories Setup](#3-documentation-repositories-setup)
|
|
18
|
+
4. [Cursor Workspace Configuration](#4-cursor-workspace-configuration)
|
|
19
|
+
5. [Vite Project Initialization](#5-vite-project-initialization)
|
|
20
|
+
6. [Project Structure Verification](#6-project-structure-verification)
|
|
21
|
+
7. [Dependencies Installation](#7-dependencies-installation)
|
|
22
|
+
8. [Cursor Project Rules Creation](#8-cursor-project-rules-creation)
|
|
23
|
+
9. [Generated Project Cleanup](#9-generated-project-cleanup)
|
|
24
|
+
10. [Basic Configuration with ReactiveJsonRoot](#10-basic-configuration-with-reactivejsonroot)
|
|
25
|
+
11. [Routing Configuration (Optional)](#11-routing-configuration-optional)
|
|
26
|
+
12. [Final Verification](#12-final-verification)
|
|
27
|
+
|
|
28
|
+
## Chronological Steps
|
|
29
|
+
|
|
30
|
+
### 1. Project Directory Confirmation
|
|
31
|
+
|
|
32
|
+
**Action:** Show the user if the IDE is opened in the directory where the project will
|
|
33
|
+
be initialized, then ask for confirmation:
|
|
34
|
+
|
|
35
|
+
- Execute the command:
|
|
36
|
+
```bash
|
|
37
|
+
pwd
|
|
38
|
+
```
|
|
39
|
+
- Show the user this info:
|
|
40
|
+
> **IMPORTANT: Directory Confirmation Required**
|
|
41
|
+
>
|
|
42
|
+
> **Current directory:** `[Display the result of pwd command]`
|
|
43
|
+
>
|
|
44
|
+
> **This directory will become your project root.** All project files will be created here.
|
|
45
|
+
- Ask the user for confirmation:
|
|
46
|
+
> **Do you confirm that this is the correct location before continuing?** If the location is wrong,
|
|
47
|
+
> please open in your IDE the location where the project will be created and restart the
|
|
48
|
+
> installation procedure.
|
|
49
|
+
- User feedback required.
|
|
50
|
+
- When user confirms, note the project directory as `<project_dir>` and go to the next step.
|
|
20
51
|
|
|
21
52
|
---
|
|
22
53
|
|
|
23
|
-
|
|
54
|
+
### 2. Collecting User Information
|
|
24
55
|
|
|
25
|
-
Ask the user for:
|
|
56
|
+
**Action:** Ask the user for the following information:
|
|
26
57
|
|
|
27
|
-
- **
|
|
28
|
-
- **
|
|
29
|
-
|
|
58
|
+
- **TypeScript**: Ask if the user wants to use TypeScript (yes/no)
|
|
59
|
+
- **Documentation repositories location**: Absolute path where to clone reactive-json and reactive-json-docs repositories. When the user gives a relative path, convert it to absolute
|
|
60
|
+
and ask for confirmation.
|
|
30
61
|
|
|
31
|
-
|
|
62
|
+
**Important:** For documentation location, **NEVER** place them in the current project directory. Propose by default: `~/cursor-docs/` or let the user specify another location outside the current project.
|
|
32
63
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
64
|
+
**Variables to remember:**
|
|
65
|
+
- `<use_typescript>`: true/false based on the answer
|
|
66
|
+
- `<docs_location>`: Absolute path for repositories (must be outside current directory)
|
|
67
|
+
|
|
68
|
+
**Validation:** Verify that `<docs_location>` is not within the current project directory.
|
|
69
|
+
When invalid, ask again the location with valid suggestions.
|
|
38
70
|
|
|
39
71
|
---
|
|
40
72
|
|
|
41
|
-
|
|
73
|
+
### 3. Documentation Repositories Setup
|
|
74
|
+
|
|
75
|
+
**Action:** Clone the required documentation repositories
|
|
76
|
+
|
|
77
|
+
**Commands to execute:**
|
|
42
78
|
|
|
43
79
|
```bash
|
|
80
|
+
mkdir -p <docs_location>
|
|
44
81
|
cd <docs_location>
|
|
45
82
|
git clone https://github.com/Ealab-collab/reactive-json.git
|
|
46
83
|
git clone https://github.com/Ealab-collab/reactive-json-docs.git
|
|
47
84
|
```
|
|
48
85
|
|
|
49
|
-
|
|
86
|
+
**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.
|
|
50
87
|
|
|
51
|
-
If repositories are already cloned, proceed directly to step
|
|
88
|
+
**Note:** If the user indicates that the repositories are already cloned, proceed directly to step 4 (Cursor Workspace Configuration) as it is essential to add the folders to the workspace even if they already exist.
|
|
52
89
|
|
|
53
90
|
---
|
|
54
91
|
|
|
55
|
-
|
|
92
|
+
### 4. Cursor Workspace Configuration
|
|
56
93
|
|
|
57
|
-
**
|
|
94
|
+
**Action:** Ask the user to add repositories to the workspace
|
|
58
95
|
|
|
59
|
-
|
|
60
|
-
2. Add `<docs_location>/reactive-json`
|
|
61
|
-
3. Add `<docs_location>/reactive-json-docs`
|
|
96
|
+
**Instructions to give to the user:**
|
|
62
97
|
|
|
63
|
-
|
|
98
|
+
> **IMPORTANT: Manual Action Required**
|
|
99
|
+
>
|
|
100
|
+
> Before continuing, you must add the cloned repositories to your Cursor workspace:
|
|
101
|
+
>
|
|
102
|
+
> 1. Go to `File > Add Folder to Workspace`
|
|
103
|
+
> 2. Add the folder `<docs_location>/reactive-json`
|
|
104
|
+
> 3. Add the folder `<docs_location>/reactive-json-docs`
|
|
105
|
+
>
|
|
106
|
+
> **Confirm that this step is completed before continuing.**
|
|
64
107
|
|
|
65
108
|
---
|
|
66
109
|
|
|
67
|
-
|
|
110
|
+
### 5. Vite Project Initialization
|
|
111
|
+
|
|
112
|
+
**Action:** Create the project with Vite in the current directory
|
|
113
|
+
|
|
114
|
+
**Commands to execute:**
|
|
68
115
|
|
|
69
116
|
```bash
|
|
70
|
-
#
|
|
71
|
-
|
|
117
|
+
# Return to project directory
|
|
118
|
+
cd <project_dir>
|
|
119
|
+
|
|
120
|
+
# If TypeScript
|
|
121
|
+
npm create vite@latest . -- --template react-ts
|
|
72
122
|
|
|
73
|
-
#
|
|
74
|
-
npm create vite@latest
|
|
123
|
+
# If JavaScript
|
|
124
|
+
npm create vite@latest . -- --template react
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
### 6. Project Structure Verification
|
|
75
130
|
|
|
76
|
-
|
|
131
|
+
**Action:** Verify the project structure is correct
|
|
132
|
+
|
|
133
|
+
**Commands to execute:**
|
|
134
|
+
|
|
135
|
+
```bash
|
|
136
|
+
ls -la
|
|
77
137
|
```
|
|
78
138
|
|
|
139
|
+
**Verification checklist:**
|
|
140
|
+
|
|
141
|
+
1. **package.json** must be at the root of the current directory
|
|
142
|
+
2. **src/** folder must be present
|
|
143
|
+
3. **public/** folder must be present
|
|
144
|
+
4. **The reactive-json and reactive-json-docs repositories must NOT be in this directory** (they should only be in the workspace)
|
|
145
|
+
|
|
146
|
+
**Instructions:**
|
|
147
|
+
|
|
148
|
+
> **IMPORTANT: Project Structure Verification**
|
|
149
|
+
>
|
|
150
|
+
> Please verify the following:
|
|
151
|
+
>
|
|
152
|
+
> ✅ `package.json` is at the root of your current directory
|
|
153
|
+
> ✅ `src/` and `public/` folders are present
|
|
154
|
+
> ✅ `reactive-json/` and `reactive-json-docs/` folders are NOT in this directory
|
|
155
|
+
>
|
|
156
|
+
> If any of these conditions are not met, **STOP** and resolve the issues before continuing.
|
|
157
|
+
|
|
79
158
|
---
|
|
80
159
|
|
|
81
|
-
|
|
160
|
+
### 7. Dependencies Installation
|
|
161
|
+
|
|
162
|
+
**Action:** Install required packages
|
|
163
|
+
|
|
164
|
+
**Commands to execute:**
|
|
82
165
|
|
|
83
166
|
```bash
|
|
84
167
|
npm install
|
|
@@ -87,14 +170,21 @@ npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-s
|
|
|
87
170
|
|
|
88
171
|
---
|
|
89
172
|
|
|
90
|
-
|
|
173
|
+
### 8. Cursor Project Rules Creation
|
|
174
|
+
|
|
175
|
+
**Action:** Copy Cursor rules from documentation repositories
|
|
91
176
|
|
|
92
|
-
|
|
177
|
+
**IMPORTANT:** This step must be done **immediately after installing dependencies** so that Cursor applies the rules during all subsequent code modifications.
|
|
93
178
|
|
|
179
|
+
**Instructions:**
|
|
180
|
+
|
|
181
|
+
1. Create the `.cursor/rules/` folder in your project:
|
|
94
182
|
```bash
|
|
95
|
-
# Create rules directory
|
|
96
183
|
mkdir -p .cursor/rules
|
|
184
|
+
```
|
|
97
185
|
|
|
186
|
+
2. Copy and merge rules from documentation repositories:
|
|
187
|
+
```bash
|
|
98
188
|
# Copy rules from reactive-json
|
|
99
189
|
cp -r <docs_location>/reactive-json/.cursor/rules/* .cursor/rules/
|
|
100
190
|
|
|
@@ -110,21 +200,25 @@ These rules contain all the necessary directives to work effectively with reacti
|
|
|
110
200
|
|
|
111
201
|
---
|
|
112
202
|
|
|
113
|
-
|
|
203
|
+
### 9. Generated Project Cleanup
|
|
114
204
|
|
|
115
|
-
Remove
|
|
205
|
+
**Action:** Remove/clean files generated by Vite
|
|
116
206
|
|
|
207
|
+
**Files to delete:**
|
|
117
208
|
- `src/App.css`
|
|
118
209
|
- `src/index.css` (keep only base styles)
|
|
119
210
|
- `public/vite.svg`
|
|
120
211
|
- `src/assets/react.svg`
|
|
121
212
|
|
|
122
|
-
|
|
213
|
+
**Files to modify:**
|
|
214
|
+
|
|
215
|
+
**`src/main.tsx` (or `src/main.jsx`):**
|
|
123
216
|
|
|
124
|
-
```
|
|
217
|
+
```javascript
|
|
125
218
|
import React from 'react'
|
|
126
219
|
import ReactDOM from 'react-dom/client'
|
|
127
220
|
import App from './App.tsx'
|
|
221
|
+
// Import Bootstrap styles for reactive-json
|
|
128
222
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
129
223
|
|
|
130
224
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
@@ -132,13 +226,19 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
|
132
226
|
)
|
|
133
227
|
```
|
|
134
228
|
|
|
229
|
+
**IMPORTANT**: do not use <StrictMode>. Reactive-JSON doesn't work with it for now!
|
|
230
|
+
|
|
135
231
|
---
|
|
136
232
|
|
|
137
|
-
|
|
233
|
+
### 10. Basic Configuration with ReactiveJsonRoot
|
|
234
|
+
|
|
235
|
+
**Action:** Configure the base component with an external YAML file
|
|
138
236
|
|
|
139
|
-
|
|
237
|
+
**IMPORTANT:** Always use an external YAML file for configuration. Never pass configuration directly in props.
|
|
140
238
|
|
|
141
|
-
|
|
239
|
+
**`src/App.tsx` (or `src/App.jsx`):**
|
|
240
|
+
|
|
241
|
+
```javascript
|
|
142
242
|
import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
|
|
143
243
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
144
244
|
|
|
@@ -149,7 +249,7 @@ function App() {
|
|
|
149
249
|
export default App
|
|
150
250
|
```
|
|
151
251
|
|
|
152
|
-
|
|
252
|
+
**`public/config.yaml`:**
|
|
153
253
|
|
|
154
254
|
```yaml
|
|
155
255
|
renderView:
|
|
@@ -159,10 +259,142 @@ renderView:
|
|
|
159
259
|
|
|
160
260
|
---
|
|
161
261
|
|
|
162
|
-
|
|
262
|
+
### 11. Routing Configuration (Optional)
|
|
263
|
+
|
|
264
|
+
**Action:** Ask the user if they want to add routing for application organization
|
|
265
|
+
|
|
266
|
+
**Question to ask:**
|
|
267
|
+
|
|
268
|
+
> **Optional: React Router Setup**
|
|
269
|
+
>
|
|
270
|
+
> Do you want to add React Router (react-router-dom) to organize your application with multiple pages/routes?
|
|
271
|
+
>
|
|
272
|
+
> This is useful if you plan to create a multi-page application.
|
|
273
|
+
>
|
|
274
|
+
> **Answer: Yes/No**
|
|
275
|
+
|
|
276
|
+
**If YES, execute the following:**
|
|
277
|
+
|
|
278
|
+
**Install react-router-dom:**
|
|
279
|
+
```bash
|
|
280
|
+
npm install react-router-dom
|
|
281
|
+
# If TypeScript
|
|
282
|
+
npm install --save-dev @types/react-router-dom
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
**Create routing structure:**
|
|
286
|
+
|
|
287
|
+
**`src/components/Navigation.tsx` (or `.jsx`):**
|
|
288
|
+
```javascript
|
|
289
|
+
import { Link, useLocation } from 'react-router-dom'
|
|
290
|
+
|
|
291
|
+
export default function Navigation() {
|
|
292
|
+
const location = useLocation()
|
|
293
|
+
|
|
294
|
+
const navItems = [
|
|
295
|
+
{ path: '/', label: 'Home' },
|
|
296
|
+
// Add or remove items here according to your needs
|
|
297
|
+
]
|
|
298
|
+
|
|
299
|
+
return (
|
|
300
|
+
<nav className="navbar navbar-expand-lg navbar-light bg-light mb-4">
|
|
301
|
+
<div className="container">
|
|
302
|
+
<Link className="navbar-brand" to="/">
|
|
303
|
+
My App
|
|
304
|
+
</Link>
|
|
305
|
+
|
|
306
|
+
<div className="navbar-nav">
|
|
307
|
+
{navItems.map((item) => (
|
|
308
|
+
<Link
|
|
309
|
+
key={item.path}
|
|
310
|
+
className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
|
|
311
|
+
to={item.path}
|
|
312
|
+
>
|
|
313
|
+
{item.label}
|
|
314
|
+
</Link>
|
|
315
|
+
))}
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
</nav>
|
|
319
|
+
)
|
|
320
|
+
}
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
**`src/config/routes.ts` (or `.js`):**
|
|
324
|
+
```javascript
|
|
325
|
+
export const routeMapping = [
|
|
326
|
+
{ path: '/', rjbuild: '/pages/home.yaml' },
|
|
327
|
+
// Add or remove routes here according to your needs
|
|
328
|
+
// Example: { path: '/about', rjbuild: '/pages/about.yaml' }
|
|
329
|
+
]
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
**Update `src/App.tsx` (or `.jsx`):**
|
|
333
|
+
```javascript
|
|
334
|
+
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
|
335
|
+
import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
|
|
336
|
+
import { routeMapping } from './config/routes'
|
|
337
|
+
import Navigation from './components/Navigation'
|
|
338
|
+
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
339
|
+
|
|
340
|
+
function App() {
|
|
341
|
+
return (
|
|
342
|
+
<Router>
|
|
343
|
+
<div>
|
|
344
|
+
<Navigation />
|
|
345
|
+
<div className="container">
|
|
346
|
+
<Routes>
|
|
347
|
+
{routeMapping.map((route) => (
|
|
348
|
+
<Route
|
|
349
|
+
key={route.path}
|
|
350
|
+
path={route.path}
|
|
351
|
+
element={
|
|
352
|
+
<ReactiveJsonRoot
|
|
353
|
+
dataUrl={route.rjbuild}
|
|
354
|
+
dataFetchMethod="GET"
|
|
355
|
+
/>
|
|
356
|
+
}
|
|
357
|
+
/>
|
|
358
|
+
))}
|
|
359
|
+
</Routes>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</Router>
|
|
363
|
+
)
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
export default App
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
**Create page configuration:**
|
|
370
|
+
```bash
|
|
371
|
+
mkdir -p public/pages
|
|
372
|
+
mkdir -p src/config
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
**`public/pages/home.yaml`:**
|
|
376
|
+
```yaml
|
|
377
|
+
renderView:
|
|
378
|
+
- type: h1
|
|
379
|
+
content: "Welcome to your React + Reactive-JSON app!"
|
|
380
|
+
- type: p
|
|
381
|
+
content: "Your routing is now configured with a navigation bar. You can add more pages in src/pages/ and routes in the App component."
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
**If NO, keep the simple configuration from step 10.**
|
|
385
|
+
|
|
386
|
+
---
|
|
387
|
+
|
|
388
|
+
### 12. Final Verification
|
|
389
|
+
|
|
390
|
+
**Action:** Launch development server
|
|
163
391
|
|
|
164
392
|
```bash
|
|
165
393
|
npm run dev
|
|
166
394
|
```
|
|
167
395
|
|
|
168
|
-
If the
|
|
396
|
+
If the server starts without errors and you see the expected message in your browser, the installation is successful. You can start developing your application with reactive-json.
|
|
397
|
+
|
|
398
|
+
**Expected results:**
|
|
399
|
+
- **Without routing:** "Ready to start!" message
|
|
400
|
+
- **With routing:** "Welcome to your React + Reactive-JSON app!" message with a navigation bar at the top of the page allowing navigation between pages
|