Resource

A common activity in web apps is fetching information from services. VistaJS combines data fetching with reactivity to leverage the best of both worlds

Fetching data

index.ts

import { signal, resource } from 'vistajs/core';
import { Component, html } from 'vistajs/dom';
import { boostrap } from 'vistajs/boot';

const home = Component('app-home', () => {

  const products = resource({
    loader: async () => {
      const response = await fetch('https://dummyjson.com/products?limit=3');
      const data = await response.json();
      return data?.products.map((product: any) => product.title);
    },
  });

  return () => html`
    <ul>
      ${products.value()?.map((product: string) => {
        return `<li>${product}</li>`;
      })}
    </ul>
  `;
});

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

boostrap(root, home);

result

Reactive data fetching

You can control when the fetch is triggered by combining signals and resources, passing a parameter to the resource function.

index.ts

import { signal, resource } from 'vistajs/core';
import { Component, html } from 'vistajs/dom';
import { boostrap } from 'vistajs/boot';

const home = Component('app-home', () => {
  const limit = signal(3); 

  const products = resource({
    param: limit,
    loader: async ({ param }) => {
      const response = await fetch(`
        https://dummyjson.com/products?limit=${param()}`);
      const data = await response.json();
      return data?.products.map((product: any) => product.title);
    },
  });
  
  const incrementLimit = () => {
    limit.set(limit() + 1)
  }

  return () => html`
    <div>
      <ul>
        ${products.value()?.map((product: string) => {
          return `<li>${product}</li>`;
        })}
      </ul>
      <button onclick="${incrementLimit}">Increment limit<button>
    </div>
  `;
});

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

boostrap(root, home);

result

States

Leveraging signals, resource allows you to react to loading states and errors

Loading

index.ts

import { signal, resource } from 'vistajs/core';
import { Component, html } from 'vistajs/dom';
import { boostrap } from 'vistajs/boot';

const home = Component('app-home', () => {
   const products = resource({
    loader: async () => {
      return new Promise<string[]>((resolve) => {
        setTimeout(() => resolve(['Cart', 'Skate']), 2000);
      });
    },
  });

  return () => html`
    <div>
      <n-if condition=${products.loading()}>
        <p>Loading...</p>
      </n-if>
      <n-else>
        <ul>
          ${products.value()?.map((product: string) => {
            return `<li>${product}</li>`;
          })}
        </ul>
      </n-else>
    </div>`;
});

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

boostrap(root, home);

result

Error

index.ts

import { signal, resource } from 'vistajs/core';
import { Component, html } from 'vistajs/dom';
import { boostrap } from 'vistajs/boot';

const home = Component('app-home', () => {

  const products = resource({
    param: counter,
    loader: async () => {
      return new Promise<string[]>((_, reject) => {
        reject(new Error('Empty product list'));
      });
    },
  });

  return () => html`
    <div>
      <n-if condition=${!!products.error()}>
        <p>${products.error().message}</p>
      </n-if>
      <n-else>
        <ul>
          ${products.value()?.map((product: any) => {
            return `<li>${product}</li>`;
          })}
        </ul>
      </n-else>
    </div>`;
});

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

boostrap(root, home);

result