sham-ui-ssr


Server side rendering for sham-ui

$3

``bash


npm


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

`bash


yarn


yarn add -D sham-ui-ssr
`

$3

##### 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

`javascript
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

`javascript
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:
**

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

`javascript
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

`javascript
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