update vue.Directive to VueJS 2.0

Author: oskca

directive.go

@@ -1,89 +1,67 @@
 package vue
 
-import (
-	"github.com/gopherjs/gopherjs/js"
-)
+import "github.com/gopherjs/gopherjs/js"
+import "github.com/oskca/gopherjs-dom"
 
-type DirectiveContext struct {
+type DirectiveBinding struct {
 	*js.Object
-	// el: the element the directive is bound to.
-	El *js.Object `js:"el"`
-	// vm: the context ViewModel that owns this directive.
-	Vm *ViewModel `js:"vm"`
+	// name: the name of the directive, without the prefix.
+	Name string `js:"name"`
+	// value: The value passed to the directive. For example in v-my-directive="1 + 1", the value would be 2.
+	Value string `js:"value"`
+	// oldValue: The previous value, only available in update and componentUpdated. It is available whether or not the value has changed.
+	OldValue string `js:"oldValue"`
 	// expression: the expression of the binding, excluding arguments and filters.
 	Expression string `js:"expression"`
 	// arg: the argument, if present.
 	Arg string `js:"arg"`
-	// name: the name of the directive, without the prefix.
-	Name string `js:"name"`
 	// modifiers: an object containing modifiers, if any.
 	Modifiers *js.Object `js:"modifiers"`
-	// descriptor: an object that contains the parsing result of the entire directive.
-	Descriptor *js.Object `js:"descriptor"`
-	// params: an object containing param attributes. Explained below.
-	Params *js.Object `js:"params"`
 }
 
-func makeUpdater(fn func(ctx *DirectiveContext, val *js.Object)) *js.Object {
-	return js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
-		ctx := &DirectiveContext{
-			Object: this,
-		}
-		fn(ctx, args[0])
-		return nil
-	})
-}
-
-func makeBinder(fn func(*DirectiveContext)) *js.Object {
-	return js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
-		ctx := &DirectiveContext{
-			Object: this,
-		}
-		fn(ctx)
-		return nil
-	})
-}
+// DirectiveCallback can be used in every directive callback functions
+type DirectiveCallback func(el *dom.Element, b *DirectiveBinding, vNode, oldVnode *js.Object)
 
 type Directive struct {
 	*js.Object
-	Name string
-	// advanced options
-	// Custom directive can provide a params array,
-	// and the Vue compiler will automatically extract
-	// these attributes on the element that the directive is bound to.
-	Params []string `js:"params"`
-	// If your custom directive is expected to be used on an Object,
-	// and it needs to trigger update when a nested property inside
-	// the object changes, you need to pass in deep: true in your directive definition.
-	Deep bool `js:"deep"`
-	// If your directive expects to write data back to
-	// the Vue instance, you need to pass in twoWay: true.
-	// This option allows the use of this.set(value) inside
-	// the directive:If your directive expects to write data back to
-	// the Vue instance, you need to pass in twoWay: true.
-	// This option allows the use of this.set(value) inside the directive
-	TwoWay bool `js:"twoWay"`
-	// Passing in acceptStatement:true enables
-	// your custom directive to accept inline statements like v-on does
-	AcceptStatement bool `js:"acceptStatement"`
-	// Vue compiles templates by recursively walking the DOM tree.
-	// However when it encounters a terminal directive,
-	// it will stop walking that element’s children.
-	// The terminal directive takes over the job of compiling the element and
-	// its children. For example, v-if and v-for are both terminal directives.
-	Terminal bool `js:"terminal"`
-	// You can optionally provide a priority number for your directive.
-	// If no priority is specified, a default priority will be used
-	//  - 1000 for normal directives and 2000 for terminal directives.
-	// A directive with a higher priority will be processed earlier than
-	// other directives on the same element. Directives with
-	// the same priority will be processed in the order they appear in
-	// the element’s attribute list, although that order is not
-	// guaranteed to be consistent in different browsers.
-	Priority int `js:"priority"`
+	// // Name string
+	// // advanced options
+	// // Custom directive can provide a params array,
+	// // and the Vue compiler will automatically extract
+	// // these attributes on the element that the directive is bound to.
+	// Params []string `js:"params"`
+	// // If your custom directive is expected to be used on an Object,
+	// // and it needs to trigger update when a nested property inside
+	// // the object changes, you need to pass in deep: true in your directive definition.
+	// Deep bool `js:"deep"`
+	// // If your directive expects to write data back to
+	// // the Vue instance, you need to pass in twoWay: true.
+	// // This option allows the use of this.set(value) inside
+	// // the directive:If your directive expects to write data back to
+	// // the Vue instance, you need to pass in twoWay: true.
+	// // This option allows the use of this.set(value) inside the directive
+	// TwoWay bool `js:"twoWay"`
+	// // Passing in acceptStatement:true enables
+	// // your custom directive to accept inline statements like v-on does
+	// AcceptStatement bool `js:"acceptStatement"`
+	// // Vue compiles templates by recursively walking the DOM tree.
+	// // However when it encounters a terminal directive,
+	// // it will stop walking that element’s children.
+	// // The terminal directive takes over the job of compiling the element and
+	// // its children. For example, v-if and v-for are both terminal directives.
+	// Terminal bool `js:"terminal"`
+	// // You can optionally provide a priority number for your directive.
+	// // If no priority is specified, a default priority will be used
+	// //  - 1000 for normal directives and 2000 for terminal directives.
+	// // A directive with a higher priority will be processed earlier than
+	// // other directives on the same element. Directives with
+	// // the same priority will be processed in the order they appear in
+	// // the element’s attribute list, although that order is not
+	// // guaranteed to be consistent in different browsers.
+	// Priority int `js:"priority"`
 }
 
