diff --git a/README.md b/README.md index feca5c5..272f7f3 100644 --- a/README.md +++ b/README.md @@ -135,6 +135,7 @@ function List() { children: [ createElement("h1", { children: "list" }), listState.useValueIterator<{ id: number; name: string }>( + { key: "id" }, ({ elementState }) => { return createElement("div", { children: [ @@ -143,8 +144,7 @@ function List() { ), ], }); - }, - { key: "id" } + } ), ], }); diff --git a/integration-tests/create-state.test.ts b/integration-tests/create-state.test.ts index 7e09b16..fe8c5d9 100644 --- a/integration-tests/create-state.test.ts +++ b/integration-tests/create-state.test.ts @@ -412,20 +412,18 @@ describe("createState", () => { createElement("ul", { "data-testid": "listComponent", children: [ - state.useValueIterator( - ({ elementState }) => - createElement(() => { - onUnmount(unmountSpy); - return createElement("li", { - children: [ - elementState.useValueSelector( - (element) => element.text, - (text) => createElement("span", { children: text }) - ), - ], - }); - }), - { key: "id" } + state.useValueIterator({ key: "id" }, ({ elementState }) => + createElement(() => { + onUnmount(unmountSpy); + return createElement("li", { + children: [ + elementState.useValueSelector( + (element) => element.text, + (text) => createElement("span", { children: text }) + ), + ], + }); + }) ), ], }), diff --git a/src/hooks/create-state.ts b/src/hooks/create-state.ts index 7e3434b..2b14aac 100644 --- a/src/hooks/create-state.ts +++ b/src/hooks/create-state.ts @@ -37,13 +37,13 @@ export type State = { ): VelesElement | VelesComponent | VelesStringElement; useAttribute(cb: (value: ValueType) => string): AttributeHelper; useValueIterator( + options: { + key: string | ((options: { element: Element; index: number }) => string); + }, cb: (props: { elementState: State; index: number; - }) => VelesElement | VelesComponent, - options: { - key: string | ((options: { element: Element; index: number }) => string); - } + }) => VelesElement | VelesComponent ): VelesComponent | VelesElement; getValue(): ValueType; getPreviousValue(): undefined | ValueType; @@ -157,13 +157,13 @@ function createState( }, // TODO: add a version with a selector useValueIterator( + options: { + key: string | ((options: { element: any; index: number }) => string); + }, cb: (props: { elementState: State; index: number; - }) => VelesElement | VelesComponent, - options: { - key: string | ((options: { element: any; index: number }) => string); - } + }) => VelesElement | VelesComponent ) { const children: [ VelesElement | VelesComponent,