feat: add SSR prompt in configure hook

bin/test.ts

@@ -1,7 +1,9 @@
 import { assert } from '@japa/assert'
-import { processCLIArgs, configure, run } from '@japa/runner'
+import { snapshot } from '@japa/snapshot'
 import { fileSystem } from '@japa/file-system'
 import { expectTypeOf } from '@japa/expect-type'
+import { processCLIArgs, configure, run } from '@japa/runner'
+
 import { BASE_URL } from '../tests_helpers/index.js'
 
 /*
@@ -20,7 +22,7 @@ import { BASE_URL } from '../tests_helpers/index.js'
 processCLIArgs(process.argv.slice(2))
 configure({
   files: ['tests/**/*.spec.ts'],
-  plugins: [assert(), fileSystem({ basePath: BASE_URL }), expectTypeOf()],
+  plugins: [assert(), fileSystem({ basePath: BASE_URL }), expectTypeOf(), snapshot()],
 })
 
 /*

configure.ts

@@ -22,8 +22,10 @@ const ADAPTERS_INFO: {
     ssrDependencies?: { name: string; isDevDependency: boolean }[]
     viteRegister: {
       pluginCall: Parameters<Codemods['registerVitePlugin']>[0]
+      ssrPluginCall?: Parameters<Codemods['registerVitePlugin']>[0]
       importDeclarations: Parameters<Codemods['registerVitePlugin']>[1]
     }
+    ssrEntrypoint?: string
   }
 } = {
   'Vue 3': {
@@ -35,10 +37,12 @@ const ADAPTERS_INFO: {
       { name: 'vue', isDevDependency: false },
       { name: '@vitejs/plugin-vue', isDevDependency: true },
     ],
+    ssrDependencies: [{ name: '@vue/server-renderer', isDevDependency: false }],
     viteRegister: {
       pluginCall: 'vue()',
       importDeclarations: [{ isNamed: false, module: '@vitejs/plugin-vue', identifier: 'vue' }],
     },
+    ssrEntrypoint: 'resources/ssr.ts',
   },
   'React': {
     stubFolder: 'react',
@@ -56,6 +60,7 @@ const ADAPTERS_INFO: {
       pluginCall: 'react()',
       importDeclarations: [{ isNamed: false, module: '@vitejs/plugin-react', identifier: 'react' }],
     },
+    ssrEntrypoint: 'resources/ssr.tsx',
   },
   'Svelte': {
     stubFolder: 'svelte',
@@ -72,6 +77,7 @@ const ADAPTERS_INFO: {
         { isNamed: false, module: '@sveltejs/vite-plugin-svelte', identifier: 'svelte' },
       ],
     },
+    ssrEntrypoint: 'resources/ssr.ts',
   },
   'Solid': {
     stubFolder: 'solid',
@@ -85,8 +91,10 @@ const ADAPTERS_INFO: {
     ],
     viteRegister: {
       pluginCall: 'solid()',
+      ssrPluginCall: 'solid({ ssr: true })',
       importDeclarations: [{ isNamed: false, module: 'vite-plugin-solid', identifier: 'solid' }],
     },
+    ssrEntrypoint: 'resources/ssr.tsx',
   },
 }
 
@@ -128,14 +136,18 @@ async function defineExampleRoute(command: Configure, codemods: Codemods) {
  */
 export async function configure(command: Configure) {
   /**
-   * Prompt for adapter
+   * Prompts for adapter and SSR
    */
   const adapter = await command.prompt.choice(
     'Select the Inertia adapter you want to use',
     ADAPTERS,
     { name: 'adapter' }
   )
 
+  const ssr = await command.prompt.confirm('Do you want to use server-side rendering?', {
+    name: 'ssr',
+  })
+
   const adapterInfo = ADAPTERS_INFO[adapter]
   const codemods = await command.createCodemods()
 
@@ -160,18 +172,35 @@ export async function configure(command: Configure) {
   const stubFolder = adapterInfo.stubFolder
   const compExt = adapterInfo.componentsExtension
 
-  await codemods.makeUsingStub(stubsRoot, 'config.stub', {})
+  await codemods.makeUsingStub(stubsRoot, 'config.stub', {
+    ssr,
+    ssrEntrypoint: adapterInfo.ssrEntrypoint,
+  })
   await codemods.makeUsingStub(stubsRoot, `app.css.stub`, {})
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/root.edge.stub`, {})
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/tsconfig.json.stub`, {})
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/app.${appExt}.stub`, {})
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/home.${compExt}.stub`, {})
 
+  if (ssr) {
+    await codemods.makeUsingStub(stubsRoot, `${stubFolder}/ssr.${appExt}.stub`, {})
+  }
+
   /**
    * Update vite config
    */
