Remove FOUC handling

Changes

FOUC handling in development has been removed from adonisjs/inertia and is now managed by adonisjs/vite directly. Make sure you install the latest version of @adonisjs/vite ( 3.0.0-9) if you want to use this version.

Commits

• fix: move tuyau/utils to prod dependencies 96a1a12
• refactor: remove FOUC handling 0b25202
• fix: documentation link by @Bjornvdb in #12

New Contributors

• @Bjornvdb made their first contribution in #12

Full Changelog: v1.0.0-22...v1.0.0-23

InferPageProps

Changes

• Added a InferPageProps type helper for infering page props from a controller class :

// Your Adonis Controller
class MyController {
 index() {
  return inertia.render('foo', { foo: 1 })
 }
}

// Your React/Vue/Solid component
import type { InferPageProps } from '@adonisjs/inertia/types'
import type { MyController } from '../controllers/my_controller.ts'

export default MyFrontendComponent(props: InferPageProps<MyController, 'index'>) { }

Full Changelog: v1.0.0-20...v1.0.0-22

Minor changes

Changes

• You can now pass a function to the ssr.pages configuration option that will be executed before your page is rendered, to determine whether we should use SSR or not
• Added better typing to the inertia.render method. You can now extract the ReturnType from a controller method that uses inertia.render and reuse it in your page props. we wil talk more about this in the documentation

Commits

• chore: update dependencies 40e408a
• fix: enable ssr everywhere if pages is not defined 0cf4a3f
• feat: make able to infer page props from an inertia.render call 5355839
• feat: accept a function for ssr.pages config 47a3768
• fix(react): path imports config stubs ac3a534

New Contributors

• @tom-brulin made their first contribution in #10

Full Changelog: v1.0.0-19...v1.0.0-20

v1.0.0-19

Changes

File structure

This release mainly concerns the configure hook and the place where the files will be generated.

We move to a new file structure for inertia apps :

• All code related to inertia will now be located in ./inertia folder instead of ./resources/
• We group app initialization files to ./inertia/app folder
• We have now a @adonisjs/tsconfig/tsconfig.client.json from which we extends. it is a more clean
• Use Inertia in exception handler instead of edge
• Automatically add two server_error and not_found component pages
• Use the filename inertia_layout.edge instead of layout.edge

This will not break existing applications, but the new ones will follow this file structure.

Commits

