Para utilizar funciones js desde otro archivo, es necesario implementar unos pequeños conceptos como funciones asincronas que tiene como finalidad esperar a que me traiga la información y luego continúa. Personalmente para realizar esos procesos utilizaría en un archivo como controller.js
const setBugs = () => {
// pasamos al localStorage en formato json el dato
//también puedes recibir como parámetro la data que quieres guardar
localStorage.bugs = JSON.stringify([
{ id: '1', name: 'bug1' },
{ id: '2', name: 'bug2' },
{ id: '3', name: 'bug3' },
])
}
const getBugs = async () => {
//capturamos lo que hay en el localStorage
let data = await localStorage.bugs;
//volvemos a llenar data correctamente
//si existe algún valor en data entonces devuelve data en json de lo contrario devuelve array vacio
data = await data ? JSON.parse(data) : [];
return data;
}
module.exports = {
setBugs,
getBugs
};
Y llamaría el archivo importándolo, destructurando los métodos y variables que me devuelve y claramente usandolas.
// Éste va a ser el archivo de donde vas a llamar a ese otro que hace como controlador
// importamos el archivo y destructuramos las variables que se exportan
import {
setBugs,
getBugs
} from "./controller.js";
//por último usas la constante
const setData = () => setBugs();
const getData = async () => {
let bugs = await getBugs();
console.log(bugs);
}
const executeFunctions = async () => {
await setData();
getData();
}
executeFunctions();
De esa manera se usan, sin embargo busca documentación sobre funciones asincronas y como lo mejor está en ingles asynchronous functions. Un gran saludo, quedo atento...
bugsToRender.then(bugs=>...)
El top level await todavía está en la adolescencia. Hasta hace poco la exportación como la estás planteando sólo era viable para el default y no para named exports