rename data-{event} to ev-{event}

3ffon · Jun 2, 2014 · c26ed82 · c26ed82
1 parent 2c05c3b
commit c26ed82
Show file tree

Hide file tree

Showing 16 changed files with 44 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ function render(clickCount) {
         " has value: " + clickCount + ".", h("input.button", {
             type: "button",
             value: "Click me!",
-            "data-click": mercury.event(clicks)
+            "ev-click": mercury.event(clicks)
         })
     ])
 }

diff --git a/docs/faq.md b/docs/faq.md
@@ -10,18 +10,18 @@ With `mercury` you can assign any event to be a plain function
 
 ```js
 h('div', {
-    'data-click': function (ev) {
+    'ev-click': function (ev) {
         /* do shit */
     }
 })
 ```
 
-`mercury` also has a special `data-event` which will get called
+`mercury` also has a special `ev-event` which will get called
   for every event trigger on an element
 
 ```js
 h('div', {
-    'data-event': function (ev) {
+    'ev-event': function (ev) {
         if (ev.type === 'keydown') {
             /* do shit */
         } else if (ev.type === 'keyup') {
@@ -114,7 +114,7 @@ For another example of a hook see
 
 If you want to do some custom DOM logic immediately once a VNode
   is created you can add a hook, I normally add them to
-  `data-foo` properties.
+  `ev-foo` properties.
 
 ```js
 function MyHook(args) {
@@ -126,7 +126,7 @@ MyHook.prototype.hook = function (elem, propName) {
 }
 
 h('div', {
-    'data-myHook': new MyHook(args)
+    'ev-myHook': new MyHook(args)
 })
 ```
 
@@ -148,7 +148,7 @@ MyHook.prototype.hook = function (elem, propName) {
 }
 
 h('div', {
-    'data-myHook': new MyHook(args)
+    'ev-myHook': new MyHook(args)
 })
 ```
 
@@ -304,7 +304,7 @@ function render(calender) {
       h('ul', day.events.map(function (event, j) {
         h('li', [
           h('div', {
-            'data-click': mercury.event(events.eventToggle, {
+            'ev-click': mercury.event(events.eventToggle, {
               eventIndex: j,
               dayIndex: i,
               value: !event.isOpen
@@ -325,7 +325,7 @@ There is a problem with this example. We don't really want to
   is far too long and you don't really care about all that.
 
 There is a second issue here as well. When we embed our
-  `'data-click'` event we have to pass up the `eventIndex` and
+  `'ev-click'` event we have to pass up the `eventIndex` and
   `dayIndex` because the event handler doesn't have this
   context. This is really annoying because we can't put the 
   event UI code in a seperate function without passing it
@@ -366,7 +366,7 @@ function EventComponent() {
 EventComponent.render = function (state) {
   return h('div', [
     h('div', {
-      'data-click': mercury.event(events.eventToggle, {
+      'ev-click': mercury.event(events.eventToggle, {
         eventIndex: j,
         dayIndex: i,
         value: !event.isOpen

diff --git a/examples/bmi-counter.js b/examples/bmi-counter.js
@@ -36,7 +36,7 @@ function slider(value, sink, min, max) {
     return h("input.slider", {
         type: "range", min: min, max: max, value: value,
         style: { width: "100%" }, name: "slider",
-        "data-event": mercury.changeEvent(sink)
+        "ev-event": mercury.changeEvent(sink)
     })
 }
 

diff --git a/examples/canvas.js b/examples/canvas.js
@@ -34,7 +34,7 @@ function renderColor(color) {
         h('div', [
             h('span', color + ' '),
             h('input', {
-                'data-event': mercury.changeEvent(change),
+                'ev-event': mercury.changeEvent(change),
                 value: color,
                 name: 'color'
             })

diff --git a/examples/count.js b/examples/count.js
@@ -14,7 +14,7 @@ function render(clickCount) {
         " has value: " + clickCount + ".", h("input.button", {
             type: "button",
             value: "Click me!",
-            "data-click": mercury.event(clicks)
+            "ev-click": mercury.event(clicks)
         })
     ])
 }

diff --git a/examples/field-reset.js b/examples/field-reset.js
@@ -23,7 +23,7 @@ function render(state) {
         h("input.button", {
             type: "button",
             value: "Reset text field",
-            "data-click": mercury.event(state.events.reset, true)
+            "ev-click": mercury.event(state.events.reset, true)
         })
     ])
 }

diff --git a/examples/geometry/browser.js b/examples/geometry/browser.js
@@ -33,35 +33,35 @@ function rootScene(state) {
         shapes.point({
             cx: state.c[0],
             cy: state.c[1],
-            'data-mousedown': dragEvent(state.events.movePoint, {
+            'ev-mousedown': dragEvent(state.events.movePoint, {
                 name: 'c'
             })
         }),
         shapes.point({
             cx: state.p[0],
             cy: state.p[1],
-            'data-mousedown': dragEvent(state.events.movePoint, {
+            'ev-mousedown': dragEvent(state.events.movePoint, {
                 name: 'p'
             })
         }),
         shapes.point({
             cx: state.p1[0],
             cy: state.p1[1],
-            'data-mousedown': dragEvent(state.events.movePoint, {
+            'ev-mousedown': dragEvent(state.events.movePoint, {
                 name: 'p1'
             })
         }),
         shapes.point({
             cx: state.p2[0],
             cy: state.p2[1],
-            'data-mousedown': dragEvent(state.events.movePoint, {
+            'ev-mousedown': dragEvent(state.events.movePoint, {
                 name: 'p2'
             })
         }),
         shapes.point({
             cx: state.p3[0],
             cy: state.p3[1],
-            'data-mousedown': dragEvent(state.events.movePoint, {
+            'ev-mousedown': dragEvent(state.events.movePoint, {
                 name: 'p3'
             })
         })

diff --git a/examples/markdown/component/mdRender.js b/examples/markdown/component/mdRender.js
@@ -25,7 +25,7 @@ function mdRenderRender(state) {
 	var events = state.events
 
 	return h('.markdown', {
-		'data-click': events.click
+		'ev-click': events.click
 	}, [
 		// using a nested node due to a bug with innerHTML in vtree
 		h('', { innerHTML: parseMarkdown(state.value) })

diff --git a/examples/markdown/component/textarea.js b/examples/markdown/component/textarea.js
@@ -46,10 +46,10 @@ function textareaRender(state) {
 
 	return h('.textarea', [
 		h('textarea.expanding', {
-			'data-blur': mercury.event(events.blur, state.value),
-			'data-change': events.change,
-			'data-input': events.input,
-			'data-focus': state.shouldFocus ? doMutableFocus() : null,
+			'ev-blur': mercury.event(events.blur, state.value),
+			'ev-change': events.change,
+			'ev-input': events.input,
+			'ev-focus': state.shouldFocus ? doMutableFocus() : null,
 			name: state.name,
 			placeholder: state.placeholder,
 			value: state.value

diff --git a/examples/number-input/number-component.js b/examples/number-input/number-component.js
@@ -7,17 +7,17 @@ numberInput.Render = function (state) {
             type: 'text',
             name: 'number',
             value: String(state.value),
-            'data-event': mercury.changeEvent(state.events.change)
+            'ev-event': mercury.changeEvent(state.events.change)
         }),
         h('input', {
             type: 'button',
             value: 'increase',
-            'data-click': mercury.event(state.events.increase)
+            'ev-click': mercury.event(state.events.increase)
         }, 'increase'),
         h('input', {
             type: 'button',
             value: 'decrease',
-            'data-click': mercury.event(state.events.decrease)
+            'ev-click': mercury.event(state.events.decrease)
         }, 'decrease')
     ]);
 };

diff --git a/examples/react-ballmer.js b/examples/react-ballmer.js
@@ -8,7 +8,7 @@ var React = (function () {
       props = props || {};
 
       if (props.onKeyUp) {
-        props["data-keyup"] = props.onKeyUp;
+        props["ev-keyup"] = props.onKeyUp;
         props.onKeyUp = null;
       }
 

diff --git a/examples/shared-state.js b/examples/shared-state.js
@@ -12,7 +12,7 @@ function inputBox(value, sink) {
     return h("input.input", {
         value: value,
         name: "text",
-        "data-event": mercury.changeEvent(sink)
+        "ev-event": mercury.changeEvent(sink)
     })
 }
 

diff --git a/examples/todomvc/render.js b/examples/todomvc/render.js
@@ -27,7 +27,7 @@ function render(state) {
 
 function header(field, events) {
     return h("header#header.header", {
-        "data-event": [
+        "ev-event": [
             mercury.changeEvent(events.setTodoField),
             mercury.submitEvent(events.add)
         ]
@@ -57,7 +57,7 @@ function mainSection(todos, route, events) {
             type: "checkbox",
             name: "toggle",
             checked: allCompleted,
-            "data-change": mercury.valueEvent(events.toggleAll)
+            "ev-change": mercury.valueEvent(events.toggleAll)
         }),
         h("label", { htmlFor: "toggle-all" }, "Mark all as complete"),
         h("ul#todo-list.todolist", visibleTodos.map(function (todo) {
@@ -75,18 +75,18 @@ function todoItem(todo, events) {
             h("input.toggle", {
                 type: "checkbox",
                 checked: todo.completed,
-                "data-change": mercury.event(events.toggle, {
+                "ev-change": mercury.event(events.toggle, {
                     id: todo.id,
                     completed: !todo.completed
                 })
             }),
             h("label", {
-                "data-dblclick": mercury.event(events.startEdit, {
+                "ev-dblclick": mercury.event(events.startEdit, {
                     id: todo.id 
                 })
             }, todo.title),
             h("button.destroy", {
-                "data-click": mercury.event(events.destroy, { id: todo.id })
+                "ev-click": mercury.event(events.destroy, { id: todo.id })
             })
         ]),
         h("input.edit", {
@@ -95,14 +95,14 @@ function todoItem(todo, events) {
             // when we need an RPC invocation we add a 
             // custom mutable operation into the tree to be
             // invoked at patch time
-            "data-focus": todo.editing ? doMutableFocus() : null,
-            "data-keydown": mercury.keyEvent(events.cancelEdit, ESCAPE, {
+            "ev-focus": todo.editing ? doMutableFocus() : null,
+            "ev-keydown": mercury.keyEvent(events.cancelEdit, ESCAPE, {
                 id: todo.id
             }),
-            "data-event": mercury.submitEvent(events.finishEdit, {
+            "ev-event": mercury.submitEvent(events.finishEdit, {
                 id: todo.id
             }),
-            "data-blur": mercury.valueEvent(events.finishEdit, { id: todo.id })
+            "ev-blur": mercury.valueEvent(events.finishEdit, { id: todo.id })
         })
     ])
 }
@@ -126,7 +126,7 @@ function statsSection(todos, route, events) {
         ]),
         h("button.clear-completed#clear-completed", {
             hidden: todosCompleted === 0,
-            "data-click": mercury.event(events.clearCompleted)
+            "ev-click": mercury.event(events.clearCompleted)
         }, "Clear completed (" + String(todosCompleted) + ")")
     ])
 }

diff --git a/examples/unidirectional/backbone/browser.js b/examples/unidirectional/backbone/browser.js
@@ -56,7 +56,7 @@ function render(state) {
             ])
         })),
         h('div', {
-            'data-event': mercury.submitEvent(state.events.add)
+            'ev-event': mercury.submitEvent(state.events.add)
         }, [
             h('input', {
                 name: 'name',

diff --git a/examples/unidirectional/jsx/render.jsx b/examples/unidirectional/jsx/render.jsx
@@ -8,12 +8,12 @@ module.exports = render
 function render(state) {
     return <div>
         <input
-            data-event={mercury.changeEvent(state.events.changeText)}
+            ev-event={mercury.changeEvent(state.events.changeText)}
             name="description"
             value={state.description}
         />
         <button
-            data-click={mercury.event(state.events.add, state.description)}
+            ev-click={mercury.event(state.events.add, state.description)}
         >Add</button>
         <table>
             {state.list.map(renderTask)}
@@ -25,7 +25,7 @@ function render(state) {
             <td>
                 <input
                     type="checkbox"
-                    data-click={mercury.event(state.events.toggle, {
+                    ev-click={mercury.event(state.events.toggle, {
                         id: item.id
                     })}
                     checked={item.done}

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "value-event": "^1.3.4",
     "vdom-thunk": "^2.0.0",
     "virtual-dom": "0.0.8",
-    "virtual-hyperscript": "^2.4.0"
+    "virtual-hyperscript": "^3.0.0"
   },
   "devDependencies": {
     "backbone": "^1.1.2",