Grace with Htmx

Grace Plugin for using Grace/Grails app with htmx.

Usage

Add dependency to the build.gradle,

repositories {
    mavenCentral()
}

dependencies {
    implementation "org.graceframework.plugins:htmx:VERSION"
}

Htmx plugin supports controller-specific withFormat() method,

class BookController {

    def list() {
        def books = Book.list()

        withFormat {
            htmx {
                render(template: "book", model: [bookList: books])
            }
            json {
                render books as JSON
            }
        }
    }
}

Also, this plugin supports extendsions for Grails Request and Response,

// You can get htmx request headers from Grails Request

request.htmx.boosted == request.getHeader('HX-Boosted')
request.htmx.target  == request.getHeader('HX-Target')

// Check htmx request?
if (request.htmx as boolean) { // or use request.isHtmx()
    template = 'book-detail'
}

// You can set htmx response headers in Grails

response.htmx.trigger = 'itemAdded'

If you use respond method introduced in Grails 2.3. The respond method tries to produce the most appropriate response for the requested content type (JSON, XML, HTML etc.)

You can configure mime types for Htmx.

Update the app/conf/application.yml:

grails:
    mime:
        types:
            htmx: text/html

For example given the show action:

def show(Book book) {
    respond book
}

You could supply a show.htmx.gsp file to render the HTMX:

<div id="${book.id}">
    <h1>${book.title}</h1>
    <p>${book.description}</p>
</div>

If you use asset-pipeline plugin, this plugin already includes htmx.js, hyperscript.js, so you can add htmx.js to the app/assets/application.js,

//= require hyperscript
//= require htmx
//= require_self

Also, you can use asset tag in the GSP,

<asset:javascript src="hyperscript.js"/>
<asset:javascript src="htmx.js"/>

Tip

Add hyperscript.js to assets.minifyOptions.excludes If your app has an error when compiling assets.

hyperscript.unminified.js:85:24: ERROR - [JSC_PARSE_ERROR] Parse error. '(' expected
  85|         static OP_TABLE = {
                              ^

1 error(s), 0 warning(s)
Closure uglify JS Exception
asset.pipeline.processors.MinifyException: [JSC_PARSE_ERROR. Parse error. '(' expected at hyperscript.unminified.js line 85 : 24]
        at asset.pipeline.processors.ClosureCompilerProcessor.process(ClosureCompilerProcessor.groovy:81)
        at asset.pipeline.processors.ClosureCompilerProcessor$process.call(Unknown Source)
        at asset.pipeline.AssetCompiler$_compile_closure4.doCall(AssetCompiler.groovy:171)

assets {
    minifyJs = true
    minifyCss = true
    minifyOptions = [
        excludes: ['hyperscript.js'],
        languageMode: 'ES6',
        targetLanguage: 'ES6', //Can go from ES6 to ES5 for those bleeding edgers
        optimizationLevel: 'SIMPLE' //Or ADVANCED or WHITESPACE_ONLY
    ]
}

Example

• Grace Htmx TodoMVC

Development

Build from source

git clone https://github.com/grace-plugins/grace-htmx.git
cd grace-htmx
./gradlew publishToMavenLocal

Support Version

• Grace 2022.0.0+
• Grails 3.0+

Roadmap

1.x

• Htmx 1.9

2.x

• Htmx 2.0

License

This plugin is available as open source under the terms of the APACHE LICENSE, VERSION 2.0

Links

• Grace Framework
• Grace Plugins
• Grace Htmx Plugin
• Grace Htmx TodoMVC
• Grails Htmx TodoMVC