https://github.com/tareqk/j2htmx

htmx and hyperscript extentions for j2html
https://github.com/tareqk/j2htmx

hateoas html-generation htmx restful web

Last synced: 11 days ago
JSON representation

htmx and hyperscript extentions for j2html

• Host: GitHub
• URL: https://github.com/tareqk/j2htmx
• Owner: TareqK
• License: mit
• Created: 2022-08-19T17:15:36.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-28T18:38:36.000Z (over 2 years ago)
• Last Synced: 2024-04-23T02:25:40.329Z (8 months ago)
• Topics: hateoas, html-generation, htmx, restful, web
• Language: Java
• Homepage:
• Size: 36.1 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# J2Htmx

[![Maven Central Badge](https://img.shields.io/maven-central/v/me.kisoft/j2htmx)](https://search.maven.org/artifact/me.kisoft/j2htmx)

[![Discord](https://img.shields.io/discord/725789699527933952)](https://htmx.org/discord)

J2htmx is a set of extentions for [j2html](https://j2html.com/) to make it work better with [htmx](https://htmx.org/) attributes and

[hyperscript](https://hyperscript.org/)

## Usage

Import the latest version of the library from maven central

```xml

  me.kisoft

  j2htmx

  2.0.0

```

Afterwards, either import the htmx scripts from CDN yourself or use the ``withHtmxImports`` function on a ``ContainerTag``, which 

should ideally be your ``head`` tag

```java

html(

    withHtmxImport(

        head()

    ),

    body(/* stuff goes here */)

)

```

afterwards, you can use any of the htmx attributes using the ``hx`` static import, such as 

```java

div(

    div().withId("my-id"),

    button().withText("Click for a new Joke")

        .attr(hx.get("/my-path")

        .attr(hx.target("#my-id")

    )

)

```

All htmx attributes are supported. You can find them all [here](https://htmx.org/reference/)

### Attribute Generators

There is a convinience method, for generating attributes, allowing you to generate

attributes as a functional interface or class. This allows you to create re-usable 

attribute generators to use across components.

```java

div(

    div().withId("my-id"),

    button().withText("Click for a new Joke")

        .attr(hx.get("/my-path")

        .attr(hx.target(()->"#my-id")

    )

)

```

While they make a small difference in most cases, this allows us to more easily 

use random Ids and reusable attributes.

### Hyperscript support

You can use the ``withHyperscriptImport`` function to import hyperscript as well

```java

html(

    withHyperscriptImport(

        withHtmxImport(

            head()

        )

    ),

    body(/* stuff goes here */)

)

```

There is a ``hx.hyperscript`` method that you can use to add hyperscript to any

tag. you can find more about hyperscript [here](https://hyperscript.org/)