Proposal: in Lit fetch data use case move function to another file

To ease comparison in this use case, e.g. between Svelte 5 and Lit, one could move the Lit fetching responsibility to another file, in the same way as Svelte example does. So current Lit component:

<<omitted>>
  fetchUsers = new Task(this, {
    task: async () => {
      const response = await fetch("https://randomuser.me/api/?results=3");
      if (!response.ok) {
        throw new Error(response.status);
      }
      return response.json();
    },
    args: () => [],
  });
<<omitted>>

would become something like:

import { createFetchUsersTask } from "./fetch-users.js";
<<omitted>>
  fetchUsers = createFetchUsersTask(this);
<<omitted>>

and a new fetch-users.js file like the following would be added:

import { Task } from "@lit/task";

export function createFetchUsersTask(element) {
  return new Task(element, {
    task: async () => {
      const response = await fetch("https://randomuser.me/api/?results=3");
      if (!response.ok) {
        throw new Error(response.status);
      }
      return response.json();
    },
    args: () => [],
  });
}

Sorry for any error, this has been written without any IDE support.

In this way, one could more easily compare both the component invoking the fetch functionality, as well as the utility implementing that functionality, given that both of them differ.

matschik / component-party.dev

Proposal: in Lit fetch data use case move function to another file #277