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.
Files changed (3) hide show
  1. package/LICENSE +14 -17
  2. package/README.md +83 -103
  3. package/package.json +1 -1
package/LICENSE CHANGED
@@ -1,21 +1,18 @@
1
- MIT License
1
+ Plug&Code License
2
2
 
3
- Copyright (c) 2025 Alan Mendez
3
+ Copyright (c) 2026 [TU NOMBRE]
4
4
 
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
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
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
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
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
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**. It empowers developers to build complex applications by "plugging in" independent feature modules without tightly coupling the codebase.
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:** You are welcome to use Plug&Code in your personal or commercial projects. Modification or redistribution of the framework source code is prohibited without explicit permission.
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
- 🧠 Core Concepts
18
- Plug&Code is built around the PLC (Pipeline-Logic-Command) pattern combined with a specialized Reactive State Machine:
18
+ ```
19
19
 
20
- Features: Independent functions that encapsulate Logic, UI, and Data. No more monolithic configurations.
20
+ ---
21
21
 
22
- Stores (State): Isolated state containers (substores) that can be linked reactively.
22
+ ## 🧠 Core Concepts
23
23
 
24
- Slots (UI Pipeline): Inject components into pre-defined locations from any feature.
24
+ Plug&Code is built around the **PLC (Pipeline–Logic–Command)** pattern combined with a specialized **Reactive State Machine**.
25
25
 
26
- Commands (Logic): Execute and wrap business actions (e.g., checkout, print) with middleware support.
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
- Transforms (Data): Pass data through named channels to be modified by different features before rendering.
34
+ ---
29
35
 
30
- πŸš€ Quick Start Guide
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
- TypeScript
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
- // 1. Initialize State
41
- api.createData("pagination", { currentPage: 1, pageSize: 10, total: 0 });
42
-
43
- // 2. Reactive Linking (Derive)
44
- // Automatically update 'root.activePage' when 'pagination' changes
45
- api.derive("activePage", ["pagination"], () => api.getData("pagination"));
46
-
47
- // 3. Register UI Component
48
- // The 3rd argument ("pagination") subscribes this component to the store.
49
- api.register("table-footer", (pageData) => {
50
- const { currentPage } = pageData;
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
- 2. Initialize your System
62
- Import your feature functions and inject them into the system.
57
+ ```
63
58
 
64
- TypeScript
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
- // Initialize global root data
73
- api.createData("root", { appName: "My Dashboard", theme: "dark" });
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
- 3. Wrap your Application
80
- Use the hooks to provide context and render slots.
74
+ ```
81
75
 
82
- TypeScript
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
- {api.render("table-footer")}
92
+ {api.render("table-footer")}
99
93
  </div>
100
94
  </main>
101
95
  </SystemPlcRoot>
102
96
  );
103
97
  }
104
- πŸ“š API Reference
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
- initialData: The starting object.
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
- dependencies: Array of store keys to listen to.
102
+ ## πŸ“š API Reference
135
103
 
136
- api.watch(key, selector, callback)
137
- Listens for changes to perform side effects (logging, analytics, etc.).
104
+ ### 🧬 State & Reactivity
138
105
 
139
- UI Management (Slots)
140
- api.register(slotName, componentFn, [dependencyKey])
141
- Adds a component to a pipeline.
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
- slotName: Where to inject the component.
114
+ ---
144
115
 
145
- componentFn: Function receiving data and returning JSX.
116
+ ### 🎨 UI Slots
146
117
 
147
- dependencyKey: The store key this component subscribes to. It triggers a re-render only when that specific store changes.
118
+ | Method | Description |
119
+ | ------------------------------------ | -------------------- |
120
+ | `register(slot, component, depKey?)` | Attach UI to slot |
121
+ | `render(slot, props?)` | Render slot pipeline |
148
122
 
149
- api.render(slotName, [props])
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
- api.execute(id, payload): Runs a command and returns a Promise.
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
- api.wrapCommand(id, middlewareFn): Intercepts a command to add logic before/after execution.
133
+ ---
158
134
 
159
- Data Processing (Transforms)
160
- api.send(channel, id, fn, priority): Adds a transformation step to a data pipeline.
135
+ ### πŸ”„ Data Transforms
161
136
 
162
- api.receive(channel, initialData): Pipes data through all transformers in the channel.
137
+ | Method | Description |
138
+ | --------------------------------- | ------------- |
139
+ | `send(channel, id, fn, priority)` | Add transform |
140
+ | `receive(channel, data)` | Run pipeline |
163
141
 
164
- 🌟 Best Practices
165
- Independent Files: Keep each feature in its own file (e.g., AuthFeature.ts, TableFeature.ts).
142
+ ---
166
143
 
167
- Use Derive: Prefer api.derive over manual updates to sync data between stores.
144
+ ## 🌟 Best Practices
168
145
 
169
- Scope Dependencies: Always pass the dependencyKey (3rd arg) in api.register to ensure optimal performance.
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
- Avoid "Root" Spam: Create specific stores ("filters", "auth", "cart") instead of putting everything in "root". This prevents unnecessary re-renders.
151
+ ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plug-code",
3
- "version": "1.1.14",
3
+ "version": "1.1.16",
4
4
  "description": "",
5
5
  "main": "src/plug-code.tsx",
6
6
  "types": "types/plug-code.d.ts",