1 files changed, 81 insertions, 0 deletions
diff --git a/src/rx.ts b/src/rx.ts
index a7d88f2..afcebac 100644
--- a/src/rx.ts
+++ b/src/rx.ts
@@ -11,6 +11,8 @@ export type Html
   | WithState<any>
   | WithState2<any, any>
   | WithState3<any, any, any>
+  | WithState4<any, any, any, any>
+  | WithState5<any, any, any, any, any>
   | Array<Html>
   | Rx<Html>
 
@@ -41,6 +43,18 @@ interface WithState3<A, B, C> {
   getChildren: (v1: Var<A>, v2: Var<B>, v3: Var<C>) => Html
 }
 
+interface WithState4<A, B, C, D> {
+  type: 'WithState4'
+  init: [A, B, C, D]
+  getChildren: (v1: Var<A>, v2: Var<B>, v3: Var<C>, v4: Var<D>) => Html
+}
+
+interface WithState5<A, B, C, D, E> {
+  type: 'WithState5'
+  init: [A, B, C, D, E]
+  getChildren: (v1: Var<A>, v2: Var<B>, v3: Var<C>, v4: Var<D>, v5: Var<E>) => Html
+}
+
 interface Attributes {
   [key: string]: Rx<AttributeValue> | AttributeValue
 }
@@ -60,6 +74,7 @@ function isHtml(x: any): x is Html {
     || isWithState(x)
     || isWithState2(x)
     || isWithState3(x)
+    || isWithState4(x)
     || isRx(x)
     || Array.isArray(x))
 }
@@ -130,6 +145,22 @@ export function withState3<A, B, C>(init: [A, B, C], getChildren: (v1: Var<A>, v
   }
 }
 
+export function withState4<A, B, C, D>(init: [A, B, C, D], getChildren: (v1: Var<A>, v2: Var<B>, v3: Var<C>, v4: Var<D>) => Html): WithState4<A, B, C, D> {
+  return {
+    type: 'WithState4',
+    init,
+    getChildren
+  }
+}
+
+export function withState5<A, B, C, D, E>(init: [A, B, C, D, E], getChildren: (v1: Var<A>, v2: Var<B>, v3: Var<C>, v4: Var<D>, v5: Var<E>) => Html): WithState5<A, B, C, D, E> {
+  return {
+    type: 'WithState5',
+    init,
+    getChildren
+  }
+}
+
 // Rx
 
 export type RxAble<A> = Rx<A> | A
@@ -480,6 +511,48 @@ function appendChild(state: State, element: Element, child: Html, lastAdded?: No
       remove: () => appendRes.remove(),
       lastAdded: appendRes.lastAdded
     }
+  } else if (isWithState4(child)) {
+    const { init, getChildren } = child
+    const [ init1, init2, init3, init4 ] = init
+    const v1 = state.register(init1)
+    const v2 = state.register(init2)
+    const v3 = state.register(init3)
+    const v4 = state.register(init4)
+    const children = getChildren(v1, v2, v3, v4)
+    const appendRes = appendChild(state, element, children)
+    return {
+      cancel: () => {
+        appendRes.cancel()
+        state.unregister(v1)
+        state.unregister(v2)
+        state.unregister(v3)
+        state.unregister(v4)
+      },
+      remove: () => appendRes.remove(),
+      lastAdded: appendRes.lastAdded
+    }
+  } else if (isWithState5(child)) {
+    const { init, getChildren } = child
+    const [ init1, init2, init3, init4, init5 ] = init
+    const v1 = state.register(init1)
+    const v2 = state.register(init2)
+    const v3 = state.register(init3)
+    const v4 = state.register(init4)
+    const v5 = state.register(init5)
+    const children = getChildren(v1, v2, v3, v4, v5)
+    const appendRes = appendChild(state, element, children)
+    return {
+      cancel: () => {
+        appendRes.cancel()
+        state.unregister(v1)
+        state.unregister(v2)
+        state.unregister(v3)
+        state.unregister(v4)
+        state.unregister(v5)
+      },
+      remove: () => appendRes.remove(),
+      lastAdded: appendRes.lastAdded
+    }
   } else if (isRx(child)) {
     const rxBase = document.createTextNode('')
     appendNode(element, rxBase, lastAdded)
@@ -531,6 +604,14 @@ function isWithState3<A, B, C>(x: any): x is WithState3<A, B, C> {
   return x !== undefined && x.type === "WithState3"
 }
 
+function isWithState4<A, B, C, D>(x: any): x is WithState4<A, B, C, D> {
+  return x !== undefined && x.type === "WithState4"
+}
+
+function isWithState5<A, B, C, D, E>(x: any): x is WithState5<A, B, C, D, E> {
+  return x !== undefined && x.type === "WithState5"
+}
+
 function appendNode(base: Element, node: Node, lastAdded?: Node) {
   if (lastAdded !== undefined) {
     base.insertBefore(node, lastAdded.nextSibling)