improvements to VNodeData types

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,10 +1,9 @@
 import {VNode, VNodeData} from '../vnode';
 import {Module} from './module';
 
-export interface VNodeStyle {
-  delayed: { [prop: string]: string }
-  remove: { [prop: string]: string }
-  [prop: string]: string | { [prop: string]: string }
+export type VNodeStyle = Record<string, string> & {
+  delayed: Record<string, string>
+  remove: Record<string, string>
 }
 
 var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;

src/vnode.ts

@@ -1,6 +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;
 
@@ -14,25 +20,13 @@ export interface VNode {
 }
 
 export interface VNodeData {
-  props?: {
-    [prop: string]: any
-  };
-  attrs?: {
-    [attr: string]: any
-  };
-  class?: {
-    [name: string]: boolean
-  };
+  props?: Props;
+  attrs?: Attrs;
+  class?: Classes;
   style?: VNodeStyle;
-  dataset?: {
-    [name: string]: string
-  };
-  on?: {
-    [event: string]: EventListener | EventListener[]
-  };
-  hero?: {
-    id: string
-  };
+  dataset?: Dataset;
+  on?: On;
+  hero?: Hero;
   attachData?: AttachData;
   hook?: Hooks;
   key?: Key;