From 1435f9e28aff7ab791c29f7d3017fa5baae2649b Mon Sep 17 00:00:00 2001 From: Joris Date: Mon, 17 Mar 2025 13:23:15 +0100 Subject: Add withState2 and withState3 --- src/rx.ts | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) (limited to 'src') diff --git a/src/rx.ts b/src/rx.ts index c3b34e3..42680c5 100644 --- a/src/rx.ts +++ b/src/rx.ts @@ -9,6 +9,8 @@ export type Html | number | Tag | WithState + | WithState2 + | WithState3 | Array | Rx @@ -27,6 +29,18 @@ interface WithState { getChildren: (v: Var) => Html } +interface WithState2 { + type: 'WithState2' + init: [A, B] + getChildren: (v1: Var, v2: Var) => Html +} + +interface WithState3 { + type: 'WithState3' + init: [A, B, C] + getChildren: (v1: Var, v2: Var, v3: Var) => Html +} + interface Attributes { [key: string]: Rx | AttributeValue } @@ -44,6 +58,8 @@ function isHtml(x: any): x is Html { || typeof x === 'number' || isTag(x) || isWithState(x) + || isWithState2(x) + || isWithState3(x) || isRx(x) || Array.isArray(x)) } @@ -98,6 +114,22 @@ export function withState(init: A, getChildren: (v: Var) => Html): WithSta } } +export function withState2(init: [A, B], getChildren: (v1: Var, v2: Var) => Html): WithState2 { + return { + type: 'WithState2', + init, + getChildren + } +} + +export function withState3(init: [A, B, C], getChildren: (v1: Var, v2: Var, v3: Var) => Html): WithState3 { + return { + type: 'WithState3', + init, + getChildren + } +} + // Rx export type RxAble = Rx | A @@ -412,6 +444,40 @@ function appendChild(state: State, element: Element, child: Html, lastAdded?: No remove: () => appendRes.remove(), lastAdded: appendRes.lastAdded } + } else if (isWithState2(child)) { + const { init, getChildren } = child + const [ init1, init2 ] = init + const v1 = state.register(init1) + const v2 = state.register(init2) + const children = getChildren(v1, v2) + const appendRes = appendChild(state, element, children) + return { + cancel: () => { + appendRes.cancel() + state.unregister(v1) + state.unregister(v2) + }, + remove: () => appendRes.remove(), + lastAdded: appendRes.lastAdded + } + } else if (isWithState3(child)) { + const { init, getChildren } = child + const [ init1, init2, init3 ] = init + const v1 = state.register(init1) + const v2 = state.register(init2) + const v3 = state.register(init3) + const children = getChildren(v1, v2, v3) + const appendRes = appendChild(state, element, children) + return { + cancel: () => { + appendRes.cancel() + state.unregister(v1) + state.unregister(v2) + state.unregister(v3) + }, + remove: () => appendRes.remove(), + lastAdded: appendRes.lastAdded + } } else if (isRx(child)) { const rxBase = document.createTextNode('') appendNode(element, rxBase, lastAdded) @@ -455,6 +521,14 @@ function isWithState(x: any): x is WithState { return x !== undefined && x.type === "WithState" } +function isWithState2(x: any): x is WithState2 { + return x !== undefined && x.type === "WithState2" +} + +function isWithState3(x: any): x is WithState3 { + return x !== undefined && x.type === "WithState3" +} + function appendNode(base: Element, node: Node, lastAdded?: Node) { if (lastAdded !== undefined) { base.insertBefore(node, lastAdded.nextSibling) -- cgit v1.2.3