https://github.com/centrefordigitalhumanities/html-swap

https://github.com/centrefordigitalhumanities/html-swap

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/centrefordigitalhumanities/html-swap
• Owner: CentreForDigitalHumanities
• License: mit
• Created: 2024-03-22T20:59:06.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-03-22T21:24:21.000Z (8 months ago)
• Last Synced: 2024-04-24T11:12:06.804Z (7 months ago)
• Language: Rust
• Size: 14.6 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
`html-swap` is roughly what you would expect it to be; it is a way to dynamically swap in some new html.

This is for you if:

- you have used `htmx`, but decided that its main feature is the `oob-swap` and that it has too many bells and whistles for just that

- you are (rightfully) very excited about using webassembly

Also, this does not require you to understand how to use `npm` or `yarn` or whatever is cool at the moment of reading.

Just download the `pkg` zipfile, extract, and reference it as described below.

## 🚴 Usage

### 🛠️ Build with `wasm-pack build`

```

wasm-pack build --target no-modules

```

Or download the `pkg.zip` from the releases.

### Include in your base HTML

```html

    const { swap_ctl } = wasm_bindgen;

    async function run() {

    await wasm_bindgen();

    }

    run();

```

Then in your HTML mark elements that serve as a swap controller by changing the `onclick` behavior to `swap_ctl(this); return false;`. 

The supported tags are `a` tags which will issue a get request and `input` elements with a type of `submit` which will perform the relevant form action.

```html

    

    

```

```html

Link

```

This will prevent default behavior of showing the response and instead will update the page with the response.

A response is comprised of a series of updates that apply to slots on the page. 

For instance, consider the following `index.html`

```html

Link

Default content

```


And the following `example.html`

```html

Updated Content

```


By clicking the anchor tag you will replace the inner html of the initial slot with the content in the slot from the response. 

You can perform multiple updates by providing multiple elements in the same response:

`index.html`

```html

Link

Default content

Default content

```


`example.html`

```html

Update 1

Update 2

```


### Notes

- This only works with `input` and `a` tags

- For the `input` tag method it must be part of a form and of type submit

- yes, you have to append `return false` to every invocation (or wrap it in a custom function)