using vue.Option to update vue.go and component.go

oskca · oskca · commit 86ef847f2f0b · 2016-03-29T10:32:55.000+08:00
diff --git a/component.go b/component.go
@@ -16,13 +16,42 @@ type pool struct {
 
 // Component is actually an Extended Vue SubClass,
 // which acts as a Component constructor in VueJS world
+// thus you can use Component.New to create a
+// preConfigured VueJS instance(*ViewModel).
+type Component struct {
+	*ViewModel
+}
+
+// New create the component instance
+func (c *Component) New() *ViewModel {
+	return newViewModel(c.Object.New())
+}
+
+func newComponent(o *js.Object) *Component {
+	return &Component{
+		ViewModel: newViewModel(o),
+	}
+}
+
+// Register register Component:c in the global namespace
+func (c *Component) Register(name string) *Component {
+	vue.Call("component", name, c)
+	return c
+}
+
+func GetComponent(name string) *Component {
+	return newComponent(vue.Call("component", name))
+}
+
+// NewComponent creates and registers a named global Component
 //
-// CreateComponent creats a new VueJS component
-func CreateComponent(
+//  vmCreator should return a gopherjs struct pointer. see New for more details
+func NewComponent(
 	vmCreator func() (structPtr interface{}),
-	templateOrSharpId string,
+	templateStr string,
 	replaceMountPoint ...bool,
-) *Vue {
+) *Component {
+	// args
 	idx := len(creatorPool)
 	creatorPool = append(creatorPool, new(pool))
 	creatorPool[idx].creator = vmCreator
@@ -34,57 +63,18 @@ func CreateComponent(
 		p.counter += 1
 		return p.structPtr
 	}
-	// args
 	replace := true
 	if len(replaceMountPoint) > 0 {
 		replace = replaceMountPoint[0]
 	}
-	// create the VueInstance
-	com := Extend(js.M{
-		"data": vmfn,
-		"init": js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
-			// set methods dynamicly before VueInstance doing all the other init
-			this.Get("$options").Set("methods", js.MakeWrapper(vmfn()))
-			// register this component instance to vMap
-			vMap[vmfn()] = &Vue{Object: this}
-			return nil
-		}),
-		"template": templateOrSharpId,
-		"replace":  replace,
+	// opts
+	opt := NewOption()
+	opt.Data = vmfn
+	opt.Template = templateStr
+	opt.Replace = replace
+	opt.OnLifeCycleEvent(EvtInit, func(vm *ViewModel) {
+		vm.Options.Set("methods", js.MakeWrapper(vmfn()))
+		vMap[vmfn()] = vm
 	})
-	return com
-}
-
-// Extend Create a “subclass” of the base Vue constructor which is a `Component`
-//  The argument should be an object containing component options.
-//  The special cases to note here are el and data options
-//  - they must be functions when used with Vue.extend().
-func Extend(opt js.M) *Vue {
-	return &Vue{
-		Object: vue.Call("extend", opt),
-	}
-}
-
-func RegisterComponent(name string, component *Vue) *Vue {
-	vue.Call("component", name, component.Object)
-	return component
-}
-
-func GetComponent(name string) *Vue {
-	return &Vue{
-		Object: vue.Call("component", name),
-	}
-}
-
-// Component creates and registers a named global component. (automatically call Vue.extend)
-//
-//  vmCreator should return a gopherjs struct pointer. see New for more details
-func Component(
-	name string,
-	vmCreator func() (structPtr interface{}),
-	templateOrSharpId string,
-	replaceMountPoint ...bool,
-) *Vue {
-	com := CreateComponent(vmCreator, templateOrSharpId, replaceMountPoint...)
-	return RegisterComponent(name, com)
+	return opt.NewComponent()
 }
diff --git a/vue.go b/vue.go
@@ -8,7 +8,7 @@ import (
 
 var (
 	vue  = js.Global.Get("Vue")
-	vMap = make(map[interface{}]*Vue, 0)
+	vMap = make(map[interface{}]*ViewModel, 0)
 )
 
 // type Value represents the VueJS wrapped observed Array or Object
@@ -36,7 +36,7 @@ type Value struct {
 }
 
 // type Vue represents the JavaScript side VueJS instance or VueJS component
-type Vue struct {
+type ViewModel struct {
 	*js.Object
 	///////////////////////////// Instance Properties
 	// vm.$data
@@ -270,7 +270,7 @@ type Vue struct {
 	// on an already mounted instance will have no effect.
 	// The method returns the instance itself so you can chain other
 	// instance methods after it.
-	Mount func(elementOrselector string) *Vue `js:"$mount"`
+	Mount func(elementOrselector string) *ViewModel `js:"$mount"`
 
 	// vm.$destroy( [remove] )
 	//  remove Boolean optional
@@ -356,35 +356,36 @@ type Vue struct {
 //
 // These rules are required for VueJS dependency system to work correctly.
 //
-// You can get this *Vue instance through `vue.GetVM(structPtr)`
+// You can get this *ViewModel instance through `vue.GetVM(structPtr)`
 // which acts as `this` of the VueJS(javascript) side of world
-func New(selectorOrElementOrFunction interface{}, structPtr interface{}) *Vue {
-	o := vue.New(js.M{
-		"el":      selectorOrElementOrFunction,
-		"data":    structPtr,
-		"methods": js.MakeWrapper(structPtr),
-	})
-	vm := &Vue{
-		Object: o,
-	}
+func New(selectorOrElementOrFunction interface{}, structPtr interface{}) *ViewModel {
+	opt := NewOption()
+	opt.El = selectorOrElementOrFunction
+	opt.SetDataWithMethods(structPtr)
+	vm := opt.NewViewModel()
 	vMap[structPtr] = vm
 	return vm
 }
 
+func newViewModel(o *js.Object) *ViewModel {
+	return &ViewModel{
+		Object: o,
+	}
+}
+
 // GetVM returns coresponding VueJS instance from a gopherjs struct pointer
 // (the underlying ViewModel data), this function is mainly in
 // gopherjs struct method functions to reference the `VueJS instance`
-func GetVM(structPtr interface{}) *Vue {
+func GetVM(structPtr interface{}) *ViewModel {
 	vm, ok := vMap[structPtr]
 	if !ok {
-		println("Vue not registerd yet:", structPtr)
-		panic("Vue not registerd yet")
+		panic("GetVM: Vue not registerd yet")
 	}
 	return vm
 }
 
 // WatchEx using a simpler form to do Vue.$watch
-func (v *Vue) Watch(expression string, callback func(newVal *js.Object)) (unwatcher func()) {
+func (v *ViewModel) Watch(expression string, callback func(newVal *js.Object)) (unwatcher func()) {
 	obj := v.Call("$watch", expression, callback)
 	return func() {
 		obj.Invoke()
