mobx-solid 0.0.1 → 0.0.2
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 +69 -2
- package/package.json +17 -3
package/README.md
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
MobX bindings for [SolidJS](https://www.solidjs.com/) — reactive state management with fine-grained UI updates.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Bridge MobX observables with SolidJS's compile-time reactivity — no proxy hacks, no double tracking.
|
|
6
|
+
|
|
7
|
+
**~0.36 kB gzip** · Zero config · TypeScript-first · SSR-ready
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 📖 [Read docs →](https://js2me.github.io/mobx-solid)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Why mobx-solid?
|
|
16
|
+
|
|
17
|
+
| Feature | What you get |
|
|
18
|
+
|---|---|
|
|
19
|
+
| Fine-grained reactivity | Only DOM nodes that depend on changed observables update |
|
|
20
|
+
| MobX ecosystem | `observable`, `action`, `computed`, `autorun` — the full toolbox |
|
|
21
|
+
| Zero boilerplate | No `observer()` HOC, no `useSyncExternalStore` — just write components |
|
|
22
|
+
| SSR support | Works with SolidJS server-side rendering out of the box |
|
|
23
|
+
| TypeScript-first | Full type safety with zero `any` escapes |
|
|
24
|
+
| Tiny footprint | ~0.36 kB gzip — minimal runtime overhead |
|
|
25
|
+
|
|
26
|
+
---
|
|
6
27
|
|
|
7
28
|
## Installation
|
|
8
29
|
|
|
@@ -12,6 +33,8 @@ npm install mobx-solid mobx solid-js
|
|
|
12
33
|
pnpm add mobx-solid mobx solid-js
|
|
13
34
|
```
|
|
14
35
|
|
|
36
|
+
---
|
|
37
|
+
|
|
15
38
|
## Quick Start
|
|
16
39
|
|
|
17
40
|
```tsx
|
|
@@ -19,6 +42,7 @@ import { enableObservableTracking } from "mobx-solid";
|
|
|
19
42
|
import { observable } from "mobx";
|
|
20
43
|
import { render } from "solid-js/web";
|
|
21
44
|
|
|
45
|
+
// Enable MobX → SolidJS reactivity bridge (call once at app startup)
|
|
22
46
|
enableObservableTracking();
|
|
23
47
|
|
|
24
48
|
const store = observable({
|
|
@@ -45,6 +69,49 @@ function Counter() {
|
|
|
45
69
|
render(() => <Counter />, document.getElementById("app")!);
|
|
46
70
|
```
|
|
47
71
|
|
|
72
|
+
> Call `enableObservableTracking()` once at your app's entry point — after that, MobX observables automatically integrate with SolidJS's reactivity system.
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## How it works
|
|
77
|
+
|
|
78
|
+
mobx-solid hooks into MobX's internal reaction tracking and translates observable reads into SolidJS reactive primitives. When a MobX observable changes, only the exact SolidJS DOM nodes that read that value update — true fine-grained reactivity, not component-level re-rendering.
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## API
|
|
83
|
+
|
|
84
|
+
| Function | Description |
|
|
85
|
+
|---|---|
|
|
86
|
+
| `enableObservableTracking()` | Enable the MobX → SolidJS reactivity bridge |
|
|
87
|
+
| `disableObservableTracking()` | Disable the bridge (useful for SSR cleanup) |
|
|
88
|
+
| `observable` | MobX observable — works with SolidJS components automatically |
|
|
89
|
+
| `computed` | MobX computed — auto-tracked by SolidJS |
|
|
90
|
+
| `action` | MobX action — batch mutations for optimal DOM updates |
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## SSR Support
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { enableObservableTracking, disableObservableTracking } from "mobx-solid";
|
|
98
|
+
|
|
99
|
+
enableObservableTracking();
|
|
100
|
+
const html = renderToString(() => <App />);
|
|
101
|
+
disableObservableTracking(); // Clean up after rendering
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Compatibility
|
|
107
|
+
|
|
108
|
+
- MobX **6.x**
|
|
109
|
+
- SolidJS **1.6+**
|
|
110
|
+
- TypeScript **5.x**
|
|
111
|
+
- SSR / Hydration
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
48
115
|
## License
|
|
49
116
|
|
|
50
|
-
MIT
|
|
117
|
+
MIT © [Sergey Volkov](https://github.com/js2me)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mobx-solid",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "MobX bindings for SolidJS — reactive state management with fine-grained UI updates",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "⚡ MobX bindings for SolidJS — reactive state management with fine-grained UI updates (~0.36 kB gzip)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -47,7 +47,21 @@
|
|
|
47
47
|
"reactive",
|
|
48
48
|
"state-management",
|
|
49
49
|
"observer",
|
|
50
|
-
"fine-grained"
|
|
50
|
+
"fine-grained",
|
|
51
|
+
"observable",
|
|
52
|
+
"computed",
|
|
53
|
+
"action",
|
|
54
|
+
"mobx-solid",
|
|
55
|
+
"solid-js",
|
|
56
|
+
"bindings",
|
|
57
|
+
"bridge",
|
|
58
|
+
"ssr",
|
|
59
|
+
"typescript",
|
|
60
|
+
"store",
|
|
61
|
+
"state",
|
|
62
|
+
"reactivity",
|
|
63
|
+
"fine-grained-reactivity",
|
|
64
|
+
"no-vdom"
|
|
51
65
|
],
|
|
52
66
|
"license": "MIT",
|
|
53
67
|
"homepage": "https://js2me.github.io/mobx-solid",
|