Loader

By default, frugal only outputs text files containing html markup. But a website is made form other static assets, like style from a .css file, a script from a .js file, some images or other files.

Frugal delegates to loaders the responsibility of generating those assets.

Each loader defines a regexp pattern, and frugal will provide all imported modules matching this pattern to the loader.

For example, with the given frugal.config.ts :

import { Config, page } from 'https://deno.land/x/frugal/packages/core/mod.ts';
import { StyleLoader } from 'https://deno.land/x/frugal/packages/loader_style/mod.ts';

import * as myPage from './pages/myPage.ts';

const self = new URL(import.meta.url);

export const config: Config = {
    self,
    outputDir: './dist',
    pages: [
        page(myPage),
    ],
    loader: [
        new StyleLoader({
            test: (url) => /\.style\.ts$/.test(url.toString()),
        }),
    ],
};

frugal will find in frugal.config.ts or in any of its dependencies any static imports of modules ending with .style.ts, and provide them to the style loader.

Then the loader, according to its own logic, will generate some static assets from those modules.

Each loader will give you access to some result object you can access via the loaderContext object, in the getContent function :

function getContent({ loaderContext }) {
    const styleUrl = loaderContext.get('style');

    //...
}