Retrigger +onCreateGlobalContext.server.ts, and plugins with added pages

[AgentEnder]

Hey, I have two questions that are semi-related, both for primarily pre-rendered sites.

Plugins with added pages

Combined with the above, a pattern I've been using uses a combination of onCreateGlobalContext, onBeforePrerenderStart, and +data hooks (with an occasional +route function) to render dynamic pages during static site gen. An example is collecting markdown docs and transforming them before rendering, or similarly I collect what I call "functional examples" and place them in the docs. Functional examples are some source code, annotated and attached to content that are then able to be used in docs, e2e tests, etc.

I'm about to open source some of the techniques here, and it'd be neat to have a vike plugin for the functional examples along with the docusaurus plugin I was planning.

Retriggering +onCreateGlobalContext.server.ts

• What exactly causes this to re-trigger during dev? I use it to aggregate data thats consumed by most pages on a few sites, but was curious because I can see it retrigger while working on dev but not always. I figure there's some caching heuristic here, but it may just be based on if I'm editing specific files in the dep graph?

• This comes together with the dynamic content described above, as one place that the global context isn't recreated right now in my dev setup is when adding new docs or examples. These live in folders above the vite.config.ts (and docs-site project as a whole). It'd be really neat if there was some API that plugins could use to trigger a global context invalidation. I'd love some way to set up file watchers for this... but honestly, even just being able to hit a key in the terminal to trigger the recreation would be really nice

[brillout]

Indeed, I didn't thoroughly test HMR back then as I wanted to get +onCreateGlobalContext out the door sooner rather than later. I created a ticket:

• Improve +onCreateGlobalContext HMR #3077

There are a coupe of higher priorities at the moment so not sure when I'll have time to look into this. But contributions welcome to dig into it.

[brillout]

• Programmatically/dynamically define pages #1691 (comment)

Yeah, HMR alone's not necessarily enough for the use case of scanning non-source files though - some way to register them (either with vite or vike) would be needed I believe.

It's quite niche though — maybe it could be a Vite plugin.

[AgentEnder]

I don't disagree - My use cases are likely not super-aligned with the general case, just making them known. Its possible a vite plugin could work, I'll look into that avenue

[AgentEnder]

@brillout I've done some more digging, and I can kind of make this work with a vite plugin... It seems a bti hacky, but it does work.

import path from 'node:path';
import type { Plugin, ViteDevServer } from 'vite';

/**
 * Vite plugin that watches the docs directory and invalidates
 * docs-related data modules when files change.
 *
 * This enables hot reloading when editing documentation during development.
 */
export function watchDocs(): Plugin {
  const docsDir = path.resolve(process.cwd(), '../docs');

  return {
    name: 'watch-docs',
    configureServer(server: ViteDevServer) {
      // Watch the docs directory
      server.watcher.add(docsDir);

      function onDocsChange(filePath: string) {
        // Only react to changes in the docs directory
        if (!filePath.startsWith(docsDir)) {
          return;
        }

        console.log(`[watch-docs] Change detected: ${filePath}`);

        // Emit a fake change event on a + file that Vike is watching.
        // This triggers Vike's handleHotUpdate -> onFileModified -> updateUserFiles()
        // which properly re-runs onCreateGlobalContext.
        const triggerFile = path.join(
          process.cwd(),
          'pages/+onCreateGlobalContext.server.ts'
        );
        server.watcher.emit('change', triggerFile);
      }

      server.watcher.on('add', onDocsChange);
      server.watcher.on('unlink', onDocsChange);
      server.watcher.on('change', onDocsChange);
    },
  };
}

[brillout]

I like it. I wonder if it could be made generic by doing static analysis — Vike could then adopt this Vite plugin. (It could even be adopted by Vite, but it's harder to land changes to Vite.)

Btw, in case you didn't already, we're collecting testimonials — contribution welcome to share 1-2 sentences about why you chose Vike.

[AgentEnder]

Here's the docs site https://craigory.dev/isolated-workers/, and source repo https://github.com/AgentEnder/isolated-workers that use vike for the SSG docs with these patterns if you were curious