How to run a fetch inside a Vite Plugin

Question

Am creating a vite plugin which will enable me to generate a sitemap for my website but am not finding how to make a fetch request using one of their many hooks. Am using simplecrawler module to run the fetch inside the plugin but it doesn't seem to work.

import type { Plugin, ResolvedConfig } from "vite";
import crawler from "simplecrawler";

const crawl = async (port:number): Promise<string[]> => {
    return new Promise((resolve)=> {
        const links: Set<string> = new Set();
        const Crawler = new crawler(`http://localhost:${port}`);
        Crawler.on("fetchcomplete", (queueItem, _responseBody, response) => {
            if (response.headers["content-type"] === "text/html") {
                links.add(queueItem.url);
            }
        });

        Crawler.on("complete", () => {
            const paths = [...links].map((link) => {
                return new URL(link).pathname;
            });
            resolve(paths);
        });

        Crawler.start()
    });
};

const plugin = ():Plugin =>{
    const moduleId = `virtual:sitemap`;
    const resolvedModuleId = `\0${moduleId}`;
    let config: ResolvedConfig;
    
    return {
        name: "vite-plugin-svelte-sitemap",
        resolveId: id => {
            if (id === moduleId){
                return resolvedModuleId
            }
            return id
        },
        configResolved: resolvedConfig => {
            config = resolvedConfig;
            
        },
        buildStart: ()=>{
            return async ()=>{
                let port = config.server.port !== undefined ? config.server.port : (config.mode === "development" ? 5173 : 4173);
                let urls = await crawl(port);
                console.log(urls);
            }
        }


    }
}

export default plugin;

So far, this is what I have been able to come up with

How to run a fetch inside a Vite Plugin

0 Answers0