• style: lint files 52d56c3
• fix: set NODE_ENV production only when building ad43b65
• refactor: move stubs to inertia/ directory (#6) 250958b

What's Changed

• refactor: move stubs to inertia/ directory by @Julien-R44 in #6

Full Changelog: v1.0.0-17...v1.0.0-19

Fix Entrypoints stubs for SSR

Commits:

• fix: incorrect stubs for client entrypoint when SSR activated af44700
• chore: remove type from svelte stub 336d21e

Full Changelog: v1.0.0-14...v1.0.0-16

Fix HMR server-side

Commits:

• fix: hmr not working server-side e92d7c9

Full Changelog: v1.0.0-13...v1.0.0-14

Fix FOUC in Dev SSR

If you've had the opportunity to try SSR, you probably have noticed the huge FOUC in Dev when SSR was activated. This release fixes that. Read the PR to check out more about the implementation details

For this to work, you will need to specify the client-side entrypoint of your application. We have automatic detection for conventional locations, but if you've ever placed your entrypoint in another location or with another funky name, then make sure you pass it in your config/inertia.ts file.

// config/inertia.ts
import app from '@adonisjs/core/services/app'

defineConfig({
  entrypoint: app.makePath('resources/my-client-entry-point.ts')
})

What's Changed

• feat: prevent FOUC with SSR in dev by @Julien-R44 in #5

Full Changelog: v1.0.0-12...v1.0.0-13

SSR Page Object

Commits

• chore: update vite version 2de1520
• fix: pass page object to the view when using ssr 42e4bd8

Full Changelog: v1.0.0-10...v1.0.0-12

Improvements

Changes

• Added a renderInertia macro for brisk routes :

   router.on('/').renderInertia('home', { username: 'jul' })

• Add a resolvePageComponent helper to resolving a specific Inertia pages :

   import { resolvePageComponent } from '@adonisjs/inertia/helpers'
   
   createInertiaApp({
     resolve: (name) => {
       return resolvePageComponent(
         `./pages/${name}`.tsx`, 
   	  import.meta.glob('./pages/**/*.tsx')
   	)
     },
     // ...
   })

• Configuration hook is now complete. lets you add Inertia to an AdonisJS application, configured with or without SSR. It will also add all the files needed to have one dummy functional Inertia route, with components made with the frontend framework you've selected during the process.

Commits:

• chore: add missing dependency 500bc49
• refactor(configure): use brisk route in route example 22141c6
• feat: added renderInertia brisk route macro 6403f72
• refactor: polish configure instructions 15c1ef9
• chore: update dependencies a797f8a
• feat: add SSR prompt in configure hook 04f45be
• fix(configure): await for route to be defined 6c9705e
• chore: update incorrect include entry in tsconfig stubs eb15bd8
• refactor: register edge bindings in boot method 5bbaefd
• feat: resolvePageComponent helper 1615c2f
• refactor: make inertia vite plugin options optional 857bdb0

Full Changelog: v1.0.0-8...v1.0.0-10

Experimental SSR Support

This version adds experimental support for SSR for Inertia. No breaking changes.

To try it, you'll need to do the following things

Update dependencies

• Update to adonisjs/[email protected]
• Update to adonisjs/[email protected] . Make sure to follow the changelog here
• Update to @adonisjs/[email protected]

Vite and entrypoint configuration

Now, having configured Vite in the correct way as explained, add the inertia plugin to your vite.config.ts :

import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import inertia from '@adonisjs/inertia/client'

export default defineConfig({
  plugins: [
    adonisjs({ ... }),
    // 👇👇
    inertia({
      ssr: {
        enabled: true,
        entrypoint: 'resources/ssr.ts',
      },
    }),
 ]
})

obviously, activate the SSR only if needed. entrypoint should point to your entrypoint server, as explained here

Please note a small difference we have with the Inertia documentation: we don't want to create a server, so we won't need to call createServer. We already have one server : AdonisJS itself. So instead,, your resources/ssr.ts will have to default export a function that renders your app. For Vue, for example, it will looks like this:

import { createInertiaApp } from '@inertiajs/vue3'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h, ref, type DefineComponent } from 'vue'

export default function render(page) {
  return createInertiaApp({
    page,
    render: renderToString,
    resolve: (name) => {
      const pages = import.meta.glob<DefineComponent>('./pages/**/*.vue', { eager: true })
      return pages[`./pages/${name}.vue`]
    },
    setup({ App, props, plugin }) {
		return createSSRApp({ render: () => h(App, props) })
    },
  })
}

For the other frameworks, this will be detailed in the documentation, but it shouldn't be much different.

AdonisJS configuration

A new property has been added to your config/inertia.ts :

import { defineConfig } from '@adonisjs/inertia'

export default defineConfig({
  rootView: 'app_root',
  assetsVersion: 1,
  ssr: {
    enabled: true,  // 👈👈
  },
})

SSR is now activated and should be working for all your pages. If you need more granularity on what should be rendered in SSR or not, you can use the pages property and specify the components that should be server side rendered :

import { defineConfig } from '@adonisjs/inertia'

export default defineConfig({
  rootView: 'app_root',
  assetsVersion: 1,
  ssr: {
    enabled: true,
    pages: ['home'] // 👈👈
  },
})

I insist on the experimental side of this release. It has not been battle-tested. If you encounter any problems, please report them

What's Changed

• feat: SSR ready version by @Julien-R44 in #3

New Contributors

• @Julien-R44 made their first contribution in #3

Full Changelog: v1.0.0-7...v1.0.0-8