Split client and server modules loading from maint.ts

[userquin]

To avoid window is undefined errors, it would be useful if we split modules into 3 ways to import them from main.ts module:

• modules/*.ts: client and server side modules
• modules/client/*.ts: only for modules running on client side
• modules/server/*.ts: only for modules running on server side

Maybe we can do something similar to nuxt (and so, we don't need to add client and server directories), for example *-client.ts for client modules, *-server.ts for server side modules, and all not ending with -client.ts or -server.ts will run on client and server side.

With this new approach, then the user just forget the isClient avoiding dynamic imports.

[userquin]

/cc @antfu maybe will be better to move it to issues as enhancement?

[antfu]

Not sure about this. I think the SSG in Vitesse is more like an SEO optimization for static content (e.g. a blog), but for things beyond that you should either

• Trap client-only code with typeof window === 'undefined'
• Remove SSG to go full SPA
• Use Nuxt instead for real server logics
• Or ofc, implement the conventions your own

As as a conclusion, my point is this is not likely to be a common use case to be include in this template - even if we do, we could not provide full functionality like Nuxt.

[userquin]

I mean something like this:

// main.ts
export const createApp = ViteSSG(
  App,
  { routes },
  (ctx) => {
    // install all modules under `modules/`
    const isClient = { cxt }
    if (isClient)
      Object.values(import.meta.globEager('./modules/*!(-server).ts').map(i => i.install?.(ctx))
    else
      Object.values(import.meta.globEager('./modules/*!(-client).ts').map(i => i.install?.(ctx))
  },
)

[userquin]

This should work in any case (if the glob patterns are ok, the negated ones): just update also the modules/README.md and done.

[userquin]

will not work