<commit_before># Hydration

Hydration is a perceived performance and search engine optimization technique where you can turn statically rendered DOM nodes into an interactive application.

```jsx
app({
  // ...
  view: (state, actions) =>
    <main>
      <h1>{state.count}</h1>
      <button onclick={actions.up}>＋</button>
    </main>,
  mixins: [Hydrator]
})
```

The process consists of serving the fully rendered or pre-rendered page together with your application.

```html
<html>
<head>
  <script defer src="bundle.js"></script>
</head>

<body>
  <main>
    <h1>0</h1>
    <button>＋</button>
  </main>
</body>
</html>
```

Then interating over the [root](/docs/root.md) child nodes to create a [virtual node](/docs/vnodes.md) tree.

```jsx
const Hydrator = () => ({
  events: {
    load(state, actions, root) {
      return walk(root, (node, children) => ({
        tag: node.tagName.toLowerCase(),
        data: {},
        children
      }))
    }
  }
})

function walk(node, map) {
  return map(
    node,
    node
      ? [...node.childNodes]
          .map(
            node =>
              node.nodeType === Node.TEXT_NODE
                ? node.nodeValue.trim() && node.nodeValue
                : walk(node, map)
          )
          .filter(node => node)
      : node
  )
}
```<commit_msg>Fix bug in hydration code.<commit_after># Hydration

Hydration is a perceived performance and search engine optimization technique where you can turn statically rendered DOM nodes into an interactive application.

```jsx
app({
  // ...
  view: (state, actions) =>
    <main>
      <h1>{state.count}</h1>
      <button onclick={actions.up}>＋</button>
    </main>,
  mixins: [Hydrator]
})
```

The process consists of serving the fully rendered or pre-rendered page together with your application.

```html
<html>
<head>
  <script defer src="bundle.js"></script>
</head>

<body>
  <main>
    <h1>0</h1>
    <button>＋</button>
  </main>
</body>
</html>
```

Then interating over the [root](/docs/root.md) child nodes to create a [virtual node](/docs/vnodes.md) tree.

```jsx
const Hydrator = () => ({
  events: {
    load(state, actions, element) {
      return walk(element, (node, children) => ({
        tag: node.tagName.toLowerCase(),
        data: {},
        children
      }))
    }
  }
})

function walk(node, map) {
  return map(
    node,
    node
      ? [...node.childNodes]
          .map(
            node =>
              node.nodeType === Node.TEXT_NODE
                ? node.nodeValue.trim() && node.nodeValue
                : walk(node, map)
          )
      : node
  )
}
```
{'fraction_non_alphanumeric': 0.15609381007304882, 'fraction_numerical': 0.0038446751249519417, 'mean_word_length': 2.3530927835051547, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 52, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2593593', 'n_tokens_mistral': 860, 'n_tokens_neox': 837, 'n_words': 226}