Your first component

Plain Component

index.ts

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

const App = Component('my-component', () => {
  return  () => html`<p>Hello World</p>`;
})

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

bootstrap(root, App)

result

Binding values

Simple binding

index.ts

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

const App = Component('my-component', () => {
  const name = 'John'
  return  () => html`<p>Hello, ${name}</p>`;
})

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

bootstrap(root, App)

result

Property binding

Simple values

post.component.ts

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

export Post = {
  id: string
};

Component<Post>('app-post', ({ id }) => {
  return  () => html`Post ID: ${id}`;
})

index.ts

result

Reactive values

post.component.ts

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

export Post = {
  id: string
};

const post = Component<Post>('app-post', ({ id }) => {
  return  () => html`Post ID: ${id}`;
})

export default post;

index.ts

result