Inertia.js adapter for Gleam/Wisp

Roadmap

This adapter implements Inertia v3 protocol. Currently, it is not implementing all features.

Once Props
Deferred Props
Merge Props
Scroll Props
Flash Data
SSR
Examples

Installation

gleam add wisp_inertia

Usage

mkdir demo && cd demo
gleam new demo --skip-git --skip-github

// server.gleam file

import inertia

pub fn main() -> Nil {
  wisp.configure_logger()
  inertia.init("demo", "v1")
  let secret_key = wisp.random_string(32)

  let assert Ok(_) =
    wisp_mist.handler(router.handle_request, secret_key)
    |> mist.new
    |> mist.bind("0.0.0.0")
    |> mist.port(4000)
    |> mist.start

  io.println("Server up and running")
  process.sleep_forever()
}

// middleware.gleam file

import inertia
import wisp.{type Request, type Response}

pub fn register(req: Request, handle_req: fn(Request) -> Response) -> Response {
  let assert Ok(priv_dir) = wisp.priv_directory(inertia.from_context("demo"))

  use <- wisp.log_request(req)
  use <- wisp.rescue_crashes
  use <- wisp.serve_static(req, under: "/static", from: priv_dir <> "/static")
  use req <- wisp.handle_head(req)
  use req <- inertia.handle_request(req)

  handle_req(req)
}

Make sure that you have created a priv/static folder for static assets.

// router.gleam file

pub fn handle_request(req: Request) -> Response {
  use req <- middleware.register(req)
  let segments = wisp.path_segments(req)

  case segments {
    [] -> handle_index(req)
    _ -> wisp.not_found()
  }
}

fn handle_index(req: wisp.Request) -> wisp.Response {
  inertia.new_page_object(req, "index")
  |> inertia.add_prop("title", json.string("Home Page"))
  |> inertia.render(req)
}

Client

Inside the priv folder, you must to create the following structure for the client.

priv
├── app
│   ├── pages
│   │   └── index.vue
│   └── shared
└── static

app folder is the roo of client assets, and it will contain all you view components (e.g. Vue, Svelte or React files)
static folder will be used as production-ready static assets.
sharedfolder is optional, but it's recommended to add your shared components there

andwill be replaced by the HTML tags for Inertia. ```html // priv/index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  </head> <body>  </body> </html> ``` Further documentation can be found at <https://hexdocs.pm/gleam_inertia>. ```typescript // priv/app/app.ts file import { createInertiaApp } from "@inertiajs/vue3"; import "./app.css"; createInertiaApp({ pages: { path: "./pages", lazy: true, }, }); ``` ```vue // priv/pages/index.vue <script setup lang="ts"> defineProps({ title: String, }); </script> <template> <h1>{{ title }}</h1> </template> ``` ## Development ```sh gleam run # Run the project gleam test # Run the tests ``` ## ExamplesTBD## Other Community Adapters Full list of community adapters is located on [inertiajs.com](https://inertiajs.com/community-adapters). ## Licensegleam_inertia` is released under the [Apache 2.0] License.