Make types.extend supports getter

Author: cpunion

src/types/complex-types/object.ts

@@ -9,6 +9,7 @@ import {
 import {
     nothing,
     extend as extendObject,
+    extendKeepGetter,
     fail, identity,
     isPrimitive,
     hasOwnProperty,
@@ -250,6 +251,12 @@ function getObjectFactoryBaseModel(item: any) {
     return isObjectFactory(type) ? (type as ObjectType).baseModel : {}
 }
 
+function getObjectFactoryBaseActions(item: any) {
+    let type = isType(item) ? item : getType(item)
+
+    return isObjectFactory(type) ? (type as ObjectType).baseActions : {}
+}
+
 export function extend<A, B, AA, BA>(name: string, a: IModelType<A, AA>, b: IModelType<B, BA>): IModelType<A & B, AA & BA>
 export function extend<A, B, C, AA, BA, CA>(name: string, a: IModelType<A, AA>, b: IModelType<B, BA>, c: IModelType<C, CA>): IModelType<A & B & C, AA & BA & CA>
 export function extend<A, B, AA, BA>(a: IModelType<A, AA>, b: IModelType<B, BA>): IModelType<A & B, AA & BA>
@@ -258,11 +265,9 @@ export function extend(...args: any[]) {
     console.warn("[mobx-state-tree] `extend` is an experimental feature and it's behavior will probably change in the future")
     const baseFactories = typeof args[0] === "string" ? args.slice(1) : args
     const factoryName = typeof args[0] === "string" ? args[0] : baseFactories.map(f => f.name).join("_")
-
-    return model(
-        factoryName,
-        extendObject.apply(null, [{}].concat(baseFactories.map(getObjectFactoryBaseModel)))
-    )
+    const properties = extendKeepGetter.apply(null, [{}].concat(baseFactories.map(getObjectFactoryBaseModel)))
+    const actions = extendObject.apply(null, [{}].concat(baseFactories.map(getObjectFactoryBaseActions)))
+    return model(factoryName, properties, actions)
 }
 
 export function isObjectFactory(type: any): boolean {

src/utils.ts

@@ -29,6 +29,25 @@ export function extend(a: any, ...b: any[]) {
     return a
 }
 
+export function extendKeepGetter<A, B>(a: A, b: B): A & B
+export function extendKeepGetter<A, B, C>(a: A, b: B, c: C): A & B & C
+export function extendKeepGetter<A, B, C, D>(a: A, b: B, c: C, d: D): A & B & C & D
+export function extendKeepGetter(a: any, ...b: any[]): any
+export function extendKeepGetter(a: any, ...b: any[]) {
+    for (let i = 0; i < b.length; i++) {
+        const current = b[i]
+        for (let key in current) {
+            const descriptor = Object.getOwnPropertyDescriptor(current, key)
+            if ("get" in descriptor) {
+                Object.defineProperty(a, key, descriptor)
+                continue
+            }
+            a[key] = current[key]
+        }
+    }
+    return a
+}
+
 export function isPlainObject(value: any) {
     if (value === null || typeof value !== "object")
         return false

test/object.ts

@@ -29,6 +29,20 @@ const createTestFactories = () => {
         }
     })
 
+    const ComputedFactory2 = types.model({
+        props: types.map(types.number),
+        get area(){
+            return this.props.get('width') * this.props.get('height')
+        }
+    }, {
+        setWidth(value) {
+            this.props.set('width', value)
+        },
+        setHeight(value) {
+            this.props.set('height', value)
+        }
+    })
+
     const BoxFactory = types.model({
         width: 0,
         height: 0
@@ -38,7 +52,7 @@ const createTestFactories = () => {
         color: "#FFFFFF"
     })
 
-    return {Factory, ComputedFactory, BoxFactory, ColorFactory}
+    return {Factory, ComputedFactory, ComputedFactory2, BoxFactory, ColorFactory}
 }
 
 // === FACTORY TESTS ===
@@ -251,6 +265,16 @@ test("it should compose factories", (t) => {
     t.deepEqual(getSnapshot(ComposedFactory.create()), {width: 0, height: 0, color: "#FFFFFF"})
 })
 
+test("it should compose factories with computed properties", (t) => {
+    const {ComputedFactory2, ColorFactory} = createTestFactories()
+    const ComposedFactory = types.extend(ColorFactory, ComputedFactory2)
+    const store = ComposedFactory.create({props: {width: 100, height: 200}})
+    t.deepEqual(getSnapshot(store), {props: {width: 100, height: 200}, color: "#FFFFFF"})
+    t.is(store.area, 20000)
+    t.is(typeof store.setWidth, 'function')
+    t.is(typeof store.setHeight, 'function')
+})
+
 
 // === TYPE CHECKS ===
 test("it should check the type correctly", (t) => {