plug-code 1.1.14 β 1.1.16
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/LICENSE +14 -17
- package/README.md +83 -103
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
Plug&Code License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2026 [TU NOMBRE]
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
5
|
+
All rights reserved.
|
|
11
6
|
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
Permission is hereby granted to use this software for personal and commercial projects.
|
|
8
|
+
You may modify the software for your own internal use.
|
|
14
9
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
You may NOT:
|
|
11
|
+
- Redistribute this software or any modified version of it.
|
|
12
|
+
- Sell, sublicense, publish, or share this software.
|
|
13
|
+
- Use this software as the basis for another framework, library, or competing product.
|
|
14
|
+
|
|
15
|
+
This software is provided "as is", without warranty of any kind, express or implied,
|
|
16
|
+
including but not limited to the warranties of merchantability, fitness for a
|
|
17
|
+
particular purpose and noninfringement. In no event shall the author be liable
|
|
18
|
+
for any claim, damages or other liability arising from the use of this software.
|
package/README.md
CHANGED
|
@@ -1,171 +1,151 @@
|
|
|
1
|
-
# Plug&Code
|
|
1
|
+
# π Plug&Code
|
|
2
2
|
|
|
3
|
-
**Plug&Code** is a multipurpose React framework designed for **scalability, reusability, and modular organization**.
|
|
3
|
+
**Plug&Code** is a multipurpose React framework designed for **scalability, reusability, and modular organization**.
|
|
4
|
+
It empowers developers to build complex applications by **plugging in independent feature modules** without tightly coupling the codebase.
|
|
4
5
|
|
|
5
|
-
> **License
|
|
6
|
+
> **License**
|
|
7
|
+
> This project is licensed under the Plug&Code License.
|
|
8
|
+
> See the LICENSE file for details.
|
|
6
9
|
|
|
7
10
|
---
|
|
8
11
|
|
|
9
12
|
## π¦ Installation
|
|
10
13
|
|
|
11
|
-
Install the framework via npm or yarn:
|
|
12
|
-
|
|
13
14
|
```bash
|
|
14
15
|
npm install plug-code
|
|
15
16
|
# or
|
|
16
17
|
yarn add plug-code
|
|
17
|
-
|
|
18
|
-
Plug&Code is built around the PLC (Pipeline-Logic-Command) pattern combined with a specialized Reactive State Machine:
|
|
18
|
+
```
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
---
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
## π§ Core Concepts
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
Plug&Code is built around the **PLC (PipelineβLogicβCommand)** pattern combined with a specialized **Reactive State Machine**.
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
| Concept | Description |
|
|
27
|
+
| ----------------------- | -------------------------------------------------------- |
|
|
28
|
+
| **Features** | Independent modules that encapsulate logic, UI, and data |
|
|
29
|
+
| **Stores (State)** | Isolated substores with reactive linking |
|
|
30
|
+
| **Slots (UI Pipeline)** | Injection points for UI from any feature |
|
|
31
|
+
| **Commands (Logic)** | Executable business actions with middleware |
|
|
32
|
+
| **Transforms (Data)** | Data pipelines modified by multiple features |
|
|
27
33
|
|
|
28
|
-
|
|
34
|
+
---
|
|
29
35
|
|
|
30
|
-
π Quick Start
|
|
31
|
-
1. Create a Feature Module
|
|
32
|
-
Define features in separate files. A feature is simply a function that receives the api.
|
|
36
|
+
## π Quick Start
|
|
33
37
|
|
|
34
|
-
|
|
38
|
+
### 1οΈβ£ Create a Feature Module
|
|
35
39
|
|
|
40
|
+
```ts
|
|
36
41
|
// features/PaginationFeature.ts
|
|
37
42
|
import type { PlcAPI } from 'plug-code';
|
|
38
43
|
|
|
39
44
|
export const PaginationFeature = (api: PlcAPI<any>) => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
// Use the extended update to modify data
|
|
53
|
-
const goNext = () => api.update(
|
|
54
|
-
"pagination", // Store to update
|
|
55
|
-
d => { d.currentPage++ } // Updater (Immer draft)
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
return <button onClick={goNext}>Page {currentPage}</button>;
|
|
59
|
-
}, "pagination");
|
|
45
|
+
api.createData("pagination", { currentPage: 1, pageSize: 10, total: 0 });
|
|
46
|
+
|
|
47
|
+
api.derive("activePage", ["pagination"], () => api.getData("pagination"));
|
|
48
|
+
|
|
49
|
+
api.register("table-footer", (pageData) => {
|
|
50
|
+
const { currentPage } = pageData;
|
|
51
|
+
|
|
52
|
+
const goNext = () => api.update("pagination", d => { d.currentPage++ });
|
|
53
|
+
|
|
54
|
+
return <button onClick={goNext}>Page {currentPage}</button>;
|
|
55
|
+
}, "pagination");
|
|
60
56
|
};
|
|
61
|
-
|
|
62
|
-
Import your feature functions and inject them into the system.
|
|
57
|
+
```
|
|
63
58
|
|
|
64
|
-
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
### 2οΈβ£ Initialize the System
|
|
65
62
|
|
|
63
|
+
```ts
|
|
66
64
|
// system.ts
|
|
67
65
|
import { createPlugAndCode } from 'plug-code';
|
|
68
66
|
import { PaginationFeature } from './features/PaginationFeature';
|
|
69
67
|
import { SalesFeature } from './features/SalesFeature';
|
|
70
68
|
|
|
71
69
|
export const { useSystemPlc, SystemPlcRoot } = createPlugAndCode((api) => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
// Install Features
|
|
76
|
-
PaginationFeature(api);
|
|
77
|
-
SalesFeature(api);
|
|
70
|
+
// It creates root automatically | root = {}
|
|
71
|
+
PaginationFeature(api);
|
|
72
|
+
SalesFeature(api);
|
|
78
73
|
});
|
|
79
|
-
|
|
80
|
-
Use the hooks to provide context and render slots.
|
|
74
|
+
```
|
|
81
75
|
|
|
82
|
-
|
|
76
|
+
---
|
|
83
77
|
|
|
78
|
+
### 3οΈβ£ Wrap Your Application
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
84
81
|
// App.tsx
|
|
85
82
|
import { useSystemPlc, SystemPlcRoot } from './system';
|
|
86
83
|
|
|
87
84
|
function App() {
|
|
88
|
-
// Initialize system with props (synced to "root" store automatically)
|
|
89
85
|
const { api, useSelector } = useSystemPlc({ mode: "production" });
|
|
90
86
|
|
|
91
87
|
return (
|
|
92
88
|
<SystemPlcRoot api={api}>
|
|
93
89
|
<main>
|
|
94
90
|
<h1>Welcome to {useSelector(s => s.root.appName)}</h1>
|
|
95
|
-
|
|
96
|
-
{/* Render slots: The pipeline assembles all registered components */}
|
|
97
91
|
<div className="footer-area">
|
|
98
|
-
|
|
92
|
+
{api.render("table-footer")}
|
|
99
93
|
</div>
|
|
100
94
|
</main>
|
|
101
95
|
</SystemPlcRoot>
|
|
102
96
|
);
|
|
103
97
|
}
|
|
104
|
-
|
|
105
|
-
State Management & Reactivity
|
|
106
|
-
The framework uses an isolated store architecture with reactive capabilities using Immer.
|
|
107
|
-
|
|
108
|
-
api.createData(key, initialData)
|
|
109
|
-
Initializes a new substore.
|
|
110
|
-
|
|
111
|
-
key: Unique identifier (e.g., "pagination").
|
|
98
|
+
```
|
|
112
99
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
api.getData(key)
|
|
116
|
-
Imperatively retrieves the current snapshot of a store.
|
|
117
|
-
|
|
118
|
-
api.update(key, updater, [slot], [triggerKey])
|
|
119
|
-
Updates the state using Immer-powered drafts.
|
|
120
|
-
|
|
121
|
-
key: The store to update.
|
|
122
|
-
|
|
123
|
-
updater: (draft) => void. Mutate the draft directly.
|
|
124
|
-
|
|
125
|
-
slot (Optional): Name of the UI slot to invalidate (clears visual cache).
|
|
126
|
-
|
|
127
|
-
triggerKey (Optional): Name of another store to force-update (useful for manual dependency triggering without derive).
|
|
128
|
-
|
|
129
|
-
api.derive(targetKey, dependencies, calculator)
|
|
130
|
-
Creates a reactive link. When dependencies change, the target is recalculated automatically.
|
|
131
|
-
|
|
132
|
-
targetKey: Where to save the result.
|
|
100
|
+
---
|
|
133
101
|
|
|
134
|
-
|
|
102
|
+
## π API Reference
|
|
135
103
|
|
|
136
|
-
|
|
137
|
-
Listens for changes to perform side effects (logging, analytics, etc.).
|
|
104
|
+
### 𧬠State & Reactivity
|
|
138
105
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
106
|
+
| Method | Description |
|
|
107
|
+
| --------------------------------------- | ------------------------ |
|
|
108
|
+
| `createData(key, initial)` | Create a new store |
|
|
109
|
+
| `getData(key)` | Get snapshot of store |
|
|
110
|
+
| `update(key, updater, slot?, trigger?)` | Mutate store using Immer |
|
|
111
|
+
| `derive(target, deps, calc)` | Create reactive linkage |
|
|
112
|
+
| `watch(key, selector, cb)` | Listen to store changes |
|
|
142
113
|
|
|
143
|
-
|
|
114
|
+
---
|
|
144
115
|
|
|
145
|
-
|
|
116
|
+
### π¨ UI Slots
|
|
146
117
|
|
|
147
|
-
|
|
118
|
+
| Method | Description |
|
|
119
|
+
| ------------------------------------ | -------------------- |
|
|
120
|
+
| `register(slot, component, depKey?)` | Attach UI to slot |
|
|
121
|
+
| `render(slot, props?)` | Render slot pipeline |
|
|
148
122
|
|
|
149
|
-
|
|
150
|
-
Renders the pipeline for the given slot name.
|
|
123
|
+
---
|
|
151
124
|
|
|
152
|
-
Business Logic (Commands)
|
|
153
|
-
api.registerCommand(id, fn): Registers an executable action.
|
|
125
|
+
### π§ Business Logic (Commands)
|
|
154
126
|
|
|
155
|
-
|
|
127
|
+
| Method | Description |
|
|
128
|
+
| ----------------------------- | ----------------- |
|
|
129
|
+
| `registerCommand(id, fn)` | Register action |
|
|
130
|
+
| `execute(id, payload)` | Run command |
|
|
131
|
+
| `wrapCommand(id, middleware)` | Intercept command |
|
|
156
132
|
|
|
157
|
-
|
|
133
|
+
---
|
|
158
134
|
|
|
159
|
-
Data
|
|
160
|
-
api.send(channel, id, fn, priority): Adds a transformation step to a data pipeline.
|
|
135
|
+
### π Data Transforms
|
|
161
136
|
|
|
162
|
-
|
|
137
|
+
| Method | Description |
|
|
138
|
+
| --------------------------------- | ------------- |
|
|
139
|
+
| `send(channel, id, fn, priority)` | Add transform |
|
|
140
|
+
| `receive(channel, data)` | Run pipeline |
|
|
163
141
|
|
|
164
|
-
|
|
165
|
-
Independent Files: Keep each feature in its own file (e.g., AuthFeature.ts, TableFeature.ts).
|
|
142
|
+
---
|
|
166
143
|
|
|
167
|
-
|
|
144
|
+
## π Best Practices
|
|
168
145
|
|
|
169
|
-
|
|
146
|
+
* Keep **one feature per file**
|
|
147
|
+
* Prefer `derive` over manual syncing
|
|
148
|
+
* Always specify `dependencyKey` in `register`
|
|
149
|
+
* Avoid putting everything in `root` β create focused stores
|
|
170
150
|
|
|
171
|
-
|
|
151
|
+
---
|