refactor: move stubs to inertia/ directory (#6)

* refactor: move stubs to `inertia` directory * chore: move inertia middleware to server stack * feat: add not_found and server_error components * fix: entrypoint vue * refactor: move to inertia_layout.edge * test: fix failing test
adonisjs · Mar 8, 2024 · 250958b · 250958b
1 parent 7638372
commit 250958b
Show file tree

Hide file tree

Showing 37 changed files with 243 additions and 175 deletions.
diff --git a/configure.ts b/configure.ts
@@ -43,7 +43,7 @@ const ADAPTERS_INFO: {
       pluginCall: 'vue()',
       importDeclarations: [{ isNamed: false, module: '@vitejs/plugin-vue', identifier: 'vue' }],
     },
-    ssrEntrypoint: 'resources/ssr.ts',
+    ssrEntrypoint: 'inertia/app/ssr.ts',
   },
   react: {
     stubFolder: 'react',
@@ -61,7 +61,7 @@ const ADAPTERS_INFO: {
       pluginCall: 'react()',
       importDeclarations: [{ isNamed: false, module: '@vitejs/plugin-react', identifier: 'react' }],
     },
-    ssrEntrypoint: 'resources/ssr.tsx',
+    ssrEntrypoint: 'inertia/app/ssr.tsx',
   },
   svelte: {
     stubFolder: 'svelte',
@@ -79,7 +79,7 @@ const ADAPTERS_INFO: {
         { isNamed: true, module: '@sveltejs/vite-plugin-svelte', identifier: 'svelte' },
       ],
     },
-    ssrEntrypoint: 'resources/ssr.ts',
+    ssrEntrypoint: 'inertia/app/ssr.ts',
   },
   solid: {
     stubFolder: 'solid',
@@ -96,7 +96,7 @@ const ADAPTERS_INFO: {
       ssrPluginCall: 'solid({ ssr: true })',
       importDeclarations: [{ isNamed: false, module: 'vite-plugin-solid', identifier: 'solid' }],
     },
-    ssrEntrypoint: 'resources/ssr.tsx',
+    ssrEntrypoint: 'inertia/app/ssr.tsx',
   },
 }
 
