postglide - v0.1.0

postglide

Package Version Hex Docs

Use the power of postgres in your client-side Lustre application thanks to PGlite! This has been tested with vite and vite-gleam (see below for more info).

How to create a basic lustre project with postglide

Prerequisites: you have gleam, node and npm installed

gleam new postglide_demo
cd postglide_demo
gleam add gleam_javascript
gleam add lustre
gleam add postglide

npm i @electric-sql/pglite
npm i -D vite
npm i vite-gleam

Add this to your package.json

  ...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }

Add this index.html to the root of your project

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <script
            src="https://cdn.jsdelivr.net/npm/@electric-sql/pglite-repl/dist-webcomponent/Repl.js"
            type="module"
        ></script>
    </head>

    <body>
        <script type="module">
            import { main } from "./src/postglide_demo.gleam";
            document.addEventListener("DOMContentLoaded", main);
        </script>
    </body>
</html>

Change your postglide_demo.gleam file to this

import gleam/javascript/promise
import lustre
import lustre/attribute
import lustre/element
import postglide

pub fn main() {
  use connection <- promise.map(postglide.create(postglide.default_config()))

  let app =
    lustre.element(
      element.element(
        "pglite-repl",
        [attribute.id("repl"), attribute.property("pg", connection)],
        [],
      ),
    )
  let assert Ok(_) = lustre.start(app, "body", Nil)

  Nil
}

If you run npm run dev and open the local web page you will see a lustre application connected to a local postgres database (stored via IndexedDB). It will also show you a REPL to execute your SQL code in. Try creating a table and inserting data, and then refresh the page and select from that table!

How do I use this in my lustre app?

Just like in the example above, you should first connect to the postgres database with postglide.create and then just store the connection in your lustre model. Then, you would use that connection to call postglide.query, for example. The API pretty much just copies the official PGlite docs. However, this is a WIP so not all of the API has been implemented yet!

Further documentation can be found at https://hexdocs.pm/postglide.

✨ Search Document