plugin that updates defines on buildStart hook with yarn build --watch

[s-light]

my goal is to have a simple BUILD_DATE define that updates on buildStart.
if i do something like this:

const defineBuildDatePlugin = (options) => {
    // const { destination } = options;
    function getCurrentDate() {
        return JSON.stringify(new Date().toISOString());
    }
    return {
        // inspired by https://github.com/qduld/vite-plugin-git-revision/blob/main/src/index.ts
        name: "defineBuildDatePlugin",
        config(config) {
            console.log("config(config) HOOK.");
            // console.log("config", config);
            config.define.BUILD_DATE = getCurrentDate();
        },
        buildStart(buildConfig) {
            console.log("buildStart(buildConfig)");
            // config.define.BUILD_DATE = getCurrentDate();
        },
    };
};

the config hook in yarn build --watch mode gets only triggered on the first start.
so any builds triggered by the actual watch does not get a new BUILD_DATE.

i did not find any info / how to access the config from within the buildStart Hook.
maybe i am missing something obvious ore it is just not possible this way.

i am open for any tips and hints :-)

[SystemParadox]

You can access the define config using this.environment.config.define.

Unfortunately changing it dynamically in buildStart doesn't work because of the generatePattern caching:

vite/packages/vite/src/node/plugins/define.ts

Line 111 in 3123eb7

let pattern = patternsCache.get(environment)

It would be really great if vite could let us change defines dynamically like this. We want a BUILD_TIME env as well.

[SystemParadox]

I've managed to do this by replacing the token manually in the transform hook:

export function buildTimestampPlugin() {
    let now = Date.now();
    return {
        name: 'buildTimestamp',
        buildStart() {
            now = Date.now();
        },
        transform(code: string, id: string) {
            return code.replace(/__CLIENT_BUILD_TIME__/g, now.toString());
        },
    };
}

NOTE: This is just a dumb string transform like vite 4 used to do.

[SystemParadox]

...except that only updates if you change the file that __CLIENT_BUILD_TIME__ appears in, which isn't very helpful.

[SystemParadox]

Ok this works, using shouldTransformCachedModule to bypass the cache:

export function buildTimestampPlugin() {
    const transformedModules = new Set();
    let now = Date.now();
    return {
        name: 'buildTimestamp',
        buildStart() {
            now = Date.now();
        },
        shouldTransformCachedModule({ id }) {
            if (transformedModules.has(id)) {
                return true;
            }
        },
        transform(code: string, id: string) {
            return code.replace(/__BUILD_TIME__/g, () => {
                transformedModules.add(id);
                return now.toString();
            });
        },
    };
}

The other option is to have your plugin provide a virtual module instead that exports the things you want. vite-plugin-virtual may be of interest if you want to go that way.

[s-light]

thanks for your idea!

i just tried your example -
i thougth that his also updates on an HMR reload -
but for me that is not the case as the buildStart() will not be triggered on an simple HMR update. ?!
this was me changing the file the __BUILD_TIME__ magic string was contained in..

what worked with this requirement is:

function getCurrentDate() {
    return JSON.stringify(new Date().toISOString());
}
export function buildTimestampPlugin() {
    const transformedModules = new Set();
    let now = getCurrentDate();
    return {
        name: "buildTimestamp",
        buildStart() {
            now = getCurrentDate();
        },
        handleHotUpdate() {
            now = getCurrentDate();
        },
        shouldTransformCachedModule({ id }) {
            if (transformedModules.has(id)) {
                return true;
            }
        },
        transform(code, id) {
            return code.replace(/__BUILD_TIME__/g, () => {
                transformedModules.add(id);
                return now;
            });
        },
    };
}

for now i did not get a working setup with the vite-plugin-virtual working..