Astro com htmx: renderização do lado do servidor facilitada

$ npx astro add node

Serviços

Vamos começar a criar nosso código personalizado na camada de serviço. A camada de serviço nos dá um local central para colocar todo o nosso middleware que pode ser reutilizado em todo o aplicativo. Em um aplicativo real, a camada de serviço interagia com um armazenamento de dados por meio de uma camada de dados, mas para a nossa exploração, podemos apenas nós dados na memória.

A convenção em Astro parece ser usar um /lib diretório para esses tipos de coisas. Todo o código para Astro vai no /src diretório, então teremos nosso código de serviço em src/lib/todo.js:

src/lib/todo.js:

// src/lib/todo.js
let todosData = (
    { id: 1, text: "Learn Kung Fu", completed: false },
    { id: 2, text: "Watch Westminster", completed: true },
    { id: 3, text: "Study Vedanta", completed: false },
);

export async function getTodos() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(todosData);
        }, 100); // Simulate a slight delay for fetching
    });
}

export async function deleteTodo(id) {
    return new Promise((resolve) => {
        setTimeout(() => {
            todosData = todosData.filter(todo => todo.id !== id);            resolve(true); 
        }, 100);
    });
}
export async function addTodo(text) { 
  return new Promise((resolve) => {
    setTimeout(() => {
      const newTodo = { id: todosData.length+1, text, completed: false };             todosData.push(newTodo);               
 resolve(newTodo); 
    }, 100);
  });
}

Uma coisa a perceber em geral é que todas as nossas funções retornam promessas. Isso é algo que o Astro suporta fora da caixa e é excelente para esses métodos de serviço quando eles precisam conversar com um armazenamento de dados, para evitar bloquear essas chamadas de rede. No nosso caso, simulamos um atraso na rede com um tempo limite.