Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/treagod/marten-turbo
Enhance your Marten app with dynamic updates using Turbo Frames!
https://github.com/treagod/marten-turbo
crystal frontend hotwire-turbo marten web
Last synced: about 2 months ago
JSON representation
Enhance your Marten app with dynamic updates using Turbo Frames!
- Host: GitHub
- URL: https://github.com/treagod/marten-turbo
- Owner: treagod
- License: mit
- Created: 2024-03-12T03:22:29.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-28T13:37:40.000Z (4 months ago)
- Last Synced: 2024-10-25T01:20:05.967Z (2 months ago)
- Topics: crystal, frontend, hotwire-turbo, marten, web
- Language: Crystal
- Homepage: https://treagod.github.io/marten-turbo/
- Size: 693 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Marten Turbo[![GitHub Release](https://img.shields.io/github/v/release/treagod/marten-turbo?style=flat)](https://github.com/treagod/marten-turbo/releases)
[![Marten Turbo Specs](https://github.com/treagod/marten-turbo/actions/workflows/specs.yml/badge.svg)](https://github.com/treagod/marten-turbo/actions/workflows/specs.yml)
[![QA](https://github.com/treagod/marten-turbo/actions/workflows/qa.yml/badge.svg)](https://github.com/treagod/marten-turbo/actions/workflows/qa.yml)Marten Turbo provides helpers to interact with Turbo applications using the Marten Framework.
## Installation
Simply add the following entry to your project's `shard.yml`:
```yaml
dependencies:
marten_turbo:
github: treagod/marten-turbo
```And run `shards install` afterward.
First, add the following requirement to your project's `src/project.cr` file:
```crystal
require "marten_turbo"
```Afterwards you can use the template helper `dom_id` and the turbo handlers.
## Tags
Marten Turbo introduces a new template tag `dom_id`, which supports the creation of turbo frame ids for Marten models
```html
{% for article in articles %}
{% endfor %}
```
Identifier will respect your namespace of the model. I.e. if you have an Article model in the app blogging the generated id will be `blogging_article_1`.
Marten Turbo also provides a turbo stream tag helper
```html
{% turbo_stream 'append' "articles" do %}
{{ article.name }}
{% end_turbo_stream %}{% turbo_stream 'append' "articles" template: "articles/article.html" %}
{% turbo_stream 'remove' article %}
```
## Handlers
Marten Turbo provides an extension to the generic Marten handlers:
__Record Creation__: To create a record, use
```crystal
class ArticleCreateHandler < MartenTurbo::Handlers::RecordCreate
model Article
schema ArticleSchema
template_name "articles/create.html"
turbo_stream_name "articles/create.turbo_stream.html"
success_route_name "articles"
end
```Notice how we use `MartenTurbo::Handlers::RecordCreate` instead of `Marten::Handlers::RecordCreate`.
Also the `#turbo_stream_name` class method gives you the option to define a turbo stream template which is
rendered instead of the normal template if a turbo request is made.__Record Update__: To update a record, use
```crystal
class ArticleUpdateHandler < MartenTurbo::Handlers::RecordUpdate
model Article
schema ArticleSchema
template_name "articles/update.html"
turbo_stream_name "articles/update.turbo_stream.html"
success_route_name "articles"
end
```__Record Deletion__: It's also possible to define a `turbo_stream` method
```crystal
class ArticleDeleteHandler < MartenTurbo::Handlers::RecordDelete
model Article
template_name "articles/delete.html"
success_route_name "articles"def turbo_stream
MartenTurbo::TurboStream.remove(record)
end
end
```## Turbo Native
Marten Turbo lets you check if a request is from a Turbo Native Application. To check, just check the `request.turbo_native_app?` variable.
A context producer also adds the `turbo_native?` variable to your templates to adjust your HTML. For the context producer you have to insert `MartenTurbo::Template::ContextProducer::TurboNative` into your context producer array.
You could add a custom class to your body if a turbo native app hits your application:
```html
…
```