https://github.com/minoritea/nanowire

A minimal DOM patcher for HTML-over-the-wire
https://github.com/minoritea/nanowire

html html-over-the-wire html-renderer javascript typescript

Last synced: 1 day ago
JSON representation

A minimal DOM patcher for HTML-over-the-wire

• Host: GitHub
• URL: https://github.com/minoritea/nanowire
• Owner: minoritea
• License: mit
• Created: 2022-08-03T13:28:29.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-17T16:59:43.000Z (over 2 years ago)
• Last Synced: 2024-11-12T10:18:39.185Z (2 months ago)
• Topics: html, html-over-the-wire, html-renderer, javascript, typescript
• Language: TypeScript
• Homepage:
• Size: 129 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Nanowire

Nanowire is a minimal DOM patcher for HTML-over-the-wire.

# How to use

1. Enclose the element to be updated in a `` tag with a unique ID.

2. Give the following arguments to the `apply` function,

    1. The DOM node or document that is the ancestor of the "nw-frame" tags to be updated,

    2. Text containing "nw-frame" tags surrounding updates.

The following HTML is displayed first,

```html

Hello?

```

and then the following code is executed,

```javascript

import { apply } from 'nanowire';

apply(document, 'Hello, World!');

```

the result is as follows.

```html

Hello, World!

```

You can apply server-side rendered HTML as updates.

```javascript

fetch('your API').then(res => res.text()).then(text => apply(document, text));

```

The `nanowire/client` module provides short hands for fetch and apply.

```html

GET

POST

```

# Example

See the example.

```shell

# clone this repository and move inside.

$ cd example

$ yarn serve

```

# LICENSE

MIT License(see LICENSE file).