Rendering lists

Simple list

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('app-list', () => {
  
  const fruits = ['Apple', 'Banana', 'Grape', 'Avocado']
  
  return  () => html`
    <ul>
      ${fruits.map(item => (
        `<li>${item}</li>`
      ))}
    </ul>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

result

Reactive list

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('app-list', () => {
  
  const fruits = signal(['Apple', 'Banana', 'Grape', 'Avocado']);
  
  return  () => html`
    <ul>
      ${fruits().map(item => (
        `<li>${item}</li>`
      ))}
    </ul>
  `;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

result