mobx-vue-bridge 1.0.0 → 1.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.
Files changed (2) hide show
  1. package/README.md +18 -46
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -31,12 +31,13 @@ npm install vue mobx
31
31
 
32
32
  ## 🚀 Quick Start
33
33
 
34
+ First, create your MobX presenter:
35
+
34
36
  ```javascript
35
- import { useMobxBridge } from 'mobx-vue-bridge'
37
+ // presenters/UserPresenter.js
36
38
  import { makeAutoObservable } from 'mobx'
37
39
 
38
- // Your MobX store/presenter
39
- class UserPresenter {
40
+ export class UserPresenter {
40
41
  constructor() {
41
42
  this.name = 'John'
42
43
  this.age = 25
@@ -53,61 +54,30 @@ class UserPresenter {
53
54
  this.emails.push(email)
54
55
  }
55
56
  }
57
+ ```
56
58
 
57
- // In your Vue component
59
+ Then use it in your Vue component:
58
60
 
59
- // Option 1: Modern <script setup> syntax (recommended)
61
+ **Option 1: Modern `<script setup>` syntax (recommended)**
62
+
63
+ ```vue
60
64
  <script setup>
61
65
  import { useMobxBridge } from 'mobx-vue-bridge'
62
- import { makeAutoObservable } from 'mobx'
63
-
64
- // Your MobX presenter
65
- class UserPresenter {
66
- constructor() {
67
- this.name = 'John'
68
- this.age = 25
69
- this.emails = []
70
-
71
- makeAutoObservable(this)
72
- }
73
-
74
- get displayName() {
75
- return `${this.name} (${this.age})`
76
- }
77
-
78
- addEmail(email) {
79
- this.emails.push(email)
80
- }
81
- }
66
+ import { UserPresenter } from './presenters/UserPresenter.js'
82
67
 
83
68
  const userPresenter = new UserPresenter()
84
69
 
85
70
  // Bridge MobX observable to Vue reactive state
86
71
  const state = useMobxBridge(userPresenter)
87
72
  </script>
73
+ ```
74
+
75
+ **Option 2: Traditional Composition API**
88
76
 
89
- // Option 2: Traditional Composition API
77
+ ```vue
90
78
  <script>
91
79
  import { useMobxBridge } from 'mobx-vue-bridge'
92
- import { makeAutoObservable } from 'mobx'
93
-
94
- class UserPresenter {
95
- constructor() {
96
- this.name = 'John'
97
- this.age = 25
98
- this.emails = []
99
-
100
- makeAutoObservable(this)
101
- }
102
-
103
- get displayName() {
104
- return `${this.name} (${this.age})`
105
- }
106
-
107
- addEmail(email) {
108
- this.emails.push(email)
109
- }
110
- }
80
+ import { UserPresenter } from './presenters/UserPresenter.js'
111
81
 
112
82
  export default {
113
83
  setup() {
@@ -124,7 +94,9 @@ export default {
124
94
  </script>
125
95
  ```
126
96
 
127
- ```vue
97
+ **Template usage:**
98
+
99
+ ```html
128
100
  <template>
129
101
  <div>
130
102
  <!-- Two-way binding works seamlessly -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mobx-vue-bridge",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A bridge between MobX observables and Vue 3 reactivity system, enabling seamless two-way data binding and state synchronization.",
5
5
  "main": "src/mobxVueBridge.js",
6
6
  "module": "src/mobxVueBridge.js",