{"id":25880882,"url":"https://github.com/selenil/lissome","last_synced_at":"2025-03-02T14:26:12.023Z","repository":{"id":278137521,"uuid":"934647552","full_name":"selenil/lissome","owner":"selenil","description":"Integration of Gleam's Lustre framework with Phoenix LiveView","archived":false,"fork":false,"pushed_at":"2025-02-27T01:09:27.000Z","size":100,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T02:23:32.281Z","etag":null,"topics":["elixir","gleam","lustre","phoenix-liveview"],"latest_commit_sha":null,"homepage":"https://hexdocs.pm/lissome/","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/selenil.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-18T07:15:36.000Z","updated_at":"2025-02-27T01:09:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"1a7a50fd-5027-4133-8f9f-21803b2fe3e0","html_url":"https://github.com/selenil/lissome","commit_stats":null,"previous_names":["selenil/lissome"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selenil%2Flissome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selenil%2Flissome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selenil%2Flissome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selenil%2Flissome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selenil","download_url":"https://codeload.github.com/selenil/lissome/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241518998,"owners_count":19975580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","gleam","lustre","phoenix-liveview"],"created_at":"2025-03-02T14:26:11.456Z","updated_at":"2025-03-02T14:26:12.013Z","avatar_url":"https://github.com/selenil.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lissome\n\nLissome is a library to integrate the [Gleam](https://gleam.run/) frontend framework [Lustre](https://hexdocs.pm/lustre/lustre.html) with Phoenix Live View.\n\n\u003e [!WARNING]\n\u003e This project is on early stage of development and breaking changes are expected.\n\n## Setup\n\nFirst, make sure you have the Gleam compiler installed. Instructions can be found [here](https://gleam.run/getting-started/installing/)\n\n1. We will use a tool called `mix_gleam` to manage a Gleam project with Mix. Follow the [instructions](https://github.com/gleam-lang/mix_gleam?tab=readme-ov-file#installation) to setup it.\n\n2. Add `lissome` to your `mix.exs` file and the `gleam_js` compiler to your list of compilers:\n\n```elixir\ndef project do\n  [\n    ...,\n    compilers: [:gleam, :gleam_js] ++ Mix.compilers(),\n  ]\nend\n\ndef deps do\n  [\n    ...,\n    {:lissome, \"~\u003e 0.2.0\"},\n  ]\nend\n```\n3. Create a `gleam.toml` file with your Gleam dependencies:\n\n```toml\nname = \"your_app_name\"\n\n[dependencies]\ngleam_stdlib = \"\u003e= 0.44.0 and \u003c 2.0.0\"\nlustre = \"\u003e= 4.6.3 and \u003c 5.0.0\"\n\n[dev-dependencies]\ngleeunit = \"\u003e= 1.0.0 and \u003c 2.0.0\"\n```\n\n4. Run:\n\n```bash\nmix deps.get\ngleam deps download\n```\n\n\u003e [!NOTE]\n\u003e Although `mix_gleam` is able to install Gleam dependencies, it doesn't manages dependencies well outside Erlang target. For that reason, we use a `gleam.toml` file and the Gleam tooling to manage Gleam dependencies.\n\n## Usage\n\nTo render a Lustre app, we need to define a Gleam module that contains a public `main` function. This function must start a Lustre app created with the `lustre.simple` function.\n\n```gleam\n//// src/hello.gleam\n\npub fn init() {\n  ...\n}\n\npub fn update(msg, model) {\n  ...\n}\n\npub fn view(model) {\n  ...\n}\n\npub fn main() {\n  let app = lustre.simple(init, update, view)\n  let assert Ok(_) = lustre.start(app, \"#app\", Nil)\n\n  Nil\n}\n```\n\nNow, inside `HEEX` we can render it using the `lustre` component:\n\n```elixir\ndefmodule MyApp.MyLiveView do\n  use MyApp, :live_view\n\n  import Lissome.Component\n\n  def mount(_params, _session, socket) do\n    {:ok, socket}\n  end\n\n  def render(assigns) do\n    ~H\"\"\"\n    \u003cdiv\u003e\n      \u003cdiv\u003eContent rendered with Phoenix Live View\u003c/div\u003e\n      \u003cdiv\u003e\n        \u003c.lustre id=\"app\" name=\"hello\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \"\"\"\n  end\nend\n```\n\nCheck out the project in the `example` directory for a complete code example.\n\n## SSR\n\nThanks to the ability of Gleam to compile to both Erlang and JavaScript, we can do server-side rendering of Lustre without having to install Node.js. This is why `Lissome` has SSR enabled by default, but you can disable it by passing `ssr={false}` to the `lustre` component.\n\nKeep in mind that `Lissome` will call the `init` and the `view` functions of your Gleam module in order to render the initial HTML. By default `Lissome` will look for functions with that name in your module. If you happen to named them differently, you can pass to the `lustre` component `init_fn` with the name of your function responsible for initializing the model and `view_fn` with the name of your function responsible for rendering the view. Also, both functions must be public.\n\n```elixir\n\u003c.lustre\n  id=\"app\"\n  name=\"hello\"\n  init_fn=\"my_init_function\"\n  view_fn=\"my_view_function\"\n/\u003e\n```\n\n## Roadmap\n\n- [ ] Improvements to the SSR.\n- [ ] Gleam's helpers for communicating with Phoenix LiveView and supporting Lustre's effects.\n- [ ] Hot module replacement for Gleam.\n- [ ] Support for [`LiveJson`](https://github.com/Miserlou/live_json).\n- [ ] Support for Lustre's `server components`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselenil%2Flissome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselenil%2Flissome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselenil%2Flissome/lists"}