Merge pull request #271 from mightyiam/type

type VNode props (fixes #264)

src/helpers/attachto.ts

@@ -1,30 +1,45 @@
 import {VNode, VNodeData} from '../vnode';
 
-function pre(vnode: VNode, newVnode: VNode): void {
-  const attachData = (vnode.data as VNodeData).attachData;
+export interface AttachData {
+  [key: string]: any
+  [i: number]: any
+  placeholder?: any
+  real?: Node
+}
+
+interface VNodeDataWithAttach extends VNodeData {
+  attachData: AttachData
+}
+
+interface VNodeWithAttachData extends VNode {
+  data: VNodeDataWithAttach
+}
+
+function pre(vnode: VNodeWithAttachData, newVnode: VNodeWithAttachData): void {
+  const attachData = vnode.data.attachData;
   // Copy created placeholder and real element from old vnode
-  (newVnode.data as VNodeData).attachData.placeholder = attachData.placeholder;
-  (newVnode.data as VNodeData).attachData.real = attachData.real;
+  newVnode.data.attachData.placeholder = attachData.placeholder;
+  newVnode.data.attachData.real = attachData.real;
   // Mount real element in vnode so the patch process operates on it
-  vnode.elm = (vnode.data as VNodeData).attachData.real;
+  vnode.elm = vnode.data.attachData.real;
 }
 
-function post(_: any, vnode: VNode): void {
+function post(_: any, vnode: VNodeWithAttachData): void {
   // Mount dummy placeholder in vnode so potential reorders use it
-  vnode.elm = (vnode.data as VNodeData).attachData.placeholder;
+  vnode.elm = vnode.data.attachData.placeholder;
 }
 
-function destroy(vnode: VNode): void {
+function destroy(vnode: VNodeWithAttachData): void {
   // Remove placeholder
   if (vnode.elm !== undefined) {
     (vnode.elm.parentNode as HTMLElement).removeChild(vnode.elm);
   }
   // Remove real element from where it was inserted
-  vnode.elm = (vnode.data as VNodeData).attachData.real;
+  vnode.elm = vnode.data.attachData.real;
 }
 
-function create(_: any, vnode: VNode): void {
-  const real = vnode.elm, attachData = (vnode.data as VNodeData).attachData;
+function create(_: any, vnode: VNodeWithAttachData): void {
+  const real = vnode.elm, attachData = vnode.data.attachData;
   const placeholder = document.createElement('span');
   // Replace actual element with dummy placeholder
   // Snabbdom will then insert placeholder instead

src/modules/attributes.ts

@@ -1,6 +1,8 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type Attrs = Record<string, string | number | boolean>
+
 const booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare",
                 "default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable",
                 "enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple",
@@ -40,16 +42,19 @@ function updateAttrs(oldVnode: VNode, vnode: VNode): void {
           elm.removeAttribute(key);
         }
       } else {
+        // because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
+        type SetAttribute = (name: string, value: string | number | boolean) => void;
+        type SetAttributeNS = (namespaceURI: string, qualifiedName: string, value: string | number | boolean) => void;
         if (key.charCodeAt(0) !== xChar) {
-          elm.setAttribute(key, cur);
+          (elm.setAttribute as SetAttribute)(key, cur);
         } else if (key.charCodeAt(3) === colonChar) {
           // Assume xml namespace
-          elm.setAttributeNS(xmlNS, key, cur);
+          (elm.setAttributeNS as SetAttributeNS)(xmlNS, key, cur);
         } else if (key.charCodeAt(5) === colonChar) {
           // Assume xlink namespace
-          elm.setAttributeNS(xlinkNS, key, cur);
+          (elm.setAttributeNS as SetAttributeNS)(xlinkNS, key, cur);
         } else {
-          elm.setAttribute(key, cur);
+          (elm.setAttribute as SetAttribute)(key, cur);
         }
       }
     }

src/modules/class.ts

@@ -1,6 +1,8 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type Classes = Record<string, boolean>
+
 function updateClass(oldVnode: VNode, vnode: VNode): void {
   var cur: any, name: string, elm: Element = vnode.elm as Element,
       oldClass = (oldVnode.data as VNodeData).class,

src/modules/dataset.ts

@@ -1,6 +1,8 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type Dataset = Record<string, string>;
+
 const CAPS_REGEX = /[A-Z]/g;
 
 function updateDataset(oldVnode: VNode, vnode: VNode): void {

src/modules/eventlisteners.ts

@@ -1,6 +1,12 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type On = {
+  [N in keyof HTMLElementEventMap]: (ev: HTMLElementEventMap[N]) => void
+} & {
+  [event: string]: EventListener
+};
+
 function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
   if (typeof handler === "function") {
     // call function handler

src/modules/hero.ts

@@ -1,6 +1,8 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type Hero = { id: string }
+
 var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;
 var nextFrame = function(fn: any) { raf(function() { raf(fn); }); };
 

src/modules/props.ts

@@ -1,6 +1,8 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type Props = Record<string, any>;
+
 function updateProps(oldVnode: VNode, vnode: VNode): void {
   var key: string, cur: any, old: any, elm = vnode.elm,
       oldProps = (oldVnode.data as VNodeData).props,

src/modules/style.ts

@@ -1,6 +1,11 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
+export type VNodeStyle = Record<string, string> & {
+  delayed: Record<string, string>
+  remove: Record<string, string>
+}
+
 var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;
 var nextFrame = function(fn: any) { raf(function() { raf(fn); }); };
 
@@ -15,8 +20,8 @@ function updateStyle(oldVnode: VNode, vnode: VNode): void {
 
   if (!oldStyle && !style) return;
   if (oldStyle === style) return;
-  oldStyle = oldStyle || {};
-  style = style || {};
+  oldStyle = oldStyle || {} as VNodeStyle;
+  style = style || {} as VNodeStyle;
   var oldHasDel = 'delayed' in oldStyle;
 
   for (name in oldStyle) {

src/vnode.ts

@@ -1,4 +1,12 @@
 import {Hooks} from './hooks';
+import {AttachData} from './helpers/attachto'
+import {VNodeStyle} from './modules/style'
+import {On} from './modules/eventlisteners'
+import {Attrs} from './modules/attributes'
+import {Classes} from './modules/class'
+import {Props} from './modules/props'
+import {Dataset} from './modules/dataset'
+import {Hero} from './modules/hero'
 
 export type Key = string | number;
 
@@ -12,22 +20,20 @@ export interface VNode {
 }
 
 export interface VNodeData {
-  // modules - use any because Object type is useless
-  props?: any;
-  attrs?: any;
-  class?: any;
-  style?: any;
-  dataset?: any;
-  on?: any;
-  hero?: any;
-  attachData?: any;
+  props?: Props;
+  attrs?: Attrs;
+  class?: Classes;
+  style?: VNodeStyle;
+  dataset?: Dataset;
+  on?: On;
+  hero?: Hero;
+  attachData?: AttachData;
   hook?: Hooks;
   key?: Key;
   ns?: string; // for SVGs
   fn?: () => VNode; // for thunks
   args?: Array<any>; // for thunks
   [key: string]: any; // for any other 3rd party module
-  // end of modules
 }
 
 export function vnode(sel: string | undefined,