+  const inertiaPluginCall = ssr
+    ? `inertia({ ssr: { enabled: true, entrypoint: 'resources/ssr.${appExt}' } })`
+    : `inertia({ ssr: { enabled: false } })`
+
+  await codemods.registerVitePlugin(inertiaPluginCall, [
+    { isNamed: false, module: '@adonisjs/inertia/client', identifier: 'inertia' },
+  ])
+
   await codemods.registerVitePlugin(
-    adapterInfo.viteRegister.pluginCall,
+    ssr && adapterInfo.viteRegister.ssrPluginCall
+      ? adapterInfo.viteRegister.ssrPluginCall
+      : adapterInfo.viteRegister.pluginCall,
     adapterInfo.viteRegister.importDeclarations
   )
 
@@ -184,6 +213,9 @@ export async function configure(command: Configure) {
    * Install packages
    */
   const pkgToInstall = adapterInfo.dependencies
+  if (ssr && adapterInfo.ssrDependencies) {
+    pkgToInstall.push(...adapterInfo.ssrDependencies)
+  }
   const shouldInstallPackages = await command.prompt.confirm(
     `Do you want to install dependencies ${pkgToInstall.map((pkg) => pkg.name).join(', ')}?`,
     { name: 'install' }
@@ -195,5 +227,14 @@ export async function configure(command: Configure) {
     await codemods.listPackagesToInstall(pkgToInstall)
   }
 
-  command.logger.success('Inertia configured')
+  const colors = command.colors
+  command.ui
+    .instructions()
+    .heading('Inertia was successfully configured !')
+    .add('')
+    .add(`We have added a dummy ${colors.cyan('/inertia')} route in your project.`)
+    .add(`Try visiting it in your browser after starting your server to see Inertia in action`)
+    .add('')
+    .add('Happy coding !')
+    .render()
 }

index.ts

@@ -9,3 +9,4 @@
 
 export { configure } from './configure.js'
 export { defineConfig } from './src/define_config.js'
+export { stubsRoot } from './stubs/main.js'

package.json

@@ -51,6 +51,7 @@
     "@japa/file-system": "^2.2.0",
     "@japa/plugin-adonisjs": "^2.0.3",
     "@japa/runner": "3.1.1",
+    "@japa/snapshot": "^2.0.4",
     "@swc/core": "^1.4.2",
     "@types/node": "^20.11.20",
     "@types/qs": "^6.9.11",

src/helpers.ts

@@ -4,7 +4,7 @@
  * @example
  *    return resolvePageComponent(
  *      `./pages/${name}.vue`,
- *       import.meta.glob<DefineComponent>("./pages/**\/*.vue"
+ *       import.meta.glob<DefineComponent>("./pages/**\/*.vue")
  *    )
  */
 export async function resolvePageComponent<T>(

stubs/config.stub

@@ -15,4 +15,12 @@ export default defineConfig({
   sharedData: {
     errors: (ctx) => ctx.session.flashMessages.get('errors'),
   },
+
+  /**
+   * Options for the server-side rendering
+   */
+  ssr: {
+    enabled: {{ ssr }},
+    entrypoint: '{{ ssrEntrypoint }}'
+  }
 })

stubs/react/ssr.tsx.stub

@@ -0,0 +1,17 @@
+{{{
+  exports({ to: app.makePath('resources/ssr.tsx') })
+}}}
+import ReactDOMServer from 'react-dom/server'
+import { createInertiaApp } from '@inertiajs/react'
+
+export default function render(page: any) {
+  return createInertiaApp({
+    page,
+    render: ReactDOMServer.renderToString,
+    resolve: (name) => {
+      const pages = import.meta.glob('./pages/**/*.tsx', { eager: true })
+      {{ 'return pages[`./pages/${name}.tsx`]' }}
+    },
+    setup: ({ App, props }) => <App {...props} />,
+  })
+}

stubs/solid/ssr.tsx.stub

@@ -0,0 +1,19 @@
+{{{
+  exports({ to: app.makePath('resources/ssr.tsx') })
+}}}
+
+import { hydrate } from 'solid-js/web'
+import { createInertiaApp } from 'inertia-adapter-solid'
+
+export default function render(page: any) {
+  return createInertiaApp({
+    page,
+    resolve: (name) => {
+      const pages = import.meta.glob('./pages/**/*.tsx', { eager: true })
+      {{ 'return pages[`./pages/${name}.tsx`]' }}
+    },
+    setup({ el, App, props }) {
+      hydrate(() => <App {...props} />, el)
+    },
+  })
+}

stubs/vue/ssr.ts.stub

@@ -0,0 +1,22 @@
+{{{
+  exports({ to: app.makePath('resources/ssr.ts') })
+}}}
+
+import { createInertiaApp } from '@inertiajs/vue3'
+import { renderToString } from '@vue/server-renderer'
+import { createSSRApp, h, type DefineComponent } from 'vue'
+
+export default function render(page: any) {
+  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) }).use(plugin)
+    },
+  })
+}