@@ -185,7 +185,7 @@ export async function configure(command: Configure) {
   /**
    * Add Inertia middleware
    */
-  await codemods.registerMiddleware('router', [
+  await codemods.registerMiddleware('server', [
     { path: '@adonisjs/inertia/inertia_middleware', position: 'after' },
   ])
 
@@ -205,6 +205,8 @@ export async function configure(command: Configure) {
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/tsconfig.json.stub`, {})
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/app.${appExt}.stub`, { ssr })
   await codemods.makeUsingStub(stubsRoot, `${stubFolder}/home.${compExt}.stub`, {})
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/errors/not_found.${compExt}.stub`, {})
+  await codemods.makeUsingStub(stubsRoot, `${stubFolder}/errors/server_error.${compExt}.stub`, {})
 
   if (ssr) {
     await codemods.makeUsingStub(stubsRoot, `${stubFolder}/ssr.${appExt}.stub`, {})
@@ -214,7 +216,7 @@ export async function configure(command: Configure) {
    * Register the inertia plugin in vite config
    */
   const inertiaPluginCall = ssr
-    ? `inertia({ ssr: { enabled: true, entrypoint: 'resources/ssr.${appExt}' } })`
+    ? `inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.${appExt}' } })`
     : `inertia({ ssr: { enabled: false } })`
 
   await codemods.registerVitePlugin(inertiaPluginCall, [
@@ -234,7 +236,7 @@ export async function configure(command: Configure) {
   /**
    * Register vite with adonisjs plugin
    */
-  const adonisjsPluginCall = `adonisjs({ entrypoints: ['resources/app.${appExt}'], reload: ['resources/views/**/*.edge'] })`
+  const adonisjsPluginCall = `adonisjs({ entrypoints: ['inertia/app/app.${appExt}'], reload: ['resources/views/**/*.edge'] })`
   await codemods.registerVitePlugin(adonisjsPluginCall, [
     { isNamed: false, module: '@adonisjs/vite/client', identifier: 'adonisjs' },
   ])

diff --git a/src/define_config.ts b/src/define_config.ts
@@ -26,14 +26,16 @@ export function defineConfig(config: InertiaConfig): ConfigProvider<ResolvedConf
 
     return {
       versionCache,
-      rootView: config.rootView ?? 'root',
+      rootView: config.rootView ?? 'inertia_layout',
       sharedData: config.sharedData || {},
-      entrypoint: slash(config.entrypoint ?? (await detector.detectEntrypoint('resources/app.ts'))),
+      entrypoint: slash(
+        config.entrypoint ?? (await detector.detectEntrypoint('inertia/app/app.ts'))
+      ),
       ssr: {
         enabled: config.ssr?.enabled ?? false,
         pages: config.ssr?.pages,
         entrypoint:
-          config.ssr?.entrypoint ?? (await detector.detectSsrEntrypoint('resources/ssr.ts')),
+          config.ssr?.entrypoint ?? (await detector.detectSsrEntrypoint('inertia/app/ssr.ts')),
 
         bundle: config.ssr?.bundle ?? (await detector.detectSsrBundle('ssr/ssr.js')),
       },

diff --git a/src/files_detector.ts b/src/files_detector.ts
@@ -19,14 +19,13 @@ export class FilesDetector {
    */
   async detectEntrypoint(defaultPath: string) {
     const possiblesLocations = [
+      './inertia/app/app.ts',
+      './inertia/app/app.tsx',
       './resources/app.ts',
       './resources/app.tsx',
-      './resources/application/app.ts',
-      './resources/application/app.tsx',
       './resources/app.jsx',
       './resources/app.js',
-      './resources/application/app.jsx',
-      './resources/application/app.js',
+      './inertia/app/app.jsx',
     ]
 
     const path = await locatePath(possiblesLocations, { cwd: this.app.appRoot })
@@ -39,14 +38,13 @@ export class FilesDetector {
    */
   async detectSsrEntrypoint(defaultPath: string) {
     const possiblesLocations = [
+      './inertia/app/ssr.ts',
+      './inertia/app/ssr.tsx',
       './resources/ssr.ts',
       './resources/ssr.tsx',
-      './resources/application/ssr.ts',
-      './resources/application/ssr.tsx',
       './resources/ssr.jsx',
       './resources/ssr.js',
-      './resources/application/ssr.jsx',
-      './resources/application/ssr.js',
+      './inertia/app/ssr.jsx',
     ]
 
     const path = await locatePath(possiblesLocations, { cwd: this.app.appRoot })

diff --git a/src/types.ts b/src/types.ts
@@ -32,7 +32,7 @@ export type AssetsVersion = string | number | undefined
 export interface InertiaConfig {
   /**
    * Path to the Edge view that will be used as the root view for Inertia responses.
-   * @default root (resources/views/root.edge)
+   * @default root (resources/views/inertia_layout.edge)
    */
   rootView?: string
 

diff --git a/stubs/app.css.stub b/stubs/app.css.stub
@@ -1,5 +1,5 @@
 {{{
-  exports({ to: app.makePath('resources/css/app.css') })
+  exports({ to: app.makePath('inertia/css/app.css') })
 }}}
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
 

diff --git a/stubs/config.stub b/stubs/config.stub
@@ -7,13 +7,13 @@ export default defineConfig({
   /**
    * Path to the Edge view that will be used as the root view for Inertia responses
    */
-  rootView: 'root',
+  rootView: 'inertia_layout',
 
   /**
    * Data that should be shared with all rendered pages
    */
   sharedData: {
-    errors: (ctx) => ctx.session.flashMessages.get('errors'),
+    errors: (ctx) => ctx.session?.flashMessages.get('errors'),
   },
 
   /**

diff --git a/stubs/react/app.tsx.stub b/stubs/react/app.tsx.stub
@@ -1,7 +1,7 @@
 {{{
-  exports({ to: app.makePath('resources/app.tsx') })
+  exports({ to: app.makePath('inertia/app/app.tsx') })
 }}}
-import './css/app.css';
+import '../css/app.css';
 
 {{#if ssr}}
 import { hydrateRoot } from 'react-dom/client'
@@ -20,8 +20,8 @@ createInertiaApp({
 
   resolve: (name) => {
     return resolvePageComponent(
-      {{ '`./pages/${name}.tsx`' }},
-      import.meta.glob('./pages/**/*.tsx'),
+      {{ '`../pages/${name}.tsx`' }},
+      import.meta.glob('../pages/**/*.tsx'),
     )
   },
 

diff --git a/stubs/react/errors/not_found.tsx.stub b/stubs/react/errors/not_found.tsx.stub
@@ -0,0 +1,14 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/errors/not_found.tsx') })
+}}}
+export default function NotFound() {
+  return (
+    <>
+      <div className="container">
+        <div className="title">Page not found</div>
+
+        <span>This page does not exist.</span>
+      </div>
+    </>
+  )
+}
diff --git a/stubs/react/errors/server_error.tsx.stub b/stubs/react/errors/server_error.tsx.stub
@@ -0,0 +1,14 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/errors/server_error.tsx') })
+}}}
+export default function ServerError(props: { error: any }) {
+  return (
+    <>
+      <div className="container">
+        <div className="title">Server Error</div>
+
+        <span>{props.error.message}</span>
+      </div>
+    </>
+  )
+}
diff --git a/stubs/react/home.tsx.stub b/stubs/react/home.tsx.stub
@@ -1,5 +1,5 @@
 {{{
-  exports({ to: app.makePath('resources/pages/home.tsx') })
+  exports({ to: app.makePath('inertia/pages/home.tsx') })
 }}}
 import { Head } from '@inertiajs/react'
 

diff --git a/stubs/react/root.edge.stub b/stubs/react/root.edge.stub
@@ -1,5 +1,5 @@
 {{{
-  exports({ to: app.makePath('resources/views/root.edge') })
+  exports({ to: app.makePath('resources/views/inertia_layout.edge') })
 }}}
 <!DOCTYPE html>
 <html>
@@ -12,7 +12,7 @@
 
   @viteReactRefresh()
   @inertiaHead()
-  {{ "@vite(['resources/app.tsx', `resources/pages/${page.component}.tsx`])" }}
+  {{ "@vite(['inertia/app/app.tsx', `inertia/pages/${page.component}.tsx`])" }}
 </head>
 
 <body>

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

diff --git a/stubs/react/tsconfig.json.stub b/stubs/react/tsconfig.json.stub
@@ -1,25 +1,15 @@
 {{{
-  exports({ to: app.makePath('resources/tsconfig.json') })
+  exports({ to: app.makePath('inertia/tsconfig.json') })
 }}}
 {
+  "extends": "@adonisjs/tsconfig/tsconfig.client.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "react-jsx",
-    "lib": ["DOM", "ESNext", "DOM.Iterable", "ES2020"],
-    "useDefineForClassFields": true,
     "baseUrl": ".",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
     "paths": {
-      "@/*": ["./*"],
       "~/*": ["../*"],
     },
-    "resolveJsonModule": true,
-    "types": ["vite/client"],
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "verbatimModuleSyntax": true,
-    "skipLibCheck": true,
   },
   "include": ["./**/*.ts", "./**/*.tsx"],
 }
diff --git a/stubs/solid/app.tsx.stub b/stubs/solid/app.tsx.stub
@@ -1,7 +1,7 @@
 {{{
-  exports({ to: app.makePath('resources/app.tsx') })
+  exports({ to: app.makePath('inertia/app/app.tsx') })
 }}}
-import './css/app.css'
+import '../css/app.css'
 
 {{#if ssr}}
 import { hydrate } from 'solid-js/web';
@@ -20,8 +20,8 @@ createInertiaApp({
 
   resolve: (name) => {
     return resolvePageComponent(
-      {{ '`./pages/${name}.tsx`' }},
-      import.meta.glob('./pages/**/*.tsx'),
+      {{ '`../pages/${name}.tsx`' }},
+      import.meta.glob('../pages/**/*.tsx'),
     )
   },
 

diff --git a/stubs/solid/errors/not_found.tsx.stub b/stubs/solid/errors/not_found.tsx.stub
@@ -0,0 +1,14 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/errors/not_found.tsx') })
+}}}
+export default function NotFound() {
+  return (
+    <>
+      <div class="container">
+        <div class="title">Page not found</div>
+
+        <span>This page does not exist.</span>
+      </div>
+    </>
+  )
+}
diff --git a/stubs/solid/errors/server_error.tsx.stub b/stubs/solid/errors/server_error.tsx.stub
@@ -0,0 +1,14 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/errors/server_error.tsx') })
+}}}
+export default function ServerError(props: { error: any }) {
+  return (
+    <>
+      <div class="container">
+        <div class="title">Server Error</div>
+
+        <span>{props.error.message}</span>
+      </div>
+    </>
+  )
+}
diff --git a/stubs/solid/home.tsx.stub b/stubs/solid/home.tsx.stub
@@ -1,13 +1,10 @@
 {{{
-  exports({ to: app.makePath('resources/pages/home.tsx') })
+  exports({ to: app.makePath('inertia/pages/home.tsx') })
 }}}
-import { Title } from '@solidjs/meta'
 
 export default function Home(props: { version: number }) {
   return (
     <>
-      <Title>Homepage</Title>
-
       <div class="container">
         <div class="title">AdonisJS {props.version} x Inertia x Solid.js</div>
 

diff --git a/stubs/solid/root.edge.stub b/stubs/solid/root.edge.stub
@@ -1,5 +1,5 @@
 {{{
-  exports({ to: app.makePath('resources/views/root.edge') })
+  exports({ to: app.makePath('resources/views/inertia_layout.edge') })
 }}}
 <!DOCTYPE html>
 <html>
@@ -11,7 +11,7 @@
   <title inertia>AdonisJS x Inertia x SolidJS</title>
 
   @inertiaHead()
-  {{ "@vite(['resources/app.tsx', `resources/pages/${page.component}.tsx`])" }}
+  {{ "@vite(['inertia/app/app.tsx', `inertia/pages/${page.component}.tsx`])" }}
 </head>
 
 <body>

diff --git a/stubs/solid/ssr.tsx.stub b/stubs/solid/ssr.tsx.stub
@@ -1,5 +1,5 @@
 {{{
-  exports({ to: app.makePath('resources/ssr.tsx') })
+  exports({ to: app.makePath('inertia/app/ssr.tsx') })
 }}}
 
 import { hydrate } from 'solid-js/web'
@@ -9,8 +9,8 @@ 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`]' }}
+      const pages = import.meta.glob('../pages/**/*.tsx', { eager: true })
+      {{ 'return pages[`../pages/${name}.tsx`]' }}
     },
     setup({ el, App, props }) {
       hydrate(() => <App {...props} />, el)