Implement development adapter for ViteJS as frontend bundler

This code allows to use ViteJS as an alternative to Esbuild for
developing and bundling Inertia apps on Phoenix framework.
The motivation for this change is to have a great HMR experince on both
client and ssr while maintaing full compatibility with current approach
using Esbuild as JS bundler.

Author: andresgutgon

.gitignore

@@ -1,6 +1,9 @@
 # The directory Mix will write compiled artifacts to.
 /_build/
 
+# nvim ELP plugin output
+.elixir_ls/
+
 # If you run "mix test --cover", coverage assets end up here.
 /cover/
 
@@ -24,3 +27,8 @@ inertia-*.tar
 
 # Temporary files, for example, from tests.
 /tmp/
+
+# ViteJS plugin compiled assets
+/assets/node_modules/
+package.json
+/priv/vitejs

README.md

@@ -55,7 +55,7 @@ config :inertia,
   # conventional in JavaScript. Defaults to `false`.
   camelize_props: false,
 
-  # Instruct the client side whether to encrypt the page object in the window history 
+  # Instruct the client side whether to encrypt the page object in the window history
   # state. This can also be set/overridden on a per-request basis, using the `encrypt_history`
   # controller helper. Defaults to `false`.
   history: [encrypt: false],
@@ -64,6 +64,11 @@ config :inertia,
   # see instructions below). Defaults to `false`.
   ssr: false,
 
+  # By default the server side rendering is done by executing nodejs in an
+  # Elixir process. If you want to use vitejs set the ssr_adapter
+  # to "vitejs". This will use the dev vitejs server to do the SSR and HMR.
+  ssr_adapter: if config_env() == :dev, do: "vitejs", else: nil,
+
   # Whether to raise an exception when server-side rendering fails (only applies
   # when SSR is enabled). Defaults to `true`.
   #
@@ -313,7 +318,7 @@ conn
 
 ## Deferred props
 
-**Requires Inertia v2.x on the client-side**. 
+**Requires Inertia v2.x on the client-side**.
 
 If you have expensive data that you'd like to automatically fetch (from the client-side via an async background request) after the page is initially rendered, you can mark the prop as deferred:
 
@@ -361,7 +366,7 @@ defmodule MyApp.UserAuth do
 
   def authenticate_user(conn, _opts) do
     user = get_user_from_session(conn)
- 
+
     # Here we are storing the user in the conn assigns (so
     # we can use it for things like checking permissions later on),
     # AND we are assigning a serialized represention of the user
@@ -405,7 +410,7 @@ The `assign_errors` function will automatically convert the changeset errors int
 {
   "name" => "can't be blank",
 
-  // Nested errors keys are flattened with a dot separator (`.`) 
+  // Nested errors keys are flattened with a dot separator (`.`)
   "team.name" => "must be at least 3 characters long",
 
   // Nested arrays are zero-based and indexed using bracket notation (`[0]`)
@@ -714,7 +719,7 @@ Then, update your config to enable SSR (if you'd like to enable it globally).
     # assets using the `static_paths` config). Defaults to "1".
     default_version: "1",
 
-    # Enable server-side rendering for page responses (requires some additional setup, 
+    # Enable server-side rendering for page responses (requires some additional setup,
     # see instructions below). Defaults to `false`.
 -   ssr: false
 +   ssr: true

assets/.prettierignore

@@ -0,0 +1,3 @@
+priv/
+deps/
+doc/

assets/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2
+}

assets/js/vitePlugin.ts

@@ -0,0 +1,86 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import { Connect, Plugin } from 'vite'
+
+interface ExtendedRequest extends Connect.IncomingMessage {
+  body?: Record<string, unknown>
+}
+
+const jsonResponse = (res: ServerResponse<IncomingMessage>, statusCode: number, data: unknown) => {
+  res.statusCode = statusCode
+  res.setHeader('Content-Type', 'application/json')
+  res.end(JSON.stringify(data))
+}
+
+const jsonMiddleware = (req: ExtendedRequest, res: ServerResponse<IncomingMessage>, next: () => Promise<void>) => {
+  let data = ''
+  req.on('data', (chunk) => (data += chunk))
+  req.on('end', () => {
+    try {
+      req.body = JSON.parse(data)
+      next()
+    } catch {
+      jsonResponse(res, 400, { error: 'Invalid JSON' })
+    }
+  })
+  req.on('error', () => {
+    jsonResponse(res, 500, { error: 'Internal Server Error' })
+  })
+}
+
+export default function inertiaPhoenixPlugin({ entrypoint }: { entrypoint: string }): Plugin {
+  return {
+    name: 'inertia-phoenix',
+    configureServer(server) {
+      if (!entrypoint) {
+        throw new Error(
+          `[inertia-phoenix] Missing required \`entrypoint\` in plugin options.
+
+Please pass the path to your SSR entry file.
+
+Example:
+  inertiaPhoenixPlugin({ entrypoint: './js/ssr.{jsx|tsx}' })`
+        )
+      }
+
+      // exit cleanly with Phoenix (dev only)
+      process.stdin.on('close', () => process.exit(0))
+      process.stdin.resume()
+
+      server.middlewares.use((req: ExtendedRequest, res, next) => {
+        const path = req.url?.split('?', 1)[0]
+        const isInertiaRequest = req.method === 'POST' && path === '/ssr_render'
+        if (!isInertiaRequest) return next()
+
+        jsonMiddleware(req, res, async () => {
+          try {
+            const { render } = await server.ssrLoadModule(entrypoint)
+            const html = await render(req.body)
+
+            jsonResponse(res, 200, {
+              head: [],
+              body: html,
+            })
+          } catch (e) {
+            if (e instanceof Error) {
+              server.ssrFixStacktrace(e)
+
+              jsonResponse(res, 500, {
+                error: {
+                  message: e.message,
+                  stack: e.stack,
+                },
+              })
+            } else {
+              jsonResponse(res, 500, {
+                error: {
+                  message: 'Unknown error',
+                  detail: e,
+                },
+              })
+            }
+          }
+        })
+      })
+    },
+  }
+}