sham-ui-ssr

Server side rendering for sham-ui

Install

# npm
npm install --save-dev sham-ui-ssr

# yarn
yarn add -D sham-ui-ssr

API

Table of Contents

• setup
  • Parameters
• setup
  • Parameters
  • Examples
• hydrate
  • Parameters
  • Examples
• hydrate
  • Parameters
• makeRestore
  • Parameters
• makeRestore
  • Parameters
• Component
• SSRRenderResult
  • Properties
• SSRToJSON
• SSRRenderResultSnapshot
  • Properties
• ssr
  • Parameters
  • Examples
• RenderResultSnapshot
  • Properties
• RenderResult
  • Properties
• ToJSON
• ssrAndRehydrate
  • Parameters
  • Examples

setup

Main function for setup hydrating components

Parameters

• DI Object App DI container

setup

Main function for rehydrating

Parameters

• DI Object App DI container
• storage Object

Examples

import { createDI, start } from 'sham-ui';
import setupUnsafe from 'sham-ui-unsafe';
import { setupRehydrator } from 'sham-ui-ssr/rehydrator';

const DI = createDI();
const data = JSON.parse( document.getElementById( 'data' ).innerText );
const disableRehydrating = setupRehydrator( DI, data );
mainInitializer( DI, root );
start( DI );
disableRehydrating();
setupUnsafe( DI );

Returns Function Restore function for disable rehydrating and switch to default behavior

hydrate

Hydrate all components

Parameters

• DI Object App DI container

Examples

import { createDI, start } from 'sham-ui';
import { setupHydrator, hydrate } from 'sham-ui-ssr/hydrator';

const DI = createDI();
const root = setupHydrator( DI );
mainInitializer( DI, root );
start( DI );
hydrate( DI ).then( storage => {
    const { html, data } = storage.hydrate();
} )

Returns Promise

hydrate

Hydrate node

Parameters

• storage Storage
• i (Array<number> | number)

Returns string

makeRestore

Save hooks & dom services for restore after rehydrating

Parameters

• DI Object App DI container

Returns Function

makeRestore

Make restore function for hooks & dom

Parameters

• DI Object App DI container

Returns Function

Component

• **See: https://github.com/sham-ui/sham-ui#component **

sham-ui component

SSRRenderResult

Result of server side renderer

Type: Object

Properties

• component Component Rendered component instance
• html string Rendered html
• data string Data for component rehydrating
• toJSON SSRToJSON Dump to JSON for jest's snapshot testing

SSRToJSON

Function for dump server side render result (using for jest-snapshots)

Type: Function

Returns SSRRenderResultSnapshot

SSRRenderResultSnapshot

Type: Object

Properties

• html string Rendered html
• data string Data for rehydrating

ssr

Server side render for component

Parameters

• componentClass Class<Component> Component class for rendering
• componentOptions Object Options (optional, default {})

Examples

import Label from './Label.sht';
import { ssr } from 'sham-ui-ssr/testing';

it( 'renders correctly', () => {
    const meta = ssr( Label );

    expect( meta.component.ID ).toEqual( 'component' );
    expect( meta.toJSON() ).toMatchSnapshot();
} );

Returns SSRRenderResult

RenderResultSnapshot

Type: Object

Properties

• html string Rendered html
• Options Object Component options

RenderResult

Result of renderer

Type: Object

Properties

• DI Object App DI container
• component Component Rendered component instance
• html string SSR html string
• data string Data for rehydrating
• toJSON ToJSON Dump to JSON for jest's snapshot testing

ToJSON

Function for dump render result (using for jest-snapshots)

Type: Function

Returns RenderResultSnapshot

ssrAndRehydrate

Render component with SSR & rehydrating

Parameters

• componentClass Class<Component> Component class for rendering
• componentOptions Object Options (optional, default {})

Examples

import Label from './Label.sht';
import { ssrAndRehydrate } from 'sham-ui-ssr/testing';

it( 'renders correctly', () => {
    const meta = ssrAndRehydrate( Label );

    expect( meta.component.ID ).toEqual( 'component' );
    expect( meta.toJSON() ).toMatchSnapshot();
} );

Returns RenderResult