mvvm and candies

js-framework/index.ts

@@ -19,5 +19,6 @@ export * from "./src/util/color"
 export * from './src/util/log'
 export * from './src/util/types'
 export * from './src/util/gravity'
+export * from './src/util/candies'
 export * from './src/vm/mvvm'
-export * from './src/runtime/global'
+export * from './src/runtime/global'

js-framework/src/util/candies.ts

@@ -0,0 +1,100 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { View, Stack, VLayout, HLayout } from "../ui/view"
+
+export type ViewBlock = () => View
+
+export function stack(blocks: ViewBlock[]) {
+    return takeAlso(new Stack)(
+        it => {
+            for (let block of blocks) {
+                it.addChild(block())
+            }
+        })
+}
+
+export function vlayout(blocks: ViewBlock[]) {
+    return takeAlso(new VLayout)(
+        it => {
+            for (let block of blocks) {
+                it.addChild(block())
+            }
+        })
+}
+
+export function hlayout(blocks: ViewBlock[]) {
+    return takeAlso(new HLayout)(
+        it => {
+            for (let block of blocks) {
+                it.addChild(block())
+            }
+        })
+}
+
+export function take<T>(target: T) {
+    return (block: (p: T) => void) => {
+        block(target)
+    }
+}
+
+export function takeNonNull<T, R>(target?: T) {
+    return (block: (p: T) => R) => {
+        if (target !== undefined) {
+            return block(target)
+        }
+    }
+}
+
+export function takeNull<T, R>(target?: T) {
+    return (block: () => R) => {
+        if (target === undefined) {
+            return block()
+        }
+    }
+}
+
+export function takeLet<T, R>(target: T) {
+    return (block: (p: T) => R | undefined) => {
+        return block(target)
+    }
+}
+
+export function takeAlso<T>(target: T) {
+    return (block: (p: T) => void) => {
+        block(target)
+        return target
+    }
+}
+
+export function takeIf<T>(target: T) {
+    return (predicate: (t: T) => boolean) => {
+        return predicate(target) ? target : undefined
+    }
+}
+
+export function takeUnless<T>(target: T) {
+    return (predicate: (t: T) => boolean) => {
+        return predicate(target) ? undefined : target
+    }
+}
+
+export function repeat(action: (count: number) => void) {
+    return (times: number) => {
+        for (let i = 0; i < times; i++) {
+            action(i)
+        }
+    }
+}

js-framework/src/vm/mvvm.ts

@@ -13,84 +13,61 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, Group } from "../ui/view";
+import { Group } from "../ui/view";
 import { Panel } from "../ui/panel";
 
-function listen<T extends Object>(obj: T, listener: Function): T {
+export abstract class ViewHolder<M>{
-    return new Proxy(obj, {
-        get: (target, prop, receiver) => {
-            const ret = Reflect.get(target, prop, receiver)
-            if (ret instanceof Function) {
-                return Reflect.get(target, prop, receiver)
-            } else if (ret instanceof Object) {
-                return listen(ret, listener)
-            } else {
-                return ret
-            }
-        },
-
-        set: (target, prop, value, receiver) => {
-            const ret = Reflect.set(target, prop, value, receiver)
-            Reflect.apply(listener, undefined, [])
-            return ret
-        },
-    })
-}
-
-export abstract class ViewHolder {
     abstract build(root: Group): void
+    abstract bind(state: M): void
 }
 
-export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
+export type Setter<M> = (state: M) => void
 
-    private vm?: ViewModel<M, V>
+export abstract class ViewModel<M extends Object, V extends ViewHolder<M>> {
+    private state: M
+    private viewHolder: V
 
-    abstract getVMClass(): new (m: M, v: V) => ViewModel<M, V>
+    constructor(obj: M, v: V) {
+        this.state = obj
+        this.viewHolder = v
+    }
 
+    getState() {
+        return this.state
+    }
 
-    abstract getModel(): M
+    updateState(setter: Setter<M>) {
+        setter(this.state)
+        this.viewHolder.bind(this.state)
+    }
 
-    abstract getViewHolder(): V
+    attach(view: Group) {
+        this.viewHolder.build(view)
+    }
+}
+export type ViewModelClass<M> = new (m: M, v: ViewHolder<M>) => ViewModel<M, ViewHolder<M>>
 
-    getVM() {
+export type ViewHolderClass<M> = new () => ViewHolder<M>
+
+export abstract class VMPanel<M extends Object> extends Panel {
+
+    private vm?: ViewModel<M, ViewHolder<M>>
+    private vh?: ViewHolder<M>
+
+    abstract getViewModelClass(): ViewModelClass<M>
+
+    abstract getState(): M
+
+    abstract getViewHolderClass(): ViewHolderClass<M>
+
+    getViewModel() {
         return this.vm
     }
 
     build(root: Group): void {
-        this.vm = new (this.getVMClass())(this.getModel(), this.getViewHolder())
+        this.vh = new (this.getViewHolderClass())
-        this.vm.build(root)
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh)
+        this.vm.attach(root)
     }
 }
 
-export abstract class ViewModel<M extends Object, V extends ViewHolder> {
-    private model: M
-    private listeners: Function[] = []
-    private viewHolder: V
-
-    constructor(obj: M, v: V) {
-        this.model = listen(obj, () => {
-            this.listeners.forEach(e => {
-                Reflect.apply(e, this.model, [this.model])
-            })
-        })
-        this.viewHolder = v
-    }
-
-    build(root: Group) {
-        this.viewHolder.build(root)
-        this.bind((data: M) => {
-            this.binding(this.viewHolder, data)
-        })
-    }
-
-    abstract binding(v: V, model: M): void
-
-    getModel() {
-        return this.model
-    }
-
-    bind(f: (data: M) => void) {
-        Reflect.apply(f, this.model, [this.model])
-        this.listeners.push(f)
-    }
-}