-func NewDirective(updater ...func(ctx *DirectiveContext, val *js.Object)) *Directive {
+func NewDirective(updater ...func(el *js.Object, b *DirectiveBinding, val *js.Object)) *Directive {
 	d := &Directive{
 		Object: js.Global.Get("Object").New(),
 	}
@@ -93,18 +71,18 @@ func NewDirective(updater ...func(ctx *DirectiveContext, val *js.Object)) *Direc
 	return d
 }
 
-func (d *Directive) SetBinder(fn func(ctx *DirectiveContext)) *Directive {
-	d.Set("bind", makeBinder(fn))
+func (d *Directive) SetBinder(fn func(b *DirectiveBinding)) *Directive {
+	d.Set("bind", fn)
 	return d
 }
 
-func (d *Directive) SetUnBinder(fn func(ctx *DirectiveContext)) *Directive {
-	d.Set("unbind", makeBinder(fn))
+func (d *Directive) SetUnBinder(fn func(b *DirectiveBinding)) *Directive {
+	d.Set("unbind", fn)
 	return d
 }
 
-func (d *Directive) SetUpdater(fn func(ctx *DirectiveContext, val *js.Object)) *Directive {
-	d.Set("update", makeUpdater(fn))
+func (d *Directive) SetUpdater(fn func(el *js.Object, b *DirectiveBinding, val *js.Object)) *Directive {
+	d.Set("update", fn)
 	return d
 }
 
@@ -131,7 +109,7 @@ type ElementDirective struct {
 	*Directive
 }
 
-func NewElementDirective(updater ...func(ctx *DirectiveContext, val *js.Object)) *ElementDirective {
+func NewElementDirective(updater ...func(el *js.Object, b *DirectiveBinding, val *js.Object)) *ElementDirective {
 	d := &ElementDirective{
 		Directive: NewDirective(updater...),
 	}

examples/component/index.html

@@ -6,10 +6,12 @@
 </head>
 
 <body>
-    first:
-    <my-el></my-el>
-    second:
-    <my-el></my-el>
+    <div id="app">
+        first:
+        <my-el></my-el>
+        second:
+        <my-el></my-el>
+    </div>
     <script type="text/javascript" src="component.js"></script>
 </body>
 

examples/component/main.go

@@ -31,7 +31,7 @@ type controller struct {
 
 func main() {
 	vue.NewComponent(New, template).Register("my-el")
-	vm := vue.New("body", new(controller))
+	vm := vue.New("#app", new(controller))
 	js.Global.Set("vm", vm)
 	println("vm:", vm)
 }

examples/directive/index.html

@@ -6,16 +6,18 @@
 </head>
 
 <body>
-    <div>Text:{{Text}}</div>
-    <div>
-        <input v-model="Text"></input>
+    <div id="app">
+        <div>Text:{{Text}}</div>
+        <div>
+            <input v-model="Text"></input>
+        </div>
+        <div v-myd="Text"></div>
+        <div>Time:{{Time}}</div>
+        <div>
+            <input v-model="Time"></input>
+        </div>
+        <div v-myd="Time"></div>
     </div>
-    <div v-myd="Text"></div>
-    <div>Time:{{Time}}</div>
-    <div>
-        <input v-model="Time"></input>
-    </div>
-    <div v-myd="Time"></div>
     <script type="text/javascript" src="directive.js"></script>
 </body>
 

examples/directive/main.go

@@ -1,9 +1,10 @@
 package main
 
 import (
+	"time"
+
 	"github.com/gopherjs/gopherjs/js"
 	"github.com/oskca/gopherjs-vue"
-	"time"
 )
 
 type Model struct {
@@ -14,7 +15,7 @@ type Model struct {
 
 func main() {
 	d := vue.NewDirective()
-	d.SetUpdater(func(ctx *vue.DirectiveContext, val *js.Object) {
+	d.SetUpdater(func(el *js.Object, ctx *vue.DirectiveBinding, val *js.Object) {
 		println("directive name:", ctx.Name)
 		println("directive exp:", ctx.Expression)
 		println("directive values:", val)
@@ -25,5 +26,5 @@ func main() {
 	}
 	m.Text = "a string"
 	m.Time = time.Now().String()
-	vue.New("body", m)
+	vue.New("#app", m)
 }