Iteration Generator
An iteration generator is a generator that iterates over an iterable and passes through in a callback function at least the current value and an object called the iteration info. Which is and object that gives away info about the current iteration of the object. How many iterations there are going to be. All of them are generators. Some async some not They are created to be well typed.
WARNING
Async generators are best used inside of Astro components
WARNING
Some generators will only accept an iterable that has a forEach() on it. The method is used as a part of the process of iteration.
Iteration Info
The iteration info is an object that is created to pass on information about the current iteration.
INFO
This table below is a decscription of all the properties of the IterationInfo.
| key | type | Definition |
|---|---|---|
| isFirst | boolean | Value is true if iteration is the first one |
| isLast | boolean | Value is true if iteration is the last one |
| isOdd | boolean | Value is true if the iteration is odd |
| isEven | boolean | Value is true if the iteration is even |
| count | number | The total amount of iterations |
| remaining | number | The total amount of iterations remaining |
Iterate
iterate<T HasForEachMethod | Generator, U>(
iterable:T, (value:unknown: info:IterationInfo, key:unknown)=> U
):AsyncGeneratoriterate<T HasForEachMethod | Generator, U>(
iterable:T, (value:unknown: info:IterationInfo, key:unknown)=> U
):AsyncGeneratorA function that takes in either a generator or a iterable with a forEach()
as the first parameter and a callback as the second. It iterates through the first parameter and passes through it's value, the Iteration Info. If the first parameter is a iterable with a forEach() the key as the last parameter.
WARNING
This function works for Astro components
Usage in Astro
{iterate([1,2,3], (value:number, info:IterationInfo) => (
<div style={{backgroundColor: info.isOdd ? 'red': 'blue' }} >
{value}
</div>
))}{iterate([1,2,3], (value:number, info:IterationInfo) => (
<div style={{backgroundColor: info.isOdd ? 'red': 'blue' }} >
{value}
</div>
))}Sync Iterate
syncIterate<T HasForEachMethod | Generator, U>(
iterable:T, (value:unknown: info:IterationInfo, key:unknown)=> U
):GeneratorsyncIterate<T HasForEachMethod | Generator, U>(
iterable:T, (value:unknown: info:IterationInfo, key:unknown)=> U
):GeneratorA function that takes in either a generator or a iterable with a forEach()
as the first parameter and a callback as the second. It iterates through the first parameter and passes through it's value, the Iteration Info. If the first parameter is a iterable with a forEach() the key as the last parameter.
WARNING
This function works for Non components. When using React you'll get and error. In React use a method that generates arrays instead.
Usage in React
{Array.from(syncIterate([1,2,3], (value:number, info:IterationInfo) => (
<div style={{backgroundColor: info.isOdd ? 'red': 'blue' }} >
{value}
</div>
)))}{Array.from(syncIterate([1,2,3], (value:number, info:IterationInfo) => (
<div style={{backgroundColor: info.isOdd ? 'red': 'blue' }} >
{value}
</div>
)))}Usage in Vue
<script setup lang="ts">
const generatedNumberAndIterationInfo =
syncIterate(
[1,2,3],
(value:number, info:IterationInfo) => [value,info])
)
</script>
<div
v-for="[value, info] in generatedNumberAndIterationInfo"
style={{backgroundColor: info.isOdd ? 'red': 'blue' }}
>
{{value}}
</div><script setup lang="ts">
const generatedNumberAndIterationInfo =
syncIterate(
[1,2,3],
(value:number, info:IterationInfo) => [value,info])
)
</script>
<div
v-for="[value, info] in generatedNumberAndIterationInfo"
style={{backgroundColor: info.isOdd ? 'red': 'blue' }}
>
{{value}}
</div>