vite-plugin-mirrorstate 0.1.0 → 0.2.1
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 +4 -65
- package/dist/index.js +10 -0
- package/package.json +14 -9
package/README.md
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
# `vite-plugin-mirrorstate`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Vite plugin for bi-directional state synchronization with JSON files on disk.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Changes made in the UI are reflected on disk, and changes on disk propagate to the UI.
|
|
5
|
+
**Note:** Both `vite-plugin-mirrorstate` and `react-mirrorstate` are required to use MirrorState.
|
|
8
6
|
|
|
9
7
|
## Installation
|
|
10
8
|
|
|
@@ -12,69 +10,10 @@ Changes made in the UI are reflected on disk, and changes on disk propagate to t
|
|
|
12
10
|
npm install vite-plugin-mirrorstate react-mirrorstate
|
|
13
11
|
```
|
|
14
12
|
|
|
15
|
-
##
|
|
16
|
-
|
|
17
|
-
Create a `state.mirror.json` file:
|
|
18
|
-
|
|
19
|
-
```json
|
|
20
|
-
{
|
|
21
|
-
"count": 20,
|
|
22
|
-
"message": "Hello World"
|
|
23
|
-
}
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
Start `vite` with `vite-plugin-mirrorstate` enabled:
|
|
27
|
-
|
|
28
|
-
```typescript
|
|
29
|
-
import { defineConfig } from "vite";
|
|
30
|
-
import react from "@vitejs/plugin-react";
|
|
31
|
-
import mirrorstate from "vite-plugin-mirrorstate";
|
|
32
|
-
|
|
33
|
-
export default defineConfig({
|
|
34
|
-
plugins: [react(), mirrorstate()],
|
|
35
|
-
});
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
Set up a React component:
|
|
39
|
-
|
|
40
|
-
```tsx
|
|
41
|
-
import { useMirrorState } from "react-mirrorstate";
|
|
42
|
-
|
|
43
|
-
function App() {
|
|
44
|
-
const [state, updateState] = useMirrorState("state", {
|
|
45
|
-
count: 0,
|
|
46
|
-
message: "",
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<div>
|
|
51
|
-
<p>
|
|
52
|
-
{state.message}: {state.count}
|
|
53
|
-
</p>
|
|
54
|
-
<button
|
|
55
|
-
onClick={() =>
|
|
56
|
-
updateState((draft) => {
|
|
57
|
-
draft.count++;
|
|
58
|
-
})
|
|
59
|
-
}
|
|
60
|
-
>
|
|
61
|
-
Increment
|
|
62
|
-
</button>
|
|
63
|
-
</div>
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## Optional Configuration
|
|
13
|
+
## Documentation
|
|
69
14
|
|
|
70
|
-
|
|
71
|
-
mirrorstate({
|
|
72
|
-
port: 5174, // WebSocket server port
|
|
73
|
-
watchPattern: "**/*.mirror.json", // Glob pattern for files to watch
|
|
74
|
-
});
|
|
75
|
-
```
|
|
15
|
+
For full documentation, examples, and API reference, see the [main MirrorState repository](https://github.com/szymonkaliski/mirrorstate).
|
|
76
16
|
|
|
77
17
|
## License
|
|
78
18
|
|
|
79
19
|
MIT
|
|
80
|
-
|
package/dist/index.js
CHANGED
|
@@ -56,6 +56,11 @@ export function mirrorStatePlugin(options = {}) {
|
|
|
56
56
|
}));
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
|
+
// Invalidate the virtual module for HMR
|
|
60
|
+
const mod = server.moduleGraph.getModuleById("virtual:mirrorstate/initial-states");
|
|
61
|
+
if (mod) {
|
|
62
|
+
server.moduleGraph.invalidateModule(mod);
|
|
63
|
+
}
|
|
59
64
|
logger(`Mirror file changed externally: ${name}`);
|
|
60
65
|
}
|
|
61
66
|
catch (error) {
|
|
@@ -110,6 +115,11 @@ export function mirrorStatePlugin(options = {}) {
|
|
|
110
115
|
recentWrites.add(filePath);
|
|
111
116
|
// Write state to file
|
|
112
117
|
fs.writeFileSync(filePath, jsonContent);
|
|
118
|
+
// Invalidate the virtual module for HMR
|
|
119
|
+
const mod = server.moduleGraph.getModuleById("virtual:mirrorstate/initial-states");
|
|
120
|
+
if (mod) {
|
|
121
|
+
server.moduleGraph.invalidateModule(mod);
|
|
122
|
+
}
|
|
113
123
|
// Broadcast to other clients (exclude sender to prevent echo)
|
|
114
124
|
wss.clients.forEach((client) => {
|
|
115
125
|
if (client !== ws && client.readyState === client.OPEN) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-plugin-mirrorstate",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Vite plugin for bidirectional state synchronization through *.mirror.json files",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -16,18 +16,23 @@
|
|
|
16
16
|
],
|
|
17
17
|
"author": "",
|
|
18
18
|
"license": "MIT",
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "https://github.com/szymonkaliski/mirrorstate.git",
|
|
22
|
+
"directory": "packages/vite-plugin-mirrorstate"
|
|
23
|
+
},
|
|
19
24
|
"dependencies": {
|
|
20
|
-
"chokidar": "^
|
|
21
|
-
"debug": "^4.4.
|
|
22
|
-
"glob": "^
|
|
23
|
-
"ws": "^8.
|
|
25
|
+
"chokidar": "^4.0.3",
|
|
26
|
+
"debug": "^4.4.3",
|
|
27
|
+
"glob": "^11.0.3",
|
|
28
|
+
"ws": "^8.18.3"
|
|
24
29
|
},
|
|
25
30
|
"devDependencies": {
|
|
26
31
|
"@types/debug": "^4.1.12",
|
|
27
|
-
"@types/node": "^
|
|
28
|
-
"@types/ws": "^8.
|
|
29
|
-
"typescript": "^5.
|
|
30
|
-
"vite": "^7.
|
|
32
|
+
"@types/node": "^24.7.2",
|
|
33
|
+
"@types/ws": "^8.18.1",
|
|
34
|
+
"typescript": "^5.9.3",
|
|
35
|
+
"vite": "^7.1.9"
|
|
31
36
|
},
|
|
32
37
|
"peerDependencies": {
|
|
33
38
|
"vite": "^7.0.0"
|