mobx-solid 0.0.1 → 0.0.3

package/README.md

@@ -2,7 +2,28 @@
 
 MobX bindings for [SolidJS](https://www.solidjs.com/) — reactive state management with fine-grained UI updates.
 
-# [Read docs →](https://js2me.github.io/mobx-solid)
+Bridge MobX observables with SolidJS's compile-time reactivity — no proxy hacks, no double tracking.
+
+**~0.4 kB gzip** · Zero config · TypeScript-first · SSR-ready
+
+---
+
+## 📖 [Read docs →](https://js2me.github.io/mobx-solid)
+
+---
+
+## Why mobx-solid?
+
+| Feature | What you get |
+|---|---|
+| Fine-grained reactivity | Only DOM nodes that depend on changed observables update |
+| MobX ecosystem | `observable`, `action`, `computed`, `autorun` — the full toolbox |
+| Zero boilerplate | No `observer()` HOC, no `useSyncExternalStore` — just write components |
+| SSR support | Works with SolidJS server-side rendering out of the box |
+| TypeScript-first | Full type safety with zero `any` escapes |
+| Tiny footprint | ~0.4 kB gzip — minimal runtime overhead |
+
+---
 
 ## Installation
 
@@ -12,6 +33,8 @@ npm install mobx-solid mobx solid-js
 pnpm add mobx-solid mobx solid-js
 ```
 
+---
+
 ## Quick Start
 
 ```tsx
@@ -19,6 +42,7 @@ import { enableObservableTracking } from "mobx-solid";
 import { observable } from "mobx";
 import { render } from "solid-js/web";
 
+// Enable MobX → SolidJS reactivity bridge (call once at app startup)
 enableObservableTracking();
 
 const store = observable({
@@ -45,6 +69,49 @@ function Counter() {
 render(() => <Counter />, document.getElementById("app")!);
 ```
 
+> Call `enableObservableTracking()` once at your app's entry point — after that, MobX observables automatically integrate with SolidJS's reactivity system.
+
+---
+
+## How it works
+
+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.
+
+---
+
+## API
+
+| Function | Description |
+|---|---|
+| `enableObservableTracking()` | Enable the MobX → SolidJS reactivity bridge |
+| `disableObservableTracking()` | Disable the bridge (useful for SSR cleanup) |
+| `observable` | MobX observable — works with SolidJS components automatically |
+| `computed` | MobX computed — auto-tracked by SolidJS |
+| `action` | MobX action — batch mutations for optimal DOM updates |
+
+---
+
+## SSR Support
+
+```tsx
+import { enableObservableTracking, disableObservableTracking } from "mobx-solid";
+
+enableObservableTracking();
+const html = renderToString(() => <App />);
+disableObservableTracking(); // Clean up after rendering
+```
+
+---
+
+## Compatibility
+
+- MobX **6.x**
+- SolidJS **1.6+**
+- TypeScript **5.x**
+- SSR / Hydration
+
+---
+
 ## License
 
-MIT
+MIT © [Sergey Volkov](https://github.com/js2me)

package/dist/enable-observable-tracking.d.ts

@@ -3,7 +3,8 @@
  *
  * [**Documentation**](https://js2me.github.io/mobx-solid/api/enable-observable-tracking)
  */
-export declare function enableObservableTracking(): void;
-/** @internal Whether `enableObservableTracking()` has already been called. */
-export declare function isObservableTrackingEnabled(): boolean;
+export declare const enableObservableTracking: {
+    (): void;
+    _: boolean;
+};
 //# sourceMappingURL=enable-observable-tracking.d.ts.map

package/dist/enable-observable-tracking.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"enable-observable-tracking.d.ts","sourceRoot":"","sources":["../src/enable-observable-tracking.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAuB/C;AAED,8EAA8E;AAC9E,wBAAgB,2BAA2B,IAAI,OAAO,CAErD"}
+{"version":3,"file":"enable-observable-tracking.d.ts","sourceRoot":"","sources":["../src/enable-observable-tracking.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;;CAsBpC,CAAA"}

package/dist/index.js

@@ -1,34 +1,34 @@
-import { Reaction as s, untracked as l, autorun as u } from "mobx";
-import { enableExternalSource as i, createSignal as c, onCleanup as b } from "solid-js";
-let a = !1;
-function p() {
-  a || (a = !0, i(
-    (e, t) => {
-      const r = new s("mobx-solid", t);
+import { Reaction as u, untracked as i, reaction as l } from "mobx";
+import { enableExternalSource as f, createSignal as a, untrack as b, onCleanup as d } from "solid-js";
+const p = "mobx-solid", s = () => {
+  s._ || (s._ = !0, f(
+    (e, n) => {
+      const t = new u(p, n);
       return {
-        track: (n) => {
+        track: (r) => {
           let o;
-          return r.track(() => {
-            o = e(n);
+          return t.track(() => {
+            o = e(r);
           }), o;
         },
-        dispose: () => {
-          r.dispose();
-        }
+        dispose: () => t.dispose()
       };
     },
-    (e) => l(e)
+    i
   ));
+};
+s._ = !1;
+const c = { equals: !1 }, m = { equals: () => !1 };
+function S(e) {
+  const [n] = a(e(), c);
+  return n;
 }
-function k(e) {
-  const [t, r] = c(void 0, {
-    equals: !1
-  }), n = u(() => {
-    r(e);
-  });
-  return b(n), t;
+function _(e) {
+  const [n, t] = a(b(e), c), r = l(e, (o) => t(() => o), m);
+  return d(r), n;
 }
+const v = typeof window > "u" ? S : _;
 export {
-  p as enableObservableTracking,
-  k as obs
+  s as enableObservableTracking,
+  v as obs
 };

package/dist/obs.d.ts

@@ -1,8 +1,3 @@
 import { Accessor } from 'solid-js';
-/**
- * Converts a MobX observable expression into a SolidJS signal accessor.
- *
- * [**Documentation**](https://js2me.github.io/mobx-solid/api/obs)
- */
-export declare function obs<T>(getter: () => T): Accessor<T>;
+export declare const obs: <T>(getter: () => T) => Accessor<T>;
 //# sourceMappingURL=obs.d.ts.map

package/dist/obs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"obs.d.ts","sourceRoot":"","sources":["../src/obs.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAElE;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAYnD"}
+{"version":3,"file":"obs.d.ts","sourceRoot":"","sources":["../src/obs.ts"],"names":[],"mappings":"AACA,OAAO,EAAoC,KAAK,QAAQ,EAAsB,MAAM,UAAU,CAAC;AA4B/F,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,CAAC,CACA,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobx-solid",
-  "version": "0.0.1",
-  "description": "MobX bindings for SolidJS — reactive state management with fine-grained UI updates",
+  "version": "0.0.3",
+  "description": "⚡ MobX bindings for SolidJS — reactive state management with fine-grained UI updates (~0.4 kB gzip)",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,6 +17,13 @@
     "dist"
   ],
   "sideEffects": false,
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "gzip": true,
+      "limit": "0.45 kB"
+    }
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -27,12 +34,14 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.1",
+    "@size-limit/file": "^13.0.1",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "docusite": "^0.1.6",
     "jsdom": "^26.1.0",
     "mobx": "^6.16.0",
+    "size-limit": "^13.0.1",
     "solid-js": "^1.9.0",
     "typescript": "^5.8.0",
     "vite": "^6.3.0",
@@ -47,7 +56,21 @@
     "reactive",
     "state-management",
     "observer",
-    "fine-grained"
+    "fine-grained",
+    "observable",
+    "computed",
+    "action",
+    "mobx-solid",
+    "solid-js",
+    "bindings",
+    "bridge",
+    "ssr",
+    "typescript",
+    "store",
+    "state",
+    "reactivity",
+    "fine-grained-reactivity",
+    "no-vdom"
   ],
   "license": "MIT",
   "homepage": "https://js2me.github.io/mobx-solid",
@@ -69,6 +92,7 @@
     "docs:build": "docusite build",
     "docs:preview": "docusite preview",
     "changeset:version": "bash scripts/changeset-version.sh",
-    "pub": "pnpm build && changeset publish"
+    "pub": "pnpm build && changeset publish",
+    "size-limit": "size-limit"
   }
 }