https://github.com/thescientist13/hydrate-element

https://github.com/thescientist13/hydrate-element

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/thescientist13/hydrate-element
• Owner: thescientist13
• Created: 2021-01-02T23:05:52.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-02T23:07:33.000Z (almost 4 years ago)
• Last Synced: 2024-10-29T03:41:49.314Z (about 2 months ago)
• Language: HTML
• Size: 2.93 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Overview

Use case is to see if that given the pre-rendered markup of a component, is there a graceful way for a Web Component (`customElement`) to restore its state in away that can avoid repeated renders on first load.

## Use Cases

### Counter

Given a counter component

```html

```

If the count state is present, hydrate the count to the initial value of `33`

```html

  33

```

### Dyanamic List

In particular, say a list of users is generated on the server

```json

[{

  "id": 1,

  "name": "User 1",

}, {

  "id": 2,

  "name": "User 2"

}]

```

```html



  
User 1

  
User 2



```


If that user list is present, we want to avoid a call to `fetch` that would return and render the same list.  However, when say you are paginating to a next list, you would need to make sure your offest starts on page 2.

## Goals

1. Detect of existing output

1. Hydrate state

1. Hydrate markup?

1. Sync state (e.g. avoid being one tick behind)

## Notes

1. Rehydrating would still need to attach event handlers