Skate mixin to rehydrate props and state on the client.

readme.md

withRehydration

This is a Skate mixin for serialising and rehydrating props and state for a component. Essentially it will apply JSON encoded attributes for props and state after rendering on the server. When rendered on the client, it then takes those attributes and decodes them as props, essentially rehydrating the component state.

Notes

• The didMount callback is specific to Skate and is called after the component is connected.
• The didRender callback is specific to Skate and is called after the component renders.

with-rehydration.js

const hasProcess = typeof process !== 'undefined';
const isBrowser = !hasProcess || hasProcess && process.browser;

function esc(str) {
  return escape(str ? JSON.stringify(str) : '');
}

function usc(str) {
  return str ? JSON.parse(unescape(str)) : '';
}

export const withRehydration = (Base = HTMLElement) =>
  class extends Base {
    didMount() {
      if (super.didMount) {
        super.didMount();
      }
      if (isBrowser) {
        this.props = usc(this.getAttribute('props'));
        this.state = usc(this.getAttribute('state'));
        this.removeAttribute('props');
        this.removeAttribute('state');
      }
    }
    didRender() {
      if (super.didRender) {
        super.didRender();
      }
      if (!isBrowser) {
        this.setAttribute('props', esc(this.props));
        this.setAttribute('state', esc(this.state));
      }
    }
  };