Skip to content

Commit 57cd686

Browse files
iChenLeiiChenLei
authored
feat: add mobx v6 support (#69)
* feat: add mobx v6 support * Update package.json * Update package.json * fix: add mobx v6 unit test * fix: fix tslint issue and remove unnecessary dependencies
1 parent 6164124 commit 57cd686

16 files changed

+515
-260
lines changed

‎package-lock.json

Lines changed: 22 additions & 234 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobx-vue",
3-
"version": "2.0.11",
3+
"version": "2.1.0-alpha.1",
44
"description": "Vue bindings for MobX",
55
"main": "./lib/index.js",
66
"module": "./esm/index.js",
@@ -9,10 +9,9 @@
99
"scripts": {
1010
"start": "jest -o --watch --coverage false",
1111
"build": "npm run build:esm & npm run build:cjs",
12-
"build:esm": "rm -fr dist/esm && tsc",
13-
"build:cjs": "rm -fr dist/lib && tsc -p tsconfig.cjs.json",
12+
"build:esm": "rm -fr dist/esm && tsc --skipLibCheck",
13+
"build:cjs": "rm -fr dist/lib && tsc --skipLibCheck -p tsconfig.cjs.json",
1414
"lint": "tslint 'src/**/*.ts' && npm test",
15-
"codecov": "codecov",
1615
"prepush": "npm run lint",
1716
"test": "jest"
1817
},
@@ -33,28 +32,23 @@
3332
"url": "https://github.com/mobxjs/mobx-vue/issues"
3433
},
3534
"homepage": "https://github.com/mobxjs/mobx-vue#readme",
36-
"dependencies": {
37-
"tslib": "^1.9.0"
38-
},
3935
"peerDependencies": {
40-
"mobx": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
36+
"mobx": "^6.0.0",
4137
"vue": "^2.0.0"
4238
},
4339
"devDependencies": {
4440
"@types/jest": "^22.2.3",
4541
"@vue/test-utils": "1.0.0-beta.22",
46-
"codecov": "^3.0.2",
4742
"husky": "^0.14.3",
4843
"jest": "^23.0.0",
49-
"mobx": "^5.0.3",
44+
"mobx": "^6.0.0",
5045
"ts-jest": "^22.4.6",
5146
"tslint": "^5.10.0",
52-
"tslint-eslint-rules": "^5.3.1",
53-
"typescript": "^2.8.3",
54-
"vue": "^2.5.16",
55-
"vue-class-component": ">=4.3.0",
47+
"typescript": "^3.0.0",
48+
"vue": "^2.6.14",
49+
"vue-class-component": ">=7.2.6",
5650
"vue-jest": "^2.6.0",
57-
"vue-template-compiler": "^2.5.16"
51+
"vue-template-compiler": "^2.6.14"
5852
},
5953
"jest": {
6054
"globals": {

‎src/__tests__/fixtures/Conditional.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,16 @@
1616

1717
<script lang="ts">
1818
19-
import { action, observable } from "mobx";
19+
import { action, observable, makeObservable } from "mobx";
2020
import Vue from "vue";
2121
import Component from "vue-class-component";
2222
import { Observer } from "../../observer";
2323
2424
class Model {
25+
constructor () {
26+
makeObservable(this);
27+
}
28+
2529
@observable
2630
age = 10;
2731

‎src/__tests__/fixtures/DecoratedClassBase.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@
88

99
<script lang="ts">
1010
11-
import { action, computed, observable } from "mobx";
11+
import { action, computed, observable, makeObservable } from "mobx";
1212
import Vue from "vue";
1313
import Component from "vue-class-component";
1414
import { Observer } from "../../observer";
1515
1616
class Model {
17+
constructor () {
18+
makeObservable(this);
19+
}
20+
1721
@observable
1822
age = 10;
1923

‎src/__tests__/fixtures/ModelClassBase.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@
88

99
<script lang="ts">
1010
11-
import { action, computed, observable } from "mobx";
11+
import { action, computed, observable, makeObservable } from "mobx";
1212
import Vue from "vue";
1313
import Component from "vue-class-component";
1414
1515
class Model {
16+
constructor () {
17+
makeObservable(this);
18+
}
19+
1620
@observable
1721
age = 10;
1822

‎src/__tests__/fixtures2/Conditional.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<section>
3+
<p role="age" v-text="model.age"></p>
4+
<button role="increase" @click="model.increase"></button>
5+
<button role="toggle" @click="model.toggle"></button>
6+
<div v-if="model.show">
7+
<p role="count" v-text="model.count"></p>
8+
</div>
9+
<button role="native-toggle" @click="nativeToggle"></button>
10+
<button role="native-increase" @click="model.nativeIncrease"></button>
11+
<div v-if="show">
12+
<p role="native-count" v-text="model.nativeCount"></p>
13+
</div>
14+
</section>
15+
</template>
16+
17+
<script lang="ts">
18+
19+
import { action, observable, makeAutoObservable } from "mobx";
20+
import Vue from "vue";
21+
import Component from "vue-class-component";
22+
import { Observer } from "../../observer";
23+
24+
class Model {
25+
constructor () {
26+
makeAutoObservable(this);
27+
}
28+
29+
age = 10;
30+
show = false;
31+
count = 0;
32+
nativeCount = 0;
33+
34+
setAge = () => {
35+
this.age++;
36+
}
37+
38+
toggle = () => {
39+
this.show = !this.show;
40+
}
41+
42+
increase = () => {
43+
this.count++;
44+
}
45+
46+
nativeIncrease = () => {
47+
this.nativeCount++;
48+
}
49+
50+
}
51+
52+
@Observer
53+
@Component
54+
export default class Conditional extends Vue {
55+
model = new Model();
56+
57+
show = false;
58+
59+
nativeToggle() {
60+
this.show = !this.show;
61+
}
62+
}
63+
</script>

‎src/__tests__/fixtures2/DecoratedClassBase.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<section>
3+
<p role="age" v-text="model.age"></p>
4+
<p role="computed-age" v-text="model.computedAge"></p>
5+
<button @click="model.setAge"></button>
6+
</section>
7+
</template>
8+
9+
<script lang="ts">
10+
11+
import { action, computed, observable, makeAutoObservable } from "mobx";
12+
import Vue from "vue";
13+
import Component from "vue-class-component";
14+
import { Observer } from "../../observer";
15+
16+
class Model {
17+
constructor () {
18+
makeAutoObservable(this, { }, { autoBind: true });
19+
}
20+
21+
age = 10;
22+
23+
get computedAge() {
24+
return this.age + 1;
25+
}
26+
27+
setAge() {
28+
this.age++;
29+
}
30+
}
31+
32+
@Observer
33+
@Component
34+
export default class DecoratedClassBase extends Vue {
35+
model = new Model();
36+
}
37+
</script>

‎src/__tests__/fixtures2/ModelClassBase.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<section>
3+
<p role="age" v-text="model.age"></p>
4+
<p role="computed-age" v-text="model.computedAge"></p>
5+
<button @click="model.setAge"></button>
6+
</section>
7+
</template>
8+
9+
<script lang="ts">
10+
11+
import { action, computed, observable, makeAutoObservable } from "mobx";
12+
import Vue from "vue";
13+
import Component from "vue-class-component";
14+
15+
class Model {
16+
constructor () {
17+
makeAutoObservable(this, { }, { autoBind: true });
18+
}
19+
20+
age = 10;
21+
22+
get computedAge() {
23+
return this.age + 1;
24+
}
25+
26+
setAge() {
27+
this.age++;
28+
}
29+
}
30+
31+
@Component
32+
export default class ModelClassBase extends Vue {
33+
model = new Model();
34+
}
35+
</script>

0 commit comments

Comments
 (0)