Loop

Use forEach function to handle loop:

loop.js :

import Component from './node_modules/@xylem-js/xylem-js/dom/Component.js';
import createStore from './node_modules/@xylem-js/xylem-js/core/createStore.js';
import forEach from './node_modules/@xylem-js/xylem-js/dom/forEach.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';
import parseHTML from './node_modules/@xylem-js/xylem-js/dom/parseHTML.js';

class Loop extends Component
{
	build()
	{
		const colors$ = createStore(['red', 'green', 'blue']);

		return parseHTML([
			'<div>',
			[
				'Colors:',
				forEach(colors$, (color, index$) => {
					return parseHTML([
						'<div>',
						[
							index$._() + 1,
							'. ',
							color,
						],
						'</div>',
					]);
				}).endForEach(),
			],
			'</div>',
		]);
	}
}

mountComponent(new Loop(), document.getElementById('app-container'));

JSX version of the code above:

loop-jsx.tsx :

import Component from './node_modules/@xylem-js/xylem-js/dom/Component.js';
import createStore from './node_modules/@xylem-js/xylem-js/core/createStore.js';
import forEach from './node_modules/@xylem-js/xylem-js/dom/forEach.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';

class Loop extends Component
{
	build()
	{
		const colors$ = createStore(['red', 'green', 'blue']);

		return <>
			<div>
				Colors:
				{ forEach(colors$, (color, index$) => {
					return <>
						<div>
							{ index$._() + 1 }
							{'. '}
							{ color }
						</div>
					</>;
				}).endForEach() }
			</div>
		</>;
	}
}

mountComponent(new Loop(), document.getElementById('app-container')!);

Note: Remember to chain forEach() with endForEach() at the end.

Use ArrayStore to handle mutation:

import Component from './node_modules/@xylem-js/xylem-js/dom/Component.js';
import createArrayStore from './node_modules/@xylem-js/xylem-js/array/createArrayStore.js';
import forEach from './node_modules/@xylem-js/xylem-js/dom/forEach.js';
import if_ from './node_modules/@xylem-js/xylem-js/dom/if_.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';
import parseHTML from './node_modules/@xylem-js/xylem-js/dom/parseHTML.js';
import push from './node_modules/@xylem-js/xylem-js/array_action/push.js';
import unshift from './node_modules/@xylem-js/xylem-js/array_action/unshift.js';

class LoopMutation extends Component
{
	build()
	{
		const colors$ = createArrayStore(['red', 'green', 'blue']);

		setTimeout(() => { colors$.mutate(push, 'cyan') }, 1500);
		setTimeout(() => { colors$.mutate(unshift, 'magenta') }, 3000);
		setTimeout(() => { colors$.mutate(remove, 2) }, 4500);

		return parseHTML([
			'<div>',
			[
				forEach(colors$, (color, index$) => {
					return parseHTML([
						'<div>',
						[
							map(index$, index => index + 1),
							color,
						],
						'</div>',
					]);
				}).endForEach(),
			],
			'</div>',
		]);
	}
}

mountComponent(new LoopMutation(), document.getElementById('app-container'));

JSX version of the code above:

import Component from './node_modules/@xylem-js/xylem-js/dom/Component.js';
import createArrayStore from './node_modules/@xylem-js/xylem-js/array/createArrayStore.js';
import forEach from './node_modules/@xylem-js/xylem-js/dom/forEach.js';
import map from './node_modules/@xylem-js/xylem-js/core/map.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';
import push from './node_modules/@xylem-js/xylem-js/array_action/push.js';
import remove from './node_modules/@xylem-js/xylem-js/array_action/remove.js';
import unshift from './node_modules/@xylem-js/xylem-js/array_action/unshift.js';

class LoopMutation extends Component
{
	build()
	{
		const colors$ = createArrayStore(['red', 'green', 'blue']);

		setTimeout(() => { colors$.mutate(push, 'cyan') }, 1500);
		setTimeout(() => { colors$.mutate(unshift, 'magenta') }, 3000);
		setTimeout(() => { colors$.mutate(remove, 2) }, 4500);

		return <>
			<div>
				{ forEach(colors$, (color, index$) => {
					return <>
						<div>
							{ map(index$, index => index + 1) }
							{'. '}
							{ color }
						</div>
					</>;
				}).endForEach() }
			</div>
		</>;
	}
}

mountComponent(new LoopMutation(), document.getElementById('app-container')!);