refactor: remove FOUC handling

As it now handled directly by adonisjs/vite. See adonisjs/vite#12

src/server_renderer.ts

@@ -8,12 +8,9 @@
  */
 
 import { Vite } from '@adonisjs/vite'
-import type { ModuleNode } from 'vite'
 
 import type { PageObject, ResolvedConfig } from './types.js'
 
-const styleFileRE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\?)/
-
 /**
  * Responsible for rendering page on the server
  *
@@ -27,67 +24,6 @@ export class ServerRenderer {
     protected vite?: Vite
   ) {}
 
-  /**
-   * If the module is a style module
-   */
-  #isStyle(mod: ModuleNode) {
-    if (styleFileRE.test(mod.url) || (mod.id && /\?vue&type=style/.test(mod.id))) {
-      return true
-    }
-    return false
-  }
-
-  /**
-   * Collect CSS files from the module graph recursively
-   */
-  #collectCss(
-    mod: ModuleNode,
-    styleUrls: Set<string>,
-    visitedModules: Set<string>,
-    importer?: ModuleNode
-  ): void {
-    if (!mod.url) return
-
-    /**
-     * Prevent visiting the same module twice
-     */
-    if (visitedModules.has(mod.url)) return
-    visitedModules.add(mod.url)
-
-    if (this.#isStyle(mod) && (!importer || !this.#isStyle(importer))) {
-      if (mod.url.startsWith('/')) {
-        styleUrls.add(mod.url)
-      } else if (mod.url.startsWith('\0')) {
-        // virtual modules are prefixed with \0
-        styleUrls.add(`/@id/__x00__${mod.url.substring(1)}`)
-      } else {
-        styleUrls.add(`/@id/${mod.url}`)
-      }
-    }
-
-    mod.importedModules.forEach((dep) => this.#collectCss(dep, styleUrls, visitedModules, mod))
-  }
-
-  /**
-   * Generate the preload tag for a CSS file
-   */
-  #getPreloadTag(href: string) {
-    return `<link rel="stylesheet" href="${href}" />`
-  }
-
-  /**
-   * Find a page module from the entrypoint module
-   *
-   * The implementation is dumb, we are just looking for the first module
-   * imported by the entrypoint module that matches the regex
-   */
-  #findPageModule(entryMod: ModuleNode | undefined, pageObject: PageObject) {
-    const pattern = `${pageObject.component.replace(/\//g, '\\/')}.(tsx|vue|svelte|jsx|ts|js)$`
-    const regex = new RegExp(pattern)
-
-    return [...(entryMod?.ssrImportedModules || [])].find((dep) => regex.test(dep.url))
-  }
-
   /**
    * Render the page on the server
    *
@@ -96,7 +32,6 @@ export class ServerRenderer {
    */
   async render(pageObject: PageObject) {
     let render: { default: (page: any) => Promise<{ head: string; body: string }> }
-    let preloadTags: string[] = []
     const devServer = this.vite?.getDevServer()
 
     /**
@@ -106,35 +41,6 @@ export class ServerRenderer {
     if (devServer) {
       const runtime = await this.vite!.createRuntime()
       render = await runtime.executeEntrypoint(this.config.ssr.entrypoint!)
-
-      /**
-       * We need to collect the CSS files to preload them
-       * Otherwise, we gonna have a FOUC each time we full reload the page
-       *
-       * First, we need to get the client-side entrypoint module
-       */
-      const entryMod = devServer.moduleGraph.getModuleById(this.config.entrypoint)
-
-      /**
-       * We should also get the page component that will be rendered. So
-       * we analyze the module graph to find the module that matches the
-       * page component
-       *
-       * Then execute it with Vite Runtime so the module graph is populated
-       */
-      const pageMod = this.#findPageModule(entryMod, pageObject)
-      if (pageMod) await runtime.executeUrl(pageMod.url)
-
-      /**
-       * Then we can finally collect the CSS files
-       */
-      const preloadUrls = new Set<string>()
-      const visitedModules = new Set<string>()
-
-      if (pageMod) this.#collectCss(pageMod, preloadUrls, visitedModules)
-      if (entryMod) this.#collectCss(entryMod, preloadUrls, visitedModules)
-
-      preloadTags = Array.from(preloadUrls).map(this.#getPreloadTag)
     } else {
       /**
        * Otherwise, just import the SSR bundle
@@ -146,7 +52,6 @@ export class ServerRenderer {
      * Call the render function and return head and body
      */
     const result = await render.default(pageObject)
-    const head = preloadTags.concat(result.head)
-    return { head, body: result.body }
+    return { head: [result.head], body: result.body }
   }
 }

src/types.ts

@@ -87,7 +87,6 @@ export interface ResolvedConfig {
   rootView: string
   versionCache: VersionCache
   sharedData: SharedData
-  entrypoint: string
   ssr: {
     enabled: boolean
     entrypoint: string

tests/define_config.spec.ts

@@ -9,24 +9,11 @@
 
 import { join } from 'node:path'
 import { test } from '@japa/runner'
-import { slash } from '@poppinss/utils'
 
 import { defineConfig } from '../index.js'
 import { setupApp } from '../tests_helpers/index.js'
 
 test.group('Define Config', () => {
-  test('detect entrypoint automatically - "{$self}"')
-    .with(['inertia/app/app.tsx', 'resources/app.ts', 'resources/app.tsx'])
-    .run(async ({ assert, fs }, filePath) => {
-      const { app } = await setupApp()
-      const configProvider = defineConfig({})
-      await fs.create(filePath, '')
-
-      const result = await configProvider.resolver(app)
-
-      assert.deepEqual(result.entrypoint, slash(join(app.makePath(filePath))))
-    })
-
   test('detect bundle automatically - "{$self}"')
     .with(['ssr/ssr.js', 'ssr/ssr.mjs'])
     .run(async ({ assert, fs }, filePath) => {

tests/inertia.spec.ts

@@ -7,7 +7,6 @@
  * file that was distributed with this source code.
  */
 
-import { join } from 'node:path'
 import { test } from '@japa/runner'
 import { Vite } from '@adonisjs/vite'
 import { HttpContext } from '@adonisjs/core/http'
@@ -388,110 +387,3 @@ test.group('Inertia | Ssr', () => {
     assert.deepEqual(result.props.page.version, '1')
   })
 })
-
-test.group('Inertia | Ssr | CSS Preloading', () => {
-  test('collect and preload css files of entrypoint', async ({ assert, fs }) => {
-    setupViewMacroMock()
-    const vite = await setupVite({ build: { rollupOptions: { input: 'foo.ts' } } })
-
-    await fs.create(
-      'foo.ts',
-      `
-      import './style.css'
-      export default () => ({ head: "head", body: "foo.ts" })
-      `
-    )
-
-    await fs.create('style.css', 'body { color: red }')
-
-    const inertia = await new InertiaFactory()
-      .withVite(vite)
-      .merge({
-        config: {
-          entrypoint: join(fs.basePath, 'foo.ts'),
-          ssr: { enabled: true, entrypoint: 'foo.ts' },
-        },
-      })
-      .create()
-
-    const result: any = await inertia.render('foo')
-
-    assert.deepEqual(result.props.page.ssrHead, [
-      '<link rel="stylesheet" href="/style.css" />',
-      'head',
-    ])
-  })
-
-  test('collect recursively css files of entrypoint', async ({ assert, fs }) => {
-    setupViewMacroMock()
-    const vite = await setupVite({ build: { rollupOptions: { input: 'foo.ts' } } })
-
-    await fs.create(
-      'foo.ts',
-      `
-      import './foo2.ts'
-      import './style.css'
-      export default () => ({ head: "head", body: "foo.ts" })
-      `
-    )
-
-    await fs.create('foo2.ts', `import './style2.css'`)
-    await fs.create('style.css', 'body { color: red }')
-    await fs.create('style2.css', 'body { color: blue }')
-
-    const inertia = await new InertiaFactory()
-      .withVite(vite)
-      .merge({
-        config: {
-          entrypoint: join(fs.basePath, 'foo.ts'),
-          ssr: { enabled: true, entrypoint: 'foo.ts', pages: ['foo'] },
-        },
-      })
-      .create()
-
-    const result: any = await inertia.render('foo')
-
-    assert.deepEqual(result.props.page.ssrHead, [
-      '<link rel="stylesheet" href="/style2.css" />',
-      '<link rel="stylesheet" href="/style.css" />',
-      'head',
-    ])
-  })
-
-  test('collect css rendered page', async ({ assert, fs }) => {
-    setupViewMacroMock()
-    const vite = await setupVite({ build: { rollupOptions: { input: 'foo.ts' } } })
-
-    await fs.create(
-      'app.ts',
-      `
-      import './style.css'
-
-      import.meta.glob('./pages/**/*.tsx')
-      export default () => ({ head: "head", body: "foo.ts" })
-      `
-    )
-    await fs.create('style.css', 'body { color: red }')
-
-    await fs.create('./pages/home/main.tsx', `import './style2.css'`)
-    await fs.create('./pages/home/style2.css', 'body { color: blue }')
-
-    const inertia = await new InertiaFactory()
-      .withVite(vite)
-      .merge({
-        config: {
-          entrypoint: join(fs.basePath, 'app.ts'),
-          ssr: { enabled: true, entrypoint: 'app.ts' },
-        },
-      })
-      .create()
-
-    const result: any = await inertia.render('home/main')
-
-    assert.deepEqual(result.props.page.ssrHead, [
-      '<link rel="stylesheet" href="/pages/home/style2.css" />',
-      '<link rel="stylesheet" href="/style.css" />',
-      'head',
-    ])
-  })
-})

tests/middleware.spec.ts

@@ -24,7 +24,6 @@ test.group('Middleware', () => {
       const middleware = new InertiaMiddleware({
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
@@ -47,7 +46,6 @@ test.group('Middleware', () => {
       const middleware = new InertiaMiddleware({
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
@@ -77,7 +75,6 @@ test.group('Middleware', () => {
       const middleware = new InertiaMiddleware({
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
@@ -107,7 +104,6 @@ test.group('Middleware', () => {
       const middleware = new InertiaMiddleware({
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
@@ -135,7 +131,6 @@ test.group('Middleware', () => {
       const middleware = new InertiaMiddleware({
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
@@ -157,7 +152,6 @@ test.group('Middleware', () => {
     const middleware = new InertiaMiddleware({
       rootView: 'root',
       sharedData: {},
-      entrypoint: 'app.ts',
       versionCache: version,
       ssr: { enabled: false, bundle: '', entrypoint: '' },
     })
@@ -189,7 +183,6 @@ test.group('Middleware', () => {
     const middleware = new InertiaMiddleware({
       rootView: 'root',
       sharedData: {},
-      entrypoint: 'app.ts',
       versionCache: version,
       ssr: { enabled: false, bundle: '', entrypoint: '' },
     })

tests/plugins/api_client.spec.ts

@@ -74,7 +74,6 @@ test.group('Japa plugin | Api Client', (group) => {
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
 
@@ -116,7 +115,6 @@ test.group('Japa plugin | Api Client', (group) => {
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })
 
@@ -151,7 +149,6 @@ test.group('Japa plugin | Api Client', (group) => {
         versionCache: new VersionCache(new URL(import.meta.url), '1'),
         rootView: 'root',
         sharedData: {},
-        entrypoint: 'app.ts',
         ssr: { enabled: false, bundle: '', entrypoint: '' },
       })