@tumaet/prompt-shared-state 0.0.15 → 0.0.17
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/README.md +102 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,103 @@
|
|
|
1
|
-
# prompt-shared-state
|
|
2
|
-
|
|
3
|
-
It enables to share state, hooks and interfaces over multiple mircofrontends.
|
|
1
|
+
# prompt-shared-state
|
|
2
|
+
A shared library for the **AET Prompt2** system that provides common interfaces and state management (via [Zustand](https://github.com/pmndrs/zustand)) across multiple microfrontends.
|
|
4
3
|
|
|
4
|
+
## Overview
|
|
5
|
+
The **prompt-shared-state** package is designed to help multiple microfrontends share:
|
|
6
|
+
- **Data** and **state** through a global [Zustand](https://github.com/pmndrs/zustand) store.
|
|
7
|
+
- **Common TypeScript interfaces** for consistent data modeling
|
|
8
|
+
|
|
9
|
+
By using this library, you ensure that all microfrontends reference the same store instance and interfaces, avoiding inconsistencies and duplication.
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
- **Shared Interfaces**: Commonly used interfaces that can be referenced by any microfrontend, ensuring a single source of truth for data structures. These shall also reflect the data structures used by the core API.
|
|
13
|
+
- **Global State Management**: A single Zustand store instance shared across microfrontends.
|
|
14
|
+
- **Easy Integration**: Works seamlessly with Module Federation (Webpack 5), Yarn, and npm.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
Install the package with your preferred package manager:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# Using Yarn
|
|
21
|
+
yarn add @tumaet/prompt-shared-state
|
|
22
|
+
|
|
23
|
+
# Or using npm
|
|
24
|
+
npm install @tumaet/prompt-shared-state
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
### Shared Interfaces
|
|
29
|
+
All TypeScript interfaces needed by multiple microfrontends reside here. For example:
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { SomeSharedInterface } from '@tumaet/prompt-shared-state';
|
|
33
|
+
|
|
34
|
+
// Use this interface in your code const data: SomeSharedInterface = { // ... };
|
|
35
|
+
```
|
|
36
|
+
**Note**: If an interface is only relevant to one microfrontend, keep it local to that microfrontend rather than placing it here.
|
|
37
|
+
|
|
38
|
+
### Global Zustand Store
|
|
39
|
+
The package provides a shared Zustand store that can be imported and used by any microfrontend. For example:
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import { useSharedStore } from '@tumaet/prompt-shared-state';
|
|
43
|
+
|
|
44
|
+
function MyComponent() {
|
|
45
|
+
const [sharedValue, setSharedValue] = useSharedStore((state) => [
|
|
46
|
+
state.sharedValue, state.setSharedValue,
|
|
47
|
+
]);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<div>
|
|
51
|
+
<p>Shared Value: {sharedValue}</p>
|
|
52
|
+
<button onClick={() => setSharedValue('New Value')}>
|
|
53
|
+
Update Shared Value
|
|
54
|
+
</button>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Any changes to the store will be reflected across all microfrontends using this library.
|
|
61
|
+
|
|
62
|
+
### Module Federation Configuration
|
|
63
|
+
For the state to be truly _shared_ among all microfrontends, configure **Module Federation** to treat `@tumaet/prompt-shared-state` as a singleton:
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
new ModuleFederationPlugin({
|
|
67
|
+
name: 'your-module',
|
|
68
|
+
shared: {
|
|
69
|
+
'@tumaet/prompt-shared-state': {
|
|
70
|
+
singleton: true,
|
|
71
|
+
requiredVersion: deps['@tumaet/prompt-shared-state'],
|
|
72
|
+
},
|
|
73
|
+
// ...other shared dependencies
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
This ensures there is only **one** instance of the shared state library at runtime.
|
|
78
|
+
|
|
79
|
+
## Best Practices
|
|
80
|
+
1. **Store Only Truly Shared Data** Keep only data in the global Zustand store that needs to be accessed by multiple microfrontends.
|
|
81
|
+
2. **Keep Interfaces Organized** Place only _truly global_ interfaces in this package. Any interface specific to a single module should remain in that module.
|
|
82
|
+
3. **Version Synchronization** Make sure all microfrontends use the same version of the shared package to avoid any incompatibilities.
|
|
83
|
+
4. **Avoid Overexposing State** If you have sensitive or security-related information, think carefully about whether it needs to be available globally. ---
|
|
84
|
+
|
|
85
|
+
## Publishing Process
|
|
86
|
+
|
|
87
|
+
As a member of the AET team, please contribute your changes by creating a pull request.
|
|
88
|
+
Once your changes are reviewed and merged into the `main` branch, a GitHub workflow will automatically:
|
|
89
|
+
|
|
90
|
+
1. Bump the package version (according to the keyword in your commit message).
|
|
91
|
+
2. Publish the updated package to the npm registry.
|
|
92
|
+
|
|
93
|
+
### Commit Message Keywords
|
|
94
|
+
Include **one** of the following keywords in your commit message to indicate how the version should be bumped:
|
|
95
|
+
|
|
96
|
+
- **major**
|
|
97
|
+
- Increments the major version (e.g. `1.2.3` → `2.0.0`).
|
|
98
|
+
- **minor**
|
|
99
|
+
- Increments the minor version (e.g. `1.2.3` → `1.3.0`).
|
|
100
|
+
- **(no keyword) or "patch"**
|
|
101
|
+
- Increments the patch version by default (e.g. `1.2.3` → `1.2.4`).
|
|
102
|
+
|
|
103
|
+
If you do not include `major` or `minor` in your commit message, the workflow will assume a **patch** update.
|