Uso Vanilla JavaScript para definir varios componentes en carpetas separadas. Por ejemplo, la definición del componente acordeón se puede encontrar en accordion/accordion.js y está estructurada de la siguiente manera:
import toggleCollapsible from "../../helpers/toggle-collapsible"; const SELECTOR_ACCORDION = ".accordion"; const SELECTOR_SLAT = ".accordion-slat"; function Accordion(accordion) { ... } Array.from(document.querySelectorAll(SELECTOR_ACCORDION)).forEach((accordion) => Accordion(accordion)); export default Accordion; También hay un archivo index.js que se usa solo para hacer que el componente esté disponible en otro lugar a través export * from "./accordion";
Omitir export default Accordion; parte en accordion.js parece funcionar bien. Entonces, ¿hay alguna razón por la que no deba dejarlo y simplemente usar export * from "./accordion"; en el archivo de índice?
Si no export nada del módulo, export * from ... tampoco exportará nada.
Sin embargo, solo importar ese módulo tiene el efecto secundario de activar la matriz para los elementos en la página, lo que se siente sucio (y, de hecho, podría no funcionar si el script está en <head> , por ejemplo...).
Envolvería las cosas de Array.from() en una función que se exporta:
export function activateAccordions() { Array.from(...); } y luego importe y llame eso en su index .
import {activateAccordions} from "./accordion"; activateAccordions(); // TODO: might need to call this only after the page is loadedEntonces, si además necesita poder acordeonar algo arbitrario,
export function Accordion()e importarlo también...