Conditional

Use if_ function to handle conditional rendering:

conditional-if.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 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';

class ConditionalIf extends Component
{
	build()
	{
		const showContent$ = createStore(true);

		return parseHTML([
			'<div>',
			[
				'<button>', {
					type: 'button',
					'@click': () => showContent$._(!showContent$._()),
				},
				[
					'Toggle',
				],
				'</button>',
			],
			'</div>',
			if_(showContent$, () => {
				return parseHTML([
					'<div>',
					[
						'The quick brown fox jumps over the lazy dog',
					],
					'</div>',
				]);
			}).endIf(),
		]);
	}
}

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

JSX version of the above code:

conditional-if-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 if_ from './node_modules/@xylem-js/xylem-js/dom/if_.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';

class ConditionalIf extends Component
{
	build()
	{
		const showContent$ = createStore(true);

		return <>
			<div>
				{ if_(showContent$, () => {
					return <>
						<div>
							Click to hide me → {}
							<button
								type="button"
								on:click={() => showContent$._(false)}
							>
								Hide
							</button>
						</div>
					]);
				}).endIf() }
			</div>
		</>;
	}
}

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

Note: Remember to chain if_() with endif() at the end.

Use else() to show content when previous if is false:

conditional-if-else.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 if_ from './node_modules/@xylem-js/xylem-js/dom/if_.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 parseHTML from './node_modules/@xylem-js/xylem-js/dom/parseHTML.js';

class ConditionalIfElse extends Component
{
	build()
	{
		const isArchived$ = createStore(false);

		return parseHTML([
			'<div>',
			[
				'To-do list:',
				'<ol>',
				[
					'<li>',
					[
						if_(isArchived$, () => {
							return parseHTML([
								'<del>', ['Buy Vegetables'], '</del>',
							]);
						}).else(() => {
							return parseHTML([
								'Buy Vegetables',
							]);
						}).endIf(),
						' ',
						'<button>', {
							'@click': () => isArchived$._(!isArchived$._()),
						},
						[ map(isArchived$, v => v ? 'Unarchive' : 'Archive') ],
						'</button>',
					],
					'</li>',
				],
				'</ol>',
			],
			'</div>',
		]);
	}
}

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

JSX version of the above code:

conditional-if-else-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 if_ from './node_modules/@xylem-js/xylem-js/dom/if_.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';

class ConditionalIfElse extends Component
{
	build()
	{
		const isArchived$ = createStore(false);

		return <>
			<div>
				To-do list:
				<ol>
					<li>
						{ if_(isArchived$, () => {
							return <>
								<del>Buy Vegetables</del>
							</>;
						}).else(() => {
							return <>
								Buy Vegetables
							</>;
						}).endIf() }
						{' '}
						<button
							on:click={() => isArchived$._(!isArchived$._())}
						>
							{ map(isArchived$, v => v ? 'Unarchive' : 'Archive') }
						</button>
					</li>
				</ol>
			</div>
		</>;
	}
}

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