Rename VNode data property to props.

.editorconfig

@@ -7,3 +7,7 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
 indent_size = 2
+
+[*.json]
+indent_style = space
+indent_size = 2

docs/events.md

@@ -42,7 +42,7 @@ app({
     load(state, actions, element) {
       return walk(element, (node, children) => ({
         tag: node.tagName.toLowerCase(),
-        data: {},
+        props: {},
         children
       }))
     }

docs/hydration.md

@@ -39,7 +39,7 @@ const hydrator = () => ({
     load(state, actions, element) {
       return walk(element, (node, children) => ({
         tag: node.tagName.toLowerCase(),
-        data: {},
+        props: {},
         children
       }))
     }

docs/vnodes.md

@@ -5,12 +5,12 @@ A vnode or vnode is a JavaScript object that describes a DOM tree.
 ```js
 {
   tag: "div",
-  data: {
+  props: {
     id: "app"
   },
   children: [{
     tag: "h1",
-    data: {},
+    props: {},
     children: ["Hi."]
   }]
 }
@@ -42,22 +42,24 @@ const node = (
 
 ## Attributes
 
-The data property can include any valid attributes: [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes), [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute), [DOM events](https://developer.mozilla.org/en-US/docs/Web/Events), [VDOM events](/docs/vdom-events.md) and [keys](/docs/keys.md).
+Also referred to as props, can include any valid [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) or [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) attributes, [DOM events](https://developer.mozilla.org/en-US/docs/Web/Events), [VDOM events](/docs/vdom-events.md) and [keys](/docs/keys.md).
 
 ```jsx
-const button = (
-  <button
-    class="ui button"
-    tabindex={0}
-    style={{
-      fontSize: "3em"
-    }}
-    onclick={() => {
-      // ...
-    }}
-  >
-    Click Me
-  </button>
+const button = h(
+  "button",
+  {
+    props: {
+      class: "ui button",
+      tabindex: 0,
+      style: {
+        fontSize: "3em"
+      },
+      onclick() {
+        // ...
+      }
+    }
+  },
+  ["Click Me"]
 )
 ```
 

hyperapp.d.ts

@@ -1,88 +1,85 @@
 export as namespace Hyperapp
 
-/** @namespace [Virtual DOM] */
+/** @namespace [VDOM] */
 
-/** The Virtual DOM representation of an Element
+/** The VDOM representation of an Element
  *
- * @memberOf [Virtual DOM]
+ * @memberOf [VDOM]
 */
-export interface VirtualNode<Data> {
+export interface VNode<Props> {
   tag: string
-  data: Data
-  children: VirtualNodeChild<{} | null>[]
+  props: Props
+  children: VNodeChild<{} | null>[]
 }
 
-/** In the Virtual DOM a Child could be either a Virtual Node or a string
+/** In the VDOM a Child could be either a VNode or a string
  *
- * @memberOf [Virtual DOM]
+ * @memberOf [VDOM]
 */
-export type VirtualNodeChild<Data> = VirtualNode<Data> | string
+export type VNodeChild<Props> = VNode<Props> | string
 
-export interface Component<Data> {
-  /** A Component is a function that return a custom Virtual Node
+export interface Component<Props> {
+  /** A Component is a function that return a custom VNode
    *
-   * @memberOf [Virtual DOM]
+   * @memberOf [VDOM]
   */
-  (data: Data, children: VirtualNodeChild<{} | null>[]): VirtualNode<Data>
+  (data: Props, children: VNodeChild<{} | null>[]): VNode<Props>
 }
 
-/** The soft way to create a Virtual Node
+/** The soft way to create a VNode
  * @param tag       Either a tag name e.g. 'div'. Or a Component function
- * @param data      Any valid HTML atributes, events, styles, and meta data
- * @param children  The children of the VirtualNode
+ * @param props     Any valid HTML atributes, events, styles, and meta data
+ * @param children  The children of the VNode
  *
- * @memberOf [Virtual DOM]
+ * @memberOf [VDOM]
 */
-export function h<Data>(
-  tag: Component<Data> | string,
-  data?: Data,
-  children?:
-    | VirtualNodeChild<{} | null>[]
-    | VirtualNodeChild<{} | null>
-    | number
-): VirtualNode<Data>
+export function h<Props>(
+  tag: Component<Props> | string,
+  data?: Props,
+  children?: VNodeChild<{} | null>[] | VNodeChild<{} | null> | number
+): VNode<Props>
 
-/** @namespace [Application] */
+/** @namespace [App] */
 
 export interface State {}
 
 export interface Thunk {
   (update: Function): any | null | void
 }
 
-export type ActionsResult<State extends Hyperapp.State> =
+export type ActionResult<State extends Hyperapp.State> =
   | Partial<State>
   | Thunk
   | {}
   | null
   | void
 
-export type VirtualActions<
+export type WrappedActions<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>
 > = {
   [P in keyof Actions]: (
     data: any
-  ) => ActionsResult<State> | VirtualActions<State, Actions>
+  ) => ActionResult<State> | WrappedActions<State, Actions>
 }
 
 export interface Actions<State extends Hyperapp.State> {
   [action: string]:
     | Actions<State>
     | ((
         state: State,
-        actions: VirtualActions<State, Actions<State>>,
+        actions: WrappedActions<State, Actions<State>>,
         data: any
-      ) => ActionsResult<State>)
+      ) => ActionResult<State>)
 }
 
-export interface VirtualEvents<
+export interface CustomEvents<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>
 > {
   [action: string]: (
     state: State,
-    actions: VirtualActions<State, Actions>,
+    actions: WrappedActions<State, Actions>,
     data: any
   ) => any
 }
@@ -91,36 +88,31 @@ export interface Events<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>
 > {
-  load?: (
-    state: State,
-    actions: VirtualActions<State, Actions>
-  ) => void
+  load?: (state: State, actions: WrappedActions<State, Actions>) => void
   resolve?: (
     state: State,
-    actions: VirtualActions<State, Actions>,
-    result: ActionsResult<State>
-  ) => ActionsResult<State>
+    actions: WrappedActions<State, Actions>,
+    result: ActionResult<State>
+  ) => ActionResult<State>
 }
 
 export interface View<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>
 > {
-  (state: State, actions: VirtualActions<State, Actions>): VirtualNode<{}>
+  (state: State, actions: WrappedActions<State, Actions>): VNode<{}>
 }
 
 export interface Mixin<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>,
   Events extends Hyperapp.Events<State, Actions>
 > {
-  (): Application<State, Actions, Events>
-  (): (
-    emit: Emit<State, Actions, Events>
-  ) => Application<State, Actions, Events>
+  (): App<State, Actions, Events>
+  (): (emit: Emit<State, Actions, Events>) => App<State, Actions, Events>
 }
 
-export interface Application<
+export interface App<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>,
   Events extends Hyperapp.Events<State, Actions>
@@ -142,7 +134,7 @@ export interface Emit<
    * @param name  The name of the event to call
    * @param data  Will be reduced by each event handler
    *
-   * @memberOF [Application]
+   * @memberOF [App]
   */
   (name: keyof Events, data?: any): any
 }
@@ -151,13 +143,13 @@ export function app<
   State extends Hyperapp.State,
   Actions extends Hyperapp.Actions<State>,
   Events extends Hyperapp.Events<State, Actions>
->(app: Application<State, Actions, Events>): Emit<State, Actions, Events>
+>(app: App<State, Actions, Events>): Emit<State, Actions, Events>
 
 /** @namespace [JSX] */
 
 declare global {
   namespace JSX {
-    interface Element<Data> extends VirtualNode<Data> {}
+    interface Element<Data> extends VNode<Data> {}
     interface IntrinsicElements {
       [elemName: string]: any
     }

package.json

@@ -10,7 +10,8 @@
   "repository": "hyperapp/hyperapp",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "hyperapp.d.ts"
   ],
   "author": "Jorge Bucaran",
   "keywords": [
@@ -28,7 +29,7 @@
     "minify": "uglifyjs dist/hyperapp.js -o dist/hyperapp.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --source-map dist/hyperapp.js.map",
     "prepublish": "npm run build",
     "prepare": "npm run build",
-    "format": "prettier --semi false --write 'src/**/*.js' 'hyperapp.d.ts'",
+    "format": "prettier --semi false --write 'src/**/*.js' '{,test/ts/}*.{ts,tsx}'",
     "release": "npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "babel": {

src/app.js

@@ -102,7 +102,7 @@ export function app(props) {
   }
 
   function getKey(node) {
-    if (node && (node = node.data)) {
+    if (node && (node = node.props)) {
       return node.key
     }
   }
@@ -115,14 +115,14 @@ export function app(props) {
         ? document.createElementNS("http://www.w3.org/2000/svg", node.tag)
         : document.createElement(node.tag)
 
-      if (node.data && node.data.oncreate) {
+      if (node.props && node.props.oncreate) {
         globalInvokeLaterStack.push(function() {
-          node.data.oncreate(element)
+          node.props.oncreate(element)
         })
       }
 
-      for (var i in node.data) {
-        setData(element, i, node.data[i])
+      for (var i in node.props) {
+        setData(element, i, node.props[i])
       }
 
       for (var i = 0; i < node.children.length; ) {
@@ -183,7 +183,7 @@ export function app(props) {
     if (oldNode == null) {
       element = parent.insertBefore(createElement(node, isSVG), element)
     } else if (node.tag != null && node.tag === oldNode.tag) {
-      updateElement(element, oldNode.data, node.data)
+      updateElement(element, oldNode.props, node.props)
 
       isSVG = isSVG || node.tag === "svg"
 
@@ -247,16 +247,16 @@ export function app(props) {
         var oldChild = oldNode.children[i]
         var oldKey = getKey(oldChild)
         if (null == oldKey) {
-          removeElement(element, oldElements[i], oldChild.data)
+          removeElement(element, oldElements[i], oldChild.props)
         }
         i++
       }
 
       for (var i in oldKeyed) {
         var keyedNode = oldKeyed[i]
         var reusableNode = keyedNode[1]
-        if (!keyed[reusableNode.data.key]) {
-          removeElement(element, keyedNode[0], reusableNode.data)
+        if (!keyed[reusableNode.props.key]) {
+          removeElement(element, keyedNode[0], reusableNode.props)
         }
       }
     } else if (element && node !== element.nodeValue) {
@@ -267,7 +267,7 @@ export function app(props) {
           createElement(node, isSVG),
           (nextSibling = element)
         )
-        removeElement(parent, nextSibling, oldNode.data)
+        removeElement(parent, nextSibling, oldNode.props)
       }
     }
 

src/h.js

@@ -1,7 +1,7 @@
 var i
 var stack = []
 
-export function h(tag, data) {
+export function h(tag, props) {
   var node
   var children = []
 
@@ -25,8 +25,8 @@ export function h(tag, data) {
   return typeof tag === "string"
     ? {
         tag: tag,
-        data: data || {},
+        props: props || {},
         children: children
       }
-    : tag(data, children)
+    : tag(props, children